feat(briefwechsel): add ThumbnailRow for the new correspondence row layout
Combines ConversationThumbnail with a quote-styled summary, truncated
meta line, and up to three tag chips (the rest collapsed into "+N").
The colored left border tells a reader at a glance whether this
letter left or entered the perspective person's mailbox — replacing
the previous status dot + script-type icons that were too busy for
the list view. Relative-year label ("vor 76 Jahren") is derived from
documentDate so the list carries temporal context without a full
date column.
Rendering rules:
- title falls back to originalFilename when empty
- summary uses a text expression, never {@html}, so inline markup
in the summary field is escaped (XSS regression test locks this)
- focus-visible outline + focus-within hover keep keyboard-only
users in sync with mouse hover feedback
- aria-label always pairs title with the formatted date so screen
readers hear both identifiers
Refs #305
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
110
frontend/src/lib/components/ThumbnailRow.svelte
Normal file
110
frontend/src/lib/components/ThumbnailRow.svelte
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import ConversationThumbnail from '$lib/components/ConversationThumbnail.svelte';
|
||||||
|
import { formatDate } from '$lib/utils/date';
|
||||||
|
import { relativeYearsDe } from '$lib/relativeTime';
|
||||||
|
|
||||||
|
type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
|
||||||
|
type Tag = { id: string; name: string };
|
||||||
|
|
||||||
|
type Doc = {
|
||||||
|
id: string;
|
||||||
|
title?: string;
|
||||||
|
originalFilename: string;
|
||||||
|
documentDate?: string;
|
||||||
|
location?: string;
|
||||||
|
summary?: string;
|
||||||
|
contentType?: string;
|
||||||
|
thumbnailKey?: string;
|
||||||
|
thumbnailGeneratedAt?: string;
|
||||||
|
thumbnailAspect?: 'PORTRAIT' | 'LANDSCAPE';
|
||||||
|
pageCount?: number;
|
||||||
|
sender?: Person | null;
|
||||||
|
receivers?: Person[];
|
||||||
|
tags?: Tag[];
|
||||||
|
};
|
||||||
|
|
||||||
|
let {
|
||||||
|
doc,
|
||||||
|
isOut,
|
||||||
|
showOtherParty,
|
||||||
|
now
|
||||||
|
}: {
|
||||||
|
doc: Doc;
|
||||||
|
isOut: boolean;
|
||||||
|
showOtherParty: boolean;
|
||||||
|
now?: Date;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
const title = $derived(doc.title || doc.originalFilename);
|
||||||
|
const displayedTags = $derived((doc.tags ?? []).slice(0, 3));
|
||||||
|
const hiddenTagCount = $derived(Math.max(0, (doc.tags ?? []).length - 3));
|
||||||
|
const otherPartyName = $derived(
|
||||||
|
showOtherParty
|
||||||
|
? isOut
|
||||||
|
? (doc.receivers?.[0]?.displayName ?? '')
|
||||||
|
: (doc.sender?.displayName ?? '')
|
||||||
|
: ''
|
||||||
|
);
|
||||||
|
const relativeYearLabel = $derived(
|
||||||
|
doc.documentDate
|
||||||
|
? relativeYearsDe(new Date(doc.documentDate + 'T12:00:00'), now ?? new Date())
|
||||||
|
: ''
|
||||||
|
);
|
||||||
|
const ariaLabel = $derived(
|
||||||
|
`${title}${doc.documentDate ? `, ${formatDate(doc.documentDate)}` : ''}`
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={`/documents/${doc.id}`}
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
class="group flex min-h-[120px] items-start gap-3 border-b border-l-[3px] border-line-2 px-[14px] py-[10px] transition-colors last:border-b-0 focus-within:bg-muted hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary"
|
||||||
|
class:border-l-primary={isOut}
|
||||||
|
class:border-l-accent={!isOut}
|
||||||
|
>
|
||||||
|
<ConversationThumbnail doc={doc} />
|
||||||
|
|
||||||
|
<div class="flex min-w-0 flex-1 flex-col gap-1">
|
||||||
|
<div class="flex items-baseline justify-between gap-3">
|
||||||
|
<div class="min-w-0 flex-1 truncate text-sm font-bold text-ink">
|
||||||
|
{title}
|
||||||
|
</div>
|
||||||
|
{#if relativeYearLabel}
|
||||||
|
<div class="shrink-0 text-xs text-ink-3">{relativeYearLabel}</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if doc.summary}
|
||||||
|
<div class="line-clamp-2 text-sm text-ink-2 italic">
|
||||||
|
“{doc.summary}”
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="flex flex-wrap items-center gap-x-[6px] gap-y-1 text-xs text-ink-3">
|
||||||
|
<span>{doc.documentDate ? formatDate(doc.documentDate) : '—'}</span>
|
||||||
|
{#if doc.location}
|
||||||
|
<span class="text-line">·</span>
|
||||||
|
<span>{doc.location}</span>
|
||||||
|
{/if}
|
||||||
|
{#if otherPartyName}
|
||||||
|
<span class="text-line">·</span>
|
||||||
|
<span>{otherPartyName}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if displayedTags.length > 0}
|
||||||
|
<div class="flex flex-wrap items-center gap-1 pt-0.5">
|
||||||
|
{#each displayedTags as tag (tag.id)}
|
||||||
|
<span
|
||||||
|
data-testid="thumb-row-tag"
|
||||||
|
class="max-w-[140px] truncate rounded-full border border-line bg-surface px-2 py-0.5 text-xs text-ink-2"
|
||||||
|
>{tag.name}</span
|
||||||
|
>
|
||||||
|
{/each}
|
||||||
|
{#if hiddenTagCount > 0}
|
||||||
|
<span class="text-xs font-bold text-ink-3">+{hiddenTagCount}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
177
frontend/src/lib/components/ThumbnailRow.svelte.spec.ts
Normal file
177
frontend/src/lib/components/ThumbnailRow.svelte.spec.ts
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
import { describe, it, expect, afterEach } from 'vitest';
|
||||||
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
|
|
||||||
|
import ThumbnailRow from './ThumbnailRow.svelte';
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
cleanup();
|
||||||
|
});
|
||||||
|
|
||||||
|
const baseDoc = {
|
||||||
|
id: 'd1',
|
||||||
|
title: 'Liebe Anna',
|
||||||
|
originalFilename: 'liebe_anna.pdf',
|
||||||
|
documentDate: '1950-06-01',
|
||||||
|
location: 'Berlin',
|
||||||
|
summary: 'Heute schreibe ich Dir, weil die Kinder gesund sind.',
|
||||||
|
contentType: 'application/pdf',
|
||||||
|
thumbnailKey: 'thumbnails/d1.jpg',
|
||||||
|
thumbnailGeneratedAt: '2026-04-01T12:00:00Z',
|
||||||
|
thumbnailAspect: 'PORTRAIT' as const,
|
||||||
|
pageCount: 2,
|
||||||
|
sender: { id: 'hans', firstName: 'Hans', lastName: 'Müller', displayName: 'Hans Müller' },
|
||||||
|
receivers: [{ id: 'anna', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' }],
|
||||||
|
tags: [
|
||||||
|
{ id: 't1', name: 'Familie' },
|
||||||
|
{ id: 't2', name: 'Krieg' },
|
||||||
|
{ id: 't3', name: 'Reise' },
|
||||||
|
{ id: 't4', name: 'Arbeit' },
|
||||||
|
{ id: 't5', name: 'Zuhause' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('ThumbnailRow', () => {
|
||||||
|
it('renders the title, date, location, and summary quote', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(document.body.textContent).toContain('Liebe Anna');
|
||||||
|
expect(document.body.textContent).toContain('Berlin');
|
||||||
|
expect(document.body.textContent).toContain('Heute schreibe ich Dir');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('falls back to originalFilename when title is empty', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: { ...baseDoc, title: '' },
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(document.body.textContent).toContain('liebe_anna.pdf');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the other-party name when showOtherParty=true (non-bilateral list)', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: true,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
// Out-going from Hans, other party is first receiver (Anna Schmidt)
|
||||||
|
expect(document.body.textContent).toContain('Anna Schmidt');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hides the other-party name when showOtherParty=false (bilateral list)', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: false,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
// Anna is the receiver; in a bilateral list we suppress party names.
|
||||||
|
expect(document.body.textContent).not.toContain('Anna Schmidt');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders at most 3 tag chips and signals any remainder with "+N"', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
|
||||||
|
expect(chips.length).toBeLessThanOrEqual(3);
|
||||||
|
expect(document.body.textContent).toMatch(/\+2/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders relative-year label derived from documentDate', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
// 1950-06-01 → 2026-06-01 = 76 years
|
||||||
|
expect(document.body.textContent).toContain('vor 76 Jahren');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('sets border-l class based on isOut', () => {
|
||||||
|
const { unmount } = render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
let link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
|
||||||
|
expect(link.className).toContain('border-l-primary');
|
||||||
|
|
||||||
|
unmount();
|
||||||
|
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: false,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
|
||||||
|
expect(link.className).toContain('border-l-accent');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('exposes a descriptive aria-label combining title and date', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: baseDoc,
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
const link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
|
||||||
|
const label = link.getAttribute('aria-label') ?? '';
|
||||||
|
expect(label).toContain('Liebe Anna');
|
||||||
|
expect(label).toMatch(/1950/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not inject raw HTML when summary contains markup (XSS regression)', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: {
|
||||||
|
...baseDoc,
|
||||||
|
summary: 'safe <img src=x onerror="alert(1)"> text'
|
||||||
|
},
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
// No real img tag from the summary, the ConversationThumbnail img is fine.
|
||||||
|
const imgs = document.querySelectorAll('img[onerror]');
|
||||||
|
expect(imgs.length).toBe(0);
|
||||||
|
expect(document.body.textContent).toContain('<img src=x onerror="alert(1)">');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('handles missing optional fields without crashing', () => {
|
||||||
|
render(ThumbnailRow, {
|
||||||
|
doc: {
|
||||||
|
id: 'n1',
|
||||||
|
title: 'Ohne Datum',
|
||||||
|
originalFilename: 'x.pdf',
|
||||||
|
contentType: 'application/pdf',
|
||||||
|
thumbnailAspect: 'PORTRAIT'
|
||||||
|
},
|
||||||
|
isOut: true,
|
||||||
|
showOtherParty: false,
|
||||||
|
now: new Date('2026-06-01T00:00:00Z')
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(document.body.textContent).toContain('Ohne Datum');
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user