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

feat(timeline): add LetterCard component

Browse Source 
Single archive letter: sender → receiver (Unbekannt fallback for empty names,
REQ-014), title, precision date chip via timelineDateLabel (omitted when null,
REQ-013), linking to exactly /documents/{documentId} with no target (REQ-023).
44px touch target enforced inline + focus-visible ring (REQ-020). OCR/import
text via {...} escaping + whitespace-pre-line, no {@html} (REQ-021).

Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-13 19:30:55 +02:00
parent 6a35e8510b
commit e25001f7c9
2 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/lib/timeline/LetterCard.svelte Normal file
View File

@@ -0,0 +1,42 @@
<script lang="ts">
import * as m from '$lib/paraglide/messages.js';
import { timelineDateLabel } from './dateLabel';
import type { components } from '$lib/generated/api';
type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
/**
* A single archive letter on the timeline: sender → receiver, title, and a
* precision-aware date chip, linking to the document. Names/titles are
* OCR/import-derived — rendered via default `{...}` escaping with
* `whitespace-pre-line` for line breaks (REQ-021); never `{@html}`.
*/
let { entry }: { entry: TimelineEntryDTO } = $props();
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
const receiver = $derived(
entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
);
</script>
<!-- Box layout inline (not just utility classes) so the 44px touch target holds
even before the stylesheet loads — an <a> is inline by default and would
ignore min-height otherwise. WCAG 2.5.5 (REQ-020). -->
<a
href="/documents/{entry.documentId}"
style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
class="rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
>
{#if entry.title}
<span class="font-serif text-sm font-bold whitespace-pre-line text-ink">{entry.title}</span>
{/if}
<span class="mt-0.5 font-sans text-xs text-ink-3">
<span class="font-serif whitespace-pre-line">{sender}</span>
<span aria-hidden="true">→</span>
<span class="font-serif whitespace-pre-line">{receiver}</span>
{#if dateLabel}
<span data-testid="letter-date"> · {dateLabel}</span>
{/if}
</span>
</a>