feat: user deletion confirmation modal

Replace inline confirm/delete pattern with ConfirmDialog modal

src/lib/components/admin/UserTable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { t } from 'svelte-i18n';
 	import { enhance } from '$app/forms';
+	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
 
 	interface UserWithGroups {
 		id: string;
@@ -30,7 +31,8 @@
 	} = $props();
 
 	let editingUserId = $state<string | null>(null);
-	let confirmDeleteId = $state<string | null>(null);
+	let deleteUser = $state<UserWithGroups | null>(null);
+	let deleteFormEl: HTMLFormElement;
 	let addGroupUserId = $state<string | null>(null);
 	let selectedGroupId = $state('');
 </script>
@@ -132,27 +134,13 @@
 							>
 								{$t('common.edit')}
 							</button>
-							{#if confirmDeleteId === user.id}
-								<form method="POST" action="?/delete" use:enhance={() => {
-									return async ({ update }) => {
-										confirmDeleteId = null;
-										await update();
-									};
-								}}>
-									<input type="hidden" name="userId" value={user.id} />
-									<span class="text-xs text-destructive">{$t('common.confirm')}</span>
-									<button type="submit" class="ml-1 text-xs font-medium text-destructive hover:underline">{$t('common.yes')}</button>
-									<button type="button" onclick={() => (confirmDeleteId = null)} class="ml-1 text-xs text-muted-foreground hover:underline">{$t('common.no')}</button>
-								</form>
-							{:else}
-								<button
-									type="button"
-									onclick={() => (confirmDeleteId = user.id)}
-									class="text-xs text-destructive hover:underline"
-								>
-									{$t('common.delete')}
-								</button>
-							{/if}
+							<button
+								type="button"
+								onclick={() => (deleteUser = user)}
+								class="text-xs text-destructive hover:underline"
+							>
+								{$t('common.delete')}
+							</button>
 						</div>
 					</td>
 				</tr>
@@ -164,3 +152,21 @@
 		<div class="py-8 text-center text-sm text-muted-foreground">{$t('admin.no_users')}</div>
 	{/if}
 </div>
+
+<form method="POST" action="?/delete" use:enhance={() => {
+	return async ({ update }) => {
+		deleteUser = null;
+		await update();
+	};
+}} bind:this={deleteFormEl} class="hidden">
+	<input type="hidden" name="userId" value={deleteUser?.id ?? ''} />
+</form>
+
+{#if deleteUser}
+	<ConfirmDialog
+		title={$t('admin.delete_user_title') ?? 'Delete user'}
+		message={$t('admin.delete_user_message', { values: { name: deleteUser.displayName } }) ?? `Are you sure you want to delete ${deleteUser.displayName}?`}
+		onConfirm={() => deleteFormEl.requestSubmit()}
+		onCancel={() => (deleteUser = null)}
+	/>
+{/if}