hunk.code_window: }
   export const GridItem = ({ children, item, index, ...props }: Props) => {
   	const explorer = useExplorerContext();
   	const explorerView = useExplorerViewContext();
   	const dragSelect = useDragSelectContext();
   	const cutCopyState = useSelector(explorerStore, (s) => s.cutCopyState);
  
hunk.labels: keep keep keep keep add keep keep keep keep
hunk.after_edit: 	const { currentIndex, maxIndex } = useRoutingContext();
   	const os = useOperatingSystem();
   	const navigate = useNavigate();
  
hunk.file_path: interface/app/$libraryId/Explorer/View/Grid/Item.tsx
hunk.type: add
file: // import {
  // 	Algorithm,
  // 	hashingAlgoSlugSchema,
  // 	slugFromHashingAlgo,
  // 	useLibraryMutation,
  // 	useLibraryQuery
  // } from '@sd/client';
  // import { Button, Dialog, Select, SelectOption, UseDialogProps, useDialog } from '@sd/ui';
  // import { CheckBox, useZodForm, z } from '@sd/ui/src/forms';
  // import { showAlertDialog } from '~/components';
  // import { usePlatform } from '~/util/Platform';
  // import { KeyListSelectOptions } from '../../KeyManager/List';
  
  // interface Props extends UseDialogProps {
  // 	location_id: number;
  // 	path_id: number;
  // }
  
  // const schema = z.object({
  // 	key: z.string(),
  // 	encryptionAlgo: z.string(),
  // 	hashingAlgo: hashingAlgoSlugSchema,
  // 	metadata: z.boolean(),
  // 	previewMedia: z.boolean(),
  // 	outputPath: z.string()
  // });
  
  // export default (props: Props) => {
  // 	const platform = usePlatform();
  
  // 	const UpdateKey = (uuid: string) => {
  // 		form.setValue('key', uuid);
  // 		const hashAlg = keys.data?.find((key) => {
  // 			return key.uuid === uuid;
  // 		})?.hashing_algorithm;
  // 		hashAlg && form.setValue('hashingAlgo', slugFromHashingAlgo(hashAlg));
  // 	};
  
  // 	const keys = useLibraryQuery(['keys.list']);
  // 	const mountedUuids = useLibraryQuery(['keys.listMounted'], {
  // 		onSuccess: (data) => {
  // 			UpdateKey(data[0] ?? '');
  // 		}
  // 	});
  
  // 	const encryptFile = useLibraryMutation('files.encryptFiles', {
  // 		onSuccess: () => {
  // 			showAlertDialog({
  // 				title: 'Success',
  // 				value: 'The encryption job has started successfully. You may track the progress in the job overview panel.'
  // 			});
  // 		},
  // 		onError: () => {
  // 			showAlertDialog({
  // 				title: 'Error',
  // 				value: 'The encryption job failed to start.'
  // 			});
  // 		}
  // 	});
  
  // 	const form = useZodForm({
  // 		defaultValues: { encryptionAlgo: 'XChaCha20Poly1305', outputPath: '' },
  // 		schema
  // 	});
  
  // 	return (
  // 		<Dialog
  // 			form={form}
  // 			onSubmit={form.handleSubmit((data) =>
  // 				encryptFile.mutateAsync({
  // 					algorithm: data.encryptionAlgo as Algorithm,
  // 					key_uuid: data.key,
  // 					location_id: props.location_id,
  // 					file_path_ids: [props.path_id],
  // 					metadata: data.metadata,
  // 					preview_media: data.previewMedia
  // 				})
  // 			)}
  // 			dialog={useDialog(props)}
  // 			title="Encrypt a file"
  // 			description="Configure your encryption settings. Leave the output file blank for the default."
  // 			loading={encryptFile.isLoading}
  // 			ctaLabel="Encrypt"
  // 		>
  // 			<div className="mb-3 mt-4 grid w-full grid-cols-2 gap-4">
  // 				<div className="flex flex-col">
  // 					<span className="text-xs font-bold">Key</span>
  // 					<Select
  // 						className="mt-2"
  // 						value={form.watch('key')}
  // 						onChange={(e) => {
  // 							UpdateKey(e);
  // 						}}
  // 					>
  // 						{mountedUuids.data && <KeyListSelectOptions keys={mountedUuids.data} />}
  // 					</Select>
  // 				</div>
  // 				<div className="flex flex-col">
  // 					<span className="text-xs font-bold">Output file</span>
  
  // 					<Button
  // 						size="sm"
  // 						variant={form.watch('outputPath') !== '' ? 'accent' : 'gray'}
  // 						className="mt-2 h-[23px] text-xs leading-3"
  // 						type="button"
  // 						onClick={() => {
  // 							// if we allow the user to encrypt multiple files simultaneously, this should become a directory instead
  // 							if (!platform.saveFilePickerDialog) {
  // 								// TODO: Support opening locations on web
  // 								showAlertDialog({
  // 									title: 'Error',
  // 									description: '',
  // 									value: "System dialogs aren't supported on this platform.",
  // 									inputBox: false
  // 								});
  // 								return;
  // 							}
  
  // 							platform.saveFilePickerDialog().then((result) => {
  // 								if (result) form.setValue('outputPath', result as string);
  // 							});
  // 						}}
  // 					>
  // 						Select
  // 					</Button>
  // 				</div>
  // 			</div>
  
  // 			<div className="mb-3 mt-4 grid w-full grid-cols-2 gap-4">
  // 				<div className="flex flex-col">
  // 					<span className="text-xs font-bold">Encryption</span>
  // 					<Select
  // 						className="mt-2"
  // 						value={form.watch('encryptionAlgo')}
  // 						onChange={(e) => form.setValue('encryptionAlgo', e)}
  // 					>
  // 						<SelectOption value="XChaCha20Poly1305">XChaCha20-Poly1305</SelectOption>
  // 						<SelectOption value="Aes256Gcm">AES-256-GCM</SelectOption>
  // 					</Select>
  // 				</div>
  // 				<div className="flex flex-col">
  // 					<span className="text-xs font-bold">Hashing</span>
  // 					<Select
  // 						className="mt-2 text-gray-400/80"
  // 						onChange={() => {}}
  // 						value={form.watch('hashingAlgo')}
  // 						disabled
  // 					>
  // 						<SelectOption value="Argon2id-s">Argon2id (standard)</SelectOption>
  // 						<SelectOption value="Argon2id-h">Argon2id (hardened)</SelectOption>
  // 						<SelectOption value="Argon2id-p">Argon2id (paranoid)</SelectOption>
  // 						<SelectOption value="BalloonBlake3-s">
  // 							BLAKE3-Balloon (standard)
  // 						</SelectOption>
  // 						<SelectOption value="BalloonBlake3-h">
  // 							BLAKE3-Balloon (hardened)
  // 						</SelectOption>
  // 						<SelectOption value="BalloonBlake3-p">
  // 							BLAKE3-Balloon (paranoid)
  // 						</SelectOption>
  // 					</Select>
  // 				</div>
  // 			</div>
  
  // 			<div className="mb-3 mt-4 grid w-full grid-cols-2 gap-4">
  // 				<div className="flex">
  // 					<span className="ml-0.5 mr-3 mt-0.5 text-sm font-bold">Metadata</span>
  // 					<CheckBox {...form.register('metadata')} />
  // 				</div>
  // 				<div className="flex">
  // 					<span className="ml-0.5 mr-3 mt-0.5 text-sm font-bold">Preview Media</span>
  // 					<CheckBox {...form.register('previewMedia')} />
  // 				</div>
  // 			</div>
  // 		</Dialog>
  // 	);
  // };
  