add client info page

src/routes/+layout.svelte

@@ -7,8 +7,8 @@
 	const { user } = data;
 
 	function getNavClass(path: string) {
-		return cn("hover:text-foreground/80 transition-colors",
-			$page.url.pathname === path ? "text-foreground" : "text-foreground/60");
+		return cn('hover:text-foreground/80 transition-colors',
+			$page.url.pathname.startsWith(path) ? 'text-foreground' : 'text-foreground/60');
 	}
 </script>
 

src/routes/api/clients/[id]/+server.ts

@@ -0,0 +1,20 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { findClient, mapClientToDetails } from '$lib/server/clients';
+
+export const GET: RequestHandler = async (event) => {
+	if (!event.locals.user) {
+		return error(401, 'Unauthorized');
+	}
+
+	const { id } = event.params;
+	const clientId = parseInt(id);
+	if (isNaN(clientId)) {
+		return error(400, 'Invalid client ID');
+	}
+	const client = await findClient(event.locals.user.id, clientId);
+	if (!client) {
+		return error(404, 'Client not found');
+	}
+	return new Response(JSON.stringify(mapClientToDetails(client)));
+};

src/routes/clients/+page.svelte

@@ -22,8 +22,12 @@
 	</Table.Header>
 	<Table.Body>
 		{#each data.clients as client}
-			<Table.Row class="border-y-2 border-background">
-				<Table.Cell>{client.name}</Table.Cell>
+			<Table.Row class="border-y-2 border-background hover:bg-muted-foreground">
+				<a href={`/clients/${client.id}`} class="contents">
+					<Table.Cell>
+						{client.name}
+					</Table.Cell>
+				</a>
 				<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>

src/routes/clients/[id]/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { LucideClipboardCopy } from 'lucide-svelte';
+
+	const { data }: { data: PageData } = $props();
+
+	let tooltipText = $state('Copy to clipboard');
+
+	function copyToClipboard() {
+		navigator.clipboard.writeText(data.config).then(() => {
+			tooltipText = 'Copied';
+		});
+	}
+
+	function onMouseLeave() {
+		tooltipText = 'Copy to Clipboard';
+	}
+</script>
+
+<svelte:head>
+	<title></title>
+</svelte:head>
+
+<h1>Client: {data.client.name}</h1>
+
+<div class="flex relative bg-accent p-2 rounded-xl overflow-x-scroll">
+	<pre><code>{data.config}</code></pre>
+
+	<!--Copy button for the configuration-->
+	<div class="absolute flex right-2 items-center group">
+		<span class="hidden group-hover:block bg-background text-xs rounded py-1 px-2">
+			{tooltipText}
+		</span>
+		<button class="flex items-center justify-center w-10 h-10 bg-background rounded-xl ml-2"
+						onclick={copyToClipboard}
+						onmouseleave="{onMouseLeave}"
+		>
+			<LucideClipboardCopy />
+		</button>
+	</div>
+</div>

src/routes/clients/[id]/+page.ts

@@ -0,0 +1,11 @@
+import type { PageLoad } from './$types';
+import type { ClientDetails } from '$lib/types/clients';
+import { clientDetailsToConfig } from '$lib/clients';
+
+export const load: PageLoad = async ({ fetch, params }) => {
+	const res = await fetch(`/api/clients/${params.id}`);
+	const client = (await res.json()) as ClientDetails;
+	const config = clientDetailsToConfig(client);
+
+	return { client, config };
+};