feat(persons): add type selector + title + conditional fields to new-person form

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

frontend/src/routes/persons/new/+page.server.ts

@@ -1,5 +1,6 @@
 import { error, fail, redirect } from '@sveltejs/kit';
 import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
 
 export async function load({ locals }: { locals: App.Locals }) {
 	const canWrite =
@@ -12,6 +13,12 @@ export async function load({ locals }: { locals: App.Locals }) {
 export const actions = {
 	default: async ({ request, fetch }) => {
 		const formData = await request.formData();
+		const personType = (formData.get('personType')?.toString() ?? 'PERSON') as
+			| 'PERSON'
+			| 'INSTITUTION'
+			| 'GROUP'
+			| 'UNKNOWN';
+		const title = formData.get('title')?.toString().trim() || undefined;
 		const firstName = formData.get('firstName')?.toString().trim();
 		const lastName = formData.get('lastName')?.toString().trim();
 		const alias = formData.get('alias')?.toString().trim() || undefined;
@@ -19,8 +26,25 @@ export const actions = {
 		const deathYearStr = formData.get('deathYear')?.toString().trim();
 		const notes = formData.get('notes')?.toString().trim() || undefined;
 
-		if (!firstName || !lastName) {
+		if (!lastName) {
-			return fail(400, { error: 'Vor- und Nachname sind Pflichtfelder.' });
+			return fail(400, {
+				error: 'Nachname ist Pflichtfeld.',
+				personType,
+				title,
+				firstName,
+				lastName: '',
+				alias
+			});
+		}
+		if (personType === 'PERSON' && !firstName) {
+			return fail(400, {
+				error: 'Vorname ist Pflichtfeld.',
+				personType,
+				title,
+				firstName: '',
+				lastName,
+				alias
+			});
 		}
 
 		const birthYear = birthYearStr ? parseInt(birthYearStr, 10) : undefined;
@@ -29,8 +53,10 @@ export const actions = {
 		const api = createApiClient(fetch);
 		const result = await api.POST('/api/persons', {
 			body: {
-				firstName,
+				personType,
-				lastName,
+				...(title ? { title } : {}),
+				...(firstName ? { firstName } : {}),
+				lastName: lastName!,
 				...(alias ? { alias } : {}),
 				...(birthYear ? { birthYear } : {}),
 				...(deathYear ? { deathYear } : {}),
@@ -39,7 +65,15 @@ export const actions = {
 		});
 
 		if (!result.response.ok) {
-			return fail(result.response.status, { error: 'Person konnte nicht gespeichert werden.' });
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, {
+				error: getErrorMessage(code),
+				personType,
+				title,
+				firstName,
+				lastName: lastName!,
+				alias
+			});
 		}
 
 		throw redirect(303, `/persons/${result.data!.id}`);

frontend/src/routes/persons/new/+page.svelte

@@ -1,11 +1,35 @@
 <script lang="ts">
+import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import BackButton from '$lib/components/BackButton.svelte';
+import PersonTypeSelector from '$lib/components/PersonTypeSelector.svelte';
+
+type PersonType = 'PERSON' | 'INSTITUTION' | 'GROUP' | 'UNKNOWN';
+const TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
+
 let { form } = $props();
+
+let selectedType = $state<PersonType>(
+	untrack(() =>
+		TYPES.includes((form?.personType as PersonType) ?? 'PERSON')
+			? ((form?.personType as PersonType) ?? 'PERSON')
+			: 'PERSON'
+	)
+);
+
+const isPerson = $derived(selectedType === 'PERSON');
+const lastNameLabel = $derived(
+	selectedType === 'INSTITUTION' || selectedType === 'GROUP'
+		? m.form_label_name()
+		: m.form_label_last_name()
+);
+
+const inputCls =
+	'block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
+const labelCls = 'mb-1 block text-sm font-medium text-ink-2';
 </script>
 
 <div class="mx-auto max-w-2xl px-4 py-8">
-	<!-- Heading -->
 	<div class="mb-6">
 		<BackButton />
 		<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
@@ -22,79 +46,92 @@ let { form } = $props();
 			</h2>
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
-				<div>
+				<div class="md:col-span-2">
-					<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
+					<p class={labelCls}>{m.form_label_person_type()}</p>
-						>{m.form_label_first_name()} *</label
+					<PersonTypeSelector
-					>
+						value={selectedType}
-					<input
+						name="personType"
-						id="firstName"
+						onchange={(type: PersonType) => (selectedType = type)}
-						name="firstName"
-						type="text"
-						required
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					/>
 				</div>
 
-				<div>
+				{#if isPerson}
-					<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
+					<div>
-						>{m.form_label_last_name()} *</label
+						<label for="title" class={labelCls}>{m.form_label_title()}</label>
-					>
+						<input
+							id="title"
+							name="title"
+							type="text"
+							maxlength="50"
+							value={form?.title ?? ''}
+							class={inputCls}
+						/>
+					</div>
+					<div>
+						<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
+						<input
+							id="firstName"
+							name="firstName"
+							type="text"
+							required
+							value={form?.firstName ?? ''}
+							class={inputCls}
+						/>
+					</div>
+				{/if}
+
+				<div class={!isPerson ? 'md:col-span-2' : ''}>
+					<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
 					<input
 						id="lastName"
 						name="lastName"
 						type="text"
 						required
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+						value={form?.lastName ?? ''}
+						class={inputCls}
 					/>
 				</div>
 
+				{#if isPerson}
+					<div class="md:col-span-2">
+						<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
+						<input
+							id="alias"
+							name="alias"
+							type="text"
+							placeholder={m.form_placeholder_alias()}
+							value={form?.alias ?? ''}
+							class={inputCls}
+						/>
+					</div>
+					<div>
+						<label for="birthYear" class={labelCls}>{m.person_label_birth_year()}</label>
+						<input
+							id="birthYear"
+							name="birthYear"
+							type="number"
+							min="1"
+							max="2100"
+							placeholder={m.person_placeholder_year()}
+							class={inputCls}
+						/>
+					</div>
+					<div>
+						<label for="deathYear" class={labelCls}>{m.person_label_death_year()}</label>
+						<input
+							id="deathYear"
+							name="deathYear"
+							type="number"
+							min="1"
+							max="2100"
+							placeholder={m.person_placeholder_year()}
+							class={inputCls}
+						/>
+					</div>
+				{/if}
+
 				<div class="md:col-span-2">
-					<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
+					<label for="notes" class={labelCls}>{m.person_label_notes()}</label>
-						>{m.form_label_alias()}</label
-					>
-					<input
-						id="alias"
-						name="alias"
-						type="text"
-						placeholder={m.form_placeholder_alias()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-					/>
-				</div>
-
-				<div>
-					<label for="birthYear" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.person_label_birth_year()}</label
-					>
-					<input
-						id="birthYear"
-						name="birthYear"
-						type="number"
-						min="1"
-						max="2100"
-						placeholder={m.person_placeholder_year()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-					/>
-				</div>
-
-				<div>
-					<label for="deathYear" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.person_label_death_year()}</label
-					>
-					<input
-						id="deathYear"
-						name="deathYear"
-						type="number"
-						min="1"
-						max="2100"
-						placeholder={m.person_placeholder_year()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-					/>
-				</div>
-
-				<div class="md:col-span-2">
-					<label for="notes" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.person_label_notes()}</label
-					>
 					<textarea
 						id="notes"
 						name="notes"
@@ -106,7 +143,6 @@ let { form } = $props();
 			</div>
 		</div>
 
-		<!-- Save Bar -->
 		<div
 			class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
 		>