From e831de4f8517cdbf8fa52462bb04afcef0570b3c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 26 Mar 2026 12:28:18 +0100
Subject: [PATCH] refactor(home): extract SearchFilterBar, DropZone, and
 DocumentList

Split the 580-line home page into three focused co-located components:
- SearchFilterBar: full-text search + collapsible advanced filters
- DropZone: drag-and-drop / click-to-upload with progress and messages
- DocumentList: document list with new-doc link and empty state

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+page.svelte           | 535 +--------------------
 frontend/src/routes/DocumentList.svelte    | 177 +++++++
 frontend/src/routes/DropZone.svelte        | 213 ++++++++
 frontend/src/routes/SearchFilterBar.svelte | 164 +++++++
 4 files changed, 577 insertions(+), 512 deletions(-)
 create mode 100644 frontend/src/routes/DocumentList.svelte
 create mode 100644 frontend/src/routes/DropZone.svelte
 create mode 100644 frontend/src/routes/SearchFilterBar.svelte

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 71a5c93b..e5130ff1 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
-import { goto, invalidateAll } from '$app/navigation';
-import TagInput from '$lib/components/TagInput.svelte';
-import { slide } from 'svelte/transition';
+import { goto } from '$app/navigation';
 import { untrack } from 'svelte';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
-import { m } from '$lib/paraglide/messages.js';
-import { formatDate } from '$lib/utils/date';
-import { getErrorMessage } from '$lib/errors';
+import SearchFilterBar from './SearchFilterBar.svelte';
+import DropZone from './DropZone.svelte';
+import DocumentList from './DocumentList.svelte';
 
 let { data } = $props();
 
@@ -19,18 +16,6 @@ let senderId = $state(untrack(() => data.filters?.senderId || ''));
 let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
 let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
 
-const ACCEPTED_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
-
-let isDragging = $state(false);
-let windowDragging = $state(false);
-let dragCounter = 0;
-let isUploading = $state(false);
-let uploadProgress = $state(0);
-let uploadMessages = $state<{ text: string; isError: boolean; link?: string }[]>([]);
-let fileInput: HTMLInputElement;
-
-let searchTimer: ReturnType<typeof setTimeout>;
-
 const hasAdvancedFilters = (filters: typeof data.filters) =>
 	(filters?.tags?.length ?? 0) > 0 ||
 	!!filters?.senderId ||
@@ -40,122 +25,22 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
 
 let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
 
-function handleDragOver(e: DragEvent) {
-	e.preventDefault();
-	isDragging = true;
-}
-
-function handleDragLeave() {
-	isDragging = false;
-}
-
-async function handleDrop(e: DragEvent) {
-	e.preventDefault();
-	isDragging = false;
-	windowDragging = false;
-	dragCounter = 0;
-	const files = Array.from(e.dataTransfer?.files ?? []);
-	await uploadFiles(files);
-}
-
-async function handleFileSelect(e: Event) {
-	const input = e.target as HTMLInputElement;
-	const files = Array.from(input.files ?? []);
-	input.value = '';
-	await uploadFiles(files);
-}
-
-async function uploadFiles(files: File[]) {
-	if (files.length === 0) return;
-
-	const messages: { text: string; isError: boolean; link?: string }[] = [];
-
-	// Client-side type validation
-	const valid: File[] = [];
-	for (const file of files) {
-		if (!ACCEPTED_TYPES.includes(file.type)) {
-			messages.push({ text: m.upload_invalid_type({ filename: file.name }), isError: true });
-		} else {
-			valid.push(file);
-		}
-	}
-
-	if (valid.length === 0) {
-		uploadMessages = messages;
-		return;
-	}
-
-	isUploading = true;
-	uploadProgress = 0;
-	try {
-		const formData = new FormData();
-		for (const file of valid) {
-			formData.append('files', file);
-		}
-
-		const { ok, body } = await new Promise<{ ok: boolean; body: string }>((resolve, reject) => {
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', '/api/documents/quick-upload');
-			xhr.upload.addEventListener('progress', (e) => {
-				if (e.lengthComputable) uploadProgress = Math.round((e.loaded / e.total) * 100);
-			});
-			xhr.addEventListener('load', () => resolve({ ok: xhr.status < 300, body: xhr.responseText }));
-			xhr.addEventListener('error', () => reject(new Error('Network error')));
-			xhr.send(formData);
-		});
-
-		if (ok) {
-			const result = JSON.parse(body);
-			if (result.created?.length > 0) {
-				messages.push({ text: m.upload_success({ count: result.created.length }), isError: false });
-			}
-			for (const doc of result.updated ?? []) {
-				messages.push({
-					text: m.upload_duplicate({ filename: doc.originalFilename }),
-					isError: false,
-					link: `/documents/${doc.id}`
-				});
-			}
-			for (const err of result.errors ?? []) {
-				messages.push({
-					text: `${err.filename}: ${getErrorMessage(err.code)}`,
-					isError: true
-				});
-			}
-			await invalidateAll();
-		} else {
-			for (const file of valid) {
-				messages.push({ text: m.upload_error({ filename: file.name }), isError: true });
-			}
-		}
-	} finally {
-		isUploading = false;
-		uploadProgress = 0;
-		uploadMessages = messages;
-	}
-}
+let searchTimer: ReturnType<typeof setTimeout>;
 
 function triggerSearch() {
 	const params = new SvelteURLSearchParams();
-
 	if (q) params.set('q', q);
 	if (from) params.set('from', from);
 	if (to) params.set('to', to);
 	if (senderId) params.set('senderId', senderId);
 	if (receiverId) params.set('receiverId', receiverId);
 	if (tagNames) tagNames.forEach((tag) => params.append('tag', tag));
-
-	goto(`/?${params.toString()}`, {
-		keepFocus: true,
-		noScroll: true
-	});
+	goto(`/?${params.toString()}`, { keepFocus: true, noScroll: true });
 }
 
 function handleTextSearch() {
 	clearTimeout(searchTimer);
-	searchTimer = setTimeout(() => {
-		triggerSearch();
-	}, 500);
+	searchTimer = setTimeout(() => triggerSearch(), 500);
 }
 
 // Trigger search when tags change
@@ -168,40 +53,6 @@ $effect(() => {
 	}
 });
 
-// Expand drop zone whenever a file is dragged anywhere over the browser window
-$effect(() => {
-	if (!data.canWrite) return;
-
-	function onWindowDragEnter(e: DragEvent) {
-		if (!e.dataTransfer?.types.includes('Files')) return;
-		dragCounter++;
-		windowDragging = true;
-	}
-
-	function onWindowDragLeave() {
-		dragCounter--;
-		if (dragCounter <= 0) {
-			dragCounter = 0;
-			windowDragging = false;
-		}
-	}
-
-	function onWindowDrop() {
-		dragCounter = 0;
-		windowDragging = false;
-	}
-
-	window.addEventListener('dragenter', onWindowDragEnter);
-	window.addEventListener('dragleave', onWindowDragLeave);
-	window.addEventListener('drop', onWindowDrop);
-
-	return () => {
-		window.removeEventListener('dragenter', onWindowDragEnter);
-		window.removeEventListener('dragleave', onWindowDragLeave);
-		window.removeEventListener('drop', onWindowDrop);
-	};
-});
-
 // Sync local state with server data after navigation.
 // Guard q: skip overwrite while the user is actively typing in the search field.
 $effect(() => {
@@ -215,365 +66,25 @@ $effect(() => {
 });
 </script>
 
-<!-- Outer Container: Matches the 'Sand' background of the layout -->
 <main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
-	<!-- SEARCH & FILTER CARD -->
-	<div class="mb-8 rounded-sm border border-line bg-surface p-6 shadow-sm">
-		<!-- ROW 1: Main Search (One Line) -->
-		<div class="flex items-center gap-4">
-			<!-- Full Text Search -->
-			<div class="relative flex-1">
-				<input
-					type="text"
-					bind:value={q}
-					oninput={handleTextSearch}
-					onfocus={() => (qFocused = true)}
-					onblur={() => (qFocused = false)}
-					placeholder={m.docs_search_placeholder()}
-					class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
-				/>
-				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-4 w-4 opacity-40"
-					/>
-				</div>
-			</div>
-
-			<!-- Toggle Advanced Button -->
-			<button
-				onclick={() => (showAdvanced = !showAdvanced)}
-				class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
-			>
-				<img
-					src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
-				/>
-				{m.docs_btn_filter()}
-			</button>
-
-			<!-- Reset Button -->
-			<a
-				href="/"
-				class="flex items-center justify-center border border-transparent px-3 py-2.5 text-ink-3 transition hover:text-red-500"
-				title={m.docs_btn_reset_title()}
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-5 w-5 opacity-40"
-				/>
-			</a>
-		</div>
-
-		<!-- ROW 2: Advanced Filters (Collapsible) -->
-		{#if showAdvanced}
-			<div
-				transition:slide
-				class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
-			>
-				<!-- Tag Filter -->
-				<div class="md:col-span-12">
-					<p class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
-						{m.docs_filter_label_tags()}
-					</p>
-					<TagInput bind:tags={tagNames} allowCreation={false} />
-				</div>
-
-				<!-- Sender -->
-				<div class="md:col-span-3">
-					<div
-						class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
-					>
-						<PersonTypeahead
-							name="senderId"
-							label={m.docs_filter_label_sender()}
-							bind:value={senderId}
-							initialName={data.initialValues?.senderName}
-							onchange={triggerSearch}
-						/>
-					</div>
-				</div>
-
-				<!-- Receiver -->
-				<div class="md:col-span-3">
-					<div
-						class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
-					>
-						<PersonTypeahead
-							name="receiverId"
-							label={m.docs_filter_label_receivers()}
-							bind:value={receiverId}
-							initialName={data.initialValues?.receiverName}
-							onchange={triggerSearch}
-						/>
-					</div>
-				</div>
-
-				<!-- Dates -->
-				<div class="grid grid-cols-2 gap-4 md:col-span-6">
-					<div>
-						<label
-							for="from"
-							class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
-							>{m.docs_filter_label_from()}</label
-						>
-						<input
-							type="date"
-							id="from"
-							bind:value={from}
-							onchange={triggerSearch}
-							class="block w-full border-line py-2.5 text-sm shadow-sm"
-						/>
-					</div>
-					<div>
-						<label
-							for="to"
-							class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
-							>{m.docs_filter_label_to()}</label
-						>
-						<input
-							type="date"
-							id="to"
-							bind:value={to}
-							onchange={triggerSearch}
-							class="block w-full border-line py-2.5 text-sm shadow-sm"
-						/>
-					</div>
-				</div>
-			</div>
-		{/if}
-	</div>
+	<SearchFilterBar
+		bind:q={q}
+		bind:from={from}
+		bind:to={to}
+		bind:senderId={senderId}
+		bind:receiverId={receiverId}
+		bind:tagNames={tagNames}
+		bind:showAdvanced={showAdvanced}
+		initialSenderName={data.initialValues?.senderName}
+		initialReceiverName={data.initialValues?.receiverName}
+		onSearch={handleTextSearch}
+		onfocus={() => (qFocused = true)}
+		onblur={() => (qFocused = false)}
+	/>
 
 	{#if data.canWrite}
-		<!-- UPLOAD DROP ZONE -->
-		<div
-			role="button"
-			tabindex="0"
-			class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm transition-all duration-200 {isDragging
-				? 'border-primary bg-accent-bg py-10 text-primary'
-				: windowDragging
-					? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
-					: 'border-ink/20 py-3 text-ink-3 hover:border-primary hover:text-primary'}"
-			ondragover={handleDragOver}
-			ondragleave={handleDragLeave}
-			ondrop={handleDrop}
-			onclick={() => fileInput.click()}
-			onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="h-4 w-4 shrink-0 opacity-50"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				aria-hidden="true"
-			>
-				<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-				<polyline points="17 8 12 3 7 8" />
-				<line x1="12" y1="3" x2="12" y2="15" />
-			</svg>
-			{#if isUploading}
-				<div class="flex w-48 flex-col items-center gap-1">
-					<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
-						<div
-							class="h-full rounded-full bg-primary transition-all duration-200"
-							style="width: {uploadProgress}%"
-						></div>
-					</div>
-					<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
-				</div>
-			{:else}
-				<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
-				<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
-			{/if}
-		</div>
-
-		{#if uploadMessages.length > 0}
-			<div class="mb-4 flex flex-col gap-1">
-				{#each uploadMessages as msg, i (i)}
-					<p
-						class="font-sans text-sm {msg.isError
-							? 'text-red-600'
-							: msg.link
-								? 'text-amber-700'
-								: 'text-green-700'}"
-					>
-						{msg.text}
-						{#if msg.link}
-							<a href={msg.link} class="underline hover:no-underline">{m.upload_duplicate_link()}</a
-							>
-						{/if}
-					</p>
-				{/each}
-			</div>
-		{/if}
+		<DropZone />
 	{/if}
 
-	<!-- DOCUMENT LIST HEADER -->
-	<div class="mb-2 flex justify-end">
-		{#if data.canWrite}
-			<a
-				href="/documents/new"
-				class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
-			>
-				<img
-					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
-					alt=""
-					aria-hidden="true"
-					class="h-4 w-4"
-				/>
-				{m.docs_btn_new()}
-			</a>
-		{/if}
-	</div>
-
-	<!-- DOCUMENT LIST -->
-	<div class="border border-line bg-surface shadow-sm">
-		{#if data.error}
-			<div class="bg-red-50 p-8 text-center text-red-600">
-				{data.error}
-			</div>
-		{:else if data.documents && data.documents.length > 0}
-			<ul class="divide-y divide-line-2">
-				{#each data.documents as doc (doc.id)}
-					<li class="group transition-colors duration-200 hover:bg-muted/50">
-						<!-- LINK TO DETAIL PAGE -->
-						<a href="/documents/{doc.id}" class="block p-6">
-							<div class="flex flex-col gap-6 sm:flex-row">
-								<!-- Main Info -->
-								<div class="flex-1">
-									<div class="mb-2 flex items-baseline justify-between">
-										<!-- Title: Serif & Brand Navy -->
-										<h3
-											class="font-serif text-xl font-medium text-ink decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
-										>
-											{doc.title || doc.originalFilename}
-										</h3>
-									</div>
-
-									<!-- Metadata Row -->
-									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
-										<div class="flex items-center">
-											<img
-												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
-												alt=""
-												aria-hidden="true"
-												class="mr-1.5 h-4 w-4"
-											/>
-											{doc.documentDate ? formatDate(doc.documentDate) : '—'}
-										</div>
-										{#if doc.location}
-											<div class="flex items-center">
-												<img
-													src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
-													alt=""
-													aria-hidden="true"
-													class="mr-1.5 h-4 w-4"
-												/>
-												{doc.location}
-											</div>
-										{/if}
-									</div>
-
-									<!-- Sender/Receiver Info -->
-									<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
-										<div class="flex items-baseline">
-											<span
-												class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
-												>{m.docs_list_from()}</span
-											>
-											{#if doc.sender}
-												<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
-											{:else}
-												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
-											{/if}
-										</div>
-										<div class="flex items-baseline">
-											<span
-												class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
-												>{m.docs_list_to()}</span
-											>
-											{#if doc.receivers && doc.receivers.length > 0}
-												<span class="text-ink">
-													{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
-												</span>
-											{:else}
-												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
-											{/if}
-										</div>
-									</div>
-
-									<!-- Tags Display -->
-									{#if doc.tags && doc.tags.length > 0}
-										<div class="mt-4 flex flex-wrap gap-2 pt-3">
-											{#each doc.tags as tag (tag.id)}
-												<button
-													type="button"
-													class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
-													onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
-												>
-													{tag.name}
-												</button>
-											{/each}
-										</div>
-									{/if}
-								</div>
-
-								<!-- Arrow Icon -->
-								<div
-									class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
-								>
-									<img
-										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
-										alt=""
-										aria-hidden="true"
-										class="h-6 w-6"
-									/>
-								</div>
-							</div>
-						</a>
-					</li>
-				{/each}
-			</ul>
-		{:else}
-			<!-- Empty State -->
-			<div class="p-16 text-center">
-				<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
-					<img
-						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-						alt=""
-						aria-hidden="true"
-						class="h-6 w-6"
-					/>
-				</div>
-				<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
-				<p class="mt-1 font-sans text-sm text-ink-2">
-					{m.docs_empty_text()}
-				</p>
-				<button
-					onclick={() => goto('/')}
-					class="mt-6 text-sm font-bold tracking-wide text-accent uppercase transition hover:text-ink"
-				>
-					{m.docs_empty_btn_clear()}
-				</button>
-			</div>
-		{/if}
-	</div>
-	<input
-		bind:this={fileInput}
-		type="file"
-		multiple
-		accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
-		class="sr-only"
-		onchange={handleFileSelect}
-	/>
+	<DocumentList documents={data.documents ?? []} canWrite={data.canWrite} error={data.error} />
 </main>
diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
new file mode 100644
index 00000000..9ac8537a
--- /dev/null
+++ b/frontend/src/routes/DocumentList.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+import { goto } from '$app/navigation';
+import { m } from '$lib/paraglide/messages.js';
+import { formatDate } from '$lib/utils/date';
+
+let {
+	documents,
+	canWrite,
+	error
+}: {
+	documents: {
+		id: string;
+		title?: string | null;
+		originalFilename: string;
+		documentDate?: string | null;
+		location?: string | null;
+		sender?: { firstName: string; lastName: string } | null;
+		receivers?: { firstName: string; lastName: string }[];
+		tags?: { id: string; name: string }[];
+	}[];
+	canWrite: boolean;
+	error?: string | null;
+} = $props();
+</script>
+
+<!-- DOCUMENT LIST HEADER -->
+<div class="mb-2 flex justify-end">
+	{#if canWrite}
+		<a
+			href="/documents/new"
+			class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-4 w-4"
+			/>
+			{m.docs_btn_new()}
+		</a>
+	{/if}
+</div>
+
+<!-- DOCUMENT LIST -->
+<div class="border border-line bg-surface shadow-sm">
+	{#if error}
+		<div class="bg-red-50 p-8 text-center text-red-600">
+			{error}
+		</div>
+	{:else if documents.length > 0}
+		<ul class="divide-y divide-line-2">
+			{#each documents as doc (doc.id)}
+				<li class="group transition-colors duration-200 hover:bg-muted/50">
+					<a href="/documents/{doc.id}" class="block p-6">
+						<div class="flex flex-col gap-6 sm:flex-row">
+							<!-- Main Info -->
+							<div class="flex-1">
+								<div class="mb-2 flex items-baseline justify-between">
+									<h3
+										class="font-serif text-xl font-medium text-ink decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
+									>
+										{doc.title || doc.originalFilename}
+									</h3>
+								</div>
+
+								<!-- Metadata Row -->
+								<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
+									<div class="flex items-center">
+										<img
+											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
+											alt=""
+											aria-hidden="true"
+											class="mr-1.5 h-4 w-4"
+										/>
+										{doc.documentDate ? formatDate(doc.documentDate) : '—'}
+									</div>
+									{#if doc.location}
+										<div class="flex items-center">
+											<img
+												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
+												alt=""
+												aria-hidden="true"
+												class="mr-1.5 h-4 w-4"
+											/>
+											{doc.location}
+										</div>
+									{/if}
+								</div>
+
+								<!-- Sender/Receiver Info -->
+								<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
+									<div class="flex items-baseline">
+										<span
+											class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
+											>{m.docs_list_from()}</span
+										>
+										{#if doc.sender}
+											<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
+										{:else}
+											<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
+										{/if}
+									</div>
+									<div class="flex items-baseline">
+										<span
+											class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
+											>{m.docs_list_to()}</span
+										>
+										{#if doc.receivers && doc.receivers.length > 0}
+											<span class="text-ink">
+												{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
+											</span>
+										{:else}
+											<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
+										{/if}
+									</div>
+								</div>
+
+								<!-- Tags Display -->
+								{#if doc.tags && doc.tags.length > 0}
+									<div class="mt-4 flex flex-wrap gap-2 pt-3">
+										{#each doc.tags as tag (tag.id)}
+											<button
+												type="button"
+												class="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+												onclick={(e) => {
+													e.preventDefault();
+													e.stopPropagation();
+													goto(`/?tag=${encodeURIComponent(tag.name)}`);
+												}}
+											>
+												{tag.name}
+											</button>
+										{/each}
+									</div>
+								{/if}
+							</div>
+
+							<!-- Arrow Icon -->
+							<div
+								class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
+							>
+								<img
+									src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
+									alt=""
+									aria-hidden="true"
+									class="h-6 w-6"
+								/>
+							</div>
+						</div>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<!-- Empty State -->
+		<div class="p-16 text-center">
+			<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-6 w-6"
+				/>
+			</div>
+			<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
+			<p class="mt-1 font-sans text-sm text-ink-2">
+				{m.docs_empty_text()}
+			</p>
+			<button
+				onclick={() => goto('/')}
+				class="mt-6 text-sm font-bold tracking-wide text-accent uppercase transition hover:text-ink"
+			>
+				{m.docs_empty_btn_clear()}
+			</button>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/routes/DropZone.svelte b/frontend/src/routes/DropZone.svelte
new file mode 100644
index 00000000..d845d027
--- /dev/null
+++ b/frontend/src/routes/DropZone.svelte
@@ -0,0 +1,213 @@
+<script lang="ts">
+import { invalidateAll } from '$app/navigation';
+import { m } from '$lib/paraglide/messages.js';
+import { getErrorMessage } from '$lib/errors';
+
+const ACCEPTED_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
+
+let isDragging = $state(false);
+let windowDragging = $state(false);
+let dragCounter = 0;
+let isUploading = $state(false);
+let uploadProgress = $state(0);
+let uploadMessages = $state<{ text: string; isError: boolean; link?: string }[]>([]);
+let fileInput: HTMLInputElement;
+
+function handleDragOver(e: DragEvent) {
+	e.preventDefault();
+	isDragging = true;
+}
+
+function handleDragLeave() {
+	isDragging = false;
+}
+
+async function handleDrop(e: DragEvent) {
+	e.preventDefault();
+	isDragging = false;
+	windowDragging = false;
+	dragCounter = 0;
+	const files = Array.from(e.dataTransfer?.files ?? []);
+	await uploadFiles(files);
+}
+
+async function handleFileSelect(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const files = Array.from(input.files ?? []);
+	input.value = '';
+	await uploadFiles(files);
+}
+
+async function uploadFiles(files: File[]) {
+	if (files.length === 0) return;
+
+	const messages: { text: string; isError: boolean; link?: string }[] = [];
+
+	const valid: File[] = [];
+	for (const file of files) {
+		if (!ACCEPTED_TYPES.includes(file.type)) {
+			messages.push({ text: m.upload_invalid_type({ filename: file.name }), isError: true });
+		} else {
+			valid.push(file);
+		}
+	}
+
+	if (valid.length === 0) {
+		uploadMessages = messages;
+		return;
+	}
+
+	isUploading = true;
+	uploadProgress = 0;
+	try {
+		const formData = new FormData();
+		for (const file of valid) {
+			formData.append('files', file);
+		}
+
+		const { ok, body } = await new Promise<{ ok: boolean; body: string }>((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', '/api/documents/quick-upload');
+			xhr.upload.addEventListener('progress', (e) => {
+				if (e.lengthComputable) uploadProgress = Math.round((e.loaded / e.total) * 100);
+			});
+			xhr.addEventListener('load', () => resolve({ ok: xhr.status < 300, body: xhr.responseText }));
+			xhr.addEventListener('error', () => reject(new Error('Network error')));
+			xhr.send(formData);
+		});
+
+		if (ok) {
+			const result = JSON.parse(body);
+			if (result.created?.length > 0) {
+				messages.push({ text: m.upload_success({ count: result.created.length }), isError: false });
+			}
+			for (const doc of result.updated ?? []) {
+				messages.push({
+					text: m.upload_duplicate({ filename: doc.originalFilename }),
+					isError: false,
+					link: `/documents/${doc.id}`
+				});
+			}
+			for (const err of result.errors ?? []) {
+				messages.push({
+					text: `${err.filename}: ${getErrorMessage(err.code)}`,
+					isError: true
+				});
+			}
+			await invalidateAll();
+		} else {
+			for (const file of valid) {
+				messages.push({ text: m.upload_error({ filename: file.name }), isError: true });
+			}
+		}
+	} finally {
+		isUploading = false;
+		uploadProgress = 0;
+		uploadMessages = messages;
+	}
+}
+
+$effect(() => {
+	function onWindowDragEnter(e: DragEvent) {
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		dragCounter++;
+		windowDragging = true;
+	}
+
+	function onWindowDragLeave() {
+		dragCounter--;
+		if (dragCounter <= 0) {
+			dragCounter = 0;
+			windowDragging = false;
+		}
+	}
+
+	function onWindowDrop() {
+		dragCounter = 0;
+		windowDragging = false;
+	}
+
+	window.addEventListener('dragenter', onWindowDragEnter);
+	window.addEventListener('dragleave', onWindowDragLeave);
+	window.addEventListener('drop', onWindowDrop);
+
+	return () => {
+		window.removeEventListener('dragenter', onWindowDragEnter);
+		window.removeEventListener('dragleave', onWindowDragLeave);
+		window.removeEventListener('drop', onWindowDrop);
+	};
+});
+</script>
+
+<div
+	role="button"
+	tabindex="0"
+	class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm transition-all duration-200 {isDragging
+		? 'border-primary bg-accent-bg py-10 text-primary'
+		: windowDragging
+			? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
+			: 'border-ink/20 py-3 text-ink-3 hover:border-primary hover:text-primary'}"
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondrop={handleDrop}
+	onclick={() => fileInput.click()}
+	onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
+>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		class="h-4 w-4 shrink-0 opacity-50"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+	>
+		<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+		<polyline points="17 8 12 3 7 8" />
+		<line x1="12" y1="3" x2="12" y2="15" />
+	</svg>
+	{#if isUploading}
+		<div class="flex w-48 flex-col items-center gap-1">
+			<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
+				<div
+					class="h-full rounded-full bg-primary transition-all duration-200"
+					style="width: {uploadProgress}%"
+				></div>
+			</div>
+			<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
+		</div>
+	{:else}
+		<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
+		<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
+	{/if}
+</div>
+
+{#if uploadMessages.length > 0}
+	<div class="mb-4 flex flex-col gap-1">
+		{#each uploadMessages as msg, i (i)}
+			<p
+				class="font-sans text-sm {msg.isError
+					? 'text-red-600'
+					: msg.link
+						? 'text-amber-700'
+						: 'text-green-700'}"
+			>
+				{msg.text}
+				{#if msg.link}
+					<a href={msg.link} class="underline hover:no-underline">{m.upload_duplicate_link()}</a>
+				{/if}
+			</p>
+		{/each}
+	</div>
+{/if}
+
+<input
+	bind:this={fileInput}
+	type="file"
+	multiple
+	accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
+	class="sr-only"
+	onchange={handleFileSelect}
+/>
diff --git a/frontend/src/routes/SearchFilterBar.svelte b/frontend/src/routes/SearchFilterBar.svelte
new file mode 100644
index 00000000..7b471b89
--- /dev/null
+++ b/frontend/src/routes/SearchFilterBar.svelte
@@ -0,0 +1,164 @@
+<script lang="ts">
+import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
+import TagInput from '$lib/components/TagInput.svelte';
+import { slide } from 'svelte/transition';
+import { m } from '$lib/paraglide/messages.js';
+
+let {
+	q = $bindable(''),
+	from = $bindable(''),
+	to = $bindable(''),
+	senderId = $bindable(''),
+	receiverId = $bindable(''),
+	tagNames = $bindable<string[]>([]),
+	showAdvanced = $bindable(false),
+	initialSenderName = '',
+	initialReceiverName = '',
+	onSearch,
+	onfocus,
+	onblur
+}: {
+	q?: string;
+	from?: string;
+	to?: string;
+	senderId?: string;
+	receiverId?: string;
+	tagNames?: string[];
+	showAdvanced?: boolean;
+	initialSenderName?: string;
+	initialReceiverName?: string;
+	onSearch: () => void;
+	onfocus?: () => void;
+	onblur?: () => void;
+} = $props();
+</script>
+
+<div class="mb-8 rounded-sm border border-line bg-surface p-6 shadow-sm">
+	<!-- ROW 1: Main Search (One Line) -->
+	<div class="flex items-center gap-4">
+		<!-- Full Text Search -->
+		<div class="relative flex-1">
+			<input
+				type="text"
+				bind:value={q}
+				oninput={onSearch}
+				onfocus={onfocus}
+				onblur={onblur}
+				placeholder={m.docs_search_placeholder()}
+				class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
+			/>
+			<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4 opacity-40"
+				/>
+			</div>
+		</div>
+
+		<!-- Toggle Advanced Button -->
+		<button
+			onclick={() => (showAdvanced = !showAdvanced)}
+			class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
+		>
+			<img
+				src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-4 w-4 transform transition-transform duration-200 {showAdvanced ? 'rotate-180' : ''}"
+			/>
+			{m.docs_btn_filter()}
+		</button>
+
+		<!-- Reset Button -->
+		<a
+			href="/"
+			class="flex items-center justify-center border border-transparent px-3 py-2.5 text-ink-3 transition hover:text-red-500"
+			title={m.docs_btn_reset_title()}
+		>
+			<img
+				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Close-MD.svg"
+				alt=""
+				aria-hidden="true"
+				class="h-5 w-5 opacity-40"
+			/>
+		</a>
+	</div>
+
+	<!-- ROW 2: Advanced Filters (Collapsible) -->
+	{#if showAdvanced}
+		<div
+			transition:slide
+			class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
+		>
+			<!-- Tag Filter -->
+			<div class="md:col-span-12">
+				<p class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
+					{m.docs_filter_label_tags()}
+				</p>
+				<TagInput bind:tags={tagNames} allowCreation={false} />
+			</div>
+
+			<!-- Sender -->
+			<div class="md:col-span-3">
+				<div
+					class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+				>
+					<PersonTypeahead
+						name="senderId"
+						label={m.docs_filter_label_sender()}
+						bind:value={senderId}
+						initialName={initialSenderName}
+						onchange={onSearch}
+					/>
+				</div>
+			</div>
+
+			<!-- Receiver -->
+			<div class="md:col-span-3">
+				<div
+					class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
+				>
+					<PersonTypeahead
+						name="receiverId"
+						label={m.docs_filter_label_receivers()}
+						bind:value={receiverId}
+						initialName={initialReceiverName}
+						onchange={onSearch}
+					/>
+				</div>
+			</div>
+
+			<!-- Dates -->
+			<div class="grid grid-cols-2 gap-4 md:col-span-6">
+				<div>
+					<label
+						for="from"
+						class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
+						>{m.docs_filter_label_from()}</label
+					>
+					<input
+						type="date"
+						id="from"
+						bind:value={from}
+						onchange={onSearch}
+						class="block w-full border-line py-2.5 text-sm shadow-sm"
+					/>
+				</div>
+				<div>
+					<label for="to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
+						>{m.docs_filter_label_to()}</label
+					>
+					<input
+						type="date"
+						id="to"
+						bind:value={to}
+						onchange={onSearch}
+						class="block w-full border-line py-2.5 text-sm shadow-sm"
+					/>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>