refactor(persons): replace inline delete modal with ConfirmService in NameHistoryEditCard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/routes/persons/[id]/edit/NameHistoryEditCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 interface Props {
 	aliases: Array<{
@@ -16,10 +17,12 @@ interface Props {
 
 let { aliases, canWrite, aliasError = null }: Props = $props();
 
+const { confirm } = getConfirmService();
+
 let sorted = $derived([...aliases].sort((a, b) => a.sortOrder - b.sortOrder));
 
-let showDeleteModal = $state(false);
-let deleteTargetId: string | null = $state(null);
+let removeFormEl = $state<HTMLFormElement | null>(null);
+let aliasIdInputEl = $state<HTMLInputElement | null>(null);
 
 function typeLabel(type: string): string {
 	switch (type) {
@@ -34,9 +37,16 @@ function typeLabel(type: string): string {
 	}
 }
 
-function confirmDelete(id: string) {
-	deleteTargetId = id;
-	showDeleteModal = true;
+async function handleDelete(id: string) {
+	const confirmed = await confirm({
+		title: m.person_alias_delete_title(),
+		body: m.person_alias_delete_body(),
+		destructive: true
+	});
+	if (confirmed) {
+		if (aliasIdInputEl) aliasIdInputEl.value = id;
+		removeFormEl!.requestSubmit();
+	}
 }
 </script>
 
@@ -65,7 +75,7 @@ function confirmDelete(id: string) {
 					{#if canWrite}
 						<button
 							type="button"
-							onclick={() => confirmDelete(alias.id)}
+							onclick={() => handleDelete(alias.id)}
 							aria-label="{m.person_alias_btn_delete()} {alias.lastName}"
 							class="ml-4 inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-red-400 transition-colors hover:text-red-600"
 						>
@@ -91,6 +101,11 @@ function confirmDelete(id: string) {
 	{/if}
 
 	{#if canWrite}
+		<!-- Hidden form for alias removal — submitted programmatically after ConfirmService dialog -->
+		<form bind:this={removeFormEl} method="POST" action="?/removeAlias" use:enhance class="hidden">
+			<input bind:this={aliasIdInputEl} type="hidden" name="aliasId" value="" />
+		</form>
+
 		<div class="mt-4 border-t border-line pt-4">
 			<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.person_alias_add_heading()}
@@ -143,43 +158,3 @@ function confirmDelete(id: string) {
 		</div>
 	{/if}
 </div>
-
-{#if showDeleteModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-		<div class="mx-4 max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg">
-			<h3 class="mb-2 font-serif text-lg text-ink">{m.person_alias_delete_title()}</h3>
-			<p class="mb-6 text-sm text-ink-2">{m.person_alias_delete_body()}</p>
-			<div class="flex items-center justify-end gap-3">
-				<button
-					type="button"
-					onclick={() => {
-						showDeleteModal = false;
-						deleteTargetId = null;
-					}}
-					class="rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
-				>
-					{m.btn_cancel()}
-				</button>
-				<form
-					method="POST"
-					action="?/removeAlias"
-					use:enhance={() => {
-						return async ({ update }) => {
-							showDeleteModal = false;
-							deleteTargetId = null;
-							await update();
-						};
-					}}
-				>
-					<input type="hidden" name="aliasId" value={deleteTargetId} />
-					<button
-						type="submit"
-						class="rounded-sm bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
-					>
-						{m.person_alias_btn_delete()}
-					</button>
-				</form>
-			</div>
-		</div>
-	</div>
-{/if}