From bea0e0d0565349f8bf638f8ebcf35edbac5f3b6b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 13 Jun 2026 19:36:39 +0200
Subject: [PATCH] feat(timeline): add GapSpan for folded empty-year runs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A thin dashed span rendering '{from}–{to} · keine Einträge', collapsing to a
single year when the run has length 1 (REQ-015).

Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/GapSpan.svelte      | 20 +++++++++++++++++++
 .../src/lib/timeline/GapSpan.svelte.spec.ts   | 20 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 frontend/src/lib/timeline/GapSpan.svelte
 create mode 100644 frontend/src/lib/timeline/GapSpan.svelte.spec.ts

diff --git a/frontend/src/lib/timeline/GapSpan.svelte b/frontend/src/lib/timeline/GapSpan.svelte
new file mode 100644
index 00000000..ba8aa18a
--- /dev/null
+++ b/frontend/src/lib/timeline/GapSpan.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+/**
+ * A folded run of fully-empty interior years (REQ-015), rendered as a thin
+ * dashed span so the scroll stays oriented. Collapses to a single year when the
+ * run has length 1.
+ */
+let { from, to }: { from: number; to: number } = $props();
+
+const yearLabel = $derived(from === to ? `${from}` : `${from}–${to}`);
+</script>
+
+<div
+	class="mx-auto my-2 flex max-w-md items-center gap-2 rounded-full border border-dashed border-line bg-canvas px-4 py-1 font-sans text-xs text-ink-3"
+>
+	<span class="h-px flex-1 bg-line"></span>
+	<span><span class="font-serif text-ink-2">{yearLabel}</span> · {m.timeline_gap_empty()}</span>
+	<span class="h-px flex-1 bg-line"></span>
+</div>
diff --git a/frontend/src/lib/timeline/GapSpan.svelte.spec.ts b/frontend/src/lib/timeline/GapSpan.svelte.spec.ts
new file mode 100644
index 00000000..57df8a33
--- /dev/null
+++ b/frontend/src/lib/timeline/GapSpan.svelte.spec.ts
@@ -0,0 +1,20 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import GapSpan from './GapSpan.svelte';
+
+afterEach(() => cleanup());
+
+describe('GapSpan', () => {
+	it('renders a multi-year empty run as "{from}–{to} · keine Einträge" (REQ-015)', () => {
+		render(GapSpan, { from: 1910, to: 1914 });
+		expect(document.body.textContent).toContain('1910–1914');
+		expect(document.body.textContent).toContain('keine Einträge');
+	});
+
+	it('renders a single empty year as "{year} · keine Einträge" (REQ-015)', () => {
+		render(GapSpan, { from: 1912, to: 1912 });
+		expect(document.body.textContent).toContain('1912');
+		expect(document.body.textContent).not.toContain('1912–1912');
+		expect(document.body.textContent).toContain('keine Einträge');
+	});
+});