From ec17cb123a05f03a75b875486b7b6240acd4bfa9 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 24 Apr 2026 17:59:41 +0200
Subject: [PATCH] feat(bulk-upload): wire /documents/new to
 BulkDocumentEditLayout

Replaces the single-file form-action flow with BulkDocumentEditLayout,
enabling multi-file drag-and-drop upload with local preview, per-file
title editing, and shared metadata. Server load function unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/documents/new/+page.svelte     | 133 ++----------------
 1 file changed, 8 insertions(+), 125 deletions(-)

diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index 36da0ec3..753233b1 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -1,49 +1,11 @@
 <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 FileSectionNew from './FileSectionNew.svelte';
-import { type FilenameParseResult } from '$lib/utils/filename';
+import BulkDocumentEditLayout from '$lib/components/document/BulkDocumentEditLayout.svelte';
 
-let { data, form } = $props();
-
-let tags: { name: string; id?: string; color?: string; parentId?: string }[] = $state([]);
-let senderId = $state(untrack(() => data.initialSenderId));
-let selectedReceivers: { id: string; firstName?: string; lastName: string; displayName: string }[] =
-	$state(untrack(() => data.initialReceivers));
-
-let parsedSuggestion = $state<FilenameParseResult>({});
-
-// Title is derived from the filename suggestion unless the user has typed something
-let titleDirty = $state(false);
-let titleOverride = $state('');
-let titleValue = $derived(
-	titleDirty ? titleOverride : (parsedSuggestion.suggestedTitle ?? titleOverride)
-);
-
-// Details panel: starts open when prefill data is present or a form error occurred.
-// Auto-opens when filename parsing finds a date/sender, but never force-closes — user
-// can always collapse the section manually.
-let detailsOpen = $state(
-	!!(
-		untrack(() => data.initialSenderId) ||
-		untrack(() => data.initialReceivers).length > 0 ||
-		untrack(() => form)?.error
-	)
-);
-
-$effect(() => {
-	if (parsedSuggestion.dateIso || senderId || selectedReceivers.length > 0) {
-		detailsOpen = true;
-	}
-});
+let { data } = $props();
 </script>
 
-<div class="mx-auto max-w-4xl px-4 py-8">
-	<!-- Heading -->
+<div class="mx-auto max-w-7xl px-4 py-8">
 	<div class="mb-6">
 		<a
 			href="/"
@@ -67,88 +29,9 @@ $effect(() => {
 		<h1 class="font-serif text-3xl text-ink">{m.doc_new_heading()}</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}
-
-	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
-		<!-- File upload — prominent, at the top -->
-		<FileSectionNew onfileParsed={(r) => (parsedSuggestion = r)} />
-
-		<!-- Standalone title card -->
-		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
-			<label for="new-title" class="mb-1 block text-sm font-medium text-ink-2"
-				>{m.form_label_title()}</label
-			>
-			<input
-				id="new-title"
-				type="text"
-				name="title"
-				value={titleValue}
-				oninput={(e) => {
-					titleOverride = (e.target as HTMLInputElement).value;
-					titleDirty = true;
-				}}
-				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"
-				placeholder="Titel eingeben…"
-			/>
-		</div>
-
-		<!-- Collapsible further details -->
-		<details
-			bind:open={detailsOpen}
-			class="group rounded-sm border border-line bg-surface shadow-sm"
-		>
-			<summary class="cursor-pointer list-none px-6 py-4">
-				<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
-					>{m.doc_more_details()}</span
-				>
-			</summary>
-			<div class="space-y-6 px-0 pb-6">
-				<WhoWhenSection
-					bind:senderId={senderId}
-					bind:selectedReceivers={selectedReceivers}
-					initialSenderName={data.initialSenderName}
-					suggestedDateIso={parsedSuggestion.dateIso ?? ''}
-					suggestedSenderName={parsedSuggestion.personName ?? ''}
-				/>
-				<DescriptionSection bind:tags={tags} hideTitle={true} />
-				<TranscriptionSection />
-			</div>
-		</details>
-
-		<!-- Sticky Save Bar -->
-		<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"
-		>
-			<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-				<a
-					href="/"
-					class="order-last text-center text-sm font-medium text-ink-2 transition-colors hover:text-ink sm:order-first sm:text-left"
-				>
-					{m.btn_cancel()}
-				</a>
-				<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3">
-					<button
-						type="submit"
-						name="metadataComplete"
-						value="false"
-						formaction="?/save"
-						class="w-full rounded-sm border border-line px-5 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_save()}
-					</button>
-					<button
-						type="submit"
-						name="metadataComplete"
-						value="true"
-						formaction="?/saveReviewed"
-						class="w-full rounded-sm bg-primary px-5 py-2.5 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90 sm:w-auto sm:py-2"
-					>
-						{m.btn_save_and_mark_reviewed()}
-					</button>
-				</div>
-			</div>
-		</div>
-	</form>
+	<BulkDocumentEditLayout
+		initialSenderId={data.initialSenderId}
+		initialSenderName={data.initialSenderName}
+		initialReceivers={data.initialReceivers}
+	/>
 </div>