marcel/familienarchiv
1
0
Fork 0
Code Issues 109 Pull Requests Actions 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

24
frontend/src/lib/person/PersonHoverCard.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { m } from '$lib/paraglide/messages.js';
import { formatLifeDateRange } from '$lib/person/personLifeDates';
import { formatLifeDate } from '$lib/person/personLifeDates';
import { chipLabel, otherName } from '$lib/person/relationshipLabels';
import type { components } from '$lib/generated/api';
import type { LoadState } from '$lib/person/personHoverCard';
@@ -31,9 +31,14 @@ const familyChips = $derived(
: []
);
const dateRange = $derived(
const birthText = $derived(
state.status === 'loaded'
? formatLifeDateRange(state.person.birthYear, state.person.deathYear)
? formatLifeDate(state.person.birthDate, state.person.birthDatePrecision)
: ''
);
const deathText = $derived(
state.status === 'loaded'
? formatLifeDate(state.person.deathDate, state.person.deathDatePrecision)
: ''
);
@@ -123,8 +128,17 @@ const showMaidenName = $derived(
<div data-testid="person-hover-card-content" class="content">
<div class="header">
<div class="name" data-testid="person-hover-card-name">{state.person.displayName}</div>
{#if dateRange}
<div class="dates" data-testid="person-hover-card-dates">{dateRange}</div>
{#if birthText || deathText}
<!-- Glyphs aria-hidden so screen readers only announce the dates -->
<div class="dates" data-testid="person-hover-card-dates">
{#if birthText}
<span aria-hidden="true">*</span> {birthText}
{/if}
{#if birthText && deathText}–{/if}
{#if deathText}
<span aria-hidden="true">†</span> {deathText}
{/if}
</div>
{/if}
{#if showMaidenName}
<div class="maiden" data-testid="person-hover-card-maiden">