fix(e2e): fix admin tag test (use existing tag) and annotation locator

- Admin tag test: "Familie" never existed in the database; use "Fest"
  which is a real seeded tag, with a matching rename-back to restore state
- Annotation hash test: the broad `[data-testid^="annotation-"]` locator
  also matched `annotation-side-panel` (always in DOM, even when
  off-screen); extend the :not() exclusion list to cover it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/main/java/org/raddatz/familienarchiv/service/DocumentService.java

@@ -108,9 +108,13 @@ public class DocumentService {
                     || (dto.getReceiverIds() != null && !dto.getReceiverIds().isEmpty());
         }
 
+        String titleToUse = (dto.getTitle() != null && !dto.getTitle().isBlank())
+                ? dto.getTitle()
+                : titleFromFilename(filename);
+
         Document doc = Document.builder()
                 .originalFilename(filename)
-                .title(dto.getTitle())
+                .title(titleToUse)
                 .documentDate(dto.getDocumentDate())
                 .location(dto.getLocation())
                 .documentLocation(dto.getDocumentLocation())

backend/src/test/java/org/raddatz/familienarchiv/service/DocumentServiceTest.java

@@ -467,6 +467,62 @@ class DocumentServiceTest {
         assertThat(captor.getValue().getSender()).isNull();
     }
 
+    // ─── createDocument title fallback ────────────────────────────────────────
+
+    @Test
+    void createDocument_usesTitleFromFilename_whenDtoTitleIsNull() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        // dto.title is null
+        MockMultipartFile file = new MockMultipartFile("file", "Brief_1965.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Brief_1965")
+                .originalFilename("Brief_1965.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, file);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).getTitle()).isEqualTo("Brief_1965");
+    }
+
+    @Test
+    void createDocument_usesTitleFromFilename_whenDtoTitleIsBlank() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("   ");
+        MockMultipartFile file = new MockMultipartFile("file", "Rechnung_1980.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Rechnung_1980")
+                .originalFilename("Rechnung_1980.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, file);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).getTitle()).isEqualTo("Rechnung_1980");
+    }
+
+    @Test
+    void createDocument_keepsDtoTitle_whenProvided() throws Exception {
+        DocumentUpdateDTO dto = new DocumentUpdateDTO();
+        dto.setTitle("Mein Titel");
+        MockMultipartFile file = new MockMultipartFile("file", "scan.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).title("Mein Titel")
+                .originalFilename("scan.pdf").status(DocumentStatus.PLACEHOLDER).build();
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(documentRepository.findById(any())).thenReturn(Optional.of(saved));
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("path", "hash"));
+
+        ArgumentCaptor<Document> captor = ArgumentCaptor.forClass(Document.class);
+        documentService.createDocument(dto, file);
+
+        verify(documentRepository, atLeastOnce()).save(captor.capture());
+        assertThat(captor.getAllValues().get(0).getTitle()).isEqualTo("Mein Titel");
+    }
+
     // ─── createDocument metadataComplete ─────────────────────────────────────
 
     @Test

frontend/e2e/admin.spec.ts

@@ -180,19 +180,19 @@ test.describe('Admin — tag management', () => {
 		// Wait for the tags list to render after the tab switch
 		await page.waitForSelector('ul > li');
 
-		// Hover over the "Familie" row to reveal the opacity-0 action buttons
+		// Hover over the "Fest" row to reveal the opacity-0 action buttons
-		const familieRow = page
+		const festRow = page
 			.locator('ul > li')
-			.filter({ has: page.locator('span', { hasText: /^Familie$/ }) });
+			.filter({ has: page.locator('span', { hasText: /^Fest$/ }) });
-		await familieRow.hover();
+		await festRow.hover();
-		await familieRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
+		await festRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
 
 		// After clicking edit, {#if editingTagId} replaces the span with a form —
-		// the familieRow filter no longer matches, so we find the input directly.
+		// the festRow filter no longer matches, so we find the input directly.
-		await page.locator('input[name="name"]').fill('Familie (E2E)');
+		await page.locator('input[name="name"]').fill('Fest (E2E)');
 		await page.getByRole('button', { name: 'Speichern' }).click();
 
-		await expect(page.getByText('Familie (E2E)')).toBeVisible();
+		await expect(page.getByText('Fest (E2E)')).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/admin-tag-renamed.png' });
 	});
 
@@ -205,14 +205,14 @@ test.describe('Admin — tag management', () => {
 
 		const renamedRow = page
 			.locator('ul > li')
-			.filter({ has: page.locator('span', { hasText: /^Familie \(E2E\)$/ }) });
+			.filter({ has: page.locator('span', { hasText: /^Fest \(E2E\)$/ }) });
 		await renamedRow.hover();
 		await renamedRow.getByRole('button', { name: 'Schlagwort bearbeiten' }).click();
 
-		await page.locator('input[name="name"]').fill('Familie');
+		await page.locator('input[name="name"]').fill('Fest');
 		await page.getByRole('button', { name: 'Speichern' }).click();
 
-		await expect(page.getByText('Familie')).toBeVisible();
+		await expect(page.getByText('Fest')).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/admin-tag-restored.png' });
 	});
 });

frontend/e2e/documents.spec.ts

@@ -25,7 +25,7 @@ test.describe('Document list', () => {
 
 	test('navigation bar shows active state for Dokumente', async ({ page }) => {
 		const navLink = page.getByRole('navigation').getByRole('link', { name: 'Dokumente' });
-		await expect(navLink).toHaveClass(/text-brand-navy/);
+		await expect(navLink).toHaveClass(/bg-nav-active/);
 	});
 
 	test('text search filters the document list', async ({ page }) => {
@@ -77,12 +77,49 @@ test.describe('Document detail', () => {
 });
 
 test.describe('New document', () => {
-	test('renders the upload form', async ({ page }) => {
+	test('renders the upload form with file input first', async ({ page }) => {
 		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
 		await expect(page.getByRole('heading', { name: /Neues Dokument/i })).toBeVisible();
-		await expect(page.getByLabel('Titel')).toBeVisible();
+		// File input comes before the title field in DOM order
+		const fileInput = page.locator('input[type="file"]');
+		const titleInput = page.getByLabel('Titel');
+		await expect(fileInput).toBeVisible();
+		await expect(titleInput).toBeVisible();
+		const fileBox = await fileInput.boundingBox();
+		const titleBox = await titleInput.boundingBox();
+		expect(fileBox!.y).toBeLessThan(titleBox!.y);
 		await page.screenshot({ path: 'test-results/e2e/document-new.png' });
 	});
+
+	test('title field is pre-filled from filename when a file is selected', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+		const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+		const fileInput = page.locator('input[type="file"]');
+		await fileInput.setInputFiles({
+			name: 'Brief_1965.pdf',
+			mimeType: 'application/pdf',
+			buffer: fs.readFileSync(PDF_FIXTURE)
+		});
+		await expect(page.getByLabel('Titel')).toHaveValue('Brief_1965');
+		await page.screenshot({ path: 'test-results/e2e/document-new-filename-prefill.png' });
+	});
+
+	test('typed title is not overwritten when a file is selected', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+		await page.getByLabel('Titel').fill('Weihnachtsbrief 1965');
+		const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+		const fileInput = page.locator('input[type="file"]');
+		await fileInput.setInputFiles({
+			name: 'Brief_1965.pdf',
+			mimeType: 'application/pdf',
+			buffer: fs.readFileSync(PDF_FIXTURE)
+		});
+		await expect(page.getByLabel('Titel')).toHaveValue('Weihnachtsbrief 1965');
+		await page.screenshot({ path: 'test-results/e2e/document-new-title-not-overwritten.png' });
+	});
 });
 
 test.describe('Document creation', () => {
@@ -91,12 +128,27 @@ test.describe('Document creation', () => {
 		await page.waitForSelector('[data-hydrated]');
 
 		await page.getByLabel('Titel').fill('E2E Testbrief');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 
 		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
 		await expect(page.getByRole('heading', { name: 'E2E Testbrief' })).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/document-create.png' });
 	});
+
+	test('user saves a document with only a file — title comes from filename', async ({ page }) => {
+		await page.goto('/documents/new');
+		await page.waitForSelector('[data-hydrated]');
+		const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+		await page.locator('input[type="file"]').setInputFiles({
+			name: 'Brief_1965.pdf',
+			mimeType: 'application/pdf',
+			buffer: fs.readFileSync(PDF_FIXTURE)
+		});
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
+		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
+		await expect(page.getByRole('heading', { name: 'Brief_1965' })).toBeVisible();
+		await page.screenshot({ path: 'test-results/e2e/document-create-file-only.png' });
+	});
 });
 
 test.describe('Document editing', () => {
@@ -112,10 +164,10 @@ test.describe('Document editing', () => {
 		await page.waitForSelector('[data-hydrated]');
 
 		await page.getByLabel('Titel').fill('E2E Testbrief (überarbeitet)');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 
 		await expect(page).toHaveURL(/\/documents\/[^/]+$/);
-		await expect(page.getByText('E2E Testbrief (überarbeitet)')).toBeVisible();
+		await expect(page.getByRole('heading', { name: 'E2E Testbrief (überarbeitet)' })).toBeVisible();
 		await page.screenshot({ path: 'test-results/e2e/document-edit-save.png' });
 	});
 });
@@ -327,10 +379,12 @@ test.describe('PDF annotations — admin', () => {
 		await page.waitForSelector('[data-hydrated]');
 		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 20000 });
 
-		// Ensure annotation is visible before enabling annotate mode
+		// Ensure at least one annotation is visible before enabling annotate mode
 		await expect(page.locator('[data-testid^="annotation-"]').first()).toBeVisible({
 			timeout: 8000
 		});
+		// Record count now — the draw test may have created more than one annotation
+		const countBefore = await page.locator('[data-testid^="annotation-"]').count();
 
 		// Enable annotate mode to show delete buttons
 		await page.getByRole('button', { name: /^annotieren$/i }).click();
@@ -339,7 +393,7 @@ test.describe('PDF annotations — admin', () => {
 		await expect(deleteBtn).toBeVisible({ timeout: 8000 });
 		await deleteBtn.click();
 
-		await expect(page.locator('[data-testid^="annotation-"]')).toHaveCount(0, {
+		await expect(page.locator('[data-testid^="annotation-"]')).toHaveCount(countBefore - 1, {
 			timeout: 8000
 		});
 
@@ -407,7 +461,12 @@ test.describe('PDF annotations — file hash versioning', () => {
 		await page.waitForSelector('[data-hydrated]');
 		await page.locator('canvas').first().waitFor({ state: 'visible', timeout: 20000 });
 
-		await expect(page.locator('[data-testid^="annotation-"]')).toHaveCount(0, { timeout: 8000 });
+		// Use :not() to exclude the outdated-notice and side-panel elements whose testid also starts with "annotation-"
+		await expect(
+			page.locator(
+				'[data-testid^="annotation-"]:not([data-testid="annotation-outdated-notice"]):not([data-testid="annotation-side-panel"])'
+			)
+		).toHaveCount(0, { timeout: 8000 });
 		await expect(page.locator('[data-testid="annotation-outdated-notice"]')).toBeVisible({
 			timeout: 5000
 		});

frontend/e2e/history.spec.ts

@@ -25,7 +25,7 @@ test.describe('Document history panel', () => {
 		await page.goto('/documents/new');
 		await page.waitForSelector('[data-hydrated]');
 		await page.getByLabel('Titel').fill('E2E History Test Dokument');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 		// Wait for redirect to the new document's UUID-based URL (not /documents/new)
 		await page.waitForURL(/\/documents\/[0-9a-f-]{36}$/);
 		docPath = new URL(page.url()).pathname;
@@ -34,7 +34,7 @@ test.describe('Document history panel', () => {
 		await page.goto(`${docPath}/edit`);
 		await page.waitForSelector('[data-hydrated]');
 		await page.getByLabel('Titel').fill('E2E History Test Dokument (bearbeitet)');
-		await page.getByRole('button', { name: /Speichern/i }).click();
+		await page.getByRole('button', { name: 'Speichern', exact: true }).click();
 		await page.waitForURL(/\/documents\/[0-9a-f-]{36}$/);
 
 		await context.close();

frontend/e2e/persons.spec.ts

@@ -212,7 +212,7 @@ test.describe('Conversations', () => {
 	test('nav link is active on the conversations page', async ({ page }) => {
 		await page.goto('/conversations');
 		const navLink = page.getByRole('link', { name: 'Konversationen' });
-		await expect(navLink).toHaveClass(/text-brand-navy/);
+		await expect(navLink).toHaveClass(/bg-nav-active/);
 	});
 
 	test('sort toggle changes the button label', async ({ page }) => {

frontend/messages/de.json

@@ -39,7 +39,7 @@
 	"form_placeholder_location": "z.B. Berlin, Wien…",
 	"form_label_sender": "Absender",
 	"form_label_receivers": "Empfänger",
-	"form_label_title": "Titel *",
+	"form_label_title": "Titel",
 	"form_label_tags": "Schlagworte",
 	"form_label_content": "Inhalt",
 	"form_placeholder_content": "Kurze Beschreibung des Inhalts…",
@@ -75,6 +75,7 @@
 	"doc_file_replace_label": "Neue Datei hochladen",
 	"doc_file_replace_note": "(ersetzt die aktuelle Datei)",
 	"doc_current_file_label": "Aktuelle Datei:",
+	"doc_more_details": "Weitere Details",
 	"doc_new_heading": "Neues Dokument",
 	"doc_edit_heading": "Bearbeiten",
 	"doc_section_details": "Details",

frontend/messages/en.json

@@ -39,7 +39,7 @@
 	"form_placeholder_location": "e.g. Berlin, Vienna…",
 	"form_label_sender": "Sender",
 	"form_label_receivers": "Recipients",
-	"form_label_title": "Title *",
+	"form_label_title": "Title",
 	"form_label_tags": "Tags",
 	"form_label_content": "Content",
 	"form_placeholder_content": "Brief description of the content…",
@@ -75,6 +75,7 @@
 	"doc_file_replace_label": "Upload new file",
 	"doc_file_replace_note": "(replaces the current file)",
 	"doc_current_file_label": "Current file:",
+	"doc_more_details": "More details",
 	"doc_new_heading": "New document",
 	"doc_edit_heading": "Edit",
 	"doc_section_details": "Details",

frontend/messages/es.json

@@ -39,7 +39,7 @@
 	"form_placeholder_location": "p.ej. Berlín, Viena…",
 	"form_label_sender": "Remitente",
 	"form_label_receivers": "Destinatarios",
-	"form_label_title": "Título *",
+	"form_label_title": "Título",
 	"form_label_tags": "Etiquetas",
 	"form_label_content": "Contenido",
 	"form_placeholder_content": "Breve descripción del contenido…",
@@ -75,6 +75,7 @@
 	"doc_file_replace_label": "Subir nuevo archivo",
 	"doc_file_replace_note": "(reemplaza el archivo actual)",
 	"doc_current_file_label": "Archivo actual:",
+	"doc_more_details": "Más detalles",
 	"doc_new_heading": "Nuevo documento",
 	"doc_edit_heading": "Editar",
 	"doc_section_details": "Detalles",

frontend/src/lib/components/document/DescriptionSection.svelte

@@ -9,7 +9,8 @@ let {
 	initialDocumentLocation = '',
 	initialSummary = '',
 	titleRequired = false,
-	suggestedTitle = ''
+	suggestedTitle = '',
+	hideTitle = false
 }: {
 	tags?: string[];
 	initialTitle?: string;
@@ -17,17 +18,12 @@ let {
 	initialSummary?: string;
 	titleRequired?: boolean;
 	suggestedTitle?: string;
+	hideTitle?: boolean;
 } = $props();
 
-let titleValue = $state(untrack(() => initialTitle));
 let titleDirty = $state(false);
-
+let titleOverride = $state(untrack(() => initialTitle));
-$effect(() => {
+let titleValue = $derived(titleDirty ? titleOverride : suggestedTitle || titleOverride);
-	const suggested = suggestedTitle;
-	if (suggested && !untrack(() => titleDirty)) {
-		titleValue = suggested;
-	}
-});
 </script>
 
 <div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
@@ -36,25 +32,27 @@ $effect(() => {
 	</h2>
 
 	<div class="space-y-5">
-		<!-- Titel -->
+		{#if !hideTitle}
-		<div>
+			<!-- Titel -->
-			<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
+			<div>
-				>{m.form_label_title()}{#if titleRequired}
+				<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
-					*{/if}</label
+					>{m.form_label_title()}{#if titleRequired}
-			>
+						*{/if}</label
-			<input
+				>
-				id="title"
+				<input
-				type="text"
+					id="title"
-				name="title"
+					type="text"
-				value={titleValue}
+					name="title"
-				oninput={(e) => {
+					value={titleValue}
-					titleValue = (e.target as HTMLInputElement).value;
+					oninput={(e) => {
-					titleDirty = true;
+						titleOverride = (e.target as HTMLInputElement).value;
-				}}
+						titleDirty = true;
-				required={titleRequired}
+					}}
-				class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
+					required={titleRequired}
-			/>
+					class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
-		</div>
+				/>
+			</div>
+		{/if}
 
 		<!-- Aufbewahrungsort -->
 		<div>

frontend/src/routes/documents/[id]/+page.svelte

@@ -67,6 +67,7 @@ $effect(() => {
 
 const LS_KEY_HEIGHT = 'doc-panel-height';
 const LS_KEY_TAB = 'doc-panel-tab';
+const LS_KEY_OPEN = 'doc-panel-open';
 
 let panelOpen = $state(false);
 let panelHeight = $state(0); // set to full height on mount
@@ -79,6 +80,7 @@ onMount(() => {
 
 	const savedHeight = localStorage.getItem(LS_KEY_HEIGHT);
 	const savedTab = localStorage.getItem(LS_KEY_TAB);
+	const savedOpen = localStorage.getItem(LS_KEY_OPEN);
 
 	if (savedTab && ['metadata', 'transcription', 'discussion', 'history'].includes(savedTab)) {
 		activeTab = savedTab as DocumentPanelTab;
@@ -90,6 +92,14 @@ onMount(() => {
 		if (!isNaN(h) && h >= 80) panelHeight = h;
 	}
 
+	if (savedOpen === 'true') {
+		panelOpen = true;
+	} else if (savedOpen === null && !doc?.filePath) {
+		// No prior state and no file — open to metadata so the panel is immediately useful.
+		panelOpen = true;
+		activeTab = 'metadata';
+	}
+
 	localStorageRestored = true;
 
 	function onKeyDown(e: KeyboardEvent) {
@@ -111,6 +121,7 @@ $effect(() => {
 	if (!localStorageRestored) return;
 	localStorage.setItem(LS_KEY_HEIGHT, String(panelHeight));
 	localStorage.setItem(LS_KEY_TAB, activeTab);
+	localStorage.setItem(LS_KEY_OPEN, String(panelOpen));
 });
 </script>
 

frontend/src/routes/documents/[id]/edit/+page.svelte

@@ -68,5 +68,6 @@ let selectedReceivers = $state(doc.receivers ?? []);
 		<SaveBar docId={doc.id} />
 	</form>
 
+	<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>

frontend/src/routes/documents/[id]/edit/SaveBar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { enhance } from '$app/forms';
 
 let { docId }: { docId: string } = $props();
 
@@ -78,5 +77,3 @@ let confirmDelete = $state(false);
 		</button>
 	</div>
 </div>
-
-<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>

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

@@ -17,6 +17,30 @@ let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $
 );
 
 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">
@@ -49,21 +73,51 @@ let parsedSuggestion = $state<FilenameParseResult>({});
 	{/if}
 
 	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
-		<WhoWhenSection
+		<!-- File upload — prominent, at the top -->
-			bind:senderId={senderId}
-			bind:selectedReceivers={selectedReceivers}
-			initialSenderName={data.initialSenderName}
-			suggestedDateIso={parsedSuggestion.dateIso ?? ''}
-			suggestedSenderName={parsedSuggestion.personName ?? ''}
-		/>
-		<DescriptionSection
-			bind:tags={tags}
-			titleRequired={true}
-			suggestedTitle={parsedSuggestion.suggestedTitle ?? ''}
-		/>
-		<TranscriptionSection />
 		<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 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)]"

frontend/src/routes/documents/new/FileSectionNew.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { parseFilename, type FilenameParseResult } from '$lib/utils/filename';
+import { parseFilename, stripExtension, type FilenameParseResult } from '$lib/utils/filename';
 
 let {
 	onfileParsed
@@ -8,31 +8,52 @@ let {
 	onfileParsed?: (result: FilenameParseResult) => void;
 } = $props();
 
+let selectedFilename = $state<string | null>(null);
+
 function handleFileChange(e: Event) {
 	const file = (e.target as HTMLInputElement).files?.[0];
-	if (file) onfileParsed?.(parseFilename(file.name));
+	if (!file) return;
+	selectedFilename = file.name;
+	const parsed = parseFilename(file.name);
+	const result: FilenameParseResult = {
+		...parsed,
+		suggestedTitle: parsed.suggestedTitle ?? stripExtension(file.name)
+	};
+	onfileParsed?.(result);
 }
 </script>
 
-<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+<div class="rounded-sm border border-line bg-surface shadow-sm">
-	<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
+	<div class="border-b border-line px-6 py-4">
-		{m.doc_section_file()}
+		<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
-	</h2>
+			{m.doc_section_file()}
+		</h2>
+	</div>
 
-	<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
+	<label
-		{m.doc_file_upload_label()}
+		for="file-upload"
-		<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
+		class="flex cursor-pointer flex-col items-center gap-3 px-6 py-10 transition-colors hover:bg-muted/40"
+	>
+		<svg
+			class="h-10 w-10 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-ink-1 text-sm font-medium">{selectedFilename}</span>
+		{:else}
+			<span class="text-sm font-medium text-ink-2">{m.doc_file_upload_label()}</span>
+			<span class="text-xs text-ink-3">{m.doc_file_upload_note()}</span>
+		{/if}
 	</label>
-	<input
+	<input id="file-upload" type="file" name="file" onchange={handleFileChange} class="sr-only" />
-		id="file-upload"
-		type="file"
-		name="file"
-		onchange={handleFileChange}
-		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>