refactor(stammbaum): extract RelationshipChip and AddRelationshipForm

Split StammbaumCard from 366 to 196 lines by extracting:
- RelationshipChip.svelte — single relationship list item with optional delete
- AddRelationshipForm.svelte — self-contained add-relationship form with open/close state

Both components have browser-mode spec tests covering rendering and interaction.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AddRelationshipForm.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import type { components } from '$lib/generated/api';
+
+type RelationshipDTO = components['schemas']['RelationshipDTO'];
+type RelationType = NonNullable<RelationshipDTO['relationType']>;
+
+interface Props {
+	personId: string;
+}
+
+let { personId }: Props = $props();
+
+let open = $state(false);
+let addType = $state<RelationType>('PARENT_OF');
+let addRelatedPersonId = $state('');
+let addRelatedPersonName = $state('');
+let addFromYear = $state('');
+let addToYear = $state('');
+
+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 selfError = $derived(
+	addRelatedPersonId !== '' && addRelatedPersonId === personId ? m.relation_error_self() : null
+);
+
+const submitDisabled = $derived(
+	yearError !== null || selfError !== null || addRelatedPersonId === ''
+);
+
+function reset() {
+	addType = 'PARENT_OF';
+	addRelatedPersonId = '';
+	addRelatedPersonName = '';
+	addFromYear = '';
+	addToYear = '';
+}
+
+function cancel() {
+	open = false;
+	reset();
+}
+</script>
+
+{#if !open}
+	<button
+		type="button"
+		onclick={() => (open = true)}
+		class="mt-2 inline-flex items-center gap-1 font-sans text-xs font-medium text-ink-2 hover:text-ink"
+	>
+		{m.stammbaum_panel_add_rel()}
+	</button>
+{:else}
+	<form
+		method="POST"
+		action="?/addRelationship"
+		use:enhance={() => {
+			return async ({ result, update }) => {
+				await update();
+				if (result.type === 'success') {
+					open = false;
+					reset();
+				}
+			};
+		}}
+		class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
+	>
+		<div class="grid gap-3 md:grid-cols-2">
+			<label class="block">
+				<span class="font-sans text-xs font-medium text-ink-2">Typ</span>
+				<select
+					name="relationType"
+					bind:value={addType}
+					class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
+				>
+					<optgroup label="Familie">
+						<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="Sozial">
+						<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>
+			</label>
+			<div>
+				<PersonTypeahead
+					name="relatedPersonId"
+					label="Person"
+					bind:value={addRelatedPersonId}
+					initialName={addRelatedPersonName}
+					excludePersonId={personId}
+					compact
+				/>
+			</div>
+			<label class="block">
+				<span class="font-sans text-xs font-medium text-ink-2">Von Jahr</span>
+				<input
+					type="text"
+					name="fromYear"
+					inputmode="numeric"
+					pattern="[0-9]*"
+					bind:value={addFromYear}
+					placeholder="z.B. 1920"
+					class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
+				/>
+			</label>
+			<label class="block">
+				<span class="font-sans text-xs font-medium text-ink-2">Bis Jahr</span>
+				<input
+					type="text"
+					name="toYear"
+					inputmode="numeric"
+					pattern="[0-9]*"
+					bind:value={addToYear}
+					aria-describedby={yearError ? 'add-rel-year-error' : undefined}
+					class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
+				/>
+				{#if yearError}
+					<p id="add-rel-year-error" class="mt-1 text-xs text-red-700" role="alert">
+						{yearError}
+					</p>
+				{/if}
+			</label>
+		</div>
+		{#if selfError}
+			<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
+		{/if}
+		<div class="mt-3 flex items-center justify-end gap-2">
+			<button
+				type="button"
+				onclick={cancel}
+				class="rounded-sm border border-line bg-surface px-3 py-1.5 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.5 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}

frontend/src/lib/components/AddRelationshipForm.svelte.spec.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import AddRelationshipForm from './AddRelationshipForm.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+vi.mock('$lib/components/PersonTypeahead.svelte', () => ({ default: () => null }));
+
+afterEach(cleanup);
+
+describe('AddRelationshipForm', () => {
+	it('shows add-relationship button initially and no form', async () => {
+		render(AddRelationshipForm, { personId: 'person-1' });
+		await expect.element(page.getByRole('button')).toBeInTheDocument();
+		await expect.element(page.getByRole('combobox')).not.toBeInTheDocument();
+	});
+
+	it('shows relationType select when add button is clicked', async () => {
+		render(AddRelationshipForm, { personId: 'person-1' });
+		document.querySelector<HTMLButtonElement>('button')!.click();
+		await expect.element(page.getByRole('combobox')).toBeInTheDocument();
+	});
+
+	it('hides form and shows button when cancel is clicked', async () => {
+		render(AddRelationshipForm, { personId: 'person-1' });
+		document.querySelector<HTMLButtonElement>('button')!.click();
+		await expect.element(page.getByRole('combobox')).toBeInTheDocument();
+		const cancelBtn = [...document.querySelectorAll<HTMLButtonElement>('button')].find(
+			(b) => b.type === 'button' && /abbrechen/i.test(b.textContent ?? '')
+		);
+		cancelBtn!.click();
+		await expect.element(page.getByRole('combobox')).not.toBeInTheDocument();
+	});
+
+	it('submit is disabled when no person is selected', async () => {
+		render(AddRelationshipForm, { personId: 'person-1' });
+		document.querySelector<HTMLButtonElement>('button')!.click();
+		await expect.element(page.getByRole('button', { name: /^Hinzufügen$/i })).toBeDisabled();
+	});
+});

frontend/src/lib/components/RelationshipChip.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+interface Props {
+	chipLabel: string;
+	otherName: string;
+	yearRange?: string;
+	canWrite: boolean;
+	relId: string;
+}
+
+let { chipLabel, otherName, yearRange = '', canWrite, relId }: Props = $props();
+</script>
+
+<li class="flex items-center gap-2 py-2">
+	<span
+		class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
+	>
+		{chipLabel}
+	</span>
+	<span class="min-w-0 flex-1 truncate font-serif text-sm text-ink">
+		{otherName}
+	</span>
+	{#if yearRange}
+		<span class="shrink-0 font-sans text-xs text-ink-3" data-testid="year-range">{yearRange}</span>
+	{/if}
+	{#if canWrite}
+		<form method="POST" action="?/deleteRelationship" use:enhance class="shrink-0">
+			<input type="hidden" name="relId" value={relId} />
+			<button
+				type="submit"
+				aria-label="{m.btn_delete()} — {otherName}"
+				class="inline-flex h-8 w-8 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
+			>
+				<svg
+					class="h-3.5 w-3.5"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					aria-hidden="true"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+				</svg>
+			</button>
+		</form>
+	{/if}
+</li>

frontend/src/lib/components/RelationshipChip.svelte.spec.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import RelationshipChip from './RelationshipChip.svelte';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+afterEach(cleanup);
+
+const baseProps = {
+	chipLabel: 'Elternteil',
+	otherName: 'Anna Schmidt',
+	yearRange: '',
+	canWrite: false,
+	relId: 'rel-1'
+};
+
+describe('RelationshipChip', () => {
+	it('renders the chip label', async () => {
+		render(RelationshipChip, baseProps);
+		await expect.element(page.getByText('Elternteil')).toBeInTheDocument();
+	});
+
+	it('renders the other person name', async () => {
+		render(RelationshipChip, baseProps);
+		await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
+	});
+
+	it('shows year range when provided', async () => {
+		render(RelationshipChip, { ...baseProps, yearRange: '1920–1980' });
+		await expect.element(page.getByText('1920–1980')).toBeInTheDocument();
+	});
+
+	it('does not show year range span when empty', async () => {
+		render(RelationshipChip, { ...baseProps, yearRange: '' });
+		expect(document.querySelector('[data-testid="year-range"]')).toBeNull();
+	});
+
+	it('shows delete button when canWrite is true', async () => {
+		render(RelationshipChip, { ...baseProps, canWrite: true });
+		await expect.element(page.getByRole('button')).toBeInTheDocument();
+	});
+
+	it('hides delete button when canWrite is false', async () => {
+		render(RelationshipChip, { ...baseProps, canWrite: false });
+		expect(document.querySelector('button')).toBeNull();
+	});
+});

frontend/src/lib/components/StammbaumCard.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
-import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import RelationshipChip from '$lib/components/RelationshipChip.svelte';
+import AddRelationshipForm from '$lib/components/AddRelationshipForm.svelte';
 import { inferredRelationshipLabel } from '$lib/relationshipLabels';
 import type { components } from '$lib/generated/api';
 
@@ -26,33 +27,8 @@ let {
 	relationshipError = null
 }: Props = $props();
 
-let addFormOpen = $state(false);
-let addType = $state<RelationType>('PARENT_OF');
-let addRelatedPersonId = $state('');
-let addRelatedPersonName = $state('');
-let addFromYear = $state('');
-let addToYear = $state('');
-
 type RelationType = NonNullable<RelationshipDTO['relationType']>;
 
-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 selfError = $derived(
-	addRelatedPersonId !== '' && addRelatedPersonId === personId ? m.relation_error_self() : null
-);
-
-const submitDisabled = $derived(
-	yearError !== null || selfError !== null || addRelatedPersonId === ''
-);
-
 const sortedDirect = $derived([...relationships].sort(byTypeThenYear));
 const topDerived = $derived(inferredRelationships.slice(0, 5));
 
@@ -113,14 +89,6 @@ function yearRange(rel: RelationshipDTO): string {
 	if (to) return m.relation_year_to({ year: to });
 	return '';
 }
-
-function resetAddForm() {
-	addType = 'PARENT_OF';
-	addRelatedPersonId = '';
-	addRelatedPersonName = '';
-	addFromYear = '';
-	addToYear = '';
-}
 </script>
 
 <div class="mt-6 rounded-sm border border-line bg-surface p-6 shadow-sm">
@@ -186,156 +154,19 @@ function resetAddForm() {
 	{:else}
 		<ul class="mb-2 divide-y divide-line">
 			{#each sortedDirect as rel (rel.id)}
-				<li class="flex items-center gap-2 py-2">
+				<RelationshipChip
-					<span
+					chipLabel={chipLabel(rel)}
-						class="inline-flex shrink-0 items-center rounded-full border border-accent/40 bg-accent/15 px-2 py-0.5 font-sans text-xs font-bold tracking-widest text-ink uppercase"
+					otherName={otherName(rel)}
-					>
+					yearRange={yearRange(rel)}
-						{chipLabel(rel)}
+					canWrite={canWrite}
-					</span>
+					relId={rel.id}
-					<span class="min-w-0 flex-1 truncate font-serif text-sm text-ink">
+				/>
-						{otherName(rel)}
-					</span>
-					{#if yearRange(rel)}
-						<span class="shrink-0 font-sans text-xs text-ink-3">{yearRange(rel)}</span>
-					{/if}
-					{#if canWrite}
-						<form method="POST" action="?/deleteRelationship" use:enhance class="shrink-0">
-							<input type="hidden" name="relId" value={rel.id} />
-							<button
-								type="submit"
-								aria-label="{m.btn_delete()} — {otherName(rel)}"
-								class="inline-flex h-8 w-8 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
-							>
-								<svg
-									class="h-3.5 w-3.5"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									aria-hidden="true"
-								>
-									<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-								</svg>
-							</button>
-						</form>
-					{/if}
-				</li>
 			{/each}
 		</ul>
 	{/if}
 
-	<!-- Add-rel button + inline form -->
 	{#if canWrite}
-		{#if !addFormOpen}
+		<AddRelationshipForm personId={personId} />
-			<button
-				type="button"
-				onclick={() => (addFormOpen = true)}
-				class="mt-2 inline-flex items-center gap-1 font-sans text-xs font-medium text-ink-2 hover:text-ink"
-			>
-				{m.stammbaum_panel_add_rel()}
-			</button>
-		{:else}
-			<form
-				method="POST"
-				action="?/addRelationship"
-				use:enhance={() => {
-					return async ({ result, update }) => {
-						await update();
-						if (result.type === 'success') {
-							addFormOpen = false;
-							resetAddForm();
-						}
-					};
-				}}
-				class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
-			>
-				<div class="grid gap-3 md:grid-cols-2">
-					<label class="block">
-						<span class="font-sans text-xs font-medium text-ink-2">Typ</span>
-						<select
-							name="relationType"
-							bind:value={addType}
-							class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
-						>
-							<optgroup label="Familie">
-								<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="Sozial">
-								<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>
-					</label>
-					<div>
-						<PersonTypeahead
-							name="relatedPersonId"
-							label="Person"
-							bind:value={addRelatedPersonId}
-							initialName={addRelatedPersonName}
-							excludePersonId={personId}
-							compact
-						/>
-					</div>
-					<label class="block">
-						<span class="font-sans text-xs font-medium text-ink-2">Von Jahr</span>
-						<input
-							type="text"
-							name="fromYear"
-							inputmode="numeric"
-							pattern="[0-9]*"
-							bind:value={addFromYear}
-							placeholder="z.B. 1920"
-							class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
-						/>
-					</label>
-					<label class="block">
-						<span class="font-sans text-xs font-medium text-ink-2">Bis Jahr</span>
-						<input
-							type="text"
-							name="toYear"
-							inputmode="numeric"
-							pattern="[0-9]*"
-							bind:value={addToYear}
-							aria-describedby={yearError ? 'add-rel-year-error' : undefined}
-							class="mt-1 block w-full rounded-sm border border-line bg-surface px-2 py-1.5 text-sm text-ink focus:border-primary focus:outline-none"
-						/>
-						{#if yearError}
-							<p id="add-rel-year-error" class="mt-1 text-xs text-red-700" role="alert">
-								{yearError}
-							</p>
-						{/if}
-					</label>
-				</div>
-				{#if selfError}
-					<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
-				{/if}
-				<div class="mt-3 flex items-center justify-end gap-2">
-					<button
-						type="button"
-						onclick={() => {
-							addFormOpen = false;
-							resetAddForm();
-						}}
-						class="rounded-sm border border-line bg-surface px-3 py-1.5 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.5 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}
 	{/if}
 
 	<!-- Abgeleitete Beziehungen -->