fix(ui): switch alias operations from client fetch to form actions

Replaces raw client-side fetch with SvelteKit form actions
(addAlias, removeAlias) using the server-side API client for
proper auth handling. 10 new component tests for NameHistoryEditCard.

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

frontend/src/routes/persons/[id]/edit/+page.server.ts

@@ -86,5 +86,53 @@ export const actions = {
 		}
 
 		throw redirect(303, `/persons/${targetPersonId}`);
+	},
+
+	addAlias: async ({ request, params, fetch }) => {
+		const formData = await request.formData();
+		const lastName = formData.get('lastName')?.toString().trim();
+		const firstName = formData.get('firstName')?.toString().trim() || undefined;
+		const type = formData.get('type')?.toString();
+
+		if (!lastName) {
+			return fail(400, { aliasError: 'Nachname ist ein Pflichtfeld.' });
+		}
+		if (!type) {
+			return fail(400, { aliasError: 'Art ist ein Pflichtfeld.' });
+		}
+
+		const api = createApiClient(fetch);
+		const result = await api.POST('/api/persons/{id}/aliases', {
+			params: { path: { id: params.id } },
+			body: { lastName, firstName, type: type as 'BIRTH' | 'WIDOWED' | 'DIVORCED' | 'OTHER' }
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { aliasError: getErrorMessage(code) });
+		}
+
+		return { aliasSuccess: true };
+	},
+
+	removeAlias: async ({ request, params, fetch }) => {
+		const formData = await request.formData();
+		const aliasId = formData.get('aliasId')?.toString();
+
+		if (!aliasId) {
+			return fail(400, { aliasError: 'Alias ID fehlt.' });
+		}
+
+		const api = createApiClient(fetch);
+		const result = await api.DELETE('/api/persons/{id}/aliases/{aliasId}', {
+			params: { path: { id: params.id, aliasId } }
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { aliasError: getErrorMessage(code) });
+		}
+
+		return { aliasSuccess: true };
 	}
 };

frontend/src/routes/persons/[id]/edit/+page.svelte

@@ -51,12 +51,7 @@ const person = $derived(data.person);
 		</div>
 	</form>
 
-	<NameHistoryEditCard
+	<NameHistoryEditCard aliases={data.aliases} canWrite={true} aliasError={form?.aliasError} />
-		personId={person.id}
-		personFirstName={person.firstName}
-		aliases={data.aliases}
-		canWrite={true}
-	/>
 
 	<PersonDangerZone person={person} form={form} />
 

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

@@ -1,10 +1,8 @@
 <script lang="ts">
-import { untrack } from 'svelte';
+import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
 
 interface Props {
-	personId: string;
-	personFirstName: string;
 	aliases: Array<{
 		id: string;
 		lastName: string;
@@ -13,21 +11,16 @@ interface Props {
 		sortOrder: number;
 	}>;
 	canWrite: boolean;
+	aliasError?: string | null;
 }
 
-let { personId, personFirstName, aliases: initialAliases, canWrite }: Props = $props();
+let { aliases, canWrite, aliasError = null }: Props = $props();
 
-let aliases = $state.raw(untrack(() => initialAliases.map((a) => ({ ...a }))));
 let sorted = $derived([...aliases].sort((a, b) => a.sortOrder - b.sortOrder));
 
 let showDeleteModal = $state(false);
 let deleteTargetId: string | null = $state(null);
 
-let newType = $state('BIRTH');
-let newLastName = $state('');
-let newFirstName = $state('');
-let addError = $state('');
-
 function typeLabel(type: string): string {
 	switch (type) {
 		case 'BIRTH':
@@ -45,62 +38,6 @@ function confirmDelete(id: string) {
 	deleteTargetId = id;
 	showDeleteModal = true;
 }
-
-async function removeAlias() {
-	if (!deleteTargetId) return;
-	const aliasId = deleteTargetId;
-
-	try {
-		const res = await fetch(`/api/persons/${personId}/aliases/${aliasId}`, {
-			method: 'DELETE'
-		});
-
-		if (!res.ok) {
-			const body = await res.json().catch(() => null);
-			addError = body?.message ?? res.statusText;
-			return;
-		}
-
-		aliases = aliases.filter((a) => a.id !== aliasId);
-	} catch (e) {
-		addError = String(e);
-	} finally {
-		showDeleteModal = false;
-		deleteTargetId = null;
-	}
-}
-
-async function addAlias() {
-	addError = '';
-	const lastName = newLastName.trim();
-	if (!lastName) return;
-
-	try {
-		const res = await fetch(`/api/persons/${personId}/aliases`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({
-				type: newType,
-				lastName,
-				firstName: newFirstName.trim() || null
-			})
-		});
-
-		if (!res.ok) {
-			const body = await res.json().catch(() => null);
-			addError = body?.message ?? res.statusText;
-			return;
-		}
-
-		const created = await res.json();
-		aliases = [...aliases, created];
-		newType = 'BIRTH';
-		newLastName = '';
-		newFirstName = '';
-	} catch (e) {
-		addError = String(e);
-	}
-}
 </script>
 
 <div class="mt-6 rounded-sm border border-line bg-surface p-6 shadow-sm">
@@ -108,6 +45,10 @@ async function addAlias() {
 		{m.person_alias_heading()}
 	</h2>
 
+	{#if aliasError}
+		<p class="mb-3 text-sm text-red-600">{aliasError}</p>
+	{/if}
+
 	{#if sorted.length === 0}
 		<p class="text-sm text-ink-2 italic">{m.person_alias_empty()}</p>
 	{:else}
@@ -117,7 +58,7 @@ async function addAlias() {
 					<span>
 						<span class="text-ink-2 italic">{typeLabel(alias.type)}</span>
 						<span class="font-serif text-ink">
-							{alias.firstName ?? personFirstName}
+							{#if alias.firstName}{alias.firstName}{/if}
 							{alias.lastName}
 						</span>
 					</span>
@@ -155,52 +96,50 @@ async function addAlias() {
 				{m.person_alias_add_heading()}
 			</h3>
 
-			{#if addError}
+			<form method="POST" action="?/addAlias" use:enhance>
-				<p class="mb-3 text-sm text-red-600">{addError}</p>
+				<div class="grid gap-3 md:grid-cols-2">
-			{/if}
+					<label class="block">
+						<span class="text-xs font-medium text-ink-2">{m.person_alias_label_type()}</span>
+						<select
+							name="type"
+							class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-primary focus:outline-none"
+						>
+							<option value="BIRTH">{m.person_alias_type_BIRTH()}</option>
+							<option value="WIDOWED">{m.person_alias_type_WIDOWED()}</option>
+							<option value="DIVORCED">{m.person_alias_type_DIVORCED()}</option>
+							<option value="OTHER">{m.person_alias_type_OTHER()}</option>
+						</select>
+					</label>
 
-			<div class="grid gap-3 md:grid-cols-2">
+					<label class="block">
-				<label class="block">
+						<span class="text-xs font-medium text-ink-2">{m.person_alias_label_last_name()}</span>
-					<span class="text-xs font-medium text-ink-2">{m.person_alias_label_type()}</span>
+						<input
-					<select
+							type="text"
-						bind:value={newType}
+							name="lastName"
-						class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-brand-navy focus:outline-none"
+							required
-					>
+							class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-primary focus:outline-none"
-						<option value="BIRTH">{m.person_alias_type_BIRTH()}</option>
+						/>
-						<option value="WIDOWED">{m.person_alias_type_WIDOWED()}</option>
+					</label>
-						<option value="DIVORCED">{m.person_alias_type_DIVORCED()}</option>
-						<option value="OTHER">{m.person_alias_type_OTHER()}</option>
-					</select>
-				</label>
 
-				<label class="block">
+					<label class="block">
-					<span class="text-xs font-medium text-ink-2">{m.person_alias_label_last_name()}</span>
+						<span class="text-xs font-medium text-ink-2">{m.person_alias_label_first_name()}</span>
-					<input
+						<input
-						type="text"
+							type="text"
-						bind:value={newLastName}
+							name="firstName"
-						class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-brand-navy focus:outline-none"
+							class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-primary focus:outline-none"
-					/>
+						/>
-				</label>
+					</label>
 
-				<label class="block">
+					<div class="flex items-end">
-					<span class="text-xs font-medium text-ink-2">{m.person_alias_label_first_name()}</span>
+						<button
-					<input
+							type="submit"
-						type="text"
+							class="w-full rounded-sm bg-primary px-4 py-2 text-sm font-medium text-primary-fg transition-colors hover:bg-primary/80"
-						bind:value={newFirstName}
+						>
-						class="mt-1 block w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink focus:border-brand-navy focus:outline-none"
+							{m.person_alias_btn_add()}
-					/>
+						</button>
-				</label>
+					</div>
-
-				<div class="flex items-end">
-					<button
-						type="button"
-						onclick={addAlias}
-						class="w-full rounded-sm bg-brand-navy px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-brand-navy/90"
-					>
-						{m.person_alias_btn_add()}
-					</button>
 				</div>
-			</div>
+			</form>
 		</div>
 	{/if}
 </div>
@@ -213,18 +152,33 @@ async function addAlias() {
 			<div class="flex items-center justify-end gap-3">
 				<button
 					type="button"
-					onclick={() => { showDeleteModal = false; deleteTargetId = null; }}
+					onclick={() => {
-					class="rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-gray-50"
+						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>
-				<button
+				<form
-					type="button"
+					method="POST"
-					onclick={removeAlias}
+					action="?/removeAlias"
-					class="rounded-sm bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
+					use:enhance={() => {
+						return async ({ update }) => {
+							showDeleteModal = false;
+							deleteTargetId = null;
+							await update();
+						};
+					}}
 				>
-					{m.person_alias_btn_delete()}
+					<input type="hidden" name="aliasId" value={deleteTargetId} />
-				</button>
+					<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>

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

@@ -0,0 +1,86 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import NameHistoryEditCard from './NameHistoryEditCard.svelte';
+
+const aliases = [
+	{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 },
+	{ id: 'a2', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 1 }
+];
+
+describe('NameHistoryEditCard', () => {
+	it('should render alias rows when aliases exist', async () => {
+		render(NameHistoryEditCard, { aliases, canWrite: true });
+
+		await expect.element(page.getByText('de Gruyter')).toBeInTheDocument();
+		await expect.element(page.getByText('Schmidt')).toBeInTheDocument();
+	});
+
+	it('should show empty state when no aliases', async () => {
+		render(NameHistoryEditCard, { aliases: [], canWrite: true });
+
+		const emptyText = document.querySelector('.italic');
+		expect(emptyText).not.toBeNull();
+	});
+
+	it('should show add form when canWrite is true', async () => {
+		render(NameHistoryEditCard, { aliases: [], canWrite: true });
+
+		const form = document.querySelector('form[action="?/addAlias"]');
+		expect(form).not.toBeNull();
+	});
+
+	it('should hide add form when canWrite is false', async () => {
+		render(NameHistoryEditCard, { aliases: [], canWrite: false });
+
+		const form = document.querySelector('form[action="?/addAlias"]');
+		expect(form).toBeNull();
+	});
+
+	it('should hide delete buttons when canWrite is false', async () => {
+		render(NameHistoryEditCard, { aliases, canWrite: false });
+
+		const deleteButtons = document.querySelectorAll('button[aria-label*="Entfernen"]');
+		expect(deleteButtons.length).toBe(0);
+	});
+
+	it('should show delete buttons when canWrite is true', async () => {
+		render(NameHistoryEditCard, { aliases, canWrite: true });
+
+		const deleteButtons = document.querySelectorAll('button[aria-label*="Entfernen"]');
+		expect(deleteButtons.length).toBe(2);
+	});
+
+	it('should include alias name in delete button aria-label', async () => {
+		render(NameHistoryEditCard, { aliases: [aliases[0]], canWrite: true });
+
+		const btn = document.querySelector('button[aria-label*="de Gruyter"]');
+		expect(btn).not.toBeNull();
+	});
+
+	it('should show delete modal when delete button is clicked', async () => {
+		render(NameHistoryEditCard, { aliases: [aliases[0]], canWrite: true });
+
+		const deleteBtn = document.querySelector('button[aria-label*="de Gruyter"]')!;
+		deleteBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+		await expect.element(page.getByText('Alias entfernen?')).toBeInTheDocument();
+	});
+
+	it('should show alias error when provided', async () => {
+		render(NameHistoryEditCard, {
+			aliases: [],
+			canWrite: true,
+			aliasError: 'Something went wrong'
+		});
+
+		await expect.element(page.getByText('Something went wrong')).toBeInTheDocument();
+	});
+
+	it('should have required attribute on lastName input', async () => {
+		render(NameHistoryEditCard, { aliases: [], canWrite: true });
+
+		const input = document.querySelector('input[name="lastName"]') as HTMLInputElement;
+		expect(input.required).toBe(true);
+	});
+});