From 07dbe152e26302bbad17737deb8731e1782d8d72 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 6 Apr 2026 14:03:16 +0200
Subject: [PATCH] feat(search): show result count and term-aware empty state in
 DocumentList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+page.svelte              |  8 ++-
 frontend/src/routes/DocumentList.svelte       | 13 ++++-
 .../src/routes/DocumentList.svelte.spec.ts    | 51 +++++++++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/routes/DocumentList.svelte.spec.ts

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 3583e9bc..0a79add7 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -131,6 +131,12 @@ const showRightColumn = $derived(data.canWrite || (data.incompleteDocs?.length ?
 			<DashboardRecentDocuments recentDocs={data.recentDocs ?? []} stats={data.stats} />
 		</div>
 	{:else}
-		<DocumentList documents={data.documents ?? []} canWrite={data.canWrite} error={data.error} />
+		<DocumentList
+			documents={data.documents ?? []}
+			canWrite={data.canWrite}
+			error={data.error}
+			total={data.total ?? 0}
+			q={q}
+		/>
 	{/if}
 </main>
diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
index 3802d3c9..c0d9d2dc 100644
--- a/frontend/src/routes/DocumentList.svelte
+++ b/frontend/src/routes/DocumentList.svelte
@@ -6,7 +6,9 @@ import { formatDate } from '$lib/utils/date';
 let {
 	documents,
 	canWrite,
-	error
+	error,
+	total = 0,
+	q = ''
 }: {
 	documents: {
 		id: string;
@@ -20,6 +22,8 @@ let {
 	}[];
 	canWrite: boolean;
 	error?: string | null;
+	total?: number;
+	q?: string;
 } = $props();
 </script>
 
@@ -41,6 +45,11 @@ let {
 	{/if}
 </div>
 
+<!-- RESULT COUNT -->
+{#if total > 0}
+	<p class="mb-3 font-sans text-sm text-ink-2">{m.docs_result_count({ count: total })}</p>
+{/if}
+
 <!-- DOCUMENT LIST -->
 <div class="border border-line bg-surface shadow-sm">
 	{#if error}
@@ -162,7 +171,7 @@ let {
 			</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()}
+				{q ? m.docs_empty_for_term({ term: q }) : m.docs_empty_text()}
 			</p>
 			<button
 				onclick={() => goto('/')}
diff --git a/frontend/src/routes/DocumentList.svelte.spec.ts b/frontend/src/routes/DocumentList.svelte.spec.ts
new file mode 100644
index 00000000..2d72326b
--- /dev/null
+++ b/frontend/src/routes/DocumentList.svelte.spec.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import DocumentList from './DocumentList.svelte';
+
+vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+
+const baseProps = {
+	documents: [],
+	canWrite: false,
+	error: null,
+	total: 0,
+	q: ''
+};
+
+const makeDoc = () => ({
+	id: '1',
+	title: 'Testbrief',
+	originalFilename: 'testbrief.pdf',
+	status: 'UPLOADED' as const,
+	documentDate: '2024-03-15',
+	location: null,
+	sender: null,
+	receivers: [],
+	tags: []
+});
+
+describe('DocumentList – result count', () => {
+	it('shows result count when total > 0', async () => {
+		render(DocumentList, { ...baseProps, documents: [makeDoc()], total: 1, q: 'test' });
+		await expect.element(page.getByText('1 Dokumente')).toBeInTheDocument();
+	});
+
+	it('does not show result count when total is 0 and there is no error', async () => {
+		render(DocumentList, { ...baseProps, total: 0, q: '' });
+		const count = page.getByText(/\d+ Dokumente/);
+		await expect.element(count).not.toBeInTheDocument();
+	});
+});
+
+describe('DocumentList – empty state with search term', () => {
+	it('shows generic empty heading when q is empty', async () => {
+		render(DocumentList, { ...baseProps });
+		await expect.element(page.getByText(/Keine Dokumente/)).toBeInTheDocument();
+	});
+
+	it('shows search term in empty state when q is set', async () => {
+		render(DocumentList, { ...baseProps, q: 'Urlaub' });
+		await expect.element(page.getByText(/"Urlaub"/)).toBeInTheDocument();
+	});
+});