feat(timeline): collapse the leftover Weitere-Briefe/Ohne-Thema bin to a drawer

The catch-all bucket renders count-only by default behind a reveal control, then
expands to the first-5 + show-more body. Keeps the junk drawer quiet instead of
flooding the timeline.

Refs #827
This commit is contained in:
Marcel
2026-06-15 14:50:35 +02:00
parent c1dc58c24f
commit b08f86f76d
2 changed files with 65 additions and 18 deletions

View File

@@ -137,3 +137,27 @@ describe('LetterBucket — preview cap + show-more (#827 redesign)', () => {
expect(section.getAttribute('style') ?? '').toContain('var(--c-tag-sienna)');
});
});
describe('LetterBucket — leftover drawer (#827 redesign)', () => {
const fb = (n: number): Bucket => ({
key: '__fallback__',
kind: 'fallback',
color: null,
letters: Array.from({ length: n }, (_, i) =>
makeEntry({ documentId: `f${i}`, eventDate: `1916-01-0${(i % 9) + 1}` })
)
});
it('renders collapsed — count + reveal, no letter cards — until opened', () => {
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
expect(document.querySelector('a.lcard')).toBeNull();
expect(document.body.textContent).toContain(m.timeline_bucket_other_letters());
expect(document.querySelector('[data-testid="bucket-reveal"]')).not.toBeNull();
});
it('reveals the first 5 letters when opened', async () => {
render(LetterBucket, { bucket: fb(20), mode: 'event', year: 1916 });
(document.querySelector('[data-testid="bucket-reveal"]') as HTMLButtonElement).click();
await tick();
expect(document.querySelectorAll('a.lcard')).toHaveLength(5);
expect(document.querySelector('[data-testid="bucket-show-more"]')).not.toBeNull();
});
});