feat(ui): add alias management to person edit page

NameHistoryEditCard with add form (type dropdown + name fields),
delete with confirmation modal, and IDOR-safe client-side fetch
calls. Placed between Personendaten and DangerZone cards.

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

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

@@ -12,14 +12,17 @@ export async function load({ params, fetch, locals }) {
 
 	const { id } = params;
 	const api = createApiClient(fetch);
-	const result = await api.GET('/api/persons/{id}', { params: { path: { id } } });
+	const [result, aliasesResult] = await Promise.all([
+		api.GET('/api/persons/{id}', { params: { path: { id } } }),
+		api.GET('/api/persons/{id}/aliases', { params: { path: { id } } })
+	]);
 
 	if (!result.response.ok) {
 		const code = (result.error as unknown as { code?: string })?.code;
 		throw error(result.response.status, getErrorMessage(code));
 	}
 
-	return { person: result.data! };
+	return { person: result.data!, aliases: aliasesResult.data ?? [] };
 }
 
 export const actions = {

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

@@ -3,6 +3,7 @@ import { m } from '$lib/paraglide/messages.js';
 import { enhance } from '$app/forms';
 import PersonEditForm from './PersonEditForm.svelte';
 import PersonEditSaveBar from './PersonEditSaveBar.svelte';
+import NameHistoryEditCard from './NameHistoryEditCard.svelte';
 import PersonDangerZone from './PersonDangerZone.svelte';
 
 let { data, form } = $props();
@@ -49,8 +50,15 @@ const person = $derived(data.person);
 			<PersonEditForm person={person} />
 		</div>
 
-		<PersonDangerZone person={person} form={form} />
-
 		<PersonEditSaveBar discardHref="/persons/{person.id}" />
 	</form>
+
+	<NameHistoryEditCard
+		personId={person.id}
+		personFirstName={person.firstName}
+		aliases={data.aliases}
+		canWrite={true}
+	/>
+
+	<PersonDangerZone person={person} form={form} />
 </div>

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

@@ -0,0 +1,231 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+interface Props {
+	personId: string;
+	personFirstName: string;
+	aliases: Array<{
+		id: string;
+		lastName: string;
+		firstName?: string | null;
+		type: string;
+		sortOrder: number;
+	}>;
+	canWrite: boolean;
+}
+
+let { personId, personFirstName, aliases: initialAliases, canWrite }: 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':
+			return m.person_alias_type_BIRTH();
+		case 'WIDOWED':
+			return m.person_alias_type_WIDOWED();
+		case 'DIVORCED':
+			return m.person_alias_type_DIVORCED();
+		default:
+			return m.person_alias_type_OTHER();
+	}
+}
+
+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">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.person_alias_heading()}
+	</h2>
+
+	{#if sorted.length === 0}
+		<p class="text-sm text-ink-2 italic">{m.person_alias_empty()}</p>
+	{:else}
+		<ul class="space-y-2">
+			{#each sorted as alias (alias.id)}
+				<li class="flex items-center justify-between">
+					<span>
+						<span class="text-ink-2 italic">{typeLabel(alias.type)}</span>
+						<span class="font-serif text-ink">
+							{alias.firstName ?? personFirstName}
+							{alias.lastName}
+						</span>
+					</span>
+					{#if canWrite}
+						<button
+							type="button"
+							onclick={() => confirmDelete(alias.id)}
+							aria-label={m.person_alias_btn_delete()}
+							class="ml-4 inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-red-400 transition-colors hover:text-red-600"
+						>
+							<svg
+								class="h-4 w-4"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								aria-hidden="true"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						</button>
+					{/if}
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	{#if canWrite}
+		<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()}
+			</h3>
+
+			{#if addError}
+				<p class="mb-3 text-sm text-red-600">{addError}</p>
+			{/if}
+
+			<div class="grid gap-3 md:grid-cols-2">
+				<label class="block">
+					<span class="text-xs font-medium text-ink-2">{m.person_alias_label_type()}</span>
+					<select
+						bind:value={newType}
+						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"
+					>
+						<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>
+
+				<label class="block">
+					<span class="text-xs font-medium text-ink-2">{m.person_alias_label_last_name()}</span>
+					<input
+						type="text"
+						bind:value={newLastName}
+						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"
+					/>
+				</label>
+
+				<label class="block">
+					<span class="text-xs font-medium text-ink-2">{m.person_alias_label_first_name()}</span>
+					<input
+						type="text"
+						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"
+					/>
+				</label>
+
+				<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>
+		</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-gray-50"
+				>
+					{m.btn_cancel()}
+				</button>
+				<button
+					type="button"
+					onclick={removeAlias}
+					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>
+			</div>
+		</div>
+	</div>
+{/if}