improve layout, nav; add sign out on user page

src/lib/components/app/auth-form/auth-form.svelte

@@ -6,25 +6,17 @@
 	let { class: className, ...rest }: {class: string | undefined | null, rest: { [p: string]: unknown }} = $props();
 
 	let isLoading = $state(false);
-	async function onSubmit() {
-		// event.preventDefault();
-		isLoading = true;
-
-		setTimeout(() => {
-			isLoading = false;
-		}, 3000);
-	}
 </script>
 
 <div class={cn("grid gap-6", className)} {...rest}>
-	<a href="/auth/authentik">
+	<form method="get" action="/auth/authentik">
-		<Button disabled={isLoading} onclick={onSubmit}>
+		<Button type="submit" onclick={() => {isLoading=true}}>
 			{#if isLoading}
 				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
 			{:else}
 				<img class="mr-2 h-4 w-4" alt="Authentik Logo" src="https://auth.cazzzer.com/static/dist/assets/icons/icon.svg" />
 			{/if}
-			Authentik
+			Sign in with Authentik
 		</Button>
-	</a>
+	</form>
 </div>

src/lib/server/auth.ts

@@ -41,6 +41,10 @@ export async function invalidateSession(sessionId: string): Promise<void> {
 	await db.delete(table.session).where(eq(table.session.id, sessionId));
 }
 
+export function deleteSessionTokenCookie(event: RequestEvent) {
+	event.cookies.delete(sessionCookieName, { path: '/' });
+}
+
 export async function validateSession(sessionId: string) {
 	const [result] = await db
 		.select({

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">
+<header class="p-4 md:flex">
-	<h1 class="text-2xl font-bold">My App</h1>
+	<span class=" mr-6 font-bold xl:inline-block">My App</span>
-	<nav>
+	<nav class="flex items-center gap-6 text-sm">
-		<a href="/">Home</a>
+		<a href="/" class={cn("hover:text-foreground/80 transition-colors",
-		<a href="/about">About</a>
+				$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>