From 10833fbe6b16db45cfb8a925e5f2065dc3855e47 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 20 Apr 2026 00:06:25 +0200
Subject: [PATCH] feat(frontend): add /documents page with search, filter, and
 year-card list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New documents/+page.svelte wires SearchFilterBar + DocumentList with
  URL-driven navigation (goto + SvelteURLSearchParams)
- Reset button in SearchFilterBar now navigates to /documents
- Rename documents/+page.server.spec.ts → page.server.spec.ts to avoid
  SvelteKit route-file conflict on the + prefix

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/SearchFilterBar.svelte    |   2 +-
 frontend/src/routes/documents/+page.svelte    | 121 ++++++++++++++++++
 ...age.server.spec.ts => page.server.spec.ts} |   0
 3 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/routes/documents/+page.svelte
 rename frontend/src/routes/documents/{+page.server.spec.ts => page.server.spec.ts} (100%)

diff --git a/frontend/src/routes/SearchFilterBar.svelte b/frontend/src/routes/SearchFilterBar.svelte
index 396e7c78..eb4c6b8e 100644
--- a/frontend/src/routes/SearchFilterBar.svelte
+++ b/frontend/src/routes/SearchFilterBar.svelte
@@ -125,7 +125,7 @@ $effect(() => {
 
 		<!-- Reset Button -->
 		<a
-			href="/"
+			href="/documents"
 			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()}
 		>
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
new file mode 100644
index 00000000..60bb08cb
--- /dev/null
+++ b/frontend/src/routes/documents/+page.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+import { goto } from '$app/navigation';
+import { navigating } from '$app/state';
+import { untrack } from 'svelte';
+import { SvelteURLSearchParams } from 'svelte/reactivity';
+import SearchFilterBar from '../SearchFilterBar.svelte';
+import DocumentList from '../DocumentList.svelte';
+import * as m from '$lib/paraglide/messages.js';
+
+let { data } = $props();
+
+// Local state initialised from server-returned filter values.
+// untrack() prevents infinite reactive loops during initialisation.
+let q = $state(untrack(() => data.q || ''));
+let qFocused = $state(false);
+let from = $state(untrack(() => data.from || ''));
+let to = $state(untrack(() => data.to || ''));
+let senderId = $state(untrack(() => data.senderId || ''));
+let receiverId = $state(untrack(() => data.receiverId || ''));
+let tagNames = $state<{ name: string; id?: string; color?: string; parentId?: string }[]>(
+	untrack(() => (data.tags || []).map((name: string) => ({ name })))
+);
+let sort = $state(untrack(() => data.sort || 'DATE'));
+let dir = $state(untrack(() => data.dir || 'desc'));
+let tagQ = $state(untrack(() => data.tagQ || ''));
+let tagOperator = $state<'AND' | 'OR'>(untrack(() => (data.tagOp as 'AND' | 'OR') || 'AND'));
+
+function hasAdvancedFilters() {
+	return (
+		(data.tags?.length ?? 0) > 0 || !!data.senderId || !!data.receiverId || !!data.from || !!data.to
+	);
+}
+
+let showAdvanced = $state(untrack(hasAdvancedFilters));
+
+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);
+	tagNames.forEach((tag) => params.append('tag', tag.name));
+	if (sort) params.set('sort', sort);
+	if (dir) params.set('dir', dir);
+	if (tagQ) params.set('tagQ', tagQ);
+	if (tagOperator === 'OR') params.set('tagOp', 'OR');
+	goto(`/documents?${params.toString()}`, { keepFocus: true, noScroll: true });
+}
+
+function handleTextSearch() {
+	clearTimeout(searchTimer);
+	searchTimer = setTimeout(() => triggerSearch(), 500);
+}
+
+function handleImmediateSearch() {
+	clearTimeout(searchTimer);
+	triggerSearch();
+}
+
+// Trigger search reactively when the tag list changes.
+let prevTagStr = untrack(() => tagNames.map((t) => t.name).join(','));
+$effect(() => {
+	const cur = tagNames.map((t) => t.name).join(',');
+	if (cur !== prevTagStr) {
+		prevTagStr = cur;
+		triggerSearch();
+	}
+});
+
+// Keep local filter state in sync with server data after navigation completes.
+// Guard q: skip overwrite while the user is actively typing.
+$effect(() => {
+	if (!qFocused) q = data.q || '';
+	from = data.from || '';
+	to = data.to || '';
+	senderId = data.senderId || '';
+	receiverId = data.receiverId || '';
+	tagNames = (data.tags || []).map((name: string) => ({ name }));
+	sort = data.sort || 'DATE';
+	dir = data.dir || 'desc';
+	tagQ = data.tagQ || '';
+	tagOperator = (data.tagOp as 'AND' | 'OR') || 'AND';
+	if (hasAdvancedFilters()) showAdvanced = true;
+});
+</script>
+
+<svelte:head>
+	<title>{m.nav_documents()} – Familienarchiv</title>
+</svelte:head>
+
+<main class="mx-auto max-w-7xl px-4 py-8 font-sans sm:px-6 lg:px-8">
+	<SearchFilterBar
+		bind:q={q}
+		bind:from={from}
+		bind:to={to}
+		bind:senderId={senderId}
+		bind:receiverId={receiverId}
+		bind:tagNames={tagNames}
+		bind:showAdvanced={showAdvanced}
+		bind:sort={sort}
+		bind:dir={dir}
+		bind:tagQ={tagQ}
+		bind:tagOperator={tagOperator}
+		isLoading={navigating.to !== null}
+		onSearch={handleTextSearch}
+		onSearchImmediate={handleImmediateSearch}
+		onfocus={() => (qFocused = true)}
+		onblur={() => (qFocused = false)}
+	/>
+
+	<DocumentList
+		items={data.items}
+		total={data.total}
+		q={data.q}
+		canWrite={data.canWrite}
+		error={data.error}
+	/>
+</main>
diff --git a/frontend/src/routes/documents/+page.server.spec.ts b/frontend/src/routes/documents/page.server.spec.ts
similarity index 100%
rename from frontend/src/routes/documents/+page.server.spec.ts
rename to frontend/src/routes/documents/page.server.spec.ts