fixed issues with app

src/routes/+layout.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { PUBLIC_CONVEX_URL } from '$env/static/public';
-	import { BookOpenText, LayoutDashboard, LogOut, PenLine, Settings } from '@lucide/svelte';
+	import { api } from '$convex/_generated/api.js';
+	import { onMount } from 'svelte';
+	import { BookOpenText, LayoutDashboard, LogOut, Menu, PenLine, Settings } from '@lucide/svelte';
 	import { setupConvexAuth, useAuth } from '@mmailaender/convex-auth-svelte/sveltekit';
+	import { useConvexClient } from 'convex-svelte';
 	import Logo from '$lib/components/Logo.svelte';
 	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 	import './layout.css';
@@ -17,15 +20,36 @@
 	});
 
 	const auth = useAuth();
+	const client = useConvexClient();
 	const isAuthenticated = $derived(auth.isAuthenticated);
 	const isLoading = $derived(auth.isLoading);
 	const isAuthRoute = $derived(page.url.pathname.startsWith('/signin'));
+	let navCollapsed = $state(false);
+	let guideSeedRequested = $state(false);
 
 	const navItems = [
 		{ href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
 		{ href: '/entries', label: 'Daily Entries', icon: BookOpenText },
 		{ href: '/settings', label: 'Settings', icon: Settings }
 	];
+
+	onMount(() => {
+		navCollapsed = localStorage.getItem('journaley-nav-collapsed') === 'true';
+	});
+
+	function toggleNav() {
+		navCollapsed = !navCollapsed;
+		localStorage.setItem('journaley-nav-collapsed', String(navCollapsed));
+	}
+
+	$effect(() => {
+		if (isLoading || !isAuthenticated || guideSeedRequested) return;
+
+		guideSeedRequested = true;
+		void client.mutation(api.entries.ensureMarkdownGuideEntry, {}).catch((error) => {
+			console.error('Failed to create markdown guide entry', error);
+		});
+	});
 </script>
 
 {#if isLoading && !isAuthRoute}
@@ -36,52 +60,92 @@
 		</div>
 	</div>
 {:else if isAuthenticated && !isAuthRoute}
-	<div class="min-h-screen lg:grid lg:grid-cols-[17rem_1fr]">
-		<aside class="hidden border-r bg-card/78 px-5 py-6 backdrop-blur lg:block">
-			<a href="/dashboard" class="mb-9 flex items-center gap-3">
-				<span class="text-primary"><Logo /></span>
-				<span>
-					<span class="block text-lg font-bold tracking-tight">Journaley</span>
-					<span class="text-xs text-muted-foreground">Write, tag, find.</span>
-				</span>
-			</a>
+	<div class="min-h-screen">
+		<aside
+			class="fixed inset-y-0 left-0 z-30 flex flex-col border-r bg-card/90 px-3 py-4 backdrop-blur transition-[width] duration-200 {navCollapsed
+				? 'w-[4.75rem]'
+				: 'w-72'}"
+		>
+			<div class="mb-7 flex items-center justify-between gap-2">
+				<a href="/dashboard" class="flex min-w-0 items-center gap-3">
+					<span class="shrink-0 text-primary"><Logo /></span>
+					{#if !navCollapsed}
+						<span class="min-w-0">
+							<span class="block text-lg font-bold tracking-tight">Journaley</span>
+							<span class="text-xs whitespace-nowrap text-muted-foreground">Write, tag, find.</span>
+						</span>
+					{/if}
+				</a>
+				<button
+					class="app-button ghost shrink-0 px-2"
+					type="button"
+					onclick={toggleNav}
+					aria-label={navCollapsed ? 'Expand navigation' : 'Collapse navigation'}
+				>
+					<Menu size={18} />
+				</button>
+			</div>
 
 			<nav class="space-y-2">
 				{#each navItems as item (item.href)}
 					{@const Icon = item.icon}
 					<a
 						href={item.href}
-						class="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-semibold transition hover:bg-secondary {page.url.pathname.startsWith(
-							item.href
-						)
+						class="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm font-semibold transition hover:bg-secondary {navCollapsed
+							? 'justify-center'
+							: ''} {page.url.pathname.startsWith(item.href)
 							? 'bg-secondary text-foreground'
 							: 'text-muted-foreground'}"
+						title={navCollapsed ? item.label : undefined}
 					>
-						<Icon size={18} />
-						{item.label}
+						<Icon class="shrink-0" size={18} />
+						{#if !navCollapsed}
+							<span>{item.label}</span>
+						{/if}
 					</a>
 				{/each}
 			</nav>
 
-			<div class="mt-8 rounded-lg border bg-background/70 p-4">
-				<div class="mb-2 flex items-center gap-2 text-sm font-semibold">
-					<PenLine size={16} />
-					Today counts
+			{#if !navCollapsed}
+				<div class="mt-8 rounded-lg border bg-background/70 p-4">
+					<div class="mb-2 flex items-center gap-2 text-sm font-semibold">
+						<PenLine size={16} />
+						Today counts
+					</div>
+					<p class="text-sm text-muted-foreground">
+						A few honest lines are enough. Keep the thread alive.
+					</p>
 				</div>
-				<p class="text-sm text-muted-foreground">
-					A few honest lines are enough. Keep the thread alive.
-				</p>
+			{/if}
+
+			<div class="mt-auto space-y-2">
+				<div class={navCollapsed ? 'flex justify-center' : ''}>
+					<ThemeToggle />
+				</div>
+				<button
+					class="app-button ghost w-full {navCollapsed ? 'justify-center px-2' : ''}"
+					type="button"
+					onclick={() => auth.signOut()}
+					title={navCollapsed ? 'Sign out' : undefined}
+				>
+					<LogOut size={16} />
+					{#if !navCollapsed}
+						<span>Sign out</span>
+					{/if}
+				</button>
 			</div>
 		</aside>
 
-		<div class="min-w-0">
+		<div
+			class="min-w-0 transition-[padding] duration-200 {navCollapsed ? 'pl-[4.75rem]' : 'pl-72'}"
+		>
 			<header
 				class="sticky top-0 z-20 flex items-center justify-between border-b bg-background/82 px-4 py-3 backdrop-blur lg:px-8"
 			>
-				<a href="/dashboard" class="flex items-center gap-2 font-bold lg:hidden">
-					<span class="text-primary"><Logo size={30} /></span>
-					Journaley
-				</a>
+				<button class="app-button secondary px-3" type="button" onclick={toggleNav}>
+					<Menu size={16} />
+					<span class="hidden sm:inline">{navCollapsed ? 'Expand' : 'Collapse'} menu</span>
+				</button>
 
 				<nav class="hidden items-center gap-1 lg:flex">
 					{#each navItems as item (item.href)}
@@ -95,11 +159,7 @@
 				</nav>
 
 				<div class="flex items-center gap-2">
-					<ThemeToggle />
-					<button class="app-button ghost" type="button" onclick={() => auth.signOut()}>
-						<LogOut size={16} />
-						<span class="hidden sm:inline">Sign out</span>
-					</button>
+					<span class="hidden text-sm text-muted-foreground md:inline">Your private journal</span>
 				</div>
 			</header>