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

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');
 </script>
 
 <section
 	class="my-3 border-l-2 pl-3"
 	class:border-l-brand-mint={isEventCluster}
 	class:border-line={!railColor && !isEventCluster}
+	class:border-dashed={isDrawer}
 	style={railStyle}
 	data-testid="letter-bucket"
 	data-bucket-kind={bucket.kind}
@@ -72,6 +81,17 @@ const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW);
 		</header>
 	{/if}
 
+	{#if !revealed}
+		<button
+			type="button"
+			data-testid="bucket-reveal"
+			onclick={() => (revealed = true)}
+			style="display: inline-flex; align-items: center; min-height: 44px"
+			class="px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+		>
+			{m.timeline_bucket_show_more({ count: bucket.letters.length })}
+		</button>
+	{:else}
 		<ul class="space-y-1.5">
 			{#each visible as letter (entryKey(letter))}
 				<li>
@@ -93,7 +113,10 @@ const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW);
 				style="display: inline-flex; align-items: center; min-height: 44px"
 				class="mt-1 px-1 font-sans text-xs font-semibold text-brand-navy hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
 			>
-			{expanded ? m.timeline_bucket_show_less() : m.timeline_bucket_show_more({ count: hiddenCount })}
+				{expanded
+					? m.timeline_bucket_show_less()
+					: m.timeline_bucket_show_more({ count: hiddenCount })}
 			</button>
 		{/if}
+	{/if}
 </section>

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();
+	});
+});