update home page

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

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

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

@@ -2,6 +2,7 @@
 	import type { PageData } from './$types'
 	import * as Card from '$lib/components/ui/card'
 	import { Button } from '$lib/components/ui/button'
+	import { BarChart } from 'lucide-svelte'
 
 	export let data: PageData
 </script>
@@ -20,11 +21,20 @@
 			<Card.Description>Projects</Card.Description>
 		</Card.Header>
 		<Card.Content>
-			<div class="flex w-3/4 flex-col items-stretch gap-2">
+			<div class="flex w-full flex-col items-stretch gap-2">
 				{#each data.projects as project}
-					<Button href={'/projects/' + project.uuid}>
+					<div class="flex w-full items-center justify-between gap-2">
+						<Button href={'/projects/' + project.uuid} class="w-3/4">
 							{project.name}
 						</Button>
+						<div class="flex gap-2">
+							<BarChart />
+							{project.shortener.reduce(
+								(curr, shortener) => shortener.visitor.length + curr,
+								0,
+							)} visits
+						</div>
+					</div>
 				{/each}
 			</div>
 		</Card.Content>