Initial commit

2025-12-04 00:33:37 -05:00
commit 7ca0a21283
798 changed files with 190424 additions and 0 deletions
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	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 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();
+</script>
+
+<Sidebar.Menu>
+	<Sidebar.MenuItem>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						{...props}
+						size="lg"
+						class="ml-2 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+					>
+						<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" /> -->
+						</div>
+						<div class="grid flex-1 text-left text-sm leading-tight">
+							<span class="ml-1 truncate font-semibold">
+								{libraryState.activeLibrary!.name}
+							</span>
+						</div>
+						<ChevronsUpDownIcon class="mr-2 ml-auto" />
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content
+				class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+				align="start"
+				side={sidebar.isMobile ? 'bottom' : 'right'}
+				sideOffset={4}
+			>
+				<DropdownMenu.Label class="text-xs text-muted-foreground">Libraries</DropdownMenu.Label>
+				{#each libraryState.libraries as library (library.name)}
+					<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" /> -->
+						</div>
+						{library.name}
+						<Badge 
+						variant="outline"
+						class="font-semibold ml-auto">
+							{library.total}
+						</Badge>
+					</DropdownMenu.Item>
+				{/each}
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item onclick={() => libraryState.openLibraryCreateDialog()} class="gap-2 p-2">
+					<div class="flex size-6 items-center justify-center rounded-md border bg-transparent">
+						<PlusIcon class="size-4" />
+					</div>
+					<div class="font-medium text-muted-foreground">Add library</div>
+				</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</Sidebar.MenuItem>
+</Sidebar.Menu>
+
+<LibraryCreateForm bind:open={libraryState.createDialogOpen} />