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}