Expand website and game trackers

src/routes/projects/language-learner/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	let resetTarget = $state<{ code: LangCode; name: string } | null>(null);
 	import { resolve } from '$app/paths';
 	import ArrowRight from 'lucide-svelte/icons/arrow-right';
 	import Flame from 'lucide-svelte/icons/flame';
@@ -40,7 +42,7 @@
 	}
 
 	function reset(code: LangCode, name: string) {
-		if (confirm(`Delete all ${name} progress? This can't be undone.`)) progress.reset(code);
+		resetTarget = { code, name };
 	}
 </script>
 
@@ -247,3 +249,25 @@
 		{/if}
 	</div>
 </section>
+
+<AlertDialog.Root
+	open={!!resetTarget}
+	onOpenChange={(open) => {
+		if (!open) resetTarget = null;
+	}}
+>
+	<AlertDialog.Content
+		><AlertDialog.Header
+			><AlertDialog.Title>Reset {resetTarget?.name}?</AlertDialog.Title><AlertDialog.Description
+				>This deletes all progress for this language and cannot be undone.</AlertDialog.Description
+			></AlertDialog.Header
+		><AlertDialog.Footer
+			><AlertDialog.Cancel>Cancel</AlertDialog.Cancel><AlertDialog.Action
+				onclick={() => {
+					if (resetTarget) progress.reset(resetTarget.code);
+					resetTarget = null;
+				}}>Reset progress</AlertDialog.Action
+			></AlertDialog.Footer
+		></AlertDialog.Content
+	>
+</AlertDialog.Root>