Initial commit

2025-12-04 00:33:37 -05:00
commit 7ca0a21283
798 changed files with 190424 additions and 0 deletions
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator/index.js';
+
+	import SettingsIcon from '@lucide/svelte/icons/settings';
+	import UnjsDb0 from '$lib/components/icons/UnjsDb0.svelte';
+
+	import NavMain from './nav-main.svelte';
+	import LibrarySwitcher from './library-switcher.svelte';
+	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
+	import type { ComponentProps } from 'svelte';
+	import { getLibraryState } from '$lib/state/library.svelte';
+	import { page } from '$app/state';
+
+	let {
+		ref = $bindable(null),
+		collapsible = 'icon',
+		...restProps
+	}: ComponentProps<typeof Sidebar.Root> = $props();
+
+	const libraryState = getLibraryState();
+
+	const header = $derived({
+		title: 'chitai',
+		icon: UnjsDb0,
+		url: `/library/${libraryState.activeLibrary!.id}`
+	});
+
+	const footer = $derived({
+		title: 'Settings',
+		url: '/settings',
+		icon: SettingsIcon,
+		isActive: page.url.pathname.startsWith('/settings')
+	});
+</script>
+
+<Sidebar.Root variant="floating" {collapsible} {...restProps} class="ml-1 py-3">
+	<Sidebar.Header class="h-(--header-height)">
+		<Sidebar.MenuButton>
+			{#snippet child({ props })}
+				<a href={header.url} {...props}>
+					<header.icon class="mr-3 scale-175" />
+					<span class="text-xl font-semibold">{header.title}</span>
+				</a>
+			{/snippet}
+		</Sidebar.MenuButton>
+	</Sidebar.Header>
+	<Separator />
+	<Sidebar.Content class="mt-4 mr-2 overflow-x-hidden">
+		<LibrarySwitcher />
+		<NavMain />
+	</Sidebar.Content>
+	<Sidebar.Footer>
+		<Sidebar.MenuButton class="mb-2" isActive={footer.isActive}>
+			{#snippet child({ props })}
+				<a href={footer.url} {...props}>
+					{#if footer.icon}
+						<footer.icon class="scale-125" />
+					{/if}
+					<span class="text-md pl-2">{footer.title}</span>
+				</a>
+			{/snippet}
+		</Sidebar.MenuButton>
+	</Sidebar.Footer>
+</Sidebar.Root>