dbef0e1e60
break-words on sender/receiver/title so a 25+char correspondent name cannot force horizontal overflow on a 320px phone (REQ-005). Refs #779 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
45 lines
1.9 KiB
Svelte
45 lines
1.9 KiB
Svelte
<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 break-words whitespace-pre-line text-ink"
|
|
>{entry.title}</span
|
|
>
|
|
{/if}
|
|
<span class="mt-0.5 font-sans text-xs break-words 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>
|