From 144719720f092a8c8c531b9738dddcf8c6b84aff Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 14 Jun 2026 10:49:19 +0200
Subject: [PATCH] =?UTF-8?q?feat(timeline):=20add=20the=20"=C2=B7=20histori?=
 =?UTF-8?q?sch"=20descriptor=20to=20world=20bands=20(REQ-009)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A HISTORICAL band's subtitle now carries the visible "historisch" register
inline as plain text: "{date} · historisch", or — for a RANGE — after the
existing 1914–1918 span pill (whose Zeitraum aria-label is unchanged). The
descriptor is a text node, never a second pill. Every WorldBand is
historical, so the suffix also trails an undated band on its own.

Refs #833
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/WorldBand.svelte    |  8 +++++++-
 .../src/lib/timeline/WorldBand.svelte.spec.ts | 20 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/timeline/WorldBand.svelte b/frontend/src/lib/timeline/WorldBand.svelte
index 92519535..7d71e1fd 100644
--- a/frontend/src/lib/timeline/WorldBand.svelte
+++ b/frontend/src/lib/timeline/WorldBand.svelte
@@ -21,6 +21,9 @@ const fromYear = $derived(entry.eventDate ? entry.eventDate.slice(0, 4) : null);
 const toYear = $derived(entry.eventDateEnd ? entry.eventDateEnd.slice(0, 4) : null);
 const showSpan = $derived(entry.precision === 'RANGE' && fromYear != null && toYear != null);
 const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYear : dateLabel);
+// Every WorldBand is a HISTORICAL band, so the visible "historisch" register
+// always trails the subtitle as plain text — never a second pill (REQ-009).
+const historical = $derived(m.timeline_layer_historical_suffix());
 </script>
 
 <div class="my-3 border-y border-line bg-canvas px-4 py-2 text-center">
@@ -37,7 +40,10 @@ const dateText = $derived(showSpan ? null : entry.precision === 'RANGE' ? fromYe
 		>
 			{fromYear}–{toYear}
 		</span>
+		<span class="font-sans text-xs text-ink-3"> · {historical}</span>
 	{:else if dateText}
-		<span class="ml-2 font-sans text-xs text-ink-3">{dateText}</span>
+		<span class="ml-2 font-sans text-xs text-ink-3">{dateText} · {historical}</span>
+	{:else}
+		<span class="ml-2 font-sans text-xs text-ink-3">{historical}</span>
 	{/if}
 </div>
diff --git a/frontend/src/lib/timeline/WorldBand.svelte.spec.ts b/frontend/src/lib/timeline/WorldBand.svelte.spec.ts
index 497f51b3..0218206f 100644
--- a/frontend/src/lib/timeline/WorldBand.svelte.spec.ts
+++ b/frontend/src/lib/timeline/WorldBand.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 WorldBand from './WorldBand.svelte';
 import { makeEntry } from './test-factories';
 
@@ -45,4 +46,23 @@ describe('WorldBand', () => {
 		expect(document.body.textContent).toContain('Erster Weltkrieg');
 		expect(document.body.textContent).toContain('1914');
 	});
+
+	it('appends the inline "· historisch" descriptor to a non-RANGE band (#833 REQ-009)', () => {
+		render(WorldBand, {
+			entry: historical({ precision: 'APPROX', eventDate: '1923-01-01', eventDateEnd: undefined })
+		});
+		expect(document.querySelector('[data-testid="world-range"]')).toBeNull();
+		expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
+	});
+
+	it('follows the RANGE span pill with inline "· historisch" text, not a second pill (#833 REQ-009)', () => {
+		render(WorldBand, { entry: historical() });
+		const pill = document.querySelector('[data-testid="world-range"]');
+		expect(pill).not.toBeNull();
+		// The #779 span pill + its Zeitraum aria-label are unchanged.
+		expect(pill?.getAttribute('aria-label')).toBe('Zeitraum: 1914 bis 1918');
+		// The descriptor is plain text outside the pill, not a second styled pill.
+		expect(pill?.textContent).not.toContain(m.timeline_layer_historical_suffix());
+		expect(document.body.textContent).toContain(m.timeline_layer_historical_suffix());
+	});
 });