From e18282318a303cb5753bbeacd9b7d5437a0a3491 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 14 Jun 2026 20:33:35 +0200
Subject: [PATCH] feat(timeline): wire the layer filter into /zeitstrahl
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The route holds the three layer toggles in $state, binds them into
TimelineFilters, and derives a client-side filtered view of the SSR-loaded
timeline that it passes to TimelineView — no goto, no URL param, no extra
fetch. When the active toggles leave nothing visible it renders a calm
filtered-empty message plus a one-click reset below the still-open filter bar,
never a blank page and never the generic "no events" state. The meta-line keeps
counting the unfiltered timeline (D1 known limitation).

Refs #780
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/routes/zeitstrahl/+page.svelte   | 48 ++++++++++-
 .../src/routes/zeitstrahl/page.svelte.spec.ts | 86 +++++++++++++++++++
 2 files changed, 133 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/zeitstrahl/+page.svelte b/frontend/src/routes/zeitstrahl/+page.svelte
index 75dad484..73ecb287 100644
--- a/frontend/src/routes/zeitstrahl/+page.svelte
+++ b/frontend/src/routes/zeitstrahl/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import TimelineView from '$lib/timeline/TimelineView.svelte';
+import TimelineFilters from '$lib/timeline/TimelineFilters.svelte';
 import { timelineMeta } from '$lib/timeline/timelineMeta';
+import { filterTimeline } from '$lib/timeline/timelineFilter';
 import type { PageData } from './$types';
 
 let { data }: { data: PageData } = $props();
@@ -9,6 +11,28 @@ let { data }: { data: PageData } = $props();
 const meta = $derived(timelineMeta(data.timeline));
 const hasContent = $derived(data.timeline.years.length > 0 || data.timeline.undated.length > 0);
 
+// Layer-filter state (#780). Layer hiding is client-side only — the whole
+// timeline is loaded once by #779's SSR load and we derive a filtered view of
+// it here; there is no goto, no URL param, and no extra fetch. Known limitation
+// (D1): the meta-line counts above stay on the unfiltered timeline, so they
+// include entries the active toggles hide.
+let personalOn = $state(true);
+let historicalOn = $state(true);
+let lettersOn = $state(true);
+
+const filteredTimeline = $derived(
+	filterTimeline(data.timeline, { personalOn, historicalOn, lettersOn })
+);
+const filteredEmpty = $derived(
+	filteredTimeline.years.length === 0 && filteredTimeline.undated.length === 0
+);
+
+function resetFilters() {
+	personalOn = true;
+	historicalOn = true;
+	lettersOn = true;
+}
+
 // Compose the sub-line from segments joined by " · " so the range drops out
 // cleanly when there are no year bands; the whole line is absent when the
 // timeline is empty (REQ-002). Counts come from the route alone, never from
@@ -51,7 +75,29 @@ const metaLine = $derived.by(() => {
 		<h1 class="font-serif text-2xl font-bold text-brand-navy">{m.timeline_heading()}</h1>
 		{#if hasContent}
 			<p data-testid="timeline-meta" class="mt-1 mb-6 font-sans text-xs text-ink-3">{metaLine}</p>
+			<TimelineFilters
+				bind:personalOn={personalOn}
+				bind:historicalOn={historicalOn}
+				bind:lettersOn={lettersOn}
+			/>
+		{/if}
+		{#if hasContent && filteredEmpty}
+			<!-- Filtered-empty: a calm message + one-click reset below the still-open
+			     filter bar — never a blank page, and never the generic "no events"
+			     state (which would imply the archive itself is empty). REQ-006. -->
+			<div data-testid="timeline-filter-empty" class="py-12 text-center">
+				<p class="font-serif text-base text-ink-2">{m.timeline_filter_empty_state()}</p>
+				<button
+					type="button"
+					data-testid="timeline-filter-empty-reset"
+					onclick={resetFilters}
+					class="mt-3 inline-flex min-h-[44px] items-center font-sans text-sm text-primary underline-offset-2 hover:underline"
+				>
+					{m.timeline_filter_reset()}
+				</button>
+			</div>
+		{:else}
+			<TimelineView timeline={filteredTimeline} />
 		{/if}
-		<TimelineView timeline={data.timeline} />
 	</div>
 </div>
diff --git a/frontend/src/routes/zeitstrahl/page.svelte.spec.ts b/frontend/src/routes/zeitstrahl/page.svelte.spec.ts
index b951f7c4..d3c03ce3 100644
--- a/frontend/src/routes/zeitstrahl/page.svelte.spec.ts
+++ b/frontend/src/routes/zeitstrahl/page.svelte.spec.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
 import * as m from '$lib/paraglide/messages.js';
 import Page from './+page.svelte';
 import { makeEntry, makeYear, makeTimelineDTO } from '$lib/timeline/test-factories';
@@ -111,3 +112,88 @@ describe('/zeitstrahl page', () => {
 		expect(sub?.textContent).not.toContain(m.timeline_events_count({ count: 1 }));
 	});
 });
+
+describe('/zeitstrahl layer filter (#780)', () => {
+	const letter = (title: string, documentId: string) => makeEntry({ documentId, title });
+	const historical = (title: string) =>
+		makeEntry({
+			kind: 'EVENT',
+			type: 'HISTORICAL',
+			derived: false,
+			eventId: 'h1',
+			documentId: undefined,
+			title,
+			senderName: '',
+			receiverName: ''
+		});
+	const personal = (title: string) =>
+		makeEntry({
+			kind: 'EVENT',
+			type: 'PERSONAL',
+			derived: false,
+			eventId: 'p1',
+			documentId: undefined,
+			title,
+			senderName: '',
+			receiverName: ''
+		});
+
+	const mixed = () =>
+		makeTimelineDTO({
+			years: [
+				makeYear(1915, [
+					letter('Brief Eins', 'd1'),
+					historical('Erster Weltkrieg'),
+					personal('Umzug nach Berlin')
+				])
+			]
+		});
+
+	async function openBar() {
+		await page.getByTestId('timeline-filter-trigger').click();
+	}
+
+	it('hides letter cards when the Letters layer is off and restores them, with no fetch (REQ-005/002)', async () => {
+		render(Page, { data: pageData(mixed()) });
+		await expect.element(page.getByText('Brief Eins')).toBeVisible();
+		await openBar();
+		await page.getByTestId('timeline-filter-letters').click();
+		await expect.poll(() => page.getByText('Brief Eins').query()).toBeNull();
+		await expect.element(page.getByText('Umzug nach Berlin')).toBeVisible();
+		await page.getByTestId('timeline-filter-letters').click();
+		await expect.element(page.getByText('Brief Eins')).toBeVisible();
+	});
+
+	it('hides historical event cards when the Historical layer is off (REQ-004)', async () => {
+		render(Page, { data: pageData(mixed()) });
+		await openBar();
+		await page.getByTestId('timeline-filter-historical').click();
+		await expect.poll(() => page.getByText('Erster Weltkrieg').query()).toBeNull();
+		await expect.element(page.getByText('Brief Eins')).toBeVisible();
+		await expect.element(page.getByText('Umzug nach Berlin')).toBeVisible();
+	});
+
+	it('hides personal event cards when the Personal layer is off (REQ-003)', async () => {
+		render(Page, { data: pageData(mixed()) });
+		await openBar();
+		await page.getByTestId('timeline-filter-personal').click();
+		await expect.poll(() => page.getByText('Umzug nach Berlin').query()).toBeNull();
+		await expect.element(page.getByText('Brief Eins')).toBeVisible();
+		await expect.element(page.getByText('Erster Weltkrieg')).toBeVisible();
+	});
+
+	it('shows the filtered-empty message + reset below the open bar when all layers are off (REQ-006)', async () => {
+		render(Page, { data: pageData(mixed()) });
+		await openBar();
+		await page.getByTestId('timeline-filter-personal').click();
+		await page.getByTestId('timeline-filter-historical').click();
+		await page.getByTestId('timeline-filter-letters').click();
+		await expect.element(page.getByText(m.timeline_filter_empty_state())).toBeVisible();
+		await expect.element(page.getByTestId('timeline-filter-empty-reset')).toBeVisible();
+		// the generic TimelineView empty state is never what shows for a filtered-empty view
+		expect(page.getByText(m.timeline_empty_state()).query()).toBeNull();
+		// the one-click reset restores every layer
+		await page.getByTestId('timeline-filter-empty-reset').click();
+		await expect.element(page.getByText('Brief Eins')).toBeVisible();
+	});
+});