From dd505554ac95f8dd5f5c6cbaa736d3ab4b5f168b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 28 Apr 2026 19:25:02 +0200
Subject: [PATCH] =?UTF-8?q?refactor(stammbaum):=20StammbaumSidePanel=20com?=
 =?UTF-8?q?poses=20AddRelationshipForm=20=E2=80=94=20removes=20inline=20fo?=
 =?UTF-8?q?rm=20duplication?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the 86-line duplicated inline add-relationship form with
<AddRelationshipForm onSubmit={handleAddRelationship}>. The {#key node.id}
wrapper resets the form's open state when the selected tree node changes.
Year inputs now have <label> elements (WCAG 1.3.1) via the shared component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../lib/components/StammbaumSidePanel.svelte  | 173 ++----------------
 .../StammbaumSidePanel.svelte.spec.ts         |  18 ++
 2 files changed, 38 insertions(+), 153 deletions(-)

diff --git a/frontend/src/lib/components/StammbaumSidePanel.svelte b/frontend/src/lib/components/StammbaumSidePanel.svelte
index 3d3a834d..5ec163ac 100644
--- a/frontend/src/lib/components/StammbaumSidePanel.svelte
+++ b/frontend/src/lib/components/StammbaumSidePanel.svelte
@@ -3,13 +3,13 @@ import { onMount } from 'svelte';
 import { invalidateAll } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import { chipLabel, otherName, inferredRelationshipLabel } from '$lib/relationshipLabels';
-import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import AddRelationshipForm from '$lib/components/AddRelationshipForm.svelte';
+import type { RelFormData } from '$lib/components/AddRelationshipForm.svelte';
 import type { components } from '$lib/generated/api';
 
 type PersonNodeDTO = components['schemas']['PersonNodeDTO'];
 type RelationshipDTO = components['schemas']['RelationshipDTO'];
 type InferredRelationshipWithPersonDTO = components['schemas']['InferredRelationshipWithPersonDTO'];
-type RelationType = NonNullable<RelationshipDTO['relationType']>;
 
 interface Props {
 	node: PersonNodeDTO;
@@ -24,32 +24,9 @@ let derivedRels = $state<InferredRelationshipWithPersonDTO[]>([]);
 let loading = $state(false);
 let error = $state<string | null>(null);
 
-let addFormOpen = $state(false);
-let addType = $state<RelationType>('PARENT_OF');
-let addRelatedPersonId = $state('');
-let addRelatedPersonName = $state('');
-let addFromYear = $state('');
-let addToYear = $state('');
-let saving = $state(false);
-let saveError = $state<string | null>(null);
-
-const yearError = $derived.by(() => {
-	const from = addFromYear.trim();
-	const to = addToYear.trim();
-	if (!from || !to) return null;
-	const fromInt = parseInt(from, 10);
-	const toInt = parseInt(to, 10);
-	if (Number.isNaN(fromInt) || Number.isNaN(toInt)) return null;
-	return toInt < fromInt ? m.relation_year_error_bis_before_von() : null;
-});
-
-const submitDisabled = $derived(saving || addRelatedPersonId === '' || yearError !== null);
-
 $effect(() => {
 	const id = node.id;
 	loadFor(id);
-	addFormOpen = false;
-	resetForm();
 });
 
 async function loadFor(id: string) {
@@ -73,51 +50,21 @@ async function loadFor(id: string) {
 	}
 }
 
-function resetForm() {
-	addType = 'PARENT_OF';
-	addRelatedPersonId = '';
-	addRelatedPersonName = '';
-	addFromYear = '';
-	addToYear = '';
-	saveError = null;
-}
-
-async function submitAdd(event: Event) {
-	event.preventDefault();
-	if (submitDisabled) return;
-	saving = true;
-	saveError = null;
-	try {
-		const body: Record<string, string | number> = {
-			relatedPersonId: addRelatedPersonId,
-			relationType: addType
-		};
-		if (addFromYear.trim()) {
-			const v = parseInt(addFromYear, 10);
-			if (!Number.isNaN(v)) body.fromYear = v;
-		}
-		if (addToYear.trim()) {
-			const v = parseInt(addToYear, 10);
-			if (!Number.isNaN(v)) body.toYear = v;
-		}
-		const res = await fetch(`/api/persons/${node.id}/relationships`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify(body)
-		});
-		if (!res.ok) {
-			saveError = m.error_internal_error();
-			return;
-		}
-		addFormOpen = false;
-		resetForm();
-		await loadFor(node.id);
-		await invalidateAll();
-	} catch {
-		saveError = m.error_internal_error();
-	} finally {
-		saving = false;
-	}
+async function handleAddRelationship(data: RelFormData) {
+	const body: Record<string, string | number> = {
+		relatedPersonId: data.relatedPersonId,
+		relationType: data.relationType
+	};
+	if (data.fromYear !== undefined) body.fromYear = data.fromYear;
+	if (data.toYear !== undefined) body.toYear = data.toYear;
+	const res = await fetch(`/api/persons/${node.id}/relationships`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		body: JSON.stringify(body)
+	});
+	if (!res.ok) throw new Error('Failed to add relationship');
+	await loadFor(node.id);
+	await invalidateAll();
 }
 
 function handleEscape(event: KeyboardEvent) {
@@ -196,89 +143,9 @@ const topDerived = $derived(
 			{/if}
 
 			{#if canWrite}
-				{#if !addFormOpen}
-					<button
-						type="button"
-						onclick={() => (addFormOpen = true)}
-						class="mt-2 font-sans text-xs font-bold text-primary opacity-50 transition-opacity hover:opacity-100"
-					>
-						{m.stammbaum_panel_add_rel()}
-					</button>
-				{:else}
-					<form onsubmit={submitAdd} class="mt-3 flex flex-col gap-2">
-						<select
-							bind:value={addType}
-							aria-label={m.relation_form_field_type()}
-							class="h-8 rounded-sm border border-line bg-surface px-2 font-sans text-xs text-ink focus:border-primary focus:outline-none"
-						>
-							<optgroup label={m.relation_form_group_family()}>
-								<option value="PARENT_OF">{m.relation_parent_of()}</option>
-								<option value="SPOUSE_OF">{m.relation_spouse_of()}</option>
-								<option value="SIBLING_OF">{m.relation_sibling_of()}</option>
-							</optgroup>
-							<optgroup label={m.relation_form_group_social()}>
-								<option value="FRIEND">{m.relation_friend()}</option>
-								<option value="COLLEAGUE">{m.relation_colleague()}</option>
-								<option value="EMPLOYER">{m.relation_employer()}</option>
-								<option value="DOCTOR">{m.relation_doctor()}</option>
-								<option value="NEIGHBOR">{m.relation_neighbor()}</option>
-								<option value="OTHER">{m.relation_other()}</option>
-							</optgroup>
-						</select>
-						<PersonTypeahead
-							name="relatedPersonId"
-							label="Person"
-							placeholder="Person suchen…"
-							bind:value={addRelatedPersonId}
-							initialName={addRelatedPersonName}
-							excludePersonId={node.id}
-							compact
-						/>
-						<div class="flex gap-1.5">
-							<input
-								type="text"
-								inputmode="numeric"
-								pattern="[0-9]*"
-								placeholder={m.relation_form_field_from_year()}
-								bind:value={addFromYear}
-								class="h-8 min-w-0 flex-1 rounded-sm border border-line bg-surface px-2 font-sans text-xs text-ink focus:border-primary focus:outline-none"
-							/>
-							<input
-								type="text"
-								inputmode="numeric"
-								pattern="[0-9]*"
-								placeholder={m.relation_form_field_to_year()}
-								bind:value={addToYear}
-								class="h-8 min-w-0 flex-1 rounded-sm border border-line bg-surface px-2 font-sans text-xs text-ink focus:border-primary focus:outline-none"
-							/>
-						</div>
-						{#if yearError}
-							<p class="text-xs text-red-700" role="alert">{yearError}</p>
-						{/if}
-						{#if saveError}
-							<p class="text-xs text-red-700" role="alert">{saveError}</p>
-						{/if}
-						<div class="flex justify-end gap-2">
-							<button
-								type="button"
-								onclick={() => {
-									addFormOpen = false;
-									resetForm();
-								}}
-								class="rounded-sm border border-line bg-surface px-3 py-1 font-sans text-xs font-medium text-ink-2 transition hover:bg-muted"
-							>
-								{m.relation_btn_cancel()}
-							</button>
-							<button
-								type="submit"
-								disabled={submitDisabled}
-								class="rounded-sm bg-primary px-3 py-1 font-sans text-xs font-medium text-primary-fg transition hover:bg-primary/80 disabled:opacity-40"
-							>
-								{m.relation_btn_add()}
-							</button>
-						</div>
-					</form>
-				{/if}
+				{#key node.id}
+					<AddRelationshipForm personId={node.id} onSubmit={handleAddRelationship} />
+				{/key}
 			{/if}
 		</section>
 
diff --git a/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts b/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts
index 4d426a02..1006367b 100644
--- a/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts
+++ b/frontend/src/lib/components/StammbaumSidePanel.svelte.spec.ts
@@ -4,6 +4,7 @@ import { page } from 'vitest/browser';
 import StammbaumSidePanel from './StammbaumSidePanel.svelte';
 
 vi.mock('$app/navigation', () => ({ invalidateAll: vi.fn() }));
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
 vi.mock('$lib/components/PersonTypeahead.svelte', () => ({ default: () => null }));
 
 const makeNode = () => ({
@@ -54,6 +55,23 @@ describe('StammbaumSidePanel', () => {
 		await expect.element(page.getByText('Noch keine Beziehungen bekannt.')).toBeInTheDocument();
 	});
 
+	it('year inputs inside the add form have label elements (canWrite=true)', async () => {
+		render(StammbaumSidePanel, { node: makeNode(), onClose: vi.fn(), canWrite: true });
+		await expect.element(page.getByText('Noch keine Beziehungen bekannt.')).toBeInTheDocument();
+		const addBtn = [...document.querySelectorAll<HTMLButtonElement>('button')].find((b) =>
+			/Beziehung hinzufügen/i.test(b.textContent ?? '')
+		);
+		addBtn!.click();
+		await expect.element(page.getByRole('combobox')).toBeInTheDocument();
+		const yearInputs = [...document.querySelectorAll('input')].filter(
+			(i) => i.inputMode === 'numeric'
+		);
+		expect(yearInputs.length).toBeGreaterThan(0);
+		for (const input of yearInputs) {
+			expect(input.closest('label')).not.toBeNull();
+		}
+	});
+
 	it('shows loading indicator while fetching', async () => {
 		let resolveFirst: (v: unknown) => void;
 		vi.stubGlobal(