From 1f7509413dee2760fe332ec87d467bdf54b84ef2 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sun, 26 Apr 2026 12:34:49 +0200
Subject: [PATCH] refactor(persons): extract inputCls/labelCls and
 PersonFormData type

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/person-validation.ts         | 11 +++
 .../persons/[id]/edit/PersonEditForm.svelte   | 79 ++++++-------------
 2 files changed, 35 insertions(+), 55 deletions(-)

diff --git a/frontend/src/lib/person-validation.ts b/frontend/src/lib/person-validation.ts
index 1e2b3ccf..80f7e2c6 100644
--- a/frontend/src/lib/person-validation.ts
+++ b/frontend/src/lib/person-validation.ts
@@ -3,6 +3,17 @@ import { m } from '$lib/paraglide/messages.js';
 export const PERSON_TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
 export type PersonType = (typeof PERSON_TYPES)[number];
 
+export type PersonFormData = {
+	personType?: string | null;
+	title?: string | null;
+	firstName?: string | null;
+	lastName: string;
+	alias?: string | null;
+	birthYear?: number | null;
+	deathYear?: number | null;
+	notes?: string | null;
+};
+
 export function normalizePersonType(raw: string | undefined | null): PersonType {
 	return raw === 'SKIP' ? 'UNKNOWN' : ((raw ?? 'PERSON') as PersonType);
 }
diff --git a/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte b/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte
index 627ec47b..b53599ea 100644
--- a/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte
+++ b/frontend/src/routes/persons/[id]/edit/PersonEditForm.svelte
@@ -2,22 +2,13 @@
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import PersonTypeSelector from '$lib/components/PersonTypeSelector.svelte';
-import { PERSON_TYPES as TYPES, type PersonType } from '$lib/person-validation';
+import {
+	PERSON_TYPES as TYPES,
+	type PersonType,
+	type PersonFormData
+} from '$lib/person-validation';
 
-let {
-	person
-}: {
-	person: {
-		personType?: string | null;
-		title?: string | null;
-		firstName?: string | null;
-		lastName: string;
-		alias?: string | null;
-		birthYear?: number | null;
-		deathYear?: number | null;
-		notes?: string | null;
-	};
-} = $props();
+let { person }: { person: PersonFormData } = $props();
 
 let selectedType = $state<PersonType>(
 	untrack(() =>
@@ -31,11 +22,15 @@ const lastNameLabel = $derived(
 		? m.form_label_name()
 		: m.form_label_last_name()
 );
+
+const labelCls = 'mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase';
+const inputCls =
+	'block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
 </script>
 
 <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 	<div class="md:col-span-2">
-		<p class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase">
+		<p class={labelCls}>
 			{m.form_label_person_type()}
 		</p>
 		<PersonTypeSelector
@@ -47,68 +42,48 @@ const lastNameLabel = $derived(
 
 	{#if isPerson}
 		<div>
-			<label for="title" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.form_label_title()}</label
-			>
+			<label for="title" class={labelCls}>{m.form_label_title()}</label>
 			<input
 				id="title"
 				name="title"
 				type="text"
 				maxlength="50"
 				value={person.title ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 		<div>
-			<label
-				for="firstName"
-				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.form_label_first_name()} *</label
-			>
+			<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
 			<input
 				id="firstName"
 				name="firstName"
 				type="text"
 				required
 				value={person.firstName ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 	{/if}
 
 	<div class={!isPerson ? 'md:col-span-2' : ''}>
-		<label for="lastName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-			>{lastNameLabel} *</label
-		>
+		<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
 		<input
 			id="lastName"
 			name="lastName"
 			type="text"
 			required
 			value={person.lastName}
-			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+			class={inputCls}
 		/>
 	</div>
 
 	{#if isPerson}
 		<div class="md:col-span-2">
-			<label for="alias" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.form_label_alias()}</label
-			>
-			<input
-				id="alias"
-				name="alias"
-				type="text"
-				value={person.alias ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-			/>
+			<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
+			<input id="alias" name="alias" type="text" value={person.alias ?? ''} class={inputCls} />
 		</div>
 		<div>
-			<label
-				for="birthYear"
-				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.person_label_birth_year()}</label
-			>
+			<label for="birthYear" class={labelCls}>{m.person_label_birth_year()}</label>
 			<input
 				id="birthYear"
 				name="birthYear"
@@ -117,15 +92,11 @@ const lastNameLabel = $derived(
 				max="2100"
 				placeholder={m.person_placeholder_year()}
 				value={person.birthYear ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 		<div>
-			<label
-				for="deathYear"
-				class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.person_label_death_year()}</label
-			>
+			<label for="deathYear" class={labelCls}>{m.person_label_death_year()}</label>
 			<input
 				id="deathYear"
 				name="deathYear"
@@ -134,15 +105,13 @@ const lastNameLabel = $derived(
 				max="2100"
 				placeholder={m.person_placeholder_year()}
 				value={person.deathYear ?? ''}
-				class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				class={inputCls}
 			/>
 		</div>
 	{/if}
 
 	<div class="md:col-span-2">
-		<label for="notes" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
-			>{m.person_label_notes()}</label
-		>
+		<label for="notes" class={labelCls}>{m.person_label_notes()}</label>
 		<textarea
 			id="notes"
 			name="notes"