From eb18d4f568481caeb28d5c089b947cd7a2b93672 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 15 Apr 2026 21:33:23 +0200
Subject: [PATCH] feat(search): restyle highlights to navy underline and add
 snippet labels

Switch search match highlights from bordered mint chips to a plain navy
underline (decoration-brand-navy). Add visible "Inhalt" / "Content" /
"Contenido" label before the transcription snippet, matching the style
of the Von/An sender-receiver labels.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/messages/de.json               |  2 +
 frontend/messages/en.json               |  2 +
 frontend/messages/es.json               |  2 +
 frontend/src/routes/DocumentList.svelte | 54 ++++++++++++++++++-------
 4 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/frontend/messages/de.json b/frontend/messages/de.json
index c2f33689..81350a62 100644
--- a/frontend/messages/de.json
+++ b/frontend/messages/de.json
@@ -78,6 +78,8 @@
 	"docs_empty_btn_clear": "Alle Filter löschen",
 	"docs_list_from": "Von",
 	"docs_list_to": "An",
+	"docs_list_content": "Inhalt",
+	"docs_list_summary": "Zusammenfassung",
 	"docs_list_unknown": "Unbekannt",
 	"docs_group_undated": "Undatiert",
 	"docs_group_unknown": "Unbekannt",
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
index c7f784a5..bbbd0f07 100644
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -78,6 +78,8 @@
 	"docs_empty_btn_clear": "Clear all filters",
 	"docs_list_from": "From",
 	"docs_list_to": "To",
+	"docs_list_content": "Content",
+	"docs_list_summary": "Summary",
 	"docs_list_unknown": "Unknown",
 	"docs_group_undated": "Undated",
 	"docs_group_unknown": "Unknown",
diff --git a/frontend/messages/es.json b/frontend/messages/es.json
index 2e06e421..2d7aba00 100644
--- a/frontend/messages/es.json
+++ b/frontend/messages/es.json
@@ -78,6 +78,8 @@
 	"docs_empty_btn_clear": "Borrar todos los filtros",
 	"docs_list_from": "De",
 	"docs_list_to": "Para",
+	"docs_list_content": "Contenido",
+	"docs_list_summary": "Resumen",
 	"docs_list_unknown": "Desconocido",
 	"docs_group_undated": "Sin fecha",
 	"docs_group_unknown": "Desconocido",
diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
index 03bd27dc..bbcd609f 100644
--- a/frontend/src/routes/DocumentList.svelte
+++ b/frontend/src/routes/DocumentList.svelte
@@ -90,6 +90,8 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 					{@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 ?? [])}
@@ -102,7 +104,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 										<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-accent/20 text-inherit group-hover:bg-accent/30"
+														class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
 														>{seg.text}</mark
 													>{:else}{seg.text}{/if}
 											{/each}
@@ -134,17 +136,39 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 									</div>
 
 									{#if snippetSegments}
-										<p
-											data-testid="search-snippet"
-											class="mb-4 line-clamp-2 font-sans text-sm text-ink-2 italic"
-										>
-											<span class="sr-only"
-												>Fundstelle:
-											</span>{#each snippetSegments as seg, i (i)}{#if seg.highlight}<mark
-														class="bg-accent/20 text-inherit not-italic group-hover:bg-accent/30"
-														>{seg.text}</mark
-													>{:else}{seg.text}{/if}{/each}
-										</p>
+										<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 -->
@@ -158,7 +182,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 												{#if senderMatched}
 													<mark
 														data-testid="sender-match"
-														class="bg-accent/20 text-inherit group-hover:bg-accent/30"
+														class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
 														>{doc.sender.displayName}</mark
 													>
 												{:else}
@@ -180,7 +204,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 														{#if receiver.id && matchedReceiverIds.has(receiver.id)}
 															<mark
 																data-testid="receiver-match"
-																class="bg-accent/20 text-inherit group-hover:bg-accent/30"
+																class="bg-transparent text-inherit underline decoration-brand-navy decoration-2 underline-offset-2"
 																>{receiver.displayName}</mark
 															>
 														{:else}
@@ -200,7 +224,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
 											{#each doc.tags as tag (tag.id)}
 												<button
 													type="button"
-													class="relative z-10 inline-flex cursor-pointer items-center 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-accent/20 text-ink' : 'bg-muted text-ink'}"
+													class="relative z-10 inline-flex cursor-pointer items-center 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'}"
 													onclick={(e) => {
 														e.preventDefault();
 														e.stopPropagation();