spacedrive/interface/app/$libraryId/settings/library/keys/KeyViewerDialog.tsx

// import { Buffer } from 'buffer';
// import { Clipboard } from '@phosphor-icons/react';
// import { useState } from 'react';
// import { slugFromHashingAlgo, useLibraryQuery } from '@sd/client';
// import { Button, Dialog, Input, Select, SelectOption, UseDialogProps, useDialog } from '@sd/ui';
// import { useZodForm } from '@sd/ui/src/forms';
// import { KeyListSelectOptions } from '~/app/$libraryId/KeyManager/List';

// export const KeyUpdater = (props: {
// 	uuid: string;
// 	setKey: (value: string) => void;
// 	setEncryptionAlgo: (value: string) => void;
// 	setHashingAlgo: (value: string) => void;
// 	setContentSalt: (value: string) => void;
// }) => {
// 	useLibraryQuery(['keys.getKey', props.uuid], {
// 		onSuccess: (data) => {
// 			props.setKey(data);
// 		}
// 	});

// 	const keys = useLibraryQuery(['keys.list']);

// 	const key = keys.data?.find((key) => key.uuid == props.uuid);

// 	if (key) {
// 		props.setEncryptionAlgo(key?.algorithm);
// 		props.setHashingAlgo(slugFromHashingAlgo(key?.hashing_algorithm));
// 		props.setContentSalt(Buffer.from(key.content_salt).toString('hex'));
// 	}

// 	return <></>;
// };

// export default (props: UseDialogProps) => {
// 	const keys = useLibraryQuery(['keys.list'], {
// 		onSuccess: (data) => {
// 			if (key === '' && data.length !== 0) {
// 				setKey(data[0]?.uuid ?? '');
// 			}
// 		}
// 	});

// 	const [key, setKey] = useState('');
// 	const [keyValue, setKeyValue] = useState('');
// 	const [contentSalt, setContentSalt] = useState('');
// 	const [encryptionAlgo, setEncryptionAlgo] = useState('');
// 	const [hashingAlgo, setHashingAlgo] = useState('');

// 	return (
// 		<Dialog
// 			form={useZodForm()}
// 			dialog={useDialog(props)}
// 			title="View Key Values"
// 			description="Here you can view the values of your keys."
// 			ctaLabel="Done"
// 		>
// 			<KeyUpdater
// 				uuid={key}
// 				setKey={setKeyValue}
// 				setEncryptionAlgo={setEncryptionAlgo}
// 				setHashingAlgo={setHashingAlgo}
// 				setContentSalt={setContentSalt}
// 			/>

// 			<div className="mb-3 mt-4 grid w-full gap-4">
// 				<div className="flex flex-col">
// 					<span className="text-xs font-bold">Key</span>
// 					<Select
// 						className="mt-2 grow"
// 						value={key}
// 						onChange={(e) => {
// 							setKey(e);
// 						}}
// 					>
// 						{keys.data && (
// 							<KeyListSelectOptions keys={keys.data.map((key) => key.uuid)} />
// 						)}
// 					</Select>
// 				</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 w-[150px] text-gray-300"
// 						value={encryptionAlgo}
// 						disabled
// 						onChange={() => {}}
// 					>
// 						<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-300"
// 						value={hashingAlgo}
// 						disabled
// 						onChange={() => {}}
// 					>
// 						<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 gap-4">
// 				<div className="flex flex-col">
// 					<span className="mb-2 text-xs font-bold">Content Salt (hex)</span>
// 					<Input
// 						value={contentSalt}
// 						disabled
// 						right={
// 							<Button
// 								type="button"
// 								onClick={() => {
// 									navigator.clipboard.writeText(contentSalt);
// 								}}
// 								size="icon"
// 							>
// 								<Clipboard className="h-4 w-4" />
// 							</Button>
// 						}
// 					/>
// 				</div>
// 			</div>
// 			<div className="mb-3 mt-4 grid w-full gap-4">
// 				<div className="flex flex-col">
// 					<span className="mb-2 text-xs font-bold">Key Value</span>
// 					<Input
// 						value={keyValue}
// 						disabled
// 						right={
// 							<Button
// 								type="button"
// 								onClick={() => {
// 									navigator.clipboard.writeText(keyValue);
// 								}}
// 								size="icon"
// 							>
// 								<Clipboard className="h-4 w-4" />
// 							</Button>
// 						}
// 					/>
// 				</div>
// 			</div>
// 		</Dialog>
// 	);
// };