improve layout, nav; add sign out on user page

src/routes/+layout.server.ts

@@ -0,0 +1,9 @@
+import type { LayoutServerLoad } from "./$types";
+
+export const load: LayoutServerLoad = async (event) => {
+	const { user } = event.locals;
+
+	return {
+		user
+	};
+};

src/routes/+layout.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
 	import '../app.css';
-	let { children } = $props();
+	import { page } from '$app/stores';
+	import { cn } from '$lib/utils';
+
+	const { data, children } = $props();
+	const { user } = data;
 </script>
 
-<header class="p-4">
-	<h1 class="text-2xl font-bold">My App</h1>
-	<nav>
-		<a href="/">Home</a>
-		<a href="/about">About</a>
+<header class="p-4 md:flex">
+	<span class=" mr-6 font-bold xl:inline-block">My App</span>
+	<nav class="flex items-center gap-6 text-sm">
+		<a href="/" class={cn("hover:text-foreground/80 transition-colors",
+				$page.url.pathname === "/" ? "text-foreground" : "text-foreground/60")}>Home</a>
+		{#if user}
+			<a href="/user" class={cn("hover:text-foreground/80 transition-colors",
+				$page.url.pathname === "/user" ? "text-foreground" : "text-foreground/60")}>Profile</a>
+		{/if}
 	</nav>
 </header>
 <main class="flex-grow p-4">

src/routes/+page.server.ts

@@ -1,9 +0,0 @@
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async (event) => {
-	const { user } = event.locals;
-
-	return {
-		user
-	};
-};

src/routes/auth/+page.server.ts

@@ -0,0 +1,14 @@
+import { fail, redirect } from "@sveltejs/kit";
+import { invalidateSession, deleteSessionTokenCookie } from "$lib/server/auth";
+import type { Actions } from "./$types";
+
+export const actions: Actions = {
+	logout: async (event) => {
+		if (event.locals.session === null) {
+			return fail(401);
+		}
+		await invalidateSession(event.locals.session.id);
+		deleteSessionTokenCookie(event);
+		return redirect(302, "/");
+	}
+};

src/routes/user/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { invalidate, invalidateAll } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
+	import { LucideLoaderCircle, LucideLogOut, LucideRefreshCw } from 'lucide-svelte';
 
 	let { data } = $props();
+	let isLoadingSignOut = $state(false);
 
 	function refetch() {
 		console.log("refetching");
@@ -19,5 +21,16 @@
 </p>
 
 <Button onclick={refetch}>
+		<LucideRefreshCw class="mr-2 h-4 w-4" />
 	Invalidate Data
 </Button>
+<form class="inline-flex" method="post" action="/auth?/logout">
+	<Button type="submit" onclick={() => {isLoadingSignOut = true}}>
+		{#if isLoadingSignOut}
+			<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+		{:else}
+			<LucideLogOut class="mr-2 h-4 w-4" />
+		{/if}
+		Sign Out
+	</Button>
+</form>