feat(timeline): add a compact LetterCard variant for in-bucket letters

Grouped-mode buckets stack many letters; the full two-line card with its own date
chip floods the view. The compact variant tightens the padding and, when the
letter has a title, drops the redundant date chip (the per-year bucket already
frames the time and these archive titles embed the date). Datum mode is untouched
— compact defaults to false.

Refs #827

frontend/src/lib/timeline/LetterCard.svelte

@@ -21,11 +21,21 @@ type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
 let {
 	entry,
 	variant = 'plain',
-	suppressTagChip = false
+	suppressTagChip = false,
-}: { entry: TimelineEntryDTO; variant?: 'plain' | 'event'; suppressTagChip?: boolean } = $props();
+	compact = false
+}: {
+	entry: TimelineEntryDTO;
+	variant?: 'plain' | 'event';
+	suppressTagChip?: boolean;
+	compact?: boolean;
+} = $props();
 
 const isEventVariant = $derived(variant === 'event');
 const dateLabel = $derived(timelineDateLabel(entry.eventDate, entry.precision, entry.eventDateEnd));
+// Inside a per-year bucket the year frames the time, and these archive titles already
+// embed the date — so the compact in-bucket card drops the redundant date chip when a
+// title is present, halving the row height and killing the duplicate date (#827).
+const showDate = $derived(!compact || !entry.title);
 const sender = $derived(entry.senderName === '' ? m.timeline_unknown_person() : entry.senderName);
 const receiver = $derived(
 	entry.receiverName === '' ? m.timeline_unknown_person() : entry.receiverName
@@ -38,23 +48,30 @@ const receiver = $derived(
 <a
 	href="/documents/{entry.documentId}"
 	style="display: flex; flex-direction: column; justify-content: center; min-height: 44px"
-	class="lcard rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 py-2 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+	class="lcard rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface px-3 shadow-sm transition-colors hover:border-brand-mint focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+	class:py-2={!compact}
+	class:py-1={compact}
 	class:ev={isEventVariant}
+	class:compact={compact}
 >
 	{#if entry.title}
 		<!-- ✉ + sr-only label are static chrome rendered as sibling nodes, NEVER
 		     interpolated into the escaped user title; the title keeps its own
 		     pre-line span for multi-line OCR text (REQ-008/016/021). -->
-		<span class="font-serif text-sm font-bold break-words text-ink">
+		<span
+			class="font-serif font-bold break-words text-ink"
+			class:text-sm={!compact}
+			class:text-xs={compact}
+		>
 			<GlyphLabel glyph="✉" label={m.timeline_letter_glyph_label()} />
 			<span class="whitespace-pre-line">{entry.title}</span>
 		</span>
 	{/if}
-	<span class="mt-0.5 font-sans text-xs break-words text-ink-3">
+	<span class="font-sans text-xs break-words text-ink-3" class:mt-0.5={!compact}>
 		<span class="font-serif whitespace-pre-line">{sender}</span>
 		<span aria-hidden="true">→</span>
 		<span class="font-serif whitespace-pre-line">{receiver}</span>
-		{#if dateLabel}
+		{#if dateLabel && showDate}
 			<span data-testid="letter-date"> · {dateLabel}</span>
 		{/if}
 	</span>

frontend/src/lib/timeline/LetterCard.svelte.spec.ts

@@ -151,4 +151,22 @@ describe('LetterCard — grouping variants (#827, REQ-014/017)', () => {
 		render(LetterCard, { entry: makeEntry({ rootTagName: 'Krieg', rootTagColor: 'sienna' }) });
 		expect(document.querySelector('[data-testid="tag-chip"]')).not.toBeNull();
 	});
+
+	it('drops the redundant date line in the compact variant when a title is present (#827)', () => {
+		// Inside a per-year bucket the year already frames the time, and these archive
+		// titles embed the date — so the compact in-bucket card omits the date chip.
+		render(LetterCard, { entry: makeEntry({ title: 'H-0023 – 6. Juli 1916' }), compact: true });
+		expect(document.querySelector('[data-testid="letter-date"]')).toBeNull();
+		expect(document.body.textContent).toContain('Karl Raddatz'); // sender still shown
+	});
+
+	it('keeps the date in the compact variant when the letter has no title (#827)', () => {
+		render(LetterCard, { entry: makeEntry({ title: undefined }), compact: true });
+		expect(document.querySelector('[data-testid="letter-date"]')).not.toBeNull();
+	});
+
+	it('renders the compact variant on a single tighter row (#827)', () => {
+		render(LetterCard, { entry: makeEntry(), compact: true });
+		expect(document.querySelector('a.lcard.compact')).not.toBeNull();
+	});
 });