Expand website and game trackers

src/routes/projects/animaldex/+page.svelte

@@ -7,7 +7,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import PawPrint from 'lucide-svelte/icons/paw-print';
-	import X from 'lucide-svelte/icons/x';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import type { Map as MaptilerMap, Marker as MaptilerMarker } from '@maptiler/sdk';
 
 	interface TrailPoint {
@@ -35,7 +35,6 @@
 	}
 
 	let mapContainer: HTMLDivElement;
-	let detailsDialog: HTMLDialogElement;
 	let map: MaptilerMap | null = null;
 	let destroyed = false;
 	let htmlMarkers: MaptilerMarker[] = [];
@@ -79,18 +78,6 @@
 		openAnimal(animalId);
 	}
 
-	$effect(() => {
-		if (page.state.animal) {
-			if (!detailsDialog.open) detailsDialog.showModal();
-		} else if (detailsDialog.open) {
-			detailsDialog.close();
-		}
-	});
-
-	function onDialogClose() {
-		if (page.state.animal) history.back();
-	}
-
 	onMount(() => {
 		(async () => {
 			try {
@@ -417,34 +404,28 @@
 	{/if}
 </section>
 
-<dialog
-	bind:this={detailsDialog}
-	onclose={onDialogClose}
-	onclick={(event) => {
-		if (event.target === detailsDialog) detailsDialog.close();
+<Dialog.Root
+	open={!!page.state.animal}
+	onOpenChange={(open) => {
+		if (!open && page.state.animal) history.back();
 	}}
-	aria-label={page.state.animal
-		? page.state.animal.animalName || page.state.animal.species
-		: 'Animal details'}
-	class="m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-5xl overflow-y-auto rounded-xl border border-[var(--site-border)] bg-[var(--site-bg)] p-0 text-[var(--site-text)] backdrop:bg-black/70"
 >
-	{#if page.state.animal}
-		<div class="sticky top-0 z-10 flex justify-end gap-4 bg-[var(--site-bg)] px-5 py-3 sm:px-8">
+	<Dialog.Content class="max-h-[90dvh] overflow-y-auto sm:max-w-5xl">
+		<Dialog.Header>
+			<Dialog.Title
+				>{page.state.animal?.animalName ||
+					page.state.animal?.species ||
+					'Animal details'}</Dialog.Title
+			>
+			<Dialog.Description>Sightings, photos and the story so far.</Dialog.Description>
+		</Dialog.Header>
+		{#if page.state.animal}
 			<a
 				href={resolve('/projects/animaldex/[id=integer]', { id: String(page.state.animal.id) })}
 				data-sveltekit-reload
-				class="text-base underline underline-offset-4">open page</a
+				class="underline underline-offset-4">open page</a
 			>
-			<button
-				type="button"
-				onclick={() => detailsDialog.close()}
-				aria-label="Close animal details"
-				class="flex h-8 w-8 items-center justify-center rounded hover:bg-[var(--site-surface)]"
-				><X size={20} aria-hidden="true" /></button
-			>
-		</div>
-		<div class="px-5 pb-8 sm:px-8">
 			<AnimalDetails animal={page.state.animal} />
-		</div>
-	{/if}
-</dialog>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>