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>
This commit is contained in:
Marcel
2026-04-07 13:31:07 +02:00
parent 9e13208ccd
commit 002ee1010a
3 changed files with 64 additions and 3 deletions

View File

@@ -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>