hunk.code_window: 			submitPlausibleEvent({
   				event: {
   					type: 'libraryDelete'
   				}
   			});
   		} catch (e) {
   			alert(`Failed to delete library: ${e}`);
   		}
  
hunk.labels: keep keep keep keep add keep keep keep
hunk.after_edit: 			navigate('/');
  
hunk.file_path: interface/app/$libraryId/settings/node/libraries/DeleteDialog.tsx
hunk.type: add
file: import { useState } from 'react';
  import { useNavigate } from 'react-router';
  import { Button, Form, InputField } from '@sd/ui';
  import { Icon } from '~/components';
  import { useOperatingSystem } from '~/hooks';
  
  import { OnboardingContainer, OnboardingDescription, OnboardingTitle } from './components';
  import { useOnboardingContext } from './context';
  
  export default function OnboardingNewLibrary() {
  	const navigate = useNavigate();
  	const os = useOperatingSystem();
  	const form = useOnboardingContext().forms.useForm('new-library');
  
  	const [importMode, setImportMode] = useState(false);
  
  	const handleImport = () => {
  		// TODO
  	};
  
  	return (
  		<Form
  			form={form}
  			onSubmit={form.handleSubmit(() => {
  				navigate(`../${os === 'macOS' ? 'full-disk' : 'locations'}`, { replace: true });
  			})}
  		>
  			<OnboardingContainer>
  				<Icon name="Database" size={80} />
  				<OnboardingTitle>Create a Library</OnboardingTitle>
  				<OnboardingDescription>
  					Libraries are a secure, on-device database. Your files remain where they are,
  					the Library catalogs them and stores all Spacedrive related data.
  				</OnboardingDescription>
  
  				{importMode ? (
  					<div className="space-x-2 mt-7">
  						<Button onClick={handleImport} variant="accent" size="sm">
  							Import
  						</Button>
  						<span className="px-2 text-xs font-bold text-ink-faint">OR</span>
  						<Button onClick={() => setImportMode(false)} variant="outline" size="sm">
  							Create new library
  						</Button>
  					</div>
  				) : (
  					<>
  						<InputField
  							{...form.register('name')}
  							size="lg"
  							autoFocus
  							className="mt-6 w-[300px]"
  							placeholder={'e.g. "James\' Library"'}
  						/>
  						<div className="flex grow" />
  						<div className="space-x-2 mt-7">
  							<Button
  								type="submit"
  								variant="accent"
  								size="sm"
  								disabled={!form.formState.isValid}
  							>
  								New library
  							</Button>
  							{/* <span className="px-2 text-xs font-bold text-ink-faint">OR</span>
  							<Button onClick={() => setImportMode(true)} variant="outline" size="sm">
  								Import library
  							</Button> */}
  						</div>
  					</>
  				)}
  			</OnboardingContainer>
  		</Form>
  	);
  }
  