From c62bf9085c72d7c0699d01a7dd401c49d5ae2f88 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 13:55:38 +0200
Subject: [PATCH] feat(frontend): reorder DescriptionSection fields, expose
 currentTitle bindable, add Optional divider
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Field order: Titel → Schlagworte → Kurzinhalt → [Optional divider] → Aufbewahrungsort.
currentTitle is now bindable so the enrich page can derive the required-fields progress bar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../document/DescriptionSection.svelte        | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/document/DescriptionSection.svelte b/frontend/src/lib/components/document/DescriptionSection.svelte
index ac5b7cd0..8479f9b9 100644
--- a/frontend/src/lib/components/document/DescriptionSection.svelte
+++ b/frontend/src/lib/components/document/DescriptionSection.svelte
@@ -5,6 +5,7 @@ import { m } from '$lib/paraglide/messages.js';
 
 let {
 	tags = $bindable<Tag[]>([]),
+	currentTitle = $bindable(''),
 	initialTitle = '',
 	initialDocumentLocation = '',
 	initialSummary = '',
@@ -13,6 +14,7 @@ let {
 	hideTitle = false
 }: {
 	tags?: Tag[];
+	currentTitle?: string;
 	initialTitle?: string;
 	initialDocumentLocation?: string;
 	initialSummary?: string;
@@ -22,8 +24,8 @@ let {
 } = $props();
 
 let titleDirty = $state(false);
-let titleOverride = $state(untrack(() => initialTitle));
-let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride);
+currentTitle = untrack(() => initialTitle);
+const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || currentTitle);
 </script>
 
 <div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
@@ -33,7 +35,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 
 	<div class="space-y-5">
 		{#if !hideTitle}
-			<!-- Titel -->
+			<!-- Titel (required) -->
 			<div>
 				<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 					>{m.form_label_title()}{#if titleRequired}
@@ -45,7 +47,7 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 					name="title"
 					value={titleValue}
 					oninput={(e) => {
-						titleOverride = (e.target as HTMLInputElement).value;
+						currentTitle = (e.target as HTMLInputElement).value;
 						titleDirty = true;
 					}}
 					required={titleRequired}
@@ -54,22 +56,6 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 			</div>
 		{/if}
 
-		<!-- Aufbewahrungsort -->
-		<div>
-			<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
-				>{m.form_label_archive_location()}</label
-			>
-			<input
-				id="documentLocation"
-				type="text"
-				name="documentLocation"
-				value={initialDocumentLocation}
-				placeholder={m.form_placeholder_archive_location()}
-				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"
-			/>
-			<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
-		</div>
-
 		<!-- Schlagworte -->
 		<div>
 			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
@@ -91,5 +77,28 @@ let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOv
 				>{initialSummary}</textarea
 			>
 		</div>
+
+		<!-- Optional divider -->
+		<div class="my-3 flex items-center gap-2">
+			<div class="flex-1 border-t border-line"></div>
+			<span class="text-[9px] font-bold tracking-widest text-ink-3 uppercase">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"
+				>{m.form_label_archive_location()}</label
+			>
+			<input
+				id="documentLocation"
+				type="text"
+				name="documentLocation"
+				value={initialDocumentLocation}
+				placeholder={m.form_placeholder_archive_location()}
+				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"
+			/>
+			<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
+		</div>
 	</div>
 </div>