diff --git a/frontend/src/lib/timeline/LetterBucket.svelte b/frontend/src/lib/timeline/LetterBucket.svelte index 3353e497..986e4790 100644 --- a/frontend/src/lib/timeline/LetterBucket.svelte +++ b/frontend/src/lib/timeline/LetterBucket.svelte @@ -46,12 +46,21 @@ const cardVariant = $derived(mode === 'event' && isEventCluster ? 'event' : 'pla let expanded = $state(false); const visible = $derived(expanded ? bucket.letters : bucket.letters.slice(0, CLUSTER_PREVIEW)); const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW); + +// The catch-all "Weitere Briefe" / "Ohne Thema" bin is a junk drawer: render it count-only +// behind a reveal control so it never floods the timeline; every other cluster starts open +// (#827 redesign). The view re-creates a bucket per `{#each}` key, so the initial capture is +// the right lifetime — `revealed` belongs to this bucket instance. +const isDrawer = $derived(bucket.kind === 'fallback'); +// svelte-ignore state_referenced_locally +let revealed = $state(bucket.kind !== 'fallback');
{/if} - - {#if hiddenCount > 0} + {#if !revealed} + {:else} + + {#if hiddenCount > 0} + + {/if} {/if}
diff --git a/frontend/src/lib/timeline/LetterBucket.svelte.spec.ts b/frontend/src/lib/timeline/LetterBucket.svelte.spec.ts index 6fe2b996..79b1d63a 100644 --- a/frontend/src/lib/timeline/LetterBucket.svelte.spec.ts +++ b/frontend/src/lib/timeline/LetterBucket.svelte.spec.ts @@ -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(); + }); +});