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,28 +81,42 @@ const hiddenCount = $derived(bucket.letters.length - CLUSTER_PREVIEW);
 		</header>
 	{/if}
 
-	<ul class="space-y-1.5">
-		{#each visible as letter (entryKey(letter))}
-			<li>
-				<LetterCard
-					entry={letter}
-					variant={cardVariant}
-					suppressTagChip={mode === 'thema'}
-					compact={true}
-				/>
-			</li>
-		{/each}
-	</ul>
-	{#if hiddenCount > 0}
+	{#if !revealed}
 		<button
 			type="button"
-			data-testid="bucket-show-more"
-			aria-expanded={expanded}
-			onclick={() => (expanded = !expanded)}
+			data-testid="bucket-reveal"
+			onclick={() => (revealed = true)}
 			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"
+			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"
 		>
-			{expanded ? m.timeline_bucket_show_less() : m.timeline_bucket_show_more({ count: hiddenCount })}
+			{m.timeline_bucket_show_more({ count: bucket.letters.length })}
 		</button>
+	{:else}
+		<ul class="space-y-1.5">
+			{#each visible as letter (entryKey(letter))}
+				<li>
+					<LetterCard
+						entry={letter}
+						variant={cardVariant}
+						suppressTagChip={mode === 'thema'}
+						compact={true}
+					/>
+				</li>
+			{/each}
+		</ul>
+		{#if hiddenCount > 0}
+			<button
+				type="button"
+				data-testid="bucket-show-more"
+				aria-expanded={expanded}
+				onclick={() => (expanded = !expanded)}
+				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 })}
+			</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();
+	});
+});