From 1facf9cd6033ada3d6c7fb2b5b75f1b95cee184c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 26 Mar 2026 12:20:34 +0100
Subject: [PATCH] refactor(documents): extract document form sub-components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shared (src/lib/components/document/):
- WhoWhenSection.svelte: date/location/sender/receivers; owns date state
- DescriptionSection.svelte: title/archive-loc/tags/summary; owns tag binding
- TranscriptionSection.svelte: transcription textarea

Page-local:
- documents/[id]/edit/FileSectionEdit.svelte: current file + replace input
- documents/[id]/edit/SaveBar.svelte: sticky bar with two-step delete confirm
- documents/new/FileSectionNew.svelte: initial file upload input

documents/[id]/edit drops from 319 → ~40 lines.
documents/new drops from 254 → ~30 lines.
Date handling imported from \$lib/utils/date.

Part of #75

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../document/DescriptionSection.svelte        |  80 +++++
 .../document/TranscriptionSection.svelte      |  19 ++
 .../components/document/WhoWhenSection.svelte | 102 ++++++
 .../routes/documents/[id]/edit/+page.svelte   | 292 ++----------------
 .../[id]/edit/FileSectionEdit.svelte          |  40 +++
 .../routes/documents/[id]/edit/SaveBar.svelte |  72 +++++
 .../src/routes/documents/new/+page.svelte     | 206 +-----------
 .../documents/new/FileSectionNew.svelte       |  25 ++
 8 files changed, 374 insertions(+), 462 deletions(-)
 create mode 100644 frontend/src/lib/components/document/DescriptionSection.svelte
 create mode 100644 frontend/src/lib/components/document/TranscriptionSection.svelte
 create mode 100644 frontend/src/lib/components/document/WhoWhenSection.svelte
 create mode 100644 frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte
 create mode 100644 frontend/src/routes/documents/[id]/edit/SaveBar.svelte
 create mode 100644 frontend/src/routes/documents/new/FileSectionNew.svelte

diff --git a/frontend/src/lib/components/document/DescriptionSection.svelte b/frontend/src/lib/components/document/DescriptionSection.svelte
new file mode 100644
index 00000000..10cda974
--- /dev/null
+++ b/frontend/src/lib/components/document/DescriptionSection.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+import TagInput from '$lib/components/TagInput.svelte';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	tags = $bindable<string[]>([]),
+	initialTitle = '',
+	initialDocumentLocation = '',
+	initialSummary = '',
+	titleRequired = false
+}: {
+	tags?: string[];
+	initialTitle?: string;
+	initialDocumentLocation?: string;
+	initialSummary?: string;
+	titleRequired?: boolean;
+} = $props();
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_description()}
+	</h2>
+
+	<div class="space-y-5">
+		<!-- Titel -->
+		<div>
+			<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_title()}{#if titleRequired}
+					*{/if}</label
+			>
+			<input
+				id="title"
+				type="text"
+				name="title"
+				value={initialTitle}
+				required={titleRequired}
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+			/>
+		</div>
+
+		<!-- 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:border-ink focus:ring-ink"
+			/>
+			<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>
+			<TagInput bind:tags={tags} />
+			<input type="hidden" name="tags" value={tags.join(',')} />
+		</div>
+
+		<!-- Inhalt -->
+		<div>
+			<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_content()}</label
+			>
+			<textarea
+				id="summary"
+				name="summary"
+				rows="5"
+				placeholder={m.form_placeholder_content()}
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+				>{initialSummary}</textarea
+			>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/document/TranscriptionSection.svelte b/frontend/src/lib/components/document/TranscriptionSection.svelte
new file mode 100644
index 00000000..142af5ae
--- /dev/null
+++ b/frontend/src/lib/components/document/TranscriptionSection.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { initialTranscription = '' }: { initialTranscription?: string } = $props();
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.form_label_transcription()}
+	</h2>
+	<textarea
+		id="transcription"
+		name="transcription"
+		rows="12"
+		placeholder={m.form_placeholder_transcription()}
+		class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
+		>{initialTranscription}</textarea
+	>
+</div>
diff --git a/frontend/src/lib/components/document/WhoWhenSection.svelte b/frontend/src/lib/components/document/WhoWhenSection.svelte
new file mode 100644
index 00000000..71b2feaf
--- /dev/null
+++ b/frontend/src/lib/components/document/WhoWhenSection.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
+import { isoToGerman, handleGermanDateInput } from '$lib/utils/date';
+import { m } from '$lib/paraglide/messages.js';
+
+interface Person {
+	id: string;
+	firstName: string;
+	lastName: string;
+}
+
+let {
+	senderId = $bindable(''),
+	selectedReceivers = $bindable<Person[]>([]),
+	initialDateIso = '',
+	initialLocation = '',
+	initialSenderName = ''
+}: {
+	senderId?: string;
+	selectedReceivers?: Person[];
+	initialDateIso?: string;
+	initialLocation?: string;
+	initialSenderName?: string;
+} = $props();
+
+let dateDisplay = $state(untrack(() => isoToGerman(initialDateIso)));
+let dateIso = $state(untrack(() => initialDateIso));
+let dateDirty = $state(false);
+
+const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
+
+function handleDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	dateDisplay = result.display;
+	dateIso = result.iso;
+	dateDirty = true;
+}
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_who_when()}
+	</h2>
+
+	<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
+		<!-- Datum -->
+		<div>
+			<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_date()}</label
+			>
+			<input
+				id="documentDate"
+				type="text"
+				inputmode="numeric"
+				value={dateDisplay}
+				oninput={handleDateInput}
+				placeholder={m.form_placeholder_date()}
+				maxlength="10"
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm
+                       {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
+				aria-describedby={dateInvalid ? 'date-error' : undefined}
+			/>
+			<input type="hidden" name="documentDate" value={dateIso} />
+			{#if dateInvalid}
+				<p id="date-error" class="mt-1 text-xs text-red-600">{m.form_date_error()}</p>
+			{/if}
+		</div>
+
+		<!-- Ort -->
+		<div>
+			<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
+				>{m.form_label_location()}</label
+			>
+			<input
+				id="location"
+				type="text"
+				name="location"
+				value={initialLocation}
+				placeholder={m.form_placeholder_location()}
+				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+			/>
+		</div>
+
+		<!-- Absender -->
+		<div>
+			<PersonTypeahead
+				name="senderId"
+				label={m.form_label_sender()}
+				bind:value={senderId}
+				initialName={initialSenderName}
+			/>
+		</div>
+
+		<!-- Empfänger -->
+		<div>
+			<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
+			<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index cac183a9..0adb8955 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-import TagInput from '$lib/components/TagInput.svelte';
-import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
-import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
 import { untrack } from 'svelte';
-import { isoToGerman, germanToIso } from '$lib/utils';
 import { m } from '$lib/paraglide/messages.js';
+import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
+import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
+import FileSectionEdit from './FileSectionEdit.svelte';
+import SaveBar from './SaveBar.svelte';
 
 let { data, form } = $props();
 
@@ -13,30 +14,6 @@ let { document: doc } = untrack(() => data);
 let tags = $state(doc.tags ? doc.tags.map((t: { name: string }) => t.name) : []);
 let senderId = $state(doc.sender?.id ?? '');
 let selectedReceivers = $state(doc.receivers ?? []);
-
-let dateDisplay = $state(isoToGerman(doc.documentDate ?? ''));
-let dateIso = $state(doc.documentDate ?? '');
-let dateDirty = $state(false);
-let confirmDelete = $state(false);
-
-const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
-
-function handleDateInput(e: Event) {
-	const input = e.target as HTMLInputElement;
-	const digits = input.value.replace(/\D/g, '').slice(0, 8);
-	let formatted: string;
-	if (digits.length <= 2) {
-		formatted = digits;
-	} else if (digits.length <= 4) {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
-	} else {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
-	}
-	input.value = formatted;
-	dateDisplay = formatted;
-	dateIso = germanToIso(formatted);
-	dateDirty = true;
-}
 </script>
 
 <div class="mx-auto max-w-4xl px-4 py-8">
@@ -65,253 +42,30 @@ function handleDateInput(e: Event) {
 	{/if}
 
 	<form
+		id="update-form"
 		method="POST"
 		action="?/update"
 		enctype="multipart/form-data"
 		use:enhance
 		class="space-y-6 pb-20"
 	>
-		<!-- ── Section 1: Wer & Wann ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.doc_section_who_when()}
-			</h2>
-
-			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
-				<!-- Datum -->
-				<div>
-					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_date()}</label
-					>
-					<input
-						id="documentDate"
-						type="text"
-						inputmode="numeric"
-						value={dateDisplay}
-						oninput={handleDateInput}
-						placeholder={m.form_placeholder_date()}
-						maxlength="10"
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm
-                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
-						aria-describedby={dateInvalid ? 'date-error' : undefined}
-					/>
-					<input type="hidden" name="documentDate" value={dateIso} />
-					{#if dateInvalid}
-						<p id="date-error" class="mt-1 text-xs text-red-600">{m.form_date_error()}</p>
-					{/if}
-				</div>
-
-				<!-- Ort -->
-				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_location()}</label
-					>
-					<input
-						id="location"
-						type="text"
-						name="location"
-						value={doc.location || ''}
-						placeholder={m.form_placeholder_location()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-					/>
-				</div>
-
-				<!-- Absender -->
-				<div>
-					<PersonTypeahead
-						name="senderId"
-						label={m.form_label_sender()}
-						bind:value={senderId}
-						initialName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
-					/>
-				</div>
-
-				<!-- Empfänger -->
-				<div>
-					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
-					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
-				</div>
-			</div>
-		</div>
-
-		<!-- ── Section 2: Beschreibung ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.doc_section_description()}
-			</h2>
-
-			<div class="space-y-5">
-				<!-- Titel -->
-				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_title()} *</label
-					>
-					<input
-						id="title"
-						type="text"
-						name="title"
-						value={doc.title || ''}
-						required
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-					/>
-				</div>
-
-				<!-- 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={doc.documentLocation || ''}
-						placeholder={m.form_placeholder_archive_location()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-					/>
-					<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>
-					<TagInput bind:tags={tags} />
-					<input type="hidden" name="tags" value={tags.join(',')} />
-				</div>
-
-				<!-- Inhalt -->
-				<div>
-					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_content()}</label
-					>
-					<textarea
-						id="summary"
-						name="summary"
-						rows="5"
-						placeholder={m.form_placeholder_content()}
-						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
-						>{doc.summary || ''}</textarea
-					>
-				</div>
-			</div>
-		</div>
-
-		<!-- ── Section 3: Transkription ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.form_label_transcription()}
-			</h2>
-			<textarea
-				id="transcription"
-				name="transcription"
-				rows="12"
-				placeholder={m.form_placeholder_transcription()}
-				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
-				>{doc.transcription || ''}</textarea
-			>
-		</div>
-
-		<!-- ── Section 4: Datei ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.doc_section_file()}
-			</h2>
-
-			<div class="mb-4 flex items-center gap-3 rounded bg-muted px-3 py-2 text-sm text-ink-2">
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4 flex-shrink-0"
-				/>
-				<span
-					>{m.doc_current_file_label()}
-					<strong class="font-medium text-ink">{doc.originalFilename}</strong></span
-				>
-			</div>
-
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
-				{m.doc_file_replace_label()}
-				<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
-			</label>
-			<input
-				id="file-upload"
-				type="file"
-				name="file"
-				class="block w-full cursor-pointer text-sm
-                       text-ink-2 file:mr-4 file:rounded
-                       file:border-0 file:bg-muted
-                       file:px-4 file:py-2
-                       file:text-sm file:font-semibold
-                       file:text-ink hover:file:bg-muted"
-			/>
-		</div>
-
-		<!-- ── Sticky Save Bar ── -->
-		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
-		>
-			<!-- Left: delete -->
-			<div class="flex items-center gap-3">
-				{#if confirmDelete}
-					<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
-					<button
-						type="submit"
-						form="delete-form"
-						class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
-					>
-						{m.btn_delete()}
-					</button>
-					<button
-						type="button"
-						onclick={() => (confirmDelete = false)}
-						class="text-sm text-ink-2 transition-colors hover:text-ink"
-					>
-						{m.btn_cancel()}
-					</button>
-				{:else}
-					<button
-						type="button"
-						onclick={() => (confirmDelete = true)}
-						class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-4 w-4"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							aria-hidden="true"
-						>
-							<polyline points="3 6 5 6 21 6" />
-							<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-							<path d="M10 11v6M14 11v6" />
-							<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-						</svg>
-						{m.btn_delete()}
-					</button>
-				{/if}
-			</div>
-
-			<!-- Right: cancel + save -->
-			<div class="flex items-center gap-4">
-				<a
-					href="/documents/{doc.id}"
-					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-				>
-					{m.btn_cancel()}
-				</a>
-				<button
-					type="submit"
-					class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
-				>
-					{m.btn_save()}
-				</button>
-			</div>
-		</div>
+		<WhoWhenSection
+			bind:senderId={senderId}
+			bind:selectedReceivers={selectedReceivers}
+			initialDateIso={doc.documentDate ?? ''}
+			initialLocation={doc.location ?? ''}
+			initialSenderName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
+		/>
+		<DescriptionSection
+			bind:tags={tags}
+			initialTitle={doc.title ?? ''}
+			initialDocumentLocation={doc.documentLocation ?? ''}
+			initialSummary={doc.summary ?? ''}
+			titleRequired={true}
+		/>
+		<TranscriptionSection initialTranscription={doc.transcription ?? ''} />
+		<FileSectionEdit originalFilename={doc.originalFilename} />
+		<SaveBar docId={doc.id} />
 	</form>
 
 	<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
diff --git a/frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte b/frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte
new file mode 100644
index 00000000..1896861c
--- /dev/null
+++ b/frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { originalFilename }: { originalFilename: string } = $props();
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_file()}
+	</h2>
+
+	<div class="mb-4 flex items-center gap-3 rounded bg-muted px-3 py-2 text-sm text-ink-2">
+		<img
+			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
+			alt=""
+			aria-hidden="true"
+			class="h-4 w-4 flex-shrink-0"
+		/>
+		<span
+			>{m.doc_current_file_label()}
+			<strong class="font-medium text-ink">{originalFilename}</strong></span
+		>
+	</div>
+
+	<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
+		{m.doc_file_replace_label()}
+		<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
+	</label>
+	<input
+		id="file-upload"
+		type="file"
+		name="file"
+		class="block w-full cursor-pointer text-sm
+               text-ink-2 file:mr-4 file:rounded
+               file:border-0 file:bg-muted
+               file:px-4 file:py-2
+               file:text-sm file:font-semibold
+               file:text-ink hover:file:bg-muted"
+	/>
+</div>
diff --git a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
new file mode 100644
index 00000000..8fd6547b
--- /dev/null
+++ b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+let { docId }: { docId: string } = $props();
+
+let confirmDelete = $state(false);
+</script>
+
+<div
+	class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+>
+	<!-- Left: delete -->
+	<div class="flex items-center gap-3">
+		{#if confirmDelete}
+			<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+			<button
+				type="submit"
+				form="delete-form"
+				class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+			>
+				{m.btn_delete()}
+			</button>
+			<button
+				type="button"
+				onclick={() => (confirmDelete = false)}
+				class="text-sm text-ink-2 transition-colors hover:text-ink"
+			>
+				{m.btn_cancel()}
+			</button>
+		{:else}
+			<button
+				type="button"
+				onclick={() => (confirmDelete = true)}
+				class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<polyline points="3 6 5 6 21 6" />
+					<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+					<path d="M10 11v6M14 11v6" />
+					<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+				</svg>
+				{m.btn_delete()}
+			</button>
+		{/if}
+	</div>
+
+	<!-- Right: cancel + save -->
+	<div class="flex items-center gap-4">
+		<a
+			href="/documents/{docId}"
+			class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
+		>
+			{m.btn_save()}
+		</button>
+	</div>
+</div>
diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index 0b8355f6..b0eee120 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-import TagInput from '$lib/components/TagInput.svelte';
-import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
-import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
 import { untrack } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
+import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
+import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
+import FileSectionNew from './FileSectionNew.svelte';
 
 let { data, form } = $props();
 
@@ -13,36 +14,6 @@ let senderId = $state(untrack(() => data.initialSenderId));
 let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $state(
 	untrack(() => data.initialReceivers)
 );
-
-let dateDisplay = $state('');
-let dateIso = $state('');
-let dateDirty = $state(false);
-
-const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
-
-function germanToIso(german: string): string {
-	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
-	if (!match) return '';
-	const [, d, m, y] = match;
-	return `${y}-${m}-${d}`;
-}
-
-function handleDateInput(e: Event) {
-	const input = e.target as HTMLInputElement;
-	const digits = input.value.replace(/\D/g, '').slice(0, 8);
-	let formatted: string;
-	if (digits.length <= 2) {
-		formatted = digits;
-	} else if (digits.length <= 4) {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
-	} else {
-		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
-	}
-	input.value = formatted;
-	dateDisplay = formatted;
-	dateIso = germanToIso(formatted);
-	dateDirty = true;
-}
 </script>
 
 <div class="mx-auto max-w-4xl px-4 py-8">
@@ -75,167 +46,16 @@ function handleDateInput(e: Event) {
 	{/if}
 
 	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
-		<!-- ── Section 1: Wer & Wann ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.doc_section_who_when()}
-			</h2>
+		<WhoWhenSection
+			bind:senderId={senderId}
+			bind:selectedReceivers={selectedReceivers}
+			initialSenderName={data.initialSenderName}
+		/>
+		<DescriptionSection bind:tags={tags} titleRequired={true} />
+		<TranscriptionSection />
+		<FileSectionNew />
 
-			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
-				<!-- Datum -->
-				<div>
-					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_date()}</label
-					>
-					<input
-						id="documentDate"
-						type="text"
-						inputmode="numeric"
-						value={dateDisplay}
-						oninput={handleDateInput}
-						placeholder={m.form_placeholder_date()}
-						maxlength="10"
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm
-                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
-						aria-describedby={dateInvalid ? 'date-error' : undefined}
-					/>
-					<input type="hidden" name="documentDate" value={dateIso} />
-					{#if dateInvalid}
-						<p id="date-error" class="mt-1 text-xs text-red-600">
-							{m.form_date_error()}
-						</p>
-					{/if}
-				</div>
-
-				<!-- Ort -->
-				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_location()}</label
-					>
-					<input
-						id="location"
-						type="text"
-						name="location"
-						placeholder={m.form_placeholder_location()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-					/>
-				</div>
-
-				<!-- Absender -->
-				<div>
-					<PersonTypeahead
-						name="senderId"
-						label={m.form_label_sender()}
-						bind:value={senderId}
-						initialName={data.initialSenderName}
-					/>
-				</div>
-
-				<!-- Empfänger -->
-				<div>
-					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
-					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
-				</div>
-			</div>
-		</div>
-
-		<!-- ── Section 2: Beschreibung ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.doc_section_description()}
-			</h2>
-
-			<div class="space-y-5">
-				<!-- Titel -->
-				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_title()} *</label
-					>
-					<input
-						id="title"
-						type="text"
-						name="title"
-						required
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-					/>
-				</div>
-
-				<!-- 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"
-						placeholder={m.form_placeholder_archive_location()}
-						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-					/>
-					<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>
-					<TagInput bind:tags={tags} />
-					<input type="hidden" name="tags" value={tags.join(',')} />
-				</div>
-
-				<!-- Inhalt -->
-				<div>
-					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
-						>{m.form_label_content()}</label
-					>
-					<textarea
-						id="summary"
-						name="summary"
-						rows="5"
-						placeholder={m.form_placeholder_content()}
-						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
-					></textarea>
-				</div>
-			</div>
-		</div>
-
-		<!-- ── Section 3: Transkription ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.form_label_transcription()}
-			</h2>
-			<textarea
-				id="transcription"
-				name="transcription"
-				rows="12"
-				placeholder={m.form_placeholder_transcription()}
-				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
-			></textarea>
-		</div>
-
-		<!-- ── Section 4: Datei ── -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
-				{m.doc_section_file()}
-			</h2>
-
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
-				{m.doc_file_upload_label()}
-				<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
-			</label>
-			<input
-				id="file-upload"
-				type="file"
-				name="file"
-				class="block w-full cursor-pointer text-sm
-                       text-ink-2 file:mr-4 file:rounded
-                       file:border-0 file:bg-muted
-                       file:px-4 file:py-2
-                       file:text-sm file:font-semibold
-                       file:text-ink hover:file:bg-muted"
-			/>
-		</div>
-
-		<!-- ── Sticky Save Bar ── -->
+		<!-- Sticky Save Bar -->
 		<div
 			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
diff --git a/frontend/src/routes/documents/new/FileSectionNew.svelte b/frontend/src/routes/documents/new/FileSectionNew.svelte
new file mode 100644
index 00000000..3e99fa47
--- /dev/null
+++ b/frontend/src/routes/documents/new/FileSectionNew.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+		{m.doc_section_file()}
+	</h2>
+
+	<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
+		{m.doc_file_upload_label()}
+		<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
+	</label>
+	<input
+		id="file-upload"
+		type="file"
+		name="file"
+		class="block w-full cursor-pointer text-sm
+               text-ink-2 file:mr-4 file:rounded
+               file:border-0 file:bg-muted
+               file:px-4 file:py-2
+               file:text-sm file:font-semibold
+               file:text-ink hover:file:bg-muted"
+	/>
+</div>