Initial commit

frontend/src/lib/components/forms/edit-book/edit-book.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import { type Book } from '$lib/schema';
+	import EditCover from './edit-cover.svelte';
+	import EditFiles from './edit-files.svelte';
+	import EditMetadata from './edit-metadata.svelte';
+
+	let { book, open = $bindable() }: { book?: Book; open: boolean } = $props();
+</script>
+
+<Dialog.Root bind:open>
+	{#if book}
+		<Dialog.Content class="sm:max-w-xl">
+			<Tabs.Root value="metadata" class="h-[500px] max-w-xl py-4 md:h-[700px]">
+				<Tabs.List class="grid w-full grid-cols-3">
+					<Tabs.Trigger value="metadata">Metadata</Tabs.Trigger>
+					<Tabs.Trigger value="cover">Cover</Tabs.Trigger>
+					<Tabs.Trigger value="files">Files</Tabs.Trigger>
+				</Tabs.List>
+
+				<!-- Metadata form -->
+				<Tabs.Content value="metadata" class="h-full overflow-y-auto pb-1">
+					<EditMetadata {book} {open} />
+				</Tabs.Content>
+
+				<!-- Cover form -->
+				<Tabs.Content value="cover">
+					<EditCover {book} {open} />
+				</Tabs.Content>
+
+				<!-- Add files form -->
+				<Tabs.Content value="files">
+					<EditFiles {book} />
+				</Tabs.Content>
+			</Tabs.Root>
+		</Dialog.Content>
+	{/if}
+</Dialog.Root>