familienarchiv/frontend/src/routes/documents/new/+page.svelte

<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';

let { data, form } = $props();

let tags: string[] = $state([]);
let senderId = $state(untrack(() => data.initialSenderId));
let selectedReceivers: { id: string; firstName: string; lastName: 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;
	}
});
</script>

<div class="mx-auto max-w-4xl px-4 py-8">
	<!-- Heading -->
	<div class="mb-6">
		<a
			href="/"
			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
		>
			<svg
				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M10 19l-7-7m0 0l7-7m-7 7h18"
				/>
			</svg>
			{m.btn_back_to_overview()}
		</a>
		<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:border-ink focus:ring-ink"
				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>
</div>