update homepage

frontend/src/lib/components/sidebar.svelte

@@ -9,6 +9,12 @@
 	export let email: string = ''
 	let className: string | undefined = undefined
 	export { className as class }
+
+	const routes = [
+		{ href: '/', name: 'Home' },
+		{ href: '/links', name: 'Links' },
+		{ href: '/projects', name: 'Projects' },
+	] as const
 </script>
 
 <div
@@ -27,14 +33,12 @@
 		<Separator />
 
 		<div class="flex flex-col gap-4 p-4">
-			<Button
-				variant="ghost"
-				href="/links"
-				class="justify-start text-base">Links</Button>
-			<Button
-				variant="ghost"
-				href="/projects"
-				class="justify-start text-base ">Projects</Button>
+			{#each routes as route}
+				<Button
+					variant="ghost"
+					href={route.href}
+					class="justify-start text-base">{route.name}</Button>
+			{/each}
 		</div>
 	</div>
 </div>

frontend/src/routes/(app)/+layout.svelte

@@ -33,6 +33,11 @@
 						<Sheet.Title>Shortener</Sheet.Title>
 					</Sheet.Header>
 					<div class="flex grow flex-col gap-4">
+						<Button
+							on:click={closeSheet}
+							variant="ghost"
+							href="/"
+							class="justify-start text-base">Home</Button>
 						<Button
 							on:click={closeSheet}
 							variant="ghost"

frontend/src/routes/(app)/+page.server.ts

@@ -1,8 +1,22 @@
 import { redirect } from '@sveltejs/kit'
 import type { PageServerLoad, Actions } from './$types'
+import { db } from '$lib/db'
 
-export const load = (async () => {
-	return {}
+export const load = (async (event) => {
+	const user = event.locals.userObject
+
+	const projects = await db.query.project.findMany({
+		where: (project, { eq }) => eq(project.userId, user.id),
+	})
+
+	const shorteners = await db.query.shortener.findMany({
+		with: {
+			visitor: true,
+		},
+		where: (shortener, { eq }) => eq(shortener.userId, user.id),
+	})
+
+	return { projects, shorteners }
 }) satisfies PageServerLoad
 
 export const actions = {

frontend/src/routes/(app)/+page.svelte

@@ -1,5 +1,32 @@
-<h1 class="text-xl">Welcome to SvelteKit</h1>
-<p>
-	Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the
-	documentation
-</p>
+<script lang="ts">
+	import type { PageData } from './$types'
+	import * as Card from '$lib/components/ui/card'
+	import { Button } from '$lib/components/ui/button'
+
+	export let data: PageData
+</script>
+
+<div class="flex flex-wrap gap-4 p-4">
+	<div class="w-full">
+		<h1 class="text-xl">Welcome to SvelteKit</h1>
+		<p>
+			Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read
+			the documentation
+		</p>
+	</div>
+	<Card.Root class="w-[500px]">
+		<Card.Header>
+			<Card.Title>Projects</Card.Title>
+			<Card.Description>Projects</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<div class="flex w-3/4 flex-col items-stretch gap-2">
+				{#each data.projects as project}
+					<Button href={'/projects/' + project.uuid}>
+						{project.name}
+					</Button>
+				{/each}
+			</div>
+		</Card.Content>
+	</Card.Root>
+</div>

frontend/src/routes/(app)/+page.ts

@@ -1,9 +0,0 @@
-import type { PageLoad } from './$types'
-
-export const load: PageLoad = async () => {
-	return {
-		title: 'Authentication Example',
-		data: 'hello',
-		test: 'yo',
-	}
-}