base layout and redirect on root when not logged in

src/lib/components/Navbar.svelte

@@ -18,7 +18,7 @@
 
 <style>
 	.navbar {
-		@apply flex items-center justify-between border-slate-200 bg-slate-100 px-6 py-2 font-display drop-shadow;
+		@apply flex items-center justify-between border-b border-slate-200 bg-slate-50 px-6 py-2 font-display drop-shadow;
 	}
 
 	.navbar h1 {

src/routes/+layout.svelte

@@ -3,4 +3,12 @@
 	let { children } = $props();
 </script>
 
+<div class="layout">
 	{@render children()}
+</div>
+
+<style>
+	.layout {
+		@apply h-screen w-screen bg-slate-100;
+	}
+</style>

src/routes/+page.server.ts

@@ -0,0 +1,18 @@
+import { prisma } from '$lib/server/prisma';
+
+export async function load(event) {
+	const userId = event.cookies.get('user');
+	if (!userId && isNaN(Number(userId))) {
+		return {
+			authenticated: false
+		};
+	}
+	const user = await prisma.user.findUnique({
+		where: {
+			id: Number(userId)
+		}
+	});
+	return {
+		authenticated: !!user
+	};
+}

src/routes/+page.svelte

@@ -2,10 +2,10 @@
 	import { goto } from '$app/navigation';
 	import Loader from '$lib/components/Loader.svelte';
 
+	let { data } = $props();
+
 	$effect(() => {
-		const id = setTimeout(() => {
-			goto('/app');
-		}, 1500);
+		const id = setTimeout(() => (data.authenticated ? goto('/app') : goto('/login')), 1500);
 		return () => {
 			clearTimeout(id);
 		};
@@ -19,9 +19,6 @@
 
 <style>
 	.site-loader {
-		@apply flex h-screen w-screen flex-col items-center justify-center gap-6 bg-slate-100;
-	}
-	.site-loader h1 {
-		@apply font-display text-4xl;
+		@apply flex h-screen w-screen flex-col items-center justify-center gap-6;
 	}
 </style>