hunk.code_window: import { useSelector, type ExplorerItem } from '@sd/client';
   import { useExplorerContext } from '../../Context';
   import { explorerStore, isCut } from '../../store';
   import { uniqueId } from '../../util';
   import { useExplorerViewContext } from '../Context';
  
hunk.labels: add keep keep keep keep keep
hunk.after_edit: import { useOperatingSystem } from '~/hooks';
   import { useRoutingContext } from '~/RoutingContext';
  
hunk.file_path: interface/app/$libraryId/Explorer/View/Grid/Item.tsx
hunk.type: add
file: 'use client';
  
  import { CaretRight } from '@phosphor-icons/react';
  import { useParams } from 'next/navigation';
  import { Fragment } from 'react';
  import { toTitleCase } from '~/utils/util';
  
  export function Breadcrumbs() {
  	const { slug } = useParams<{ slug?: string[] }>();
  	if (!slug) return null;
  
  	return (
  		<div className="flex flex-row items-center gap-1">
  			{slug.map((item, index) => (
  				<Fragment key={index}>
  					{index > 0 && <CaretRight className="h-4 w-4" />}
  					<span className="px-1 text-sm">{toTitleCase(item)}</span>
  				</Fragment>
  			))}
  		</div>
  	);
  }
  