From fced33e033ab15903a6b37a726c0627625e9291d Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 20:12:41 +0200
Subject: [PATCH] fix(forms): correct required/optional field markers and
 divider placement

- Add * to Datum and Absender labels (both are required fields)
- Add required prop to PersonTypeahead to show * in its label
- Move "Optional" divider in DescriptionSection to after Titel (the only
  required field), so Tags and Inhalt appear below the divider where they belong

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/PersonTypeahead.svelte |  4 +++-
 .../document/DescriptionSection.svelte        | 22 +++++++++----------
 .../components/document/WhoWhenSection.svelte |  3 ++-
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/PersonTypeahead.svelte b/frontend/src/lib/components/PersonTypeahead.svelte
index f9bbece4..45ef34c7 100644
--- a/frontend/src/lib/components/PersonTypeahead.svelte
+++ b/frontend/src/lib/components/PersonTypeahead.svelte
@@ -16,6 +16,7 @@ interface Props {
 	compact?: boolean;
 	large?: boolean;
 	autofocus?: boolean;
+	required?: boolean;
 	restrictToCorrespondentsOf?: string;
 	onchange?: (value: string) => void;
 	onfocused?: () => void;
@@ -31,6 +32,7 @@ let {
 	compact = false,
 	large = false,
 	autofocus = false,
+	required = false,
 	restrictToCorrespondentsOf,
 	onchange,
 	onfocused
@@ -114,7 +116,7 @@ function selectPerson(person: Person) {
 		class={compact
 			? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
 			: 'block text-sm font-medium text-ink-2'}
-		>{label}</label
+		>{label}{#if required}*{/if}</label
 	>
 
 	<input type="hidden" name={name} bind:value={value} />
diff --git a/frontend/src/lib/components/document/DescriptionSection.svelte b/frontend/src/lib/components/document/DescriptionSection.svelte
index f26c96fb..27e7442e 100644
--- a/frontend/src/lib/components/document/DescriptionSection.svelte
+++ b/frontend/src/lib/components/document/DescriptionSection.svelte
@@ -56,14 +56,23 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
 			</div>
 		{/if}
 
-		<!-- Schlagworte -->
+		<!-- Optional divider -->
+		<div class="my-3 flex items-center gap-2">
+			<div class="flex-1 border-t border-line"></div>
+			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
+				>{m.label_optional()}</span
+			>
+			<div class="flex-1 border-t border-line"></div>
+		</div>
+
+		<!-- Schlagworte (optional) -->
 		<div>
 			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
 			<TagInput bind:tags={tags} />
 			<input type="hidden" name="tags" value={tags.map((t) => t.name).join(',')} />
 		</div>
 
-		<!-- Inhalt -->
+		<!-- Inhalt (optional) -->
 		<div>
 			<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 				>{m.form_label_content()}</label
@@ -78,15 +87,6 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
 			>
 		</div>
 
-		<!-- Optional divider -->
-		<div class="my-3 flex items-center gap-2">
-			<div class="flex-1 border-t border-line"></div>
-			<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
-				>{m.label_optional()}</span
-			>
-			<div class="flex-1 border-t border-line"></div>
-		</div>
-
 		<!-- Aufbewahrungsort (optional) -->
 		<div>
 			<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
diff --git a/frontend/src/lib/components/document/WhoWhenSection.svelte b/frontend/src/lib/components/document/WhoWhenSection.svelte
index 6a1dfe2a..b5d85a56 100644
--- a/frontend/src/lib/components/document/WhoWhenSection.svelte
+++ b/frontend/src/lib/components/document/WhoWhenSection.svelte
@@ -59,7 +59,7 @@ $effect(() => {
 		<!-- Datum (required — row 1, col 1) -->
 		<div>
 			<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
-				>{m.form_label_date()}</label
+				>{m.form_label_date()}*</label
 			>
 			<input
 				id="documentDate"
@@ -85,6 +85,7 @@ $effect(() => {
 			<PersonTypeahead
 				name="senderId"
 				label={m.form_label_sender()}
+				required={true}
 				bind:value={senderId}
 				initialName={initialSenderName}
 				suggestedName={suggestedSenderName}