add client info page

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 };
+};