feat: add library icons

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

@@ -5,13 +5,14 @@
 	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 { IconPicker } from '$lib/components/ui/icon-picker/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();
 
+	let selectedIcon = $state('library');
+
 	const libraryState = getLibraryState();
 </script>
 
@@ -35,6 +36,7 @@
 					const libraryName = createLibrary.fields.name.value();
 
 					form.reset();
+					selectedIcon = 'library';
 					open = false;
 					toast.success(`Library '${libraryName}' created.`);
 
@@ -48,14 +50,24 @@
 		>
 			<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>
+					<!-- Library name and Icon -->
+					<div class="flex items-end gap-3">
+						<div class="flex-1">
+							<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>
+						</div>
+
+						<div class="flex flex-col gap-2">
+							<Field.Label>Icon</Field.Label>
+							<IconPicker bind:value={selectedIcon} />
+							<input type="hidden" name="icon" value={selectedIcon} />
+						</div>
+					</div>
 
 					<!-- Description -->
 					<Field.Field>