feat: add library icons

frontend/src/lib/components/layout/library-switcher.svelte

@@ -4,12 +4,15 @@
 	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
 	import { Badge } from "$lib/components/ui/badge/index.js";
 	import { getLibraryState, LibraryState } from '$lib/state/library.svelte';
+	import { LIBRARY_ICONS } from '$lib/components/ui/icon-picker/index.js';
 	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
 	import PlusIcon from '@lucide/svelte/icons/plus';
 	import LibraryCreateForm from '../forms/library-create-form.svelte';
 
 	const libraryState = getLibraryState();
 	const sidebar = useSidebar();
+
+	const activeIcon = $derived(LIBRARY_ICONS[libraryState.activeLibrary?.icon ?? 'library'] ?? LIBRARY_ICONS['library']);
 </script>
 
 <Sidebar.Menu>
@@ -22,11 +25,11 @@
 						size="lg"
 						class="ml-2 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 					>
+						{@const ActiveIcon = activeIcon.component}
 						<div
 							class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
 						>
-							<p class="text-lg font-semibold">{libraryState.activeLibrary!.name[0]}</p>
-							<!-- <libraryState?.activeLibrary.logo class="size-4" /> -->
+							<ActiveIcon class="size-4" />
 						</div>
 						<div class="grid flex-1 text-left text-sm leading-tight">
 							<span class="ml-1 truncate font-semibold">
@@ -45,16 +48,16 @@
 			>
 				<DropdownMenu.Label class="text-xs text-muted-foreground">Libraries</DropdownMenu.Label>
 				{#each libraryState.libraries as library (library.name)}
+					{@const LibraryIcon = (LIBRARY_ICONS[library.icon ?? 'library'] ?? LIBRARY_ICONS['library']).component}
 					<DropdownMenu.Item onSelect={() => libraryState.setActive(library.id)} class="gap-2 p-2">
 						<div class="flex size-6 items-center justify-center rounded-md border">
-							<p>{library.name[0]}</p>
-							<!-- <library.logo class="size-3.5 shrink-0" /> -->
+							<LibraryIcon class="size-3.5 shrink-0" />
 						</div>
 						{library.name}
-						<Badge 
+						<Badge
 						variant="outline"
 						class="font-semibold ml-auto">
-							{library.total}
+							{library.total ?? 0}
 						</Badge>
 					</DropdownMenu.Item>
 				{/each}