From 0e9fa157e57605fdc21822d538a93fdf4912d567 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 28 Apr 2026 17:33:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(stammbaum):=20add=20=C3=97=20dismiss=20butt?=
 =?UTF-8?q?on=20with=20aria-label=20to=20StammbaumSidePanel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/StammbaumSidePanel.svelte  | 33 ++++++++++---
 .../StammbaumSidePanel.svelte.spec.ts         | 46 +++++++++++++++++++
 2 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts

diff --git a/frontend/src/lib/components/StammbaumSidePanel.svelte b/frontend/src/lib/components/StammbaumSidePanel.svelte
index 1c001825..fb73c952 100644
--- a/frontend/src/lib/components/StammbaumSidePanel.svelte
+++ b/frontend/src/lib/components/StammbaumSidePanel.svelte
@@ -139,13 +139,32 @@ const topDerived = $derived(
 </script>
 
 <div class="flex h-full flex-col p-5">
-	<div class="mb-4">
-		<h2 class="font-serif text-lg text-ink">{node.displayName}</h2>
-		{#if node.birthYear || node.deathYear}
-			<p class="font-sans text-xs text-ink-3">
-				{node.birthYear ?? '?'}–{node.deathYear ?? ''}
-			</p>
-		{/if}
+	<div class="mb-4 flex items-start justify-between gap-2">
+		<div class="min-w-0">
+			<h2 class="font-serif text-lg text-ink">{node.displayName}</h2>
+			{#if node.birthYear || node.deathYear}
+				<p class="font-sans text-xs text-ink-3">
+					{node.birthYear ?? '?'}–{node.deathYear ?? ''}
+				</p>
+			{/if}
+		</div>
+		<button
+			type="button"
+			onclick={onClose}
+			aria-label={m.comp_dismiss()}
+			class="shrink-0 rounded-sm p-1 text-ink-3 transition hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
+		>
+			<svg
+				class="h-4 w-4"
+				viewBox="0 0 16 16"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" d="M3 3l10 10M13 3L3 13" />
+			</svg>
+		</button>
 	</div>
 
 	{#if error}
diff --git a/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts b/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts
new file mode 100644
index 00000000..f924bbd4
--- /dev/null
+++ b/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect, afterEach, vi, beforeEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import StammbaumSidePanel from './StammbaumSidePanel.svelte';
+
+vi.mock('$app/navigation', () => ({ invalidateAll: vi.fn() }));
+vi.mock('$lib/components/PersonTypeahead.svelte', () => ({ default: () => null }));
+
+const makeNode = () => ({
+	id: 'person-1',
+	displayName: 'Alice Müller',
+	birthYear: 1900,
+	deathYear: null,
+	familyMember: true
+});
+
+function stubFetch(directRels: unknown[] = [], inferredRels: unknown[] = []) {
+	let callCount = 0;
+	vi.stubGlobal(
+		'fetch',
+		vi.fn().mockImplementation(() => {
+			callCount++;
+			const body = callCount % 2 === 1 ? directRels : inferredRels;
+			return Promise.resolve({ ok: true, json: () => Promise.resolve(body) });
+		})
+	);
+}
+
+beforeEach(() => stubFetch());
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+});
+
+describe('StammbaumSidePanel', () => {
+	it('calls onClose when dismiss button is clicked', async () => {
+		const onClose = vi.fn();
+		render(StammbaumSidePanel, { node: makeNode(), onClose, canWrite: false });
+		await expect.element(page.getByRole('button', { name: 'Schließen' })).toBeInTheDocument();
+		const btn = [...document.querySelectorAll<HTMLButtonElement>('button')].find(
+			(b) => b.getAttribute('aria-label') === 'Schließen'
+		);
+		btn!.click();
+		expect(onClose).toHaveBeenCalledOnce();
+	});
+});