client page ui improvements, refactor code-snippet into separate component

src/app.css

@@ -26,6 +26,7 @@
     --secondary-foreground: 222.2 47.4% 11.2%;
 
     --accent: 210 26% 86%;
+    --accent-light: 210 26% 86%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
     --destructive: 0 72.2% 50.6%;

src/lib/components/app/code-snippet/code-snippet.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
+
+	const {
+		data,
+		filename,
+		copy,
+		download,
+	}: {
+		data: string;
+		filename?: string;
+		copy?: boolean;
+		download?: boolean;
+	} = $props();
+
+	let wasCopied = $state(false);
+
+	async function copyToClipboard() {
+		await navigator.clipboard.writeText(data);
+		wasCopied = true;
+	}
+</script>
+
+<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent">
+	<div class="flex items-start overflow-x-auto p-2">
+		<pre><code>{data}</code></pre>
+
+		{#if copy || download}
+			<!--Copy button-->
+			<!--Flex reverse for peer hover to work properly-->
+			<div class="absolute right-2 flex flex-col gap-2">
+				{#if copy}
+					<div class="flex flex-row-reverse items-center gap-1">
+						<Button
+							class="peer size-10 p-2"
+							onclick={copyToClipboard}
+							onmouseleave={() => (wasCopied = false)}
+						>
+							<LucideClipboardCopy />
+						</Button>
+						<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
+							{wasCopied ? 'Copied' : 'Copy to clipboard'}
+						</span>
+					</div>
+				{/if}
+
+				{#if download}
+					<div class="flex flex-row-reverse items-center gap-1">
+						<a
+							class="peer contents"
+							href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data)}`}
+							download={filename}
+						>
+							<Button class="size-10 p-2">
+								<LucideDownload />
+							</Button>
+						</a>
+						<span class="hidden rounded-lg bg-background p-2 text-xs peer-hover:block">
+							Download
+						</span>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+</div>

src/lib/components/app/code-snippet/index.ts

@@ -0,0 +1,7 @@
+import Root from "./code-snippet.svelte";
+
+export {
+	Root,
+	//
+	Root as CodeSnippet,
+};

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

@@ -1,71 +1,33 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { LucideClipboardCopy, LucideDownload } from 'lucide-svelte';
-	import { Button } from '$lib/components/ui/button';
 	import QRCode from 'qrcode-svg';
+	import { CodeSnippet } from '$lib/components/app/code-snippet';
 
 	const { data }: { data: PageData } = $props();
 
 	// Clean the client name for the file name,
 	// things can break otherwise (too long or invalid characters)
 	// https://github.com/pirate/wireguard-docs
-	const clientWgCleanedName = data.client.name.slice(0, 15).replace(/[^a-zA-Z0-9_=+.-]/g, '_') + '.conf';
+	const clientWgCleanedName =
+		data.client.name.slice(0, 15).replace(/[^a-zA-Z0-9_=+.-]/g, '_') + '.conf';
 
-	let configWasCopied = $state(false);
 	let qrCode = new QRCode({
 		content: data.config,
 		join: true,
+		background: 'hsl(var(--accent-light))',
 	});
-
-	async function copyToClipboard() {
-		await navigator.clipboard.writeText(data.config);
-		configWasCopied = true;
-	}
-
 </script>
 
 <svelte:head>
 	<title></title>
 </svelte:head>
 
-<h1 class="bg-accent text-lg w-fit rounded-lg p-2 mb-4">{data.client.name}</h1>
+<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
 
 <div class="flex flex-wrap gap-4">
-	<div class="relative bg-accent rounded-lg max-w-fit overflow-x-hidden">
+	<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
-		<div class="flex items-start p-2 overflow-x-auto">
-			<pre><code>{data.config}</code></pre>
 
-			<!--Copy button for the configuration-->
+	<div class="overflow-hidden rounded-lg">
-			<!--Flex reverse for peer hover to work properly-->
-			<div class="absolute flex flex-col gap-2 right-2">
-				<div class="group flex flex-row-reverse items-center gap-1">
-					<Button class="peer size-10 p-2"
-									onclick={copyToClipboard}
-									onmouseleave={() => configWasCopied = false}
-					>
-						<LucideClipboardCopy />
-					</Button>
-					<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
-						{configWasCopied ? 'Copied' : 'Copy config to clipboard'}
-					</span>
-				</div>
-
-				<div class="group flex flex-row-reverse items-center gap-1">
-					<a class="peer contents" href={`data:application/octet-stream;charset=utf-8,${encodeURIComponent(data.config)}`}
-						 download={clientWgCleanedName}>
-						<Button class="size-10 p-2">
-							<LucideDownload />
-						</Button>
-					</a>
-					<span class="hidden peer-hover:block bg-background text-xs rounded-lg p-2">
-						Download config file
-					</span>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div class="rounded-lg overflow-hidden">
 		{@html qrCode.svg()}
 	</div>
 </div>

src/routes/user/+page.svelte

@@ -2,6 +2,7 @@
 	import { invalidate, invalidateAll } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import { LucideLoaderCircle, LucideLogOut, LucideRefreshCw } from 'lucide-svelte';
+	import { CodeSnippet } from '$lib/components/app/code-snippet/index.js';
 
 	let { data } = $props();
 	let isLoadingSignOut = $state(false);
@@ -16,25 +17,28 @@
 	}
 </script>
 
-<svelte:head>
+<div class="flex flex-col gap-2">
-	<title>User Profile</title>
+	<CodeSnippet data={JSON.stringify(data.user, null, 2)} />
-</svelte:head>
 
-<pre>{JSON.stringify(data.user, null, 2)}</pre>
+	<div class="flex gap-2">
-
+		<Button onclick={refetch}>
-<div class="flex gap-2">
+			<LucideRefreshCw class="mr-2 h-4 w-4" />
-	<Button onclick={refetch}>
+			Invalidate Data
-		<LucideRefreshCw class="mr-2 h-4 w-4" />
-		Invalidate Data
-	</Button>
-	<form class="inline-flex" method="post" action="/auth?/logout">
-		<Button type="submit" onclick={() => {isLoadingSignOut = true}}>
-			{#if isLoadingSignOut}
-				<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
-			{:else}
-				<LucideLogOut class="mr-2 h-4 w-4" />
-			{/if}
-			Sign Out
 		</Button>
-	</form>
+		<form class="inline-flex" method="post" action="/auth?/logout">
+			<Button
+				type="submit"
+				onclick={() => {
+					isLoadingSignOut = true;
+				}}
+			>
+				{#if isLoadingSignOut}
+					<LucideLoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+				{:else}
+					<LucideLogOut class="mr-2 h-4 w-4" />
+				{/if}
+				Sign Out
+			</Button>
+		</form>
+	</div>
 </div>