From e0b096f12ce05799ebb8cace01239c400937b410 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 14 Jun 2026 10:55:37 +0200
Subject: [PATCH] feat(timeline): frame the undated bucket with a dashed border
 + count (REQ-012)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "Ohne Datum" section now renders inside a dashed-bordered surface box
whose heading reads "Ohne Datum · {count}", matching the spec's .undated
treatment. The kind/type dispatch (events as pills/bands, letters as cards)
is unchanged; the section stays absent when there are no undated entries.

Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/TimelineView.svelte      |  9 +++++++--
 .../src/lib/timeline/TimelineView.svelte.spec.ts   | 14 ++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/timeline/TimelineView.svelte b/frontend/src/lib/timeline/TimelineView.svelte
index 2eef69f3..57c4de1f 100644
--- a/frontend/src/lib/timeline/TimelineView.svelte
+++ b/frontend/src/lib/timeline/TimelineView.svelte
@@ -59,8 +59,13 @@ const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length
 	</ol>
 
 	{#if timeline.undated.length > 0}
-		<section data-testid="undated-section" class="mx-auto mt-8 max-w-3xl">
-			<h2 class="mb-3 font-serif text-sm font-bold text-ink-2">{m.timeline_undated_section()}</h2>
+		<section
+			data-testid="undated-section"
+			class="mx-auto mt-8 max-w-3xl rounded-sm border border-dashed border-line bg-surface p-4"
+		>
+			<h2 class="mb-3 font-serif text-sm font-bold text-ink-2">
+				{m.timeline_undated_section()} · {timeline.undated.length}
+			</h2>
 			<ul class="space-y-2">
 				<!-- The undated bucket is filtered from ALL entries, so it can hold
 				     events as well as letters. Dispatch on kind/type exactly like
diff --git a/frontend/src/lib/timeline/TimelineView.svelte.spec.ts b/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
index ec878a5a..07d96a80 100644
--- a/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
+++ b/frontend/src/lib/timeline/TimelineView.svelte.spec.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
+import * as m from '$lib/paraglide/messages.js';
 import TimelineView from './TimelineView.svelte';
 import { makeEntry, makeYear, makeTimelineDTO } from './test-factories';
 
@@ -73,6 +74,19 @@ describe('TimelineView', () => {
 		expect(document.querySelector('[data-testid="undated-section"]')).toBeNull();
 	});
 
+	it('frames the undated section with a dashed border and shows the count (REQ-012)', () => {
+		const undated = Array.from({ length: 11 }, (_, i) =>
+			makeEntry({ precision: 'UNKNOWN', eventDate: undefined, documentId: `u-${i}` })
+		);
+		render(TimelineView, { timeline: makeTimelineDTO({ undated }) });
+		const section = document.querySelector('[data-testid="undated-section"]') as HTMLElement;
+		expect(section).not.toBeNull();
+		expect(section.classList.contains('border-dashed')).toBe(true);
+		const h2 = section.querySelector('h2');
+		expect(h2?.textContent).toContain(m.timeline_undated_section());
+		expect(h2?.textContent).toContain('11');
+	});
+
 	it('renders all years and undated entries with personId undefined, no filtering (REQ-025)', () => {
 		render(TimelineView, {
 			timeline: makeTimelineDTO({