Expand website and game trackers

src/routes/blog/+page.svelte

@@ -1,4 +1,10 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+	let hydrated = $state(false);
+	onMount(() => {
+		hydrated = true;
+	});
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import { enhance } from '$app/forms';
 	import { resolve } from '$app/paths';
 	import { calendarDate, relativeTime } from '$lib/relative-time';
@@ -27,19 +33,25 @@
 <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
 	<div class="mb-10 flex flex-wrap items-center justify-between gap-4">
 		<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">blog</h1>
-		{#if data.isAdmin}<details class="relative">
-				<summary class="cursor-pointer text-base underline underline-offset-4">new article</summary>
-				<form
-					method="POST"
-					use:enhance
-					class="absolute top-full right-0 z-10 mt-3 w-72 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
+		{#if data.isAdmin}<Dialog.Root>
+				<Dialog.Trigger disabled={!hydrated} class="underline underline-offset-4"
+					>new article</Dialog.Trigger
 				>
-					<label class="block"
-						>title<Input name="title" required maxlength={256} class="mt-2" /></label
+				<Dialog.Content
+					><Dialog.Header
+						><Dialog.Title>new article</Dialog.Title><Dialog.Description
+							>Give your draft a title, then continue writing.</Dialog.Description
+						></Dialog.Header
 					>
-					<Button type="submit">create draft</Button>
-				</form>
-			</details>{/if}
+					{#if form?.message}<p role="alert" class="text-destructive">{form.message}</p>{/if}
+					<form method="POST" use:enhance class="space-y-4">
+						<label class="block"
+							>title<Input name="title" required maxlength={256} class="mt-2" /></label
+						>
+						<Button type="submit">create draft</Button>
+					</form>
+				</Dialog.Content></Dialog.Root
+			>{/if}
 	</div>
 	{#if form?.message}<p role="alert" class="mb-5 text-red-500">{form.message}</p>{/if}
 	<div class="mb-8 space-y-4">