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

feat(timeline): give LetterCard an event variant and chip suppression

Browse Source 
Add a `variant="event"` that marks the card `.lcard.ev` for Ereignis-mode event
clusters (#827, REQ-014) and a `suppressTagChip` that hides the per-letter
TagChip inside its own Thema bucket where the header already conveys the topic
(REQ-017). Datum/Ereignis keep the #838 per-letter chip behaviour.

Refs #827
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-15 10:37:54 +02:00
parent 99528e6bea
commit 0ae4e9a311
2 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/lib/timeline/LetterCard.svelte
View File

@@ -12,9 +12,19 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
* 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 the raw-HTML directive.
*
* In Ereignis mode the card sits inside an event cluster and renders as the
* `.lcard.ev` variant (#827, REQ-014). In Thema mode the per-letter tag chip is
* suppressed inside its own root-tag bucket, where the bucket header already
* carries the topic (`suppressTagChip`, REQ-017).
*/
let { entry }: { entry: TimelineEntryDTO } = $props();
let {
entry,
variant = 'plain',
suppressTagChip = false
}: { entry: TimelineEntryDTO; variant?: 'plain' | 'event'; suppressTagChip?: boolean } = $props();
const isEventVariant = $derived(variant === 'event');
const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
const receiver = $derived(
@@ -28,7 +38,8 @@ const receiver = $derived(
<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"
class="lcard 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"
class:ev={isEventVariant}
>
{#if entry.title}
<!-- ✉ + sr-only label are static chrome rendered as sibling nodes, NEVER
@@ -47,9 +58,10 @@ const receiver = $derived(
<span data-testid="letter-date"> · {dateLabel}</span>
{/if}
</span>
{#if entry.rootTagName}
{#if entry.rootTagName && !suppressTagChip}
<!-- The primary root-tag chip sits on its own line beneath the meta line
(#835 §3); absent when the letter has no tag (REQ-005). -->
(#835 §3); absent when the letter has no tag (REQ-005), and suppressed in
Thema mode inside its own root-tag bucket where the header conveys it (REQ-017). -->
<TagChip name={entry.rootTagName} color={entry.rootTagColor ?? null} />
{/if}
</a>

25
frontend/src/lib/timeline/LetterCard.svelte.spec.ts
View File

@@ -127,3 +127,28 @@ describe('LetterCard', () => {
expect(chip?.textContent).toContain('Familie');
});
});
describe('LetterCard — grouping variants (#827, REQ-014/017)', () => {
it('carries the .lcard.ev class in the event variant (REQ-014)', () => {
render(LetterCard, { entry: makeEntry(), variant: 'event' });
expect(document.querySelector('a.lcard.ev')).not.toBeNull();
});
it('is a plain card with no .ev marker by default (REQ-014)', () => {
render(LetterCard, { entry: makeEntry() });
expect(document.querySelector('a.ev')).toBeNull();
});
it('suppresses the per-letter tag chip when asked, even with a root tag (REQ-017)', () => {
render(LetterCard, {
entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }),
suppressTagChip: true
});
expect(document.querySelector('[data-testid="tag-chip"]')).toBeNull();
});
it('still shows the per-letter tag chip when not suppressed — Datum/Ereignis (REQ-017)', () => {
render(LetterCard, { entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }) });
expect(document.querySelector('[data-testid="tag-chip"]')).not.toBeNull();
});
});