Initial commit

frontend/src/lib/components/forms/library-create-form.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { createLibrary } from '$lib/api/library.remote';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
+	import * as Field from '$lib/components/ui/field/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { toast } from 'svelte-sonner';
+	import { goto, invalidate, invalidateAll } from '$app/navigation';
+	import { page } from '$app/state';
+	import { getLibraryState } from '$lib/state/library.svelte';
+
+	let { open = $bindable(false) } = $props();
+
+	const libraryState = getLibraryState();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Create a new Library</Dialog.Title>
+		</Dialog.Header>
+
+		<form
+			{...createLibrary.enhance(async ({ form, submit }) => {
+				try {
+					await submit();
+
+					// Check if there are any validation issues
+					const issues = createLibrary.fields.allIssues();
+					if (issues && issues.length > 0) {
+						return;
+					}
+
+					const libraryName = createLibrary.fields.name.value();
+
+					form.reset();
+					open = false;
+					toast.success(`Library '${libraryName}' created.`);
+
+					libraryState.addLibrary(createLibrary.result);
+				} catch (error) {
+					console.error('Failed to create library: ', error);
+					toast.error('Failed to create library');
+				}
+			})}
+			class="flex flex-col gap-3"
+		>
+			<Field.Set>
+				<Field.Group>
+					<!-- Library name -->
+					<Field.Field>
+						<Field.Label for="name">Library name</Field.Label>
+						<Input {...createLibrary.fields.name.as('text')} />
+						{#each createLibrary.fields.name.issues() ?? [] as issue}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
+
+					<!-- Description -->
+					<Field.Field>
+						<Field.Label for="description">Description</Field.Label>
+						<Textarea {...createLibrary.fields.description.as('text')} />
+						{#each createLibrary.fields.description.issues() ?? [] as issue}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
+
+					<!-- Root Path -->
+					<Field.Field>
+						<Field.Label for="root_path">Root Path</Field.Label>
+						<Input {...createLibrary.fields.root_path.as('text')} />
+						{#each createLibrary.fields.root_path.issues() ?? [] as issue}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+						<Field.Description class="text-xs">
+							Path the books in this library will be stored
+						</Field.Description>
+					</Field.Field>
+
+					<!-- Path Template -->
+					<Field.Field>
+						<Field.Label for="path_template">Path Template</Field.Label>
+						<Input {...createLibrary.fields.path_template.as('text')} />
+						{#each createLibrary.fields.path_template.issues() ?? [] as issue}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+						<Field.Description class="text-xs">
+							The directory structure of your library
+						</Field.Description>
+					</Field.Field>
+				</Field.Group>
+			</Field.Set>
+
+			<Button type="submit" class="ml-auto w-24">Create</Button>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>