feat: add account menu to the sidebar footer

frontend/src/lib/components/layout/app-sidebar.svelte

@@ -1,45 +1,48 @@
 <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 ChitaiMark from '$lib/components/icons/chitai-mark.svelte';
 
 	import NavMain from './nav-main.svelte';
+	import NavUser from './nav-user.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',
+		user,
 		...restProps
-	}: ComponentProps<typeof Sidebar.Root> = $props();
+	}: ComponentProps<typeof Sidebar.Root> & { user: { email: string } } = $props();
 
 	const libraryState = getLibraryState();
 
+	// Keep components out of these objects. `<header.icon />` is a *dynamic*
+	// component: every time the $derived object is recomputed — on hydration
+	// when LibraryState picks up previousLibraryId, and on every navigation for
+	// the footer — Svelte re-evaluates the expression and can remount the SVG,
+	// which reads as a flash and shifts layout. Referencing the component
+	// directly in the markup keeps it static.
 	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>
+		<!--
+			The mark is 28px where the nav icons are 16px, and both start at the same
+			8px padding — so its centre sits 6px right of theirs. -ml-1.5 is that 6px,
+			which lines the logo up with the nav in both expanded and collapsed states.
+		-->
+		<Sidebar.MenuButton class="mt-1 -ml-1.5">
 			{#snippet child({ props })}
 				<a href={header.url} {...props}>
-					<header.icon class="mr-3 scale-175" />
-					<span class="text-xl font-semibold">{header.title}</span>
+					<ChitaiMark class="mr-3 size-7!" />
+					<span class="font-serif text-xl tracking-tight">{header.title}</span>
 				</a>
 			{/snippet}
 		</Sidebar.MenuButton>
@@ -50,15 +53,6 @@
 		<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>
+		<NavUser {user} />
 	</Sidebar.Footer>
 </Sidebar.Root>