feat(stammbaum): AddRelationshipForm accepts onSubmit callback prop for fetch-based submission

When onSubmit is provided the form has no server action and calls the
callback with typed RelFormData instead. Uses a shared {#snippet} for
the form body so the two submission paths share one template.

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

frontend/src/lib/components/AddRelationshipForm.svelte

@@ -7,11 +7,19 @@ import type { components } from '$lib/generated/api';
 type RelationshipDTO = components['schemas']['RelationshipDTO'];
 type RelationType = NonNullable<RelationshipDTO['relationType']>;
 
+export type RelFormData = {
+	relatedPersonId: string;
+	relationType: RelationType;
+	fromYear?: number;
+	toYear?: number;
+};
+
 interface Props {
 	personId: string;
+	onSubmit?: (data: RelFormData) => Promise<void>;
 }
 
-let { personId }: Props = $props();
+let { personId, onSubmit }: Props = $props();
 
 let open = $state(false);
 let addType = $state<RelationType>('PARENT_OF');
@@ -19,6 +27,7 @@ let addRelatedPersonId = $state('');
 let addRelatedPersonName = $state('');
 let addFromYear = $state('');
 let addToYear = $state('');
+let callbackError = $state<string | null>(null);
 
 const yearError = $derived.by(() => {
 	const from = addFromYear.trim();
@@ -44,37 +53,33 @@ function reset() {
 	addRelatedPersonName = '';
 	addFromYear = '';
 	addToYear = '';
+	callbackError = null;
 }
 
 function cancel() {
 	open = false;
 	reset();
 }
-</script>
 
-{#if !open}
+async function handleCallbackSubmit(event: Event) {
-	<button
+	event.preventDefault();
-		type="button"
+	if (submitDisabled || !onSubmit) return;
-		onclick={() => (open = true)}
+	const data: RelFormData = { relatedPersonId: addRelatedPersonId, relationType: addType };
-		class="mt-2 inline-flex items-center gap-1 font-sans text-xs font-medium text-ink-2 hover:text-ink"
+	const from = parseInt(addFromYear.trim(), 10);
-	>
+	if (!Number.isNaN(from)) data.fromYear = from;
-		{m.stammbaum_panel_add_rel()}
+	const to = parseInt(addToYear.trim(), 10);
-	</button>
+	if (!Number.isNaN(to)) data.toYear = to;
-{:else}
+	try {
-	<form
+		await onSubmit(data);
-		method="POST"
-		action="?/addRelationship"
-		use:enhance={() => {
-			return async ({ result, update }) => {
-				await update();
-				if (result.type === 'success') {
 		open = false;
 		reset();
+	} catch {
+		callbackError = m.error_internal_error();
 	}
-			};
+}
-		}}
+</script>
-		class="mt-3 rounded-sm border border-line bg-muted/40 p-3"
+
-	>
+{#snippet formFields()}
 	<div class="grid gap-3 md:grid-cols-2">
 		<label class="block">
 			<span class="font-sans text-xs font-medium text-ink-2">{m.relation_form_field_type()}</span>
@@ -123,8 +128,7 @@ function cancel() {
 			/>
 		</label>
 		<label class="block">
-				<span class="font-sans text-xs font-medium text-ink-2"
+			<span class="font-sans text-xs font-medium text-ink-2">{m.relation_form_field_to_year()}</span
-					>{m.relation_form_field_to_year()}</span
 			>
 			<input
 				type="text"
@@ -145,6 +149,9 @@ function cancel() {
 	{#if selfError}
 		<p class="mt-2 text-xs text-red-700" role="alert">{selfError}</p>
 	{/if}
+	{#if callbackError}
+		<p class="mt-2 text-xs text-red-700" role="alert">{callbackError}</p>
+	{/if}
 	<div class="mt-3 flex items-center justify-end gap-2">
 		<button
 			type="button"
@@ -161,5 +168,35 @@ function cancel() {
 			{m.relation_btn_add()}
 		</button>
 	</div>
+{/snippet}
+
+{#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 if onSubmit}
+	<form onsubmit={handleCallbackSubmit} class="mt-3 rounded-sm border border-line bg-muted/40 p-3">
+		{@render formFields()}
+	</form>
+{: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"
+	>
+		{@render formFields()}
 	</form>
 {/if}

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

@@ -38,6 +38,15 @@ describe('AddRelationshipForm', () => {
 		await expect.element(page.getByRole('button', { name: /^Hinzufügen$/i })).toBeDisabled();
 	});
 
+	it('form has no server action when onSubmit prop is provided', async () => {
+		const onSubmit = vi.fn().mockResolvedValue(undefined);
+		render(AddRelationshipForm, { personId: 'person-1', onSubmit });
+		document.querySelector<HTMLButtonElement>('button')!.click();
+		await expect.element(page.getByRole('combobox')).toBeInTheDocument();
+		const form = document.querySelector('form');
+		expect(form?.hasAttribute('action')).toBe(false);
+	});
+
 	it('shows year-range error when toYear is before fromYear', async () => {
 		render(AddRelationshipForm, { personId: 'person-1' });
 		document.querySelector<HTMLButtonElement>('button')!.click();