From ccbcbca0e8daa5557571bb8dae98c50cb7ab635a Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 27 Apr 2026 21:44:51 +0200
Subject: [PATCH] feat(stammbaum): inline add-relationship form in side panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements the inline-edit affordance from
docs/specs/stammbaum-tree-spec.html (section 3): a low-opacity
"+ Beziehung hinzufügen" button below the direct relationships list
expands into a compact form (type select, person typeahead,
optional Von/Bis Jahr inputs, Abbrechen + Speichern). On save the
form POSTs to /api/persons/{id}/relationships, reloads the panel's
own data, and calls invalidateAll() so the tree picks up the new
edge without a hard refresh.

The panel takes a new canWrite prop, plumbed through from the
+layout.server.ts data already exposed on page.data.

Also pins the /stammbaum canvas to the viewport (-my-6 cancels
<main>'s py-6, h-[calc(100dvh-4.25rem)] subtracts the navbar) so
the page no longer overflows below the fold.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../lib/components/StammbaumSidePanel.svelte  | 169 +++++++++++++++++-
 frontend/src/routes/stammbaum/+page.svelte    |  12 +-
 2 files changed, 177 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/StammbaumSidePanel.svelte b/frontend/src/lib/components/StammbaumSidePanel.svelte
index 56d758fb..fda9d48b 100644
--- a/frontend/src/lib/components/StammbaumSidePanel.svelte
+++ b/frontend/src/lib/components/StammbaumSidePanel.svelte
@@ -1,28 +1,55 @@
 <script lang="ts">
 import { onMount } from 'svelte';
+import { invalidateAll } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import { inferredRelationshipLabel } from '$lib/relationshipLabels';
+import PersonTypeahead from '$lib/components/PersonTypeahead.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;
 	onClose: () => void;
+	canWrite?: boolean;
 }
 
-let { node, onClose }: Props = $props();
+let { node, onClose, canWrite = false }: Props = $props();
 
 let directRels = $state<RelationshipDTO[]>([]);
 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) {
@@ -46,6 +73,53 @@ 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;
+	}
+}
+
 function chipLabel(rel: RelationshipDTO): string {
 	const viewpointIsSubject = rel.personId === node.id;
 	switch (rel.relationType) {
@@ -84,7 +158,12 @@ onMount(() => {
 	return () => window.removeEventListener('keydown', handler);
 });
 
-const topDerived = $derived(derivedRels.slice(0, 5));
+const directOtherIds = $derived(
+	new Set(directRels.map((r) => (r.personId === node.id ? r.relatedPersonId : r.personId)))
+);
+const topDerived = $derived(
+	derivedRels.filter((d) => !directOtherIds.has(d.person.id)).slice(0, 5)
+);
 </script>
 
 <div class="flex h-full flex-col p-5">
@@ -124,6 +203,92 @@ const topDerived = $derived(derivedRels.slice(0, 5));
 					{/each}
 				</ul>
 			{/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="Typ"
+							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="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>
+						<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="Von Jahr"
+								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="Bis Jahr"
+								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}
+			{/if}
 		</section>
 
 		{#if topDerived.length > 0}
diff --git a/frontend/src/routes/stammbaum/+page.svelte b/frontend/src/routes/stammbaum/+page.svelte
index bb6d076c..b7c1cacb 100644
--- a/frontend/src/routes/stammbaum/+page.svelte
+++ b/frontend/src/routes/stammbaum/+page.svelte
@@ -15,6 +15,7 @@ interface Props {
 let { data }: Props = $props();
 
 const focusId = $derived(page.url.searchParams.get('focus'));
+const canWrite = $derived<boolean>(page.data.canWrite ?? false);
 
 let selectedId = $state<string | null>(null);
 $effect(() => {
@@ -34,7 +35,10 @@ function zoomOut() {
 }
 </script>
 
-<div class="-mt-6 flex h-full flex-col">
+<!-- 4.25rem = 4rem navbar (h-16) + 0.25rem accent strip (h-1).
+     -my-6 cancels <main>'s py-6 so the canvas sits flush against the navbar
+     on top and the viewport edge on the bottom. -->
+<div class="-my-6 flex h-[calc(100dvh-4.25rem)] flex-col">
 	<header
 		class="flex shrink-0 items-center justify-between border-b border-line bg-surface px-6 py-4"
 	>
@@ -102,7 +106,11 @@ function zoomOut() {
 			</div>
 			{#if selectedNode}
 				<aside class="w-[268px] shrink-0 overflow-y-auto border-l border-line bg-surface">
-					<StammbaumSidePanel node={selectedNode} onClose={() => (selectedId = null)} />
+					<StammbaumSidePanel
+						node={selectedNode}
+						canWrite={canWrite}
+						onClose={() => (selectedId = null)}
+					/>
 				</aside>
 			{/if}
 		</div>