From fcc4c4665c23673ad003e8c54a4e34cb1c2e76b8 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 18 Apr 2026 15:50:21 +0200
Subject: [PATCH] feat(edit): unify edit page with enrich split-panel layout

Extract DocumentEditLayout shared component for the PDF+form split-panel
UI, replacing the old scrolling layout on /documents/[id]/edit with the
same fixed-panel structure used by /enrich/[id]. Removes TranscriptionSection
and FileSectionEdit from the edit page; file upload/replace is now handled
by the shared layout. Delete SaveBar and FileSectionEdit as dead code.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../document/DocumentEditLayout.svelte        | 221 ++++++++++++++++
 .../components/document/WhoWhenSection.svelte |   7 +-
 .../documents/[id]/edit/+page.server.ts       |   5 +-
 .../routes/documents/[id]/edit/+page.svelte   | 131 ++++++----
 .../[id]/edit/FileSectionEdit.svelte          |  62 -----
 .../routes/documents/[id]/edit/SaveBar.svelte |  76 ------
 .../[id]/edit/SaveBar.svelte.spec.ts          |  92 -------
 frontend/src/routes/enrich/[id]/+page.svelte  | 240 +++---------------
 8 files changed, 338 insertions(+), 496 deletions(-)
 create mode 100644 frontend/src/lib/components/document/DocumentEditLayout.svelte
 delete mode 100644 frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte
 delete mode 100644 frontend/src/routes/documents/[id]/edit/SaveBar.svelte
 delete mode 100644 frontend/src/routes/documents/[id]/edit/SaveBar.svelte.spec.ts

diff --git a/frontend/src/lib/components/document/DocumentEditLayout.svelte b/frontend/src/lib/components/document/DocumentEditLayout.svelte
new file mode 100644
index 00000000..8fe0664f
--- /dev/null
+++ b/frontend/src/lib/components/document/DocumentEditLayout.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { invalidate } from '$app/navigation';
+import { onMount, onDestroy, untrack } from 'svelte';
+import type { Snippet } from 'svelte';
+import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
+import { m } from '$lib/paraglide/messages.js';
+import { countRequiredFilled } from '$lib/utils/requiredFields';
+import DocumentViewer from '$lib/components/DocumentViewer.svelte';
+import UploadZone from '$lib/components/document/UploadZone.svelte';
+import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
+import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+import type { Tag } from '$lib/components/TagInput.svelte';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+
+let {
+	doc,
+	formId,
+	formAction,
+	formError = null,
+	tags = $bindable<Tag[]>([]),
+	senderId = $bindable(''),
+	selectedReceivers = $bindable<Person[]>([]),
+	dateIso = $bindable(''),
+	currentTitle = $bindable(''),
+	topbar,
+	actionbar
+}: {
+	doc: {
+		id: string;
+		filePath?: string | null;
+		originalFilename?: string | null;
+		title?: string | null;
+		documentDate?: string | null;
+		location?: string | null;
+		documentLocation?: string | null;
+		summary?: string | null;
+		sender?: { id: string; displayName: string } | null;
+		receivers?: Person[] | null;
+		tags?: Tag[] | null;
+	};
+	formId: string;
+	formAction: string;
+	formError?: string | null;
+	tags?: Tag[];
+	senderId?: string;
+	selectedReceivers?: Person[];
+	dateIso?: string;
+	currentTitle?: string;
+	topbar: Snippet;
+	actionbar: Snippet;
+} = $props();
+
+tags = untrack(() => (doc.tags as Tag[]) ?? []);
+senderId = untrack(() => doc.sender?.id ?? '');
+selectedReceivers = untrack(() => (doc.receivers as Person[]) ?? []);
+dateIso = untrack(() => doc.documentDate ?? '');
+currentTitle = untrack(() => doc.title ?? '');
+
+const fileLoader = createFileLoader();
+let navHeight = $state(0);
+onMount(() => {
+	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
+});
+let activeAnnotationId = $state<string | null>(null);
+
+$effect(() => {
+	if (doc?.id && doc?.filePath) {
+		fileLoader.loadFile(`/api/documents/${doc.id}/file`);
+	}
+});
+onDestroy(() => fileLoader.destroy());
+
+const requiredFilled = $derived(countRequiredFilled(currentTitle, dateIso, senderId));
+const requiredPct = $derived((requiredFilled / 3) * 100);
+
+let isUploading = $state(false);
+let isDragging = $state(false);
+let uploadError = $state<string | null>(null);
+let abortController = $state<AbortController | null>(null);
+
+async function handleFile(file: File) {
+	uploadError = null;
+	isUploading = true;
+	const controller = new AbortController();
+	abortController = controller;
+	try {
+		const formData = new FormData();
+		formData.append('file', file);
+		const res = await fetch(`/api/documents/${doc.id}/file`, {
+			method: 'POST',
+			body: formData,
+			signal: controller.signal
+		});
+		if (!res.ok) throw new Error('Upload fehlgeschlagen');
+		await invalidate('app:document');
+	} catch (e) {
+		if ((e as Error).name === 'AbortError') return;
+		uploadError = m.error_file_upload_failed();
+	} finally {
+		isUploading = false;
+		abortController = null;
+	}
+}
+
+function cancelUpload() {
+	abortController?.abort();
+	isUploading = false;
+}
+
+async function handleReplaceFile(e: Event) {
+	const file = (e.currentTarget as HTMLInputElement).files?.[0];
+	if (!file) return;
+	await handleFile(file);
+}
+</script>
+
+<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
+	<!-- Top bar — caller-supplied via snippet -->
+	<div class="flex items-center justify-between border-b border-line bg-surface px-6 py-3">
+		{@render topbar()}
+	</div>
+
+	<!-- Required-fields progress bar -->
+	<div class="flex items-center gap-3 border-b border-line bg-surface px-6 py-1.5">
+		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
+		<div
+			class="h-0.5 flex-1 rounded-full bg-line"
+			role="progressbar"
+			aria-valuenow={requiredFilled}
+			aria-valuemin={0}
+			aria-valuemax={3}
+			aria-label="Pflichtfelder"
+		>
+			<div
+				class="h-full rounded-full bg-brand-navy transition-all duration-300"
+				style="width:{requiredPct}%"
+			></div>
+		</div>
+		<span class="text-xs font-bold text-brand-navy">{requiredFilled} / 3</span>
+	</div>
+
+	<!-- Main content -->
+	<div class="flex flex-1 overflow-hidden">
+		<!-- Left: PDF preview / upload zone (60%) -->
+		<div class="relative flex flex-[6] flex-col overflow-hidden border-r border-line">
+			{#if !doc.filePath}
+				<UploadZone
+					filename={doc.originalFilename ?? ''}
+					isUploading={isUploading}
+					bind:isDragging={isDragging}
+					error={uploadError}
+					onFile={handleFile}
+					onCancel={cancelUpload}
+				/>
+			{:else}
+				<!-- Datei ersetzen toolbar -->
+				<div class="flex shrink-0 items-center border-b border-white/10 bg-pdf-bg px-4 py-1.5">
+					<label
+						class="ml-auto flex min-h-[44px] cursor-pointer items-center text-xs font-bold tracking-widest text-white/40 uppercase transition-colors hover:text-white/70"
+					>
+						Datei ersetzen
+						<input type="file" class="sr-only" onchange={handleReplaceFile} />
+					</label>
+				</div>
+				<div class="relative flex-1 overflow-hidden">
+					<DocumentViewer
+						doc={doc}
+						fileUrl={fileLoader.fileUrl}
+						isLoading={fileLoader.isLoading}
+						error={fileLoader.fileError}
+						bind:activeAnnotationId={activeAnnotationId}
+						onAnnotationClick={() => {}}
+					/>
+				</div>
+			{/if}
+		</div>
+
+		<!-- Right: form (40%) -->
+		<div class="flex flex-[4] flex-col overflow-hidden">
+			{#if formError}
+				<div class="border-b border-red-200 bg-red-50 px-6 py-3 text-sm text-red-700">
+					{formError}
+				</div>
+			{/if}
+
+			<form
+				id={formId}
+				method="POST"
+				action={formAction}
+				enctype="multipart/form-data"
+				use:enhance
+				class="flex-1 space-y-5 overflow-y-auto p-6"
+			>
+				<WhoWhenSection
+					bind:senderId={senderId}
+					bind:selectedReceivers={selectedReceivers}
+					bind:dateIso={dateIso}
+					initialDateIso={doc.documentDate ?? ''}
+					initialLocation={doc.location ?? ''}
+					initialSenderName={doc.sender?.displayName ?? ''}
+				/>
+				<DescriptionSection
+					bind:tags={tags}
+					bind:currentTitle={currentTitle}
+					initialTitle={doc.title ?? ''}
+					initialDocumentLocation={doc.documentLocation ?? ''}
+					initialSummary={doc.summary ?? ''}
+					titleRequired={true}
+				/>
+			</form>
+
+			<!-- Action bar — caller-supplied via snippet -->
+			<div class="flex items-center justify-between gap-3 border-t border-line bg-surface p-4">
+				{@render actionbar()}
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/components/document/WhoWhenSection.svelte b/frontend/src/lib/components/document/WhoWhenSection.svelte
index cddd9514..6a1dfe2a 100644
--- a/frontend/src/lib/components/document/WhoWhenSection.svelte
+++ b/frontend/src/lib/components/document/WhoWhenSection.svelte
@@ -4,12 +4,9 @@ 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';
+import type { components } from '$lib/generated/api';
 
-interface Person {
-	id: string;
-	firstName: string;
-	lastName: string;
-}
+type Person = components['schemas']['Person'];
 
 let {
 	senderId = $bindable(''),
diff --git a/frontend/src/routes/documents/[id]/edit/+page.server.ts b/frontend/src/routes/documents/[id]/edit/+page.server.ts
index de11c47a..f8e28fe5 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.server.ts
+++ b/frontend/src/routes/documents/[id]/edit/+page.server.ts
@@ -6,12 +6,15 @@ import { parseBackendError, getErrorMessage } from '$lib/errors';
 export async function load({
 	params,
 	fetch,
-	locals
+	locals,
+	depends
 }: {
 	params: { id: string };
 	fetch: typeof globalThis.fetch;
 	locals: App.Locals;
+	depends: (dep: string) => void;
 }) {
+	depends('app:document');
 	const canWrite =
 		locals.user?.groups?.some((g: { permissions: string[] }) =>
 			g.permissions.includes('WRITE_ALL')
diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index 6bc970f1..936407b4 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -1,27 +1,34 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-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 FileSectionEdit from './FileSectionEdit.svelte';
-import SaveBar from './SaveBar.svelte';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
+import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
 
 let { data, form } = $props();
 
-let { document: doc } = untrack(() => data);
-let tags = $state(doc.tags ?? []);
-let senderId = $state(doc.sender?.id ?? '');
-let selectedReceivers = $state(doc.receivers ?? []);
+const doc = $derived(data.document);
+const { confirm } = getConfirmService();
+
+async function handleDelete() {
+	const confirmed = await confirm({
+		title: m.doc_delete_confirm(),
+		destructive: true
+	});
+	if (confirmed) {
+		(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
+	}
+}
 </script>
 
-<div class="mx-auto max-w-4xl px-4 py-8">
-	<!-- Heading -->
-	<div class="mb-6">
+<svelte:head>
+	<title>{doc.title || doc.originalFilename || 'Dokument'} — {m.doc_edit_heading()}</title>
+</svelte:head>
+
+<DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
+	{#snippet topbar()}
 		<a
 			href="/documents/{doc.id}"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
+			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -31,43 +38,65 @@ let selectedReceivers = $state(doc.receivers ?? []);
 			/>
 			{m.btn_back_to_document()}
 		</a>
-		<h1 class="font-serif text-3xl text-ink">
-			{m.doc_edit_heading()} —
-			<span class="text-ink/70">{doc.title || doc.originalFilename}</span>
-		</h1>
-	</div>
 
-	{#if form?.error}
-		<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
-	{/if}
+		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
+			{doc.title || doc.originalFilename}
+		</p>
 
-	<form
-		id="update-form"
-		method="POST"
-		action="?/update"
-		enctype="multipart/form-data"
-		use:enhance
-		class="space-y-6 pb-20"
-	>
-		<WhoWhenSection
-			bind:senderId={senderId}
-			bind:selectedReceivers={selectedReceivers}
-			initialDateIso={doc.documentDate ?? ''}
-			initialLocation={doc.location ?? ''}
-			initialSenderName={doc.sender ? doc.sender.displayName : ''}
-		/>
-		<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>
+		<div class="w-40"></div>
+	{/snippet}
 
-	<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>
-	<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
-</div>
+	{#snippet actionbar()}
+		<button
+			type="button"
+			onclick={handleDelete}
+			class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 font-sans text-xs 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>
+
+		<div class="flex items-center gap-3">
+			<a
+				href="/documents/{doc.id}"
+				class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+			>
+				{m.btn_cancel()}
+			</a>
+
+			<button
+				type="submit"
+				form="mark-for-review-form"
+				class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+			>
+				{m.btn_mark_for_review()}
+			</button>
+
+			<button
+				type="submit"
+				form="update-form"
+				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
+			>
+				{m.btn_save()}
+			</button>
+		</div>
+	{/snippet}
+</DocumentEditLayout>
+
+<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></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
deleted file mode 100644
index 6a30be46..00000000
--- a/frontend/src/routes/documents/[id]/edit/FileSectionEdit.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
-
-let { originalFilename }: { originalFilename: string } = $props();
-
-let selectedFilename = $state<string | null>(null);
-
-function handleFileChange(e: Event) {
-	const file = (e.target as HTMLInputElement).files?.[0];
-	selectedFilename = file?.name ?? null;
-}
-</script>
-
-<div class="rounded-sm border border-line bg-surface shadow-sm">
-	<div class="border-b border-line px-6 py-4">
-		<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
-			{m.doc_section_file()}
-		</h2>
-	</div>
-
-	<!-- Current file -->
-	<div class="flex items-center gap-3 border-b border-line px-6 py-3 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>
-
-	<!-- Replace file upload zone -->
-	<label
-		for="file-upload"
-		class="flex cursor-pointer flex-col items-center gap-3 px-6 py-8 transition-colors hover:bg-muted/40"
-	>
-		<svg
-			class="h-8 w-8 text-ink-3"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			aria-hidden="true"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="1.5"
-				d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-			/>
-		</svg>
-		{#if selectedFilename}
-			<span class="text-sm font-medium text-ink">{selectedFilename}</span>
-		{:else}
-			<span class="text-sm font-medium text-ink-2">{m.doc_file_replace_label()}</span>
-			<span class="text-xs text-ink-3">{m.doc_file_replace_note()}</span>
-		{/if}
-	</label>
-	<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
-</div>
diff --git a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
deleted file mode 100644
index 477f3582..00000000
--- a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-import { m } from '$lib/paraglide/messages.js';
-import { getConfirmService } from '$lib/services/confirm.svelte.js';
-
-let { docId }: { docId: string } = $props();
-
-const { confirm } = getConfirmService();
-
-async function handleDelete() {
-	const confirmed = await confirm({
-		title: m.doc_delete_confirm(),
-		destructive: true
-	});
-	if (confirmed) {
-		(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
-	}
-}
-</script>
-
-<div
-	class="sticky bottom-0 z-10 -mx-4 border-t border-line bg-surface px-4 py-3 shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6 sm:py-4"
->
-	<!-- Desktop: delete left, cancel+buttons right -->
-	<!-- Mobile: action buttons stacked full-width, delete+cancel row at bottom -->
-	<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-		<!-- Primary actions first (top on mobile, right on desktop) -->
-		<div class="flex flex-col gap-2 sm:order-last sm:flex-row sm:items-center sm:gap-4">
-			<button
-				type="submit"
-				form="mark-for-review-form"
-				class="w-full rounded-sm border border-line px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted sm:w-auto sm:py-2"
-			>
-				{m.btn_mark_for_review()}
-			</button>
-			<button
-				type="submit"
-				class="w-full rounded bg-primary px-6 py-2.5 font-sans text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80 sm:w-auto sm:py-2"
-			>
-				{m.btn_save()}
-			</button>
-		</div>
-
-		<!-- Secondary: delete + cancel -->
-		<div class="flex items-center justify-between sm:justify-start sm:gap-4">
-			<button
-				type="button"
-				onclick={handleDelete}
-				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>
-			<a
-				href="/documents/{docId}"
-				class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-			>
-				{m.btn_cancel()}
-			</a>
-		</div>
-	</div>
-</div>
diff --git a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte.spec.ts b/frontend/src/routes/documents/[id]/edit/SaveBar.svelte.spec.ts
deleted file mode 100644
index d1ad0d97..00000000
--- a/frontend/src/routes/documents/[id]/edit/SaveBar.svelte.spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-import SaveBar from './SaveBar.svelte';
-import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
-
-let appendedForms: HTMLFormElement[] = [];
-
-afterEach(() => {
-	cleanup();
-	appendedForms.forEach((f) => f.remove());
-	appendedForms = [];
-});
-
-function renderSaveBar(docId = 'doc-1') {
-	const service = createConfirmService();
-
-	// Mount a dummy delete form so SaveBar can find it via document.getElementById
-	const deleteForm = document.createElement('form');
-	deleteForm.id = 'delete-form';
-	document.body.appendChild(deleteForm);
-	appendedForms.push(deleteForm);
-
-	const result = render(SaveBar, {
-		props: { docId },
-		context: new Map([[CONFIRM_KEY, service]])
-	});
-
-	return { ...result, service, deleteForm };
-}
-
-// ─── Rendering ────────────────────────────────────────────────────────────────
-
-describe('SaveBar — rendering', () => {
-	it('renders save button', async () => {
-		renderSaveBar();
-		await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
-	});
-
-	it('renders delete button', async () => {
-		renderSaveBar();
-		// The delete button should be type="button" (async confirm flow)
-		const deleteBtn = document.querySelector('button[type="button"]');
-		expect(deleteBtn).not.toBeNull();
-	});
-
-	it('renders cancel link pointing to /documents/doc-1', async () => {
-		renderSaveBar();
-		await expect
-			.element(page.getByRole('link', { name: /Abbrechen/i }))
-			.toHaveAttribute('href', '/documents/doc-1');
-	});
-});
-
-// ─── Delete confirmation ──────────────────────────────────────────────────────
-
-describe('SaveBar — delete confirmation', () => {
-	it('opens confirm dialog when delete button is clicked', async () => {
-		const { service } = renderSaveBar();
-		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
-		deleteBtn.click();
-		await vi.waitFor(() => expect(service.options).not.toBeNull());
-		expect(service.options?.destructive).toBe(true);
-		service.settle(false);
-	});
-
-	it('submits delete form when user confirms', async () => {
-		const { service, deleteForm } = renderSaveBar();
-		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
-
-		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
-		deleteBtn.click();
-		await vi.waitFor(() => expect(service.options).not.toBeNull());
-		service.settle(true);
-		await vi.waitFor(() => expect(service.options).toBeNull());
-
-		expect(requestSubmit).toHaveBeenCalledOnce();
-	});
-
-	it('does not submit delete form when user cancels', async () => {
-		const { service, deleteForm } = renderSaveBar();
-		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
-
-		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
-		deleteBtn.click();
-		await vi.waitFor(() => expect(service.options).not.toBeNull());
-		service.settle(false);
-		await vi.waitFor(() => expect(service.options).toBeNull());
-
-		expect(requestSubmit).not.toHaveBeenCalled();
-	});
-});
diff --git a/frontend/src/routes/enrich/[id]/+page.svelte b/frontend/src/routes/enrich/[id]/+page.svelte
index 2bd05b74..81d72d49 100644
--- a/frontend/src/routes/enrich/[id]/+page.svelte
+++ b/frontend/src/routes/enrich/[id]/+page.svelte
@@ -1,101 +1,19 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
-import { invalidate } from '$app/navigation';
-import { onMount, onDestroy, untrack } from 'svelte';
-import { createFileLoader } from '$lib/hooks/useFileLoader.svelte';
 import { m } from '$lib/paraglide/messages.js';
-import { countRequiredFilled } from '$lib/utils/requiredFields';
-import DocumentViewer from '$lib/components/DocumentViewer.svelte';
-import UploadZone from '$lib/components/document/UploadZone.svelte';
-import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
-import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
+import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
 
 let { data, form } = $props();
 
 const doc = $derived(data.document);
-
-// File preview state
-const fileLoader = createFileLoader();
-
-let navHeight = $state(0);
-onMount(() => {
-	navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
-});
-
-// Dummy bindable state required by DocumentViewer
-let annotateMode = $state(false);
-let activeAnnotationId = $state<string | null>(null);
-let activeAnnotationPage = $state<number | null>(null);
-
-$effect(() => {
-	if (doc?.id && doc?.filePath) {
-		fileLoader.loadFile(`/api/documents/${doc.id}/file`);
-	}
-});
-
-onDestroy(() => fileLoader.destroy());
-
-// Form state
-let tags = $state(untrack(() => doc.tags ?? []));
-let senderId = $state(untrack(() => doc.sender?.id ?? ''));
-let selectedReceivers = $state(untrack(() => doc.receivers ?? []));
-
-// Progress bar state — bound from child components
-let dateIso = $state(untrack(() => doc.documentDate ?? ''));
-let currentTitle = $state(untrack(() => doc.title ?? ''));
-
-const requiredFilled = $derived(countRequiredFilled(currentTitle, dateIso, senderId));
-const requiredPct = $derived((requiredFilled / 3) * 100);
-
-// Upload state machine
-let isUploading = $state(false);
-let isDragging = $state(false);
-let uploadError = $state<string | null>(null);
-let abortController = $state<AbortController | null>(null);
-
-async function handleFile(file: File) {
-	uploadError = null;
-	isUploading = true;
-	const controller = new AbortController();
-	abortController = controller;
-	try {
-		const formData = new FormData();
-		formData.append('file', file);
-		const res = await fetch(`/api/documents/${doc.id}/file`, {
-			method: 'POST',
-			body: formData,
-			signal: controller.signal
-		});
-		if (!res.ok) throw new Error('Upload fehlgeschlagen');
-		await invalidate('app:document');
-	} catch (e) {
-		if ((e as Error).name === 'AbortError') return;
-		uploadError = m.error_file_upload_failed();
-	} finally {
-		isUploading = false;
-		abortController = null;
-	}
-}
-
-function cancelUpload() {
-	abortController?.abort();
-	isUploading = false;
-}
-
-async function handleReplaceFile(e: Event) {
-	const file = (e.currentTarget as HTMLInputElement).files?.[0];
-	if (!file) return;
-	await handleFile(file);
-}
 </script>
 
 <svelte:head>
 	<title>{doc.title || doc.originalFilename || 'Dokument'} — Anreicherung</title>
 </svelte:head>
 
-<div class="fixed inset-x-0 bottom-0 flex flex-col" style="top: {navHeight}px">
-	<!-- Top bar -->
-	<div class="flex items-center justify-between border-b border-line bg-surface px-6 py-3">
+<DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
+	{#snippet topbar()}
 		<a
 			href="/enrich"
 			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
@@ -116,133 +34,37 @@ async function handleReplaceFile(e: Event) {
 		<p class="font-sans text-xs text-ink-3">
 			{m.enrich_progress({ count: data.incompleteCount })}
 		</p>
-	</div>
+	{/snippet}
 
-	<!-- Required-fields progress bar -->
-	<div class="flex items-center gap-3 border-b border-line bg-surface px-6 py-1.5">
-		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
-		<div
-			class="h-0.5 flex-1 rounded-full bg-line"
-			role="progressbar"
-			aria-valuenow={requiredFilled}
-			aria-valuemin={0}
-			aria-valuemax={3}
-			aria-label="Pflichtfelder"
+	{#snippet actionbar()}
+		<button
+			type="submit"
+			form="skip-form"
+			class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
 		>
-			<div
-				class="h-full rounded-full bg-brand-navy transition-all duration-300"
-				style="width:{requiredPct}%"
-			></div>
-		</div>
-		<span class="text-xs font-bold text-brand-navy">{requiredFilled} / 3</span>
-	</div>
+			{m.enrich_skip()}
+		</button>
 
-	<!-- Main content -->
-	<div class="flex flex-1 overflow-hidden">
-		<!-- Left: PDF preview / upload zone (60%) -->
-		<div class="relative flex flex-[6] flex-col overflow-hidden border-r border-line">
-			{#if !doc.filePath}
-				<UploadZone
-					filename={doc.originalFilename}
-					isUploading={isUploading}
-					bind:isDragging={isDragging}
-					error={uploadError}
-					onFile={handleFile}
-					onCancel={cancelUpload}
-				/>
-			{:else}
-				<!-- Datei ersetzen toolbar (ghost button above PDF) -->
-				<div class="flex shrink-0 items-center border-b border-white/10 bg-pdf-bg px-4 py-1.5">
-					<label
-						class="ml-auto flex min-h-[44px] cursor-pointer items-center text-xs font-bold tracking-widest text-white/40 uppercase transition-colors hover:text-white/70"
-					>
-						Datei ersetzen
-						<input type="file" class="sr-only" onchange={handleReplaceFile} />
-					</label>
-				</div>
-				<div class="relative flex-1 overflow-hidden">
-					<DocumentViewer
-						doc={doc}
-						fileUrl={fileLoader.fileUrl}
-						isLoading={fileLoader.isLoading}
-						error={fileLoader.fileError}
-						bind:annotateMode={annotateMode}
-						bind:activeAnnotationId={activeAnnotationId}
-						bind:activeAnnotationPage={activeAnnotationPage}
-						onAnnotationClick={() => {}}
-					/>
-				</div>
-			{/if}
-		</div>
-
-		<!-- Right: form (40%) -->
-		<div class="flex flex-[4] flex-col overflow-hidden">
-			{#if form?.error}
-				<div class="border-b border-red-200 bg-red-50 px-6 py-3 text-sm text-red-700">
-					{form.error}
-				</div>
-			{/if}
-
-			<form
-				id="save-form"
-				method="POST"
-				action="?/save"
-				enctype="multipart/form-data"
-				use:enhance
-				class="flex-1 space-y-5 overflow-y-auto p-6"
+		<div class="flex items-center gap-3">
+			<button
+				type="submit"
+				form="save-form"
+				formaction="?/save"
+				class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
 			>
-				<WhoWhenSection
-					bind:senderId={senderId}
-					bind:selectedReceivers={selectedReceivers}
-					bind:dateIso={dateIso}
-					initialDateIso={doc.documentDate ?? ''}
-					initialLocation={doc.location ?? ''}
-					initialSenderName={doc.sender ? doc.sender.displayName : ''}
-				/>
-				<DescriptionSection
-					bind:tags={tags}
-					bind:currentTitle={currentTitle}
-					initialTitle={doc.title ?? ''}
-					titleRequired={true}
-				/>
-			</form>
+				{m.btn_save()}
+			</button>
 
-			<!-- Skip form (outside main form to avoid nesting) -->
-			<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
-
-			<!-- Action bar -->
-			<div class="flex items-center justify-between gap-3 border-t border-line bg-surface p-4">
-				<!-- Skip button linked to skip-form -->
-				<button
-					type="submit"
-					form="skip-form"
-					class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-				>
-					{m.enrich_skip()}
-				</button>
-
-				<div class="flex items-center gap-3">
-					<!-- Save -->
-					<button
-						type="submit"
-						form="save-form"
-						formaction="?/save"
-						class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
-					>
-						{m.btn_save()}
-					</button>
-
-					<!-- Save & mark as reviewed -->
-					<button
-						type="submit"
-						form="save-form"
-						formaction="?/saveAndReview"
-						class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
-					>
-						{m.btn_save_and_mark_reviewed()}
-					</button>
-				</div>
-			</div>
+			<button
+				type="submit"
+				form="save-form"
+				formaction="?/saveAndReview"
+				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
+			>
+				{m.btn_save_and_mark_reviewed()}
+			</button>
 		</div>
-	</div>
-</div>
+	{/snippet}
+</DocumentEditLayout>
+
+<form id="skip-form" method="POST" action="?/skip" use:enhance></form>