hunk.code_window: 	const [dragFromThumbnail, setDragFromThumbnail] = useState(false);
   	const mouseNavigate = useMouseNavigate();
   	const itemDetailsHeight = 44 + (settings.showBytesInGridView && !isEphemeralLocation ? 20 : 0);
   	const itemHeight = settings.gridItemSize + itemDetailsHeight;
   	const padding = settings.layoutMode === 'grid' ? 12 : 0;
   	const grid = useGridList({
  
hunk.labels: keep keep keep replace keep keep keep keep keep
hunk.after_edit: 	const itemDetailsHeight = 44 + (settings.showBytesInGridView ? 20 : 0);
  
hunk.file_path: interface/app/$libraryId/Explorer/View/GridList.tsx
hunk.type: replace
file: 'use client';
  
  import { CaretRight, Check, Icon, IconProps } from '@phosphor-icons/react';
  import * as RadixCM from '@radix-ui/react-context-menu';
  import { cva, VariantProps } from 'class-variance-authority';
  import clsx from 'clsx';
  import { ContextType, createContext, PropsWithChildren, Suspense, useContext } from 'react';
  
  interface ContextMenuProps extends RadixCM.MenuContentProps {
  	trigger: React.ReactNode;
  	onOpenChange?: (open: boolean) => void;
  	disabled?: boolean;
  }
  
  export const contextMenuClassNames = clsx(
  	'z-50 max-h-[calc(100vh-20px)] overflow-y-auto',
  	'my-2 min-w-[12rem] max-w-[16rem] py-0.5',
  	'cool-shadow bg-menu',
  	'border border-menu-line',
  	'cursor-default select-none rounded-md',
  	'animate-in fade-in'
  );
  
  const ContextMenuContext = createContext<boolean | null>(null);
  
  export const useContextMenuContext = <T extends boolean>({ suspense }: { suspense?: T } = {}) => {
  	const ctx = useContext(ContextMenuContext);
  
  	if (suspense && ctx === null) throw new Error('ContextMenuContext.Provider not found!');
  
  	return ctx as T extends true
  		? NonNullable<ContextType<typeof ContextMenuContext>>
  		: NonNullable<ContextType<typeof ContextMenuContext>> | undefined;
  };
  
  const Root = ({
  	trigger,
  	children,
  	className,
  	onOpenChange,
  	disabled,
  	...props
  }: ContextMenuProps) => {
  	return (
  		<RadixCM.Root onOpenChange={onOpenChange}>
  			<RadixCM.Trigger asChild onContextMenu={(e) => disabled && e.preventDefault()}>
  				{trigger}
  			</RadixCM.Trigger>
  			<RadixCM.Portal>
  				<RadixCM.Content className={clsx(contextMenuClassNames, className)} {...props}>
  					<ContextMenuContext.Provider value={true}>
  						{children}
  					</ContextMenuContext.Provider>
  				</RadixCM.Content>
  			</RadixCM.Portal>
  		</RadixCM.Root>
  	);
  };
  
  export const contextMenuSeparatorClassNames = 'border-b-menu-line mx-1 my-0.5 border-b';
  
  const Separator = (props: { className?: string }) => (
  	<RadixCM.Separator className={clsx(contextMenuSeparatorClassNames, props.className)} />
  );
  
  const SubMenu = ({
  	label,
  	icon,
  	className,
  	...props
  }: RadixCM.MenuSubContentProps & ContextMenuItemProps) => {
  	return (
  		<RadixCM.Sub>
  			<RadixCM.SubTrigger className={contextMenuItemClassNames}>
  				<ContextMenuDivItem rightArrow {...{ label, icon }} />
  			</RadixCM.SubTrigger>
  			<RadixCM.Portal>
  				<Suspense fallback={null}>
  					<RadixCM.SubContent
  						className={clsx(contextMenuClassNames, '-mt-2', className)}
  						{...props}
  					/>
  				</Suspense>
  			</RadixCM.Portal>
  		</RadixCM.Sub>
  	);
  };
  
  const contextMenuItemStyles = cva(
  	[
  		'flex max-h-fit min-h-[26px] items-center space-x-2 overflow-hidden rounded px-2',
  		'text-sm text-menu-ink',
  		'group-radix-highlighted:text-white',
  		'group-radix-disabled:pointer-events-none group-radix-disabled:text-menu-ink/50',
  		'group-radix-state-open:bg-accent group-radix-state-open:text-white'
  	],
  	{
  		variants: {
  			variant: {
  				default: 'group-radix-highlighted:bg-accent',
  				danger: [
  					'text-red-600 dark:text-red-400',
  					'group-radix-highlighted:text-white',
  					'group-radix-highlighted:bg-red-500'
  				]
  			}
  		},
  		defaultVariants: {
  			variant: 'default'
  		}
  	}
  );
  
  export interface ContextMenuItemProps
  	extends RadixCM.MenuItemProps,
  		VariantProps<typeof contextMenuItemStyles>,
  		Pick<ContextMenuInnerItemProps, 'label' | 'keybind' | 'icon' | 'iconProps'> {}
  
  export const contextMenuItemClassNames = 'group py-0.5 outline-none px-1';
  
  const Item = ({
  	icon,
  	label,
  	children,
  	keybind,
  	variant,
  	iconProps,
  	onClick,
  	...props
  }: ContextMenuItemProps) => {
  	return (
  		<RadixCM.Item
  			className={contextMenuItemClassNames}
  			onClick={(e) => !props.disabled && onClick?.(e)}
  			{...props}
  		>
  			<ContextMenuDivItem {...{ icon, iconProps, label, keybind, variant, children }} />
  		</RadixCM.Item>
  	);
  };
  
  export interface ContextMenuCheckboxItemProps
  	extends RadixCM.MenuCheckboxItemProps,
  		VariantProps<typeof contextMenuItemStyles>,
  		Pick<ContextMenuInnerItemProps, 'label' | 'keybind'> {}
  
  const CheckboxItem = ({
  	variant,
  	className,
  	label,
  	keybind,
  	children,
  	...props
  }: ContextMenuCheckboxItemProps) => {
  	return (
  		<RadixCM.CheckboxItem className={contextMenuItemClassNames} {...props}>
  			<ContextMenuDivItem variant={variant} className={className}>
  				<span className="flex h-3.5 w-3.5 items-center justify-center">
  					<RadixCM.ItemIndicator>
  						<Check weight="bold" />
  					</RadixCM.ItemIndicator>
  				</span>
  
  				<ItemInternals {...{ label, keybind, children }} />
  			</ContextMenuDivItem>
  		</RadixCM.CheckboxItem>
  	);
  };
  
  interface ContextMenuInnerItemProps {
  	icon?: Icon;
  	iconProps?: IconProps;
  	label?: string;
  	keybind?: string;
  	rightArrow?: boolean;
  }
  
  export const ContextMenuDivItem = ({
  	variant,
  	children,
  	className,
  	...props
  }: ContextMenuInnerItemProps &
  	VariantProps<typeof contextMenuItemStyles> &
  	PropsWithChildren<{ className?: string }>) => (
  	<div className={contextMenuItemStyles({ variant, className })}>
  		{children || <ItemInternals {...props} />}
  	</div>
  );
  
  const ItemInternals = ({
  	icon,
  	label,
  	rightArrow,
  	keybind,
  	iconProps
  }: ContextMenuInnerItemProps) => {
  	const ItemIcon = icon;
  
  	return (
  		<>
  			{ItemIcon && <ItemIcon size={18} {...iconProps} />}
  			{label && <span className="flex-1 truncate">{label}</span>}
  
  			{keybind && (
  				<span className="text-xs font-medium group-radix-highlighted:text-white">
  					{keybind}
  				</span>
  			)}
  			{rightArrow && (
  				<CaretRight
  					weight="fill"
  					size={12}
  					className="text-menu-faint group-radix-highlighted:text-white group-radix-state-open:text-white"
  				/>
  			)}
  		</>
  	);
  };
  
  export const ContextMenu = {
  	Root,
  	Item,
  	CheckboxItem,
  	Separator,
  	SubMenu
  };
  