marcel/familienarchiv
1
0
Fork 0
Code Issues 138 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

feat(person): render precise life dates on cards, hover card, and mention dropdown

Browse Source 
Cards compose aria-hidden * / † glyphs in markup so screen readers only
announce the dates; PersonSummaryDTO list card stays year-shaped by
design (ADR-039). MentionDropdown subtitle wraps instead of truncating
so DAY-precision ranges fit at 320px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-12 18:14:20 +02:00
committed by marcel
parent adac1b1f99
commit 0e7095fee6
10 changed files with 254 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/lib/person/PersonCard.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatLifeDateRange } from '$lib/person/personLifeDates';
import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
import type { components } from '$lib/generated/api';
@@ -125,10 +124,17 @@ const documentCount = $derived(person.documentCount ?? 0);
<p class="font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
{/if}
<!-- Life dates -->
<!-- Life dates — PersonSummaryDTO is year-shaped by design (ADR-039); the glyphs are
aria-hidden so screen readers only announce the years. -->
{#if person.birthYear || person.deathYear}
<p class="font-sans text-sm text-ink-3">
{formatLifeDateRange(person.birthYear, person.deathYear)}
{#if person.birthYear}
<span aria-hidden="true">*</span> {person.birthYear}
{/if}
{#if person.birthYear && person.deathYear}–{/if}
{#if person.deathYear}
<span aria-hidden="true">†</span> {person.deathYear}
{/if}
</p>
{/if}