From ace9602f6e741f718b59084a122085a94b385cb5 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 16 Jun 2026 15:04:24 +0200
Subject: [PATCH] =?UTF-8?q?feat(timeline):=20add=20EventNote=20component?=
 =?UTF-8?q?=20with=20expand/collapse=20(REQ-002=E2=80=93008)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Handles XSS escaping, whitespace-pre-line, 3-line clamp via inline style,
and a toggle button that is only shown when content actually overflows.

Refs #844
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/timeline/EventNote.svelte    | 47 ++++++++++++
 .../lib/timeline/event-note.svelte.spec.ts    | 74 +++++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 frontend/src/lib/timeline/EventNote.svelte
 create mode 100644 frontend/src/lib/timeline/event-note.svelte.spec.ts

diff --git a/frontend/src/lib/timeline/EventNote.svelte b/frontend/src/lib/timeline/EventNote.svelte
new file mode 100644
index 00000000..96672d78
--- /dev/null
+++ b/frontend/src/lib/timeline/EventNote.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+
+let { description }: { description?: string | null } = $props();
+
+let expanded = $state(false);
+let clamped = $state(false);
+let noteEl: HTMLElement | undefined = $state();
+
+$effect(() => {
+	if (noteEl) {
+		clamped = noteEl.scrollHeight > noteEl.clientHeight;
+	}
+});
+
+function toggle() {
+	expanded = !expanded;
+}
+
+const hasContent = $derived(!!description && description.trim().length > 0);
+</script>
+
+{#if hasContent}
+	<div class="mt-1">
+		<p
+			data-testid="event-note"
+			bind:this={noteEl}
+			class="font-sans text-xs whitespace-pre-line text-ink-2"
+			style={expanded
+				? 'white-space:pre-line'
+				: 'white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3'}
+		>
+			{description}
+		</p>
+		{#if clamped || expanded}
+			<button
+				data-testid="note-toggle"
+				type="button"
+				class="mt-0.5 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+				aria-expanded={expanded ? 'true' : 'false'}
+				onclick={toggle}
+			>
+				{expanded ? m.timeline_note_show_less() : m.timeline_note_show_more()}
+			</button>
+		{/if}
+	</div>
+{/if}
diff --git a/frontend/src/lib/timeline/event-note.svelte.spec.ts b/frontend/src/lib/timeline/event-note.svelte.spec.ts
new file mode 100644
index 00000000..80124e47
--- /dev/null
+++ b/frontend/src/lib/timeline/event-note.svelte.spec.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import * as m from '$lib/paraglide/messages.js';
+import EventNote from './EventNote.svelte';
+
+afterEach(() => cleanup());
+
+const LONG_NOTE = Array.from({ length: 15 }, (_, i) => `Zeile ${i + 1}`).join('\n');
+
+describe('EventNote (REQ-002–008)', () => {
+	it('escapesHtml — renders XSS payload as inert text, no injected element (REQ-002)', () => {
+		render(EventNote, { description: '<script>alert(1)</script>' });
+		// The literal string should appear as text content
+		expect(document.body.textContent).toContain('<script>alert(1)</script>');
+		// No injected <script> with alert() should exist (Svelte's own scripts don't contain it)
+		const scripts = Array.from(document.querySelectorAll('script'));
+		expect(scripts.some((s) => s.textContent?.includes('alert(1)'))).toBe(false);
+	});
+
+	it('preservesLineBreaks — note element carries whitespace-pre-line class (REQ-003)', () => {
+		render(EventNote, { description: 'A\n\nB' });
+		const note = document.querySelector('[data-testid="event-note"]') as HTMLElement;
+		expect(note).not.toBeNull();
+		expect(note.className).toContain('whitespace-pre-line');
+	});
+
+	it('blankNoteRendersNothing — null description produces no note element (REQ-008)', () => {
+		render(EventNote, { description: null });
+		expect(document.querySelector('[data-testid="event-note"]')).toBeNull();
+	});
+
+	it('blankNoteRendersNothing — empty string produces no note element (REQ-008)', () => {
+		render(EventNote, { description: '' });
+		expect(document.querySelector('[data-testid="event-note"]')).toBeNull();
+	});
+
+	it('blankNoteRendersNothing — blank-only string produces no note element (REQ-008)', () => {
+		render(EventNote, { description: '   ' });
+		expect(document.querySelector('[data-testid="event-note"]')).toBeNull();
+	});
+
+	it('shortNoteNoToggle — a one-line note renders fully with no disclosure control (REQ-006)', async () => {
+		render(EventNote, { description: 'Kurze Notiz.' });
+		await tick();
+		expect(document.body.textContent).toContain('Kurze Notiz.');
+		expect(document.querySelector('[data-testid="note-toggle"]')).toBeNull();
+	});
+
+	it('clampsAndShowsToggle — long note shows "mehr anzeigen" with aria-expanded=false (REQ-005)', async () => {
+		render(EventNote, { description: LONG_NOTE });
+		await tick();
+		const btn = document.querySelector('[data-testid="note-toggle"]') as HTMLButtonElement;
+		expect(btn).not.toBeNull();
+		expect(btn.textContent?.trim()).toBe(m.timeline_note_show_more());
+		expect(btn.getAttribute('aria-expanded')).toBe('false');
+	});
+
+	it('toggleExpandsCollapses — click expands, re-click collapses (REQ-007)', async () => {
+		render(EventNote, { description: LONG_NOTE });
+		await tick();
+		const btn = document.querySelector('[data-testid="note-toggle"]') as HTMLButtonElement;
+
+		btn.click();
+		await tick();
+		expect(btn.getAttribute('aria-expanded')).toBe('true');
+		expect(btn.textContent?.trim()).toBe(m.timeline_note_show_less());
+
+		btn.click();
+		await tick();
+		expect(btn.getAttribute('aria-expanded')).toBe('false');
+		expect(btn.textContent?.trim()).toBe(m.timeline_note_show_more());
+	});
+});