new clients page

src/routes/+layout.svelte

@@ -19,6 +19,7 @@
 		{#if user}
 			<a href="/user" class={getNavClass("/user")}>Profile</a>
 			<a href="/connections" class={getNavClass("/connections")}>Connections</a>
+			<a href="/clients" class={getNavClass("/clients")}>Clients</a>
 		{/if}
 	</nav>
 </header>

src/routes/api/clients/+server.ts

@@ -0,0 +1,28 @@
+import { error, type RequestHandler } from '@sveltejs/kit';
+import { wgClients } from '$lib/server/db/schema';
+import { db } from '$lib/server/db';
+import { eq } from 'drizzle-orm';
+
+export const GET: RequestHandler = async (event) => {
+	if (!event.locals.user) {
+		return error(401, 'Unauthorized');
+	}
+
+	const clients = await findClients(event.locals.user.id);
+	return new Response(
+		JSON.stringify({
+			clients,
+		})
+	);
+};
+
+async function findClients(userId: string) {
+	return db.query.wgClients.findMany({
+		where: eq(wgClients.userId, userId),
+		with: {
+			ipAllocation: true
+		}
+	});
+}
+
+export type Clients = Awaited<ReturnType<typeof findClients>>;

src/routes/clients/+page.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Table from '$lib/components/ui/table';
+	import { Badge } from '$lib/components/ui/badge';
+	import type { PageData } from './$types';
+
+	const { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+	<title>Clients</title>
+</svelte:head>
+
+<Table.Root class="bg-accent rounded-xl">
+	<Table.Header>
+		<Table.Head>Name</Table.Head>
+		<Table.Head>Public Key</Table.Head>
+		<Table.Head>Private Key</Table.Head>
+		<Table.Head>Pre-Shared Key</Table.Head>
+		<Table.Head>IP Allocation</Table.Head>
+	</Table.Header>
+	<Table.Body>
+		{#each data.clients as client}
+			<Table.Row class="border-y-2 border-background">
+				<Table.Cell>{client.name}</Table.Cell>
+				<Table.Cell class="truncate max-w-[10ch]">{client.publicKey}</Table.Cell>
+				<Table.Cell class="truncate max-w-[10ch]">{client.privateKey}</Table.Cell>
+				<Table.Cell class="truncate max-w-[10ch]">{client.preSharedKey}</Table.Cell>
+				<Table.Cell>
+					<Badge class="bg-background" variant="secondary">{client.ipAllocation.id}</Badge>
+				</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>

src/routes/clients/+page.ts

@@ -0,0 +1,9 @@
+import type { PageLoad } from './$types';
+import type { Clients } from '../api/clients/+server';
+
+export const load: PageLoad = async ({ fetch }) => {
+	const res = await fetch('/api/clients');
+	const { clients } = await res.json() as { clients: Clients };
+
+	return { clients };
+};