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>

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>