client page: add tutorial, layout ui improvements

src/routes/+layout.svelte

@@ -14,7 +14,7 @@
 	}
 </script>
 
-<header class="p-4 sm:flex">
+<header class="sm:flex">
 	<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
 	<nav>
 		<ul class="flex items-center gap-6 text-sm">
@@ -27,13 +27,13 @@
 		</ul>
 	</nav>
 </header>
-<main class="flex flex-grow flex-col p-4">
+<main class="flex flex-grow flex-col gap-4">
 	{@render children()}
 </main>
 
 <!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
 <!--Some shenanings needed to be done to get the footer position to stick correctly,
 didn't work with display: contents-->
-<footer class="relative inset-x-0 bottom-0 p-4 text-center">
+<footer class="relative inset-x-0 bottom-0 text-center">
 	<p>&copy; 2024</p>
 </footer>

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { AuthForm } from '$lib/components/app/auth-form';
 	import { Button } from '$lib/components/ui/button';
+	import { AuthForm } from '$lib/components/app/auth-form';
 
 	const { data } = $props();
 	const { user } = data;
@@ -24,6 +24,15 @@
 			<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
 		</p>
 	</section>
+	<!--	<section id="using-wireguard">-->
+	<!--		<details class="mt-10">-->
+	<!--			<summary class="relative flex flex-col gap-2 pl-10">-->
+	<!--				<h2 class="text-xl font-semibold">Using WireGuard</h2>-->
+	<!--				To use VPGen, you need to install the WireGuard app on your device.-->
+	<!--			</summary>-->
+	<!--			<WireguardGuide />-->
+	<!--		</details>-->
+	<!--	</section>-->
 {:else}
 	<AuthForm class="p-4" />
 	<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
@@ -33,4 +42,14 @@
 	p {
 		@apply my-2;
 	}
+
+	/*
+	summary::before {
+		content: '▶';
+		@apply absolute -left-0;
+	}
+	details[open] summary::before {
+		content: '▼';
+	}
+	*/
 </style>

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

@@ -2,6 +2,7 @@
 	import type { PageData } from './$types';
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
+	import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
 
 	const { data }: { data: PageData } = $props();
 
@@ -19,15 +20,20 @@
 </script>
 
 <svelte:head>
-	<title></title>
+	<title>{data.client.name}</title>
 </svelte:head>
 
-<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
+<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
 
-<div class="flex flex-wrap gap-4">
+<section id="client-configuration" class="flex flex-wrap gap-4">
 	<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
 
 	<div class="overflow-hidden rounded-lg">
 		{@html qrCode.svg()}
 	</div>
-</div>
+</section>
+<section id="usage" class="flex flex-col gap-2">
+	<h2 class="text-xl font-semibold">Usage</h2>
+	<p>To use VPGen, you need to install the WireGuard app on your device.</p>
+	<WireguardGuide />
+</section>