refactor(frontend): rewrite DocumentList as year-card orchestrator using DocumentSearchItem[]

Delegates row rendering to DocumentRow; groups by year; removes matchData and sort props.

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

frontend/src/routes/DocumentList.svelte

@@ -1,51 +1,39 @@
 <script lang="ts">
 import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
-import { formatDate } from '$lib/utils/date';
-import { groupDocuments } from '$lib/utils/groupDocuments';
-import GroupDivider from '$lib/components/GroupDivider.svelte';
-import { applyOffsets } from '$lib/search';
+import DocumentRow from '$lib/components/DocumentRow.svelte';
+import { SvelteMap } from 'svelte/reactivity';
 import type { components } from '$lib/generated/api';
 
+type DocumentSearchItem = components['schemas']['DocumentSearchItem'];
+
 let {
-	documents,
+	items,
 	canWrite,
 	error,
 	total = 0,
-	q = '',
-	sort,
-	matchData = {}
+	q = ''
 }: {
-	documents: {
-		id: string;
-		title?: string | null;
-		originalFilename: string;
-		documentDate?: string | null;
-		location?: string | null;
-		sender?: {
-			id?: string;
-			firstName?: string | null;
-			lastName: string;
-			displayName: string;
-		} | null;
-		receivers?: { id?: string; firstName?: string | null; lastName: string; displayName: string }[];
-		tags?: { id: string; name: string; color?: string | null }[];
-	}[];
+	items: DocumentSearchItem[];
 	canWrite: boolean;
 	error?: string | null;
 	total?: number;
 	q?: string;
-	sort?: string;
-	matchData?: Record<string, components['schemas']['SearchMatchData']>;
 } = $props();
 
-const fallbackLabel = $derived(
-	(sort ?? 'DATE') === 'DATE' ? m.docs_group_undated() : m.docs_group_unknown()
-);
-const groupedDocuments = $derived.by(() =>
-	groupDocuments(documents, sort ?? 'DATE', fallbackLabel)
-);
-const showDividers = $derived(groupedDocuments.length >= 2);
+const yearGroups = $derived.by(() => {
+	const map = new SvelteMap<string, DocumentSearchItem[]>();
+	for (const item of items) {
+		const year = item.document.documentDate?.substring(0, 4) ?? 'Ohne Datum';
+		const group = map.get(year);
+		if (group) {
+			group.push(item);
+		} else {
+			map.set(year, [item]);
+		}
+	}
+	return Array.from(map.entries()).map(([year, groupItems]) => ({ year, items: groupItems }));
+});
 </script>
 
 <!-- DOCUMENT LIST HEADER -->
@@ -71,205 +59,35 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 	<p class="mb-3 font-sans text-base text-ink-2">{m.docs_result_count({ count: total })}</p>
 {/if}
 
-<!-- DOCUMENT LIST -->
-<div class="border border-line bg-surface shadow-sm">
-	{#if error}
+<!-- ERROR -->
+{#if error}
+	<div class="border border-line bg-surface shadow-sm">
 		<div class="bg-red-50 p-8 text-center text-red-600">
 			{error}
 		</div>
-	{:else if documents.length > 0}
-		{#each groupedDocuments as group (group.label)}
-			{#if showDividers}
-				<GroupDivider label={group.label} />
-			{/if}
-			<ul class="divide-y divide-line-2">
-				{#each group.documents as doc (doc.id)}
-					{@const titleText = doc.title || doc.originalFilename}
-					{@const match = matchData?.[doc.id]}
-					{@const titleOffsets = match?.titleOffsets ?? []}
-					{@const titleSegments = applyOffsets(titleText, titleOffsets)}
-					{@const snippet = match?.transcriptionSnippet}
-					{@const snippetSegments = snippet ? applyOffsets(snippet, match?.snippetOffsets ?? []) : null}
-					{@const summary = match?.summarySnippet}
-					{@const summarySegments = summary ? applyOffsets(summary, match?.summaryOffsets ?? []) : null}
-					{@const senderMatched = match?.senderMatched ?? false}
-					{@const matchedReceiverIds = new Set(match?.matchedReceiverIds ?? [])}
-					{@const matchedTagIds = new Set(match?.matchedTagIds ?? [])}
-					<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 group-hover:underline">
-											{#each titleSegments as seg, i (i)}
-												{#if seg.highlight}<mark
-														class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
-														>{seg.text}</mark
-													>{:else}{seg.text}{/if}
-											{/each}
-										</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>
-
-									{#if snippetSegments}
-										<div class="mb-4 flex items-baseline gap-2">
-											<span
-												class="shrink-0 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
-												>{m.docs_list_content()}</span
-											>
-											<p
-												data-testid="search-snippet"
-												class="line-clamp-2 font-sans text-sm text-ink-2 italic"
-											>
-												{#each snippetSegments as seg, i (i)}{#if seg.highlight}<mark
-															class="bg-transparent text-inherit not-italic underline decoration-brand-navy decoration-2 underline-offset-2"
-															>{seg.text}</mark
-														>{:else}{seg.text}{/if}{/each}
-											</p>
-										</div>
-									{/if}
-
-									{#if summarySegments}
-										<div class="mb-4 flex items-baseline gap-2">
-											<span
-												class="shrink-0 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
-												>{m.docs_list_summary()}</span
-											>
-											<p
-												data-testid="search-summary"
-												class="line-clamp-2 font-sans text-sm text-ink-2 italic"
-											>
-												{#each summarySegments as seg, i (i)}{#if seg.highlight}<mark
-															class="bg-transparent text-inherit not-italic underline decoration-brand-navy decoration-2 underline-offset-2"
-															>{seg.text}</mark
-														>{:else}{seg.text}{/if}{/each}
-											</p>
-										</div>
-									{/if}
-
-									<!-- 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}
-												{#if senderMatched}
-													<mark
-														data-testid="sender-match"
-														class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
-														>{doc.sender.displayName}</mark
-													>
-												{:else}
-													<span class="text-ink">{doc.sender.displayName}</span>
-												{/if}
-											{: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">
-													{#each doc.receivers as receiver, ri (receiver.id ?? ri)}
-														{#if ri > 0}<span>, </span>{/if}
-														{#if receiver.id && matchedReceiverIds.has(receiver.id)}
-															<mark
-																data-testid="receiver-match"
-																class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
-																>{receiver.displayName}</mark
-															>
-														{:else}
-															{receiver.displayName}
-														{/if}
-													{/each}
-												</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 gap-1 rounded px-2 py-1 text-[10px] font-bold tracking-widest uppercase transition-colors hover:bg-primary hover:text-primary-fg {matchedTagIds.has(tag.id) ? 'bg-muted text-ink underline decoration-brand-navy decoration-2 underline-offset-2' : 'bg-muted text-ink'}"
-													title={tag.name}
-													onclick={(e) => {
-														e.preventDefault();
-														e.stopPropagation();
-														goto(`/?tag=${encodeURIComponent(tag.name)}`);
-													}}
-												>
-													{#if tag.color}
-														<span
-															data-testid="tag-color-dot"
-															data-color={tag.color}
-															style="background-color: var(--c-tag-{tag.color})"
-															class="inline-block h-2 w-2 flex-shrink-0 rounded-full"
-														></span>
-													{/if}
-													{#if matchedTagIds.has(tag.id)}
-														<span data-testid="tag-match">{tag.name}</span>
-													{:else}
-														{tag.name}
-													{/if}
-												</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>
+	</div>
+{:else if items.length > 0}
+	<!-- YEAR CARDS -->
+	{#each yearGroups as group (group.year)}
+		<div
+			data-testid="year-card"
+			class="mb-4 overflow-hidden border border-line bg-surface shadow-sm"
+		>
+			<div class="border-b border-line bg-muted px-5 py-2">
+				<span class="font-sans text-[10px] font-bold tracking-widest text-ink-3 uppercase"
+					>{group.year}</span
+				>
+			</div>
+			<ul class="divide-y divide-line">
+				{#each group.items as item (item.document.id)}
+					<DocumentRow item={item} />
 				{/each}
 			</ul>
-		{/each}
-	{:else}
-		<!-- Empty State -->
+		</div>
+	{/each}
+{:else}
+	<!-- EMPTY STATE -->
+	<div class="border border-line bg-surface shadow-sm">
 		<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
@@ -284,11 +102,11 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 				{q ? m.docs_empty_for_term({ term: q }) : m.docs_empty_text()}
 			</p>
 			<button
-				onclick={() => goto('/')}
+				onclick={() => goto('/documents')}
 				class="mt-6 text-sm font-bold tracking-wide text-primary uppercase transition hover:text-ink-2"
 			>
 				{m.docs_empty_btn_clear()}
 			</button>
 		</div>
-	{/if}
-</div>
+	</div>
+{/if}

frontend/src/routes/DocumentList.svelte.spec.ts

@@ -2,64 +2,63 @@ import { describe, expect, it, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import DocumentList from './DocumentList.svelte';
+import type { components } from '$lib/generated/api';
 
 vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
 
 afterEach(() => cleanup());
 
-const baseProps = {
-	documents: [],
-	canWrite: false,
-	error: null,
-	total: 0,
-	q: '',
-	matchData: {} as Record<
-		string,
-		import('$lib/generated/api').components['schemas']['SearchMatchData']
-	>
-};
+type DocumentSearchItem = components['schemas']['DocumentSearchItem'];
 
-type DocOverrides = {
-	id?: string;
-	title?: string;
-	documentDate?: string | null;
-	sender?: { id?: string; firstName?: string | null; lastName: string; displayName: string } | null;
-	receivers?: { id?: string; firstName?: string | null; lastName: string; displayName: string }[];
-	tags?: { id: string; name: string }[];
-};
+function makeItem(overrides: Partial<DocumentSearchItem> = {}): DocumentSearchItem {
+	return {
+		document: {
+			id: '1',
+			title: 'Testbrief',
+			originalFilename: 'testbrief.pdf',
+			status: 'UPLOADED',
+			documentDate: '2024-03-15',
+			sender: null,
+			receivers: [],
+			tags: [],
+			createdAt: '2024-01-01T00:00:00Z',
+			updatedAt: '2024-01-01T00:00:00Z',
+			metadataComplete: false,
+			scriptType: 'UNKNOWN'
+		},
+		matchData: {
+			titleOffsets: [],
+			senderMatched: false,
+			matchedReceiverIds: [],
+			matchedTagIds: [],
+			snippetOffsets: [],
+			summaryOffsets: []
+		},
+		completionPercentage: 0,
+		contributors: [],
+		...overrides
+	};
+}
 
-const makeDoc = (overrides: DocOverrides = {}) => ({
-	id: '1',
-	title: 'Testbrief',
-	originalFilename: 'testbrief.pdf',
-	status: 'UPLOADED' as const,
-	documentDate: '2024-03-15',
-	location: null,
-	sender: null,
-	receivers: [] as {
-		id?: string;
-		firstName?: string | null;
-		lastName: string;
-		displayName: string;
-	}[],
-	tags: [],
-	...overrides
-});
+const baseProps = { items: [], canWrite: false, error: null, total: 0, q: '' };
+
+// ─── Result count ─────────────────────────────────────────────────────────────
 
 describe('DocumentList – result count', () => {
 	it('shows result count when total > 0', async () => {
-		render(DocumentList, { ...baseProps, documents: [makeDoc()], total: 1, q: 'test' });
+		render(DocumentList, { ...baseProps, items: [makeItem()], 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 () => {
+	it('does not show result count when total is 0', async () => {
 		render(DocumentList, { ...baseProps, total: 0, q: '' });
-		const count = page.getByText(/\d+ Dokumente/);
-		await expect.element(count).not.toBeInTheDocument();
+		await expect.element(page.getByText(/\d+ Dokumente/)).not.toBeInTheDocument();
 	});
 });
 
-describe('DocumentList – empty state with search term', () => {
+// ─── Empty state ──────────────────────────────────────────────────────────────
+
+describe('DocumentList – empty state', () => {
 	it('shows generic empty heading when q is empty', async () => {
 		render(DocumentList, { ...baseProps });
 		await expect.element(page.getByText(/Keine Dokumente/)).toBeInTheDocument();
@@ -71,73 +70,49 @@ describe('DocumentList – empty state with search term', () => {
 	});
 });
 
-// ─── Group headers ────────────────────────────────────────────────────────────
+// ─── Year grouping ────────────────────────────────────────────────────────────
 
-describe('DocumentList – group headers', () => {
-	it('renders group-divider elements when DATE sort spans multiple years', async () => {
-		const documents = [
-			makeDoc({ id: '1', documentDate: '1923-04-12' }),
-			makeDoc({ id: '2', documentDate: '1965-08-03' })
+describe('DocumentList – year grouping', () => {
+	it('groups documents by year into separate cards', async () => {
+		const items = [
+			makeItem({ document: { ...makeItem().document, id: '1', documentDate: '1923-04-12' } }),
+			makeItem({ document: { ...makeItem().document, id: '2', documentDate: '1965-08-03' } })
 		];
-		render(DocumentList, { ...baseProps, documents, total: 2, sort: 'DATE' });
-		await expect.element(page.getByTestId('group-divider').first()).toBeInTheDocument();
+		render(DocumentList, { ...baseProps, items, total: 2 });
+		const yearCards = page.getByTestId('year-card');
+		await expect.element(yearCards.first()).toBeInTheDocument();
+		await expect.element(yearCards.nth(1)).toBeInTheDocument();
 	});
 
-	it('does not render group-divider when DATE sort has only one distinct year', async () => {
-		const documents = [
-			makeDoc({ id: '1', documentDate: '1938-01-01' }),
-			makeDoc({ id: '2', documentDate: '1938-06-15' })
+	it('uses Ohne Datum for items with no documentDate', async () => {
+		const items = [
+			makeItem({ document: { ...makeItem().document, id: '1', documentDate: undefined } })
 		];
-		render(DocumentList, { ...baseProps, documents, total: 2, sort: 'DATE' });
-		await expect.element(page.getByTestId('group-divider')).not.toBeInTheDocument();
+		render(DocumentList, { ...baseProps, items, total: 1 });
+		await expect.element(page.getByText('Ohne Datum')).toBeInTheDocument();
 	});
 
-	it('does not render group-divider for TITLE sort', async () => {
-		const documents = [
-			makeDoc({ id: '1', documentDate: '1923-04-12' }),
-			makeDoc({ id: '2', documentDate: '1965-08-03' })
+	it('single year renders one year-card', async () => {
+		const items = [
+			makeItem({ document: { ...makeItem().document, id: '1', documentDate: '1938-01-01' } }),
+			makeItem({ document: { ...makeItem().document, id: '2', documentDate: '1938-06-15' } })
 		];
-		render(DocumentList, { ...baseProps, documents, total: 2, sort: 'TITLE' });
-		await expect.element(page.getByTestId('group-divider')).not.toBeInTheDocument();
-	});
-
-	it('shows Undatiert fallback label when sort is undefined and doc has no date', async () => {
-		const documents = [
-			makeDoc({ id: '1', documentDate: '1938-01-01' }),
-			makeDoc({ id: '2', documentDate: null })
-		];
-		render(DocumentList, { ...baseProps, documents, total: 2 }); // sort omitted — defaults to DATE grouping
-		await expect.element(page.getByText(/UNDATIERT/i)).toBeInTheDocument();
-	});
-
-	it('a doc with two receivers appears in both receiver groups', async () => {
-		const documents = [
-			makeDoc({
-				id: '1',
-				receivers: [
-					{ firstName: null, lastName: 'Müller', displayName: 'Anna Müller' },
-					{ firstName: null, lastName: 'Bauer', displayName: 'Karl Bauer' }
-				]
-			})
-		];
-		render(DocumentList, { ...baseProps, documents, total: 1, sort: 'RECEIVER' });
-		const links = page.getByRole('link', { name: /Testbrief/ });
-		await expect.element(links.first()).toBeInTheDocument();
-		await expect.element(links.nth(1)).toBeInTheDocument();
+		render(DocumentList, { ...baseProps, items, total: 2 });
+		const yearCards = page.getByTestId('year-card');
+		// Only one card for 1938
+		await expect.element(yearCards.first()).toBeInTheDocument();
+		await expect.element(yearCards.nth(1)).not.toBeInTheDocument();
 	});
 });
 
-// ─── Match data: snippet and title highlighting ───────────────────────────────
+// ─── DocumentRow rendering (delegated) ───────────────────────────────────────
 
-describe('DocumentList – match snippets and highlights', () => {
-	it('shows transcription snippet when matchData has one for the document', async () => {
-		const doc = makeDoc({ id: 'doc1' });
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
+describe('DocumentList – DocumentRow delegation', () => {
+	it('shows transcription snippet when matchData has one', async () => {
+		const items = [
+			makeItem({
+				document: { ...makeItem().document, id: 'doc1' },
+				matchData: {
 					transcriptionSnippet: 'Er schrieb einen langen Brief',
 					titleOffsets: [],
 					senderMatched: false,
@@ -146,26 +121,23 @@ describe('DocumentList – match snippets and highlights', () => {
 					snippetOffsets: [],
 					summaryOffsets: []
 				}
-			}
-		});
+			})
+		];
+		render(DocumentList, { ...baseProps, items, total: 1 });
 		await expect.element(page.getByText('Er schrieb einen langen Brief')).toBeInTheDocument();
 	});
 
-	it('does not show snippet section when matchData has no entry for the document', async () => {
-		const doc = makeDoc({ id: 'doc1' });
-		render(DocumentList, { ...baseProps, documents: [doc], total: 1, matchData: {} });
+	it('does not render snippet when matchData has no transcription snippet', async () => {
+		const items = [makeItem({ document: { ...makeItem().document, id: 'doc1' } })];
+		render(DocumentList, { ...baseProps, items, total: 1 });
 		await expect.element(page.getByTestId('search-snippet')).not.toBeInTheDocument();
 	});
 
-	it('renders a <mark> element when titleOffsets are present', async () => {
-		const doc = makeDoc({ id: 'doc1', title: 'Brief an Anna' });
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: undefined,
+	it('renders mark for title highlight when titleOffsets present', async () => {
+		const items = [
+			makeItem({
+				document: { ...makeItem().document, id: 'doc1', title: 'Brief an Anna' },
+				matchData: {
 					titleOffsets: [{ start: 0, length: 5 }], // "Brief"
 					senderMatched: false,
 					matchedReceiverIds: [],
@@ -173,221 +145,11 @@ describe('DocumentList – match snippets and highlights', () => {
 					snippetOffsets: [],
 					summaryOffsets: []
 				}
-			}
-		});
-		// The word "Brief" should be inside a <mark> element
+			})
+		];
+		render(DocumentList, { ...baseProps, items, total: 1 });
 		const mark = page.getByRole('mark');
 		await expect.element(mark).toBeInTheDocument();
 		await expect.element(mark).toHaveTextContent('Brief');
 	});
-
-	it('renders title as plain text when titleOffsets is empty', async () => {
-		const doc = makeDoc({ id: 'doc1', title: 'Brief an Anna' });
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: undefined,
-					titleOffsets: [],
-					senderMatched: false,
-					matchedReceiverIds: [],
-					matchedTagIds: [],
-					snippetOffsets: [],
-					summaryOffsets: []
-				}
-			}
-		});
-		await expect.element(page.getByRole('mark')).not.toBeInTheDocument();
-		await expect.element(page.getByText('Brief an Anna')).toBeInTheDocument();
-	});
-
-	it('renders <mark> inside snippet when snippetOffsets are present', async () => {
-		const doc = makeDoc({ id: 'doc1' });
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: 'Er schrieb einen Brief',
-					titleOffsets: [],
-					senderMatched: false,
-					matchedReceiverIds: [],
-					matchedTagIds: [],
-					snippetOffsets: [{ start: 17, length: 5 }], // "Brief"
-					summaryOffsets: []
-				}
-			}
-		});
-		const snippet = page.getByTestId('search-snippet');
-		await expect.element(snippet).toBeInTheDocument();
-		const mark = snippet.getByRole('mark');
-		await expect.element(mark).toBeInTheDocument();
-		await expect.element(mark).toHaveTextContent('Brief');
-	});
-
-	it('renders snippet as plain text when snippetOffsets is empty', async () => {
-		const doc = makeDoc({ id: 'doc1' });
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: 'Er schrieb einen Brief',
-					titleOffsets: [],
-					senderMatched: false,
-					matchedReceiverIds: [],
-					matchedTagIds: [],
-					snippetOffsets: [],
-					summaryOffsets: []
-				}
-			}
-		});
-		const snippet = page.getByTestId('search-snippet');
-		await expect.element(snippet).toBeInTheDocument();
-		// No mark elements inside the snippet when offsets is empty
-		await expect.element(snippet.getByRole('mark')).not.toBeInTheDocument();
-	});
-
-	it('visually marks sender when senderMatched is true', async () => {
-		const doc = makeDoc({
-			id: 'doc1',
-			sender: {
-				id: 'sender-1',
-				firstName: 'Walter',
-				lastName: 'Raddatz',
-				displayName: 'Walter Raddatz'
-			}
-		});
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: undefined,
-					titleOffsets: [],
-					senderMatched: true,
-					matchedReceiverIds: [],
-					matchedTagIds: [],
-					snippetOffsets: [],
-					summaryOffsets: []
-				}
-			}
-		});
-		const senderMark = page.getByTestId('sender-match');
-		await expect.element(senderMark).toBeInTheDocument();
-		await expect.element(senderMark).toHaveTextContent('Walter Raddatz');
-	});
-
-	it('does not mark sender when senderMatched is false', async () => {
-		const doc = makeDoc({
-			id: 'doc1',
-			sender: {
-				id: 'sender-1',
-				firstName: 'Walter',
-				lastName: 'Raddatz',
-				displayName: 'Walter Raddatz'
-			}
-		});
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: undefined,
-					titleOffsets: [],
-					senderMatched: false,
-					matchedReceiverIds: [],
-					matchedTagIds: [],
-					snippetOffsets: [],
-					summaryOffsets: []
-				}
-			}
-		});
-		await expect.element(page.getByTestId('sender-match')).not.toBeInTheDocument();
-	});
-
-	it('visually marks matched receiver when their id is in matchedReceiverIds', async () => {
-		const doc = makeDoc({
-			id: 'doc1',
-			receivers: [
-				{ id: 'p-1', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' },
-				{ id: 'p-2', firstName: 'Karl', lastName: 'Bauer', displayName: 'Karl Bauer' }
-			]
-		});
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: undefined,
-					titleOffsets: [],
-					senderMatched: false,
-					matchedReceiverIds: ['p-1'],
-					matchedTagIds: [],
-					snippetOffsets: [],
-					summaryOffsets: []
-				}
-			}
-		});
-		// Only Anna Schmidt should be marked
-		const receiverMark = page.getByTestId('receiver-match');
-		await expect.element(receiverMark).toBeInTheDocument();
-		await expect.element(receiverMark).toHaveTextContent('Anna Schmidt');
-	});
-
-	it('renders a color dot on tag chips that have a color', async () => {
-		const doc = makeDoc({
-			id: 'doc1',
-			tags: [{ id: 'tag-1', name: 'Familie', color: 'sage' }]
-		});
-		render(DocumentList, { ...baseProps, documents: [doc], total: 1 });
-		const dot = page.getByTestId('tag-color-dot');
-		await expect.element(dot).toBeInTheDocument();
-		await expect.element(dot).toHaveAttribute('data-color', 'sage');
-	});
-
-	it('does not render a color dot on tag chips without a color', async () => {
-		const doc = makeDoc({
-			id: 'doc1',
-			tags: [{ id: 'tag-1', name: 'Familie' }]
-		});
-		render(DocumentList, { ...baseProps, documents: [doc], total: 1 });
-		await expect.element(page.getByTestId('tag-color-dot')).not.toBeInTheDocument();
-	});
-
-	it('visually marks matched tag when its id is in matchedTagIds', async () => {
-		const doc = makeDoc({
-			id: 'doc1',
-			tags: [
-				{ id: 'tag-1', name: 'Familiengeschichte' },
-				{ id: 'tag-2', name: 'Reise' }
-			]
-		});
-		render(DocumentList, {
-			...baseProps,
-			documents: [doc],
-			total: 1,
-			matchData: {
-				doc1: {
-					transcriptionSnippet: undefined,
-					titleOffsets: [],
-					senderMatched: false,
-					matchedReceiverIds: [],
-					matchedTagIds: ['tag-1'],
-					snippetOffsets: [],
-					summaryOffsets: []
-				}
-			}
-		});
-		const tagMark = page.getByTestId('tag-match');
-		await expect.element(tagMark).toBeInTheDocument();
-		await expect.element(tagMark).toHaveTextContent('Familiengeschichte');
-	});
 });