Fix styling & alignment issues

src/lib/components/containers/Window.svelte

@@ -3,7 +3,5 @@
 </script>
 
 <div class="flex min-h-0 flex-1 items-center justify-center">
-	<div class="max-h-full overflow-auto">
-		{@render children()}
-	</div>
+	{@render children()}
 </div>

src/lib/components/ui/topBar/TopBar.svelte

@@ -3,7 +3,7 @@
 	const session = authClient.useSession();
 </script>
 
-<nav class="mb-6 flex w-full justify-between bg-slate-200 px-4 py-6">
+<nav class="flex w-full justify-between px-8 py-6">
 	<span><a href="/">Radiant Wave Technologies</a></span>
 	{#if $session.data}
 		<div>

src/routes/(protected)/+layout.server.ts

@@ -0,0 +1,12 @@
+import type { LayoutServerLoad } from "./$types";
+import { error } from "@sveltejs/kit";
+import { prisma } from "$lib/db";
+
+// const authorizedRoles - Not an admin gate, therefore all authenticated roles are authorized.
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+    const user = await prisma.user.findUnique({ where: { id: locals.user?.id } });
+    if (!user) {
+        throw error(403, "not authorized");
+    }
+}

src/routes/(protected)/+layout.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Window from '$lib/components/containers/Window.svelte';
+
+	const { children } = $props();
+</script>
+
+<div class="flex min-h-0 flex-1">
+	<div class="mt-12 mr-12 flex flex-col">
+		<a href="/dashboard" class="text-blue-600">Dashboard</a>
+	</div>
+	<Window>
+		{@render children()}
+	</Window>
+</div>

src/routes/(protected)/affirmations/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from "./$types";
+import { prisma } from "$lib/db";
+
+export const load: PageServerLoad = async () => {
+    const affirmations = await prisma.affirmation.findMany();
+    return { affirmations }
+}

src/routes/(protected)/affirmations/+page.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<div>
+	{#each data.affirmations as affirmation}
+		<span>{affirmation.name}</span>
+		<span>{affirmation.price}</span>
+	{/each}
+</div>

src/routes/(protected)/dashboard/+page.svelte

@@ -0,0 +1,6 @@
+<div class="grid h-full min-h-0 w-full grid-cols-2 grid-rows-2 bg-green-200">
+	<div class="flex min-h-0 justify-center overflow-auto"><h1>My Affirmations</h1></div>
+	<div class="flex items-center justify-center"><h1>My License Keys</h1></div>
+	<div class="flex items-center justify-center"><h1>My Playlists</h1></div>
+	<div class="flex items-center justify-center"><h1>My Schedules</h1></div>
+</div>

src/routes/+layout.svelte

@@ -9,6 +9,6 @@
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
 
 <TopBar />
-<div class="flex px-4">
+<div class="flex min-h-0 flex-1 px-8">
 	{@render children()}
 </div>