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

feat(briefwechsel): bump row typography and drop relative-year chip
Some checks failed
CI / Unit & Component Tests (push) Failing after 2m50s
Details
CI / OCR Service Tests (push) Successful in 34s
Details
CI / Backend Unit Tests (push) Has been cancelled
Details

Browse Source 
The 168px-tall thumbnail tile was dominating rows where the text
column only rendered at text-xs / text-sm — visually the right
column sat half-empty. Three changes:

- Title: text-sm → text-lg
- Summary: text-sm → text-base
- Meta + tag chips: text-xs → text-sm

And remove the "vor N Jahren" chip entirely. The documentDate
in the meta row already carries the temporal context and the
chip was adding visual noise without new information.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-23 21:52:23 +02:00
parent 503ce49ef7
commit 334b624063
3 changed files with 37 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/lib/components/ThumbnailRow.svelte.spec.ts
View File

@@ -36,8 +36,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
expect(document.body.textContent).toContain('Liebe Anna');
@@ -49,8 +48,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: { ...baseDoc, title: '' },
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
expect(document.body.textContent).toContain('liebe_anna.pdf');
@@ -60,8 +58,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: true,
showOtherParty: true,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: true
});
// Out-going from Hans, other party is first receiver (Anna Schmidt)
@@ -72,8 +69,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: false,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
// Anna is the receiver; in a bilateral list we suppress party names.
@@ -84,8 +80,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
const chips = document.querySelectorAll('[data-testid="thumb-row-tag"]');
@@ -93,38 +88,38 @@ describe('ThumbnailRow', () => {
expect(document.body.textContent).toMatch(/\+2/);
});
it('renders relative-year label derived from documentDate', () => {
it('does not render a relative-year label', () => {
// Document date is historical; we deliberately omit the "vor N Jahren"
// chip so the row can give vertical space to the title + summary.
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('hides the relative-year label when documentDate is in the future', () => {
// relativeYearsDe returns "" for future/invalid dates; the row must not
// then render an empty chip or print "vor 0 Jahren".
render(ThumbnailRow, {
doc: { ...baseDoc, documentDate: '2030-01-01' },
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
expect(document.body.textContent).not.toMatch(/vor \d+ Jahr/);
expect(document.body.textContent).not.toMatch(/vor weniger/);
});
it('renders the title at text-lg so the row uses its full vertical space', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: true,
showOtherParty: false
});
const titleEl = [...document.querySelectorAll('div')].find(
(el) => el.textContent?.trim() === 'Liebe Anna'
) as HTMLElement | undefined;
expect(titleEl, 'title element not found').toBeDefined();
expect(titleEl!.className).toContain('text-lg');
});
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')
showOtherParty: false
});
let link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
@@ -135,8 +130,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: false,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
expect(link.className).toContain('border-l-accent');
@@ -146,8 +140,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
const link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
@@ -163,8 +156,7 @@ describe('ThumbnailRow', () => {
render(ThumbnailRow, {
doc: baseDoc,
isOut: false,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
const link = document.querySelector('a[href="/documents/d1"]') as HTMLElement;
@@ -179,8 +171,7 @@ describe('ThumbnailRow', () => {
summary: 'safe <img src=x onerror="alert(1)"> text'
},
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
// No real img tag from the summary, the ConversationThumbnail img is fine.
@@ -199,8 +190,7 @@ describe('ThumbnailRow', () => {
thumbnailAspect: 'PORTRAIT'
},
isOut: true,
showOtherParty: false,
now: new Date('2026-06-01T00:00:00Z')
showOtherParty: false
});
expect(document.body.textContent).toContain('Ohne Datum');