hunk.code_window: 		// will be re-calculated before this memo runs.
   		() => explorer.selectedItems.has(item),
   		[explorer.selectedItems, item]
   	);
   	const { attributes } = useDragSelectable({ index, id: uniqueId(item), selected });
   	return (
   		<div
   			{...props}
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit: 	const canGoBack = currentIndex !== 0;
   	const canGoForward = currentIndex !== maxIndex;
  
hunk.file_path: interface/app/$libraryId/Explorer/View/Grid/Item.tsx
hunk.type: add
file: import { useMemo } from 'react';
  import { ObjectOrder, useLibraryQuery } from '@sd/client';
  import { Icon } from '~/components';
  import { useRouteTitle } from '~/hooks';
  
  import Explorer from './Explorer';
  import { ExplorerContextProvider } from './Explorer/Context';
  import { createDefaultExplorerSettings, objectOrderingKeysSchema } from './Explorer/store';
  import { DefaultTopBarOptions } from './Explorer/TopBarOptions';
  import { useExplorer, useExplorerSettings } from './Explorer/useExplorer';
  import { EmptyNotice } from './Explorer/View/EmptyNotice';
  import { SearchContextProvider, SearchOptions, useSearch } from './search';
  import SearchBar from './search/SearchBar';
  import { TopBarPortal } from './TopBar/Portal';
  
  export function Component() {
  	useRouteTitle('Labels');
  
  	const labels = useLibraryQuery(['labels.listWithThumbnails', '']);
  
  	const explorerSettings = useExplorerSettings({
  		settings: useMemo(() => {
  			return createDefaultExplorerSettings<ObjectOrder>({ order: null });
  		}, []),
  		orderingKeys: objectOrderingKeysSchema
  	});
  
  	// const explorerSettingsSnapshot = explorerSettings.useSettingsSnapshot();
  
  	// const fixedFilters = useMemo<SearchFilterArgs[]>(
  	// 	() => [
  	// 		...(explorerSettingsSnapshot.layoutMode === 'media'
  	// 			? [{ object: { kind: { in: [ObjectKindEnum.Image, ObjectKindEnum.Video] } } }]
  	// 			: [])
  	// 	],
  	// 	[explorerSettingsSnapshot.layoutMode]
  	// );
  
  	const search = useSearch({});
  
  	// const objects = useObjectsExplorerQuery({
  	// 	arg: {
  	// 		take: 100,
  	// 		filters: [...search.allFilters, { object: { tags: { in: [3] } } }]
  	// 	},
  	// 	explorerSettings
  	// });
  
  	const explorer = useExplorer({
  		items: labels.data || null,
  		settings: explorerSettings,
  		showPathBar: false,
  		layouts: { media: false, list: false }
  	});
  
  	return (
  		<ExplorerContextProvider explorer={explorer}>
  			<SearchContextProvider search={search}>
  				<TopBarPortal
  					center={<SearchBar />}
  					left={
  						<div className="flex flex-row items-center gap-2">
  							<span className="truncate text-sm font-medium">Labels</span>
  						</div>
  					}
  					right={<DefaultTopBarOptions />}
  				>
  					{search.open && (
  						<>
  							<hr className="w-full border-t border-sidebar-divider bg-sidebar-divider" />
  							<SearchOptions />
  						</>
  					)}
  				</TopBarPortal>
  			</SearchContextProvider>
  
  			<Explorer
  				emptyNotice={
  					<EmptyNotice
  						icon={<Icon name="CollectionSparkle" size={128} />}
  						message="No labels"
  					/>
  				}
  			/>
  		</ExplorerContextProvider>
  	);
  }
  