devices page: implement delete option

src/routes/devices/+page.server.ts

@@ -1,13 +1,13 @@
 import type { Actions } from './$types';
 import { createDevice } from '$lib/server/devices';
-import { error, redirect } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 
 export const actions = {
 	create: async (event) => {
 		if (!event.locals.user) return error(401, 'Unauthorized');
 		const formData = await event.request.formData();
 		const name = formData.get('name');
-		if (typeof name !== 'string' || name.trim() === '') return error(400, 'Invalid name');
+		if (typeof name !== 'string' || name.trim() === '') return fail(400, { name, invalid: true });
 		const res = await createDevice({
 			name: name.trim(),
 			user: event.locals.user,

src/routes/devices/+page.svelte

@@ -8,6 +8,7 @@
 	import type { PageData } from './$types';
 	import { Label } from '$lib/components/ui/label';
 	import { page } from '$app/state';
+	import DeleteDevice from './delete-device.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -56,6 +57,9 @@
 						<Badge class="select-auto bg-background" variant="secondary">{ip}</Badge>
 					{/each}
 				</Table.Cell>
+				<Table.Cell class="py-0">
+					<DeleteDevice device={device} />
+				</Table.Cell>
 			</Table.Row>
 		{/each}
 	</Table.Body>
@@ -86,11 +90,11 @@
 					class="max-w-[20ch]"
 				/>
 			</div>
-			<Dialog.Footer>
-				<Button type="submit" disabled={submitted}>
-					{#if submitted}
-						<LucideLoaderCircle class="size-4 mr-2 animate-spin" />
-					{/if}
+			<Dialog.Footer class="gap-y-2">
+				{#if submitted}
+					<LucideLoaderCircle class="size-4 animate-spin place-self-center" />
+				{/if}
+				<Button type="submit" disabled={submitted} class="">
 					Add
 				</Button>
 			</Dialog.Footer>

src/routes/devices/[id]/+page.server.ts

@@ -0,0 +1,23 @@
+import { error, redirect } from '@sveltejs/kit';
+import { deleteDevice } from '$lib/server/devices/delete';
+import type { Actions } from './$types';
+
+export const actions = {
+	delete: async (event) => {
+		if (!event.locals.user) return error(401, 'Unauthorized');
+
+		const deviceId = Number.parseInt(event.params.id);
+		if (Number.isNaN(deviceId)) return error(400, 'Invalid device id');
+
+		const res = await deleteDevice(event.locals.user.id, deviceId);
+		switch (res._tag) {
+			case 'ok': {
+				return redirect(303, '/devices');
+			}
+			case 'err': {
+				const [status, message] = res.error;
+				return error(status, message);
+			}
+		}
+	},
+} satisfies Actions;

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

@@ -3,6 +3,7 @@
 	import QRCode from 'qrcode-svg';
 	import { CodeSnippet } from '$lib/components/app/code-snippet';
 	import { WireguardGuide } from '$lib/components/app/wireguard-guide';
+	import DeleteDevice from '../delete-device.svelte';
 
 	const { data }: { data: PageData } = $props();
 
@@ -25,7 +26,10 @@
 	<title>{data.device.name}</title>
 </svelte:head>
 
-<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+<div class="flex justify-between">
+	<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.device.name}</h1>
+	<DeleteDevice device={data.device} />
+</div>
 
 <section id="device-configuration" class="flex flex-wrap items-center justify-center gap-4">
 	<CodeSnippet data={data.config} filename={deviceWgCleanedName} copy download />

src/routes/devices/delete-device.svelte

@@ -0,0 +1,37 @@
+<script>
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { LucideLoaderCircle, LucideTrash } from 'lucide-svelte';
+
+	const { device } = $props();
+	let submitted = $state(false);
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger class={buttonVariants({ variant: 'destructive', size: 'sm', class: 'bg-accent hover:bg-destructive' })}>
+		<LucideTrash />
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<form class="contents" method="post" action="/devices/{device.id}?/delete"
+					onsubmit={() => submitted = true}
+		>
+			<Dialog.Header>
+				Are you sure you want to permanently delete "{device.name}"?
+			</Dialog.Header>
+			You will no longer be able to connect from this device.
+			<Dialog.Footer class="gap-y-2">
+				{#if submitted}
+					<LucideLoaderCircle class="size-4 animate-spin place-self-center" />
+				{/if}
+				<Button type="submit" variant="destructive" disabled={submitted}>
+					Delete
+				</Button>
+				<Dialog.Close asChild let:builder>
+					<button class={buttonVariants()} disabled={submitted} use:builder.action {...builder}>
+						Cancel
+					</button>
+				</Dialog.Close>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>