From 002ee1010a0dab6982751d3a5277f5f7684df596 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 7 Apr 2026 13:31:07 +0200
Subject: [PATCH] feat(ui): add Namensverlauf read-only card to person detail
 page

Shows historical name aliases in the left column with type labels
and firstName fallback. Fetches aliases in parallel with other data.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/persons/[id]/+page.server.ts   |  6 ++-
 frontend/src/routes/persons/[id]/+page.svelte |  8 ++-
 .../persons/[id]/NameHistoryCard.svelte       | 53 +++++++++++++++++++
 3 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/routes/persons/[id]/NameHistoryCard.svelte

diff --git a/frontend/src/routes/persons/[id]/+page.server.ts b/frontend/src/routes/persons/[id]/+page.server.ts
index 6b7e8f79..3c5f0f5c 100644
--- a/frontend/src/routes/persons/[id]/+page.server.ts
+++ b/frontend/src/routes/persons/[id]/+page.server.ts
@@ -11,10 +11,11 @@ export async function load({ params, fetch, locals }) {
 			g.permissions.includes('WRITE_ALL')
 		) ?? false;
 
-	const [personResult, sentDocsResult, receivedDocsResult] = await Promise.all([
+	const [personResult, sentDocsResult, receivedDocsResult, aliasesResult] = await Promise.all([
 		api.GET('/api/persons/{id}', { params: { path: { id } } }),
 		api.GET('/api/persons/{id}/documents', { params: { path: { id } } }),
-		api.GET('/api/persons/{id}/received-documents', { params: { path: { id } } })
+		api.GET('/api/persons/{id}/received-documents', { params: { path: { id } } }),
+		api.GET('/api/persons/{id}/aliases', { params: { path: { id } } })
 	]);
 
 	if (!personResult.response.ok) {
@@ -26,6 +27,7 @@ export async function load({ params, fetch, locals }) {
 		person: personResult.data!,
 		sentDocuments: sentDocsResult.data ?? [],
 		receivedDocuments: receivedDocsResult.data ?? [],
+		aliases: aliasesResult.data ?? [],
 		canWrite
 	};
 }
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index e14ea2a5..a4e6380b 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { SvelteMap } from 'svelte/reactivity';
 import PersonCard from './PersonCard.svelte';
+import NameHistoryCard from './NameHistoryCard.svelte';
 import CoCorrespondentsList from './CoCorrespondentsList.svelte';
 import PersonDocumentList from './PersonDocumentList.svelte';
 
@@ -65,9 +66,14 @@ const coCorrespondents = $derived.by(() => {
 
 	<!-- 2-column layout on large screens -->
 	<div class="lg:grid lg:grid-cols-[35%_65%] lg:gap-8">
-		<!-- Left column: Person card -->
+		<!-- Left column: Person card + name history -->
 		<div>
 			<PersonCard person={person} canWrite={data.canWrite} />
+			{#if data.aliases.length > 0}
+				<div class="mt-6">
+					<NameHistoryCard aliases={data.aliases} personFirstName={person.firstName} />
+				</div>
+			{/if}
 		</div>
 
 		<!-- Right column: correspondents + documents -->
diff --git a/frontend/src/routes/persons/[id]/NameHistoryCard.svelte b/frontend/src/routes/persons/[id]/NameHistoryCard.svelte
new file mode 100644
index 00000000..84e34852
--- /dev/null
+++ b/frontend/src/routes/persons/[id]/NameHistoryCard.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+interface Props {
+	aliases: Array<{
+		id: string;
+		lastName: string;
+		firstName?: string | null;
+		type: string;
+		sortOrder: number;
+	}>;
+	personFirstName: string;
+}
+
+let { aliases, personFirstName }: Props = $props();
+
+let sorted = $derived([...aliases].sort((a, b) => a.sortOrder - b.sortOrder));
+
+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();
+	}
+}
+</script>
+
+<div class="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>
+					<span class="text-ink-2 italic">{typeLabel(alias.type)}</span>
+					<span class="font-serif text-ink">
+						{alias.firstName ?? personFirstName}
+						{alias.lastName}
+					</span>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>