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>
This commit is contained in:
Marcel
2026-04-15 21:33:23 +02:00
committed by marcel
parent 091f7e5d25
commit eb18d4f568
4 changed files with 45 additions and 15 deletions

View File

@@ -78,6 +78,8 @@
"docs_empty_btn_clear": "Alle Filter löschen", "docs_empty_btn_clear": "Alle Filter löschen",
"docs_list_from": "Von", "docs_list_from": "Von",
"docs_list_to": "An", "docs_list_to": "An",
"docs_list_content": "Inhalt",
"docs_list_summary": "Zusammenfassung",
"docs_list_unknown": "Unbekannt", "docs_list_unknown": "Unbekannt",
"docs_group_undated": "Undatiert", "docs_group_undated": "Undatiert",
"docs_group_unknown": "Unbekannt", "docs_group_unknown": "Unbekannt",

View File

@@ -78,6 +78,8 @@
"docs_empty_btn_clear": "Clear all filters", "docs_empty_btn_clear": "Clear all filters",
"docs_list_from": "From", "docs_list_from": "From",
"docs_list_to": "To", "docs_list_to": "To",
"docs_list_content": "Content",
"docs_list_summary": "Summary",
"docs_list_unknown": "Unknown", "docs_list_unknown": "Unknown",
"docs_group_undated": "Undated", "docs_group_undated": "Undated",
"docs_group_unknown": "Unknown", "docs_group_unknown": "Unknown",

View File

@@ -78,6 +78,8 @@
"docs_empty_btn_clear": "Borrar todos los filtros", "docs_empty_btn_clear": "Borrar todos los filtros",
"docs_list_from": "De", "docs_list_from": "De",
"docs_list_to": "Para", "docs_list_to": "Para",
"docs_list_content": "Contenido",
"docs_list_summary": "Resumen",
"docs_list_unknown": "Desconocido", "docs_list_unknown": "Desconocido",
"docs_group_undated": "Sin fecha", "docs_group_undated": "Sin fecha",
"docs_group_unknown": "Desconocido", "docs_group_unknown": "Desconocido",

View File

@@ -90,6 +90,8 @@ const showDividers = $derived(groupedDocuments.length >= 2);
{@const titleSegments = applyOffsets(titleText, titleOffsets)} {@const titleSegments = applyOffsets(titleText, titleOffsets)}
{@const snippet = match?.transcriptionSnippet} {@const snippet = match?.transcriptionSnippet}
{@const snippetSegments = snippet ? applyOffsets(snippet, match?.snippetOffsets ?? []) : null} {@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 senderMatched = match?.senderMatched ?? false}
{@const matchedReceiverIds = new Set(match?.matchedReceiverIds ?? [])} {@const matchedReceiverIds = new Set(match?.matchedReceiverIds ?? [])}
{@const matchedTagIds = new Set(match?.matchedTagIds ?? [])} {@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"> <h3 class="font-serif text-xl font-medium text-ink group-hover:underline">
{#each titleSegments as seg, i (i)} {#each titleSegments as seg, i (i)}
{#if seg.highlight}<mark {#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 >{seg.text}</mark
>{:else}{seg.text}{/if} >{:else}{seg.text}{/if}
{/each} {/each}
@@ -134,17 +136,39 @@ const showDividers = $derived(groupedDocuments.length >= 2);
</div> </div>
{#if snippetSegments} {#if snippetSegments}
<p <div class="mb-4 flex items-baseline gap-2">
data-testid="search-snippet" <span
class="mb-4 line-clamp-2 font-sans text-sm text-ink-2 italic" class="shrink-0 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
> >{m.docs_list_content()}</span
<span class="sr-only" >
>Fundstelle: <p
</span>{#each snippetSegments as seg, i (i)}{#if seg.highlight}<mark data-testid="search-snippet"
class="bg-accent/20 text-inherit not-italic group-hover:bg-accent/30" class="line-clamp-2 font-sans text-sm text-ink-2 italic"
>{seg.text}</mark >
>{:else}{seg.text}{/if}{/each} {#each snippetSegments as seg, i (i)}{#if seg.highlight}<mark
</p> 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} {/if}
<!-- Sender/Receiver Info --> <!-- Sender/Receiver Info -->
@@ -158,7 +182,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
{#if senderMatched} {#if senderMatched}
<mark <mark
data-testid="sender-match" 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 >{doc.sender.displayName}</mark
> >
{:else} {:else}
@@ -180,7 +204,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
{#if receiver.id && matchedReceiverIds.has(receiver.id)} {#if receiver.id && matchedReceiverIds.has(receiver.id)}
<mark <mark
data-testid="receiver-match" 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 >{receiver.displayName}</mark
> >
{:else} {:else}
@@ -200,7 +224,7 @@ const showDividers = $derived(groupedDocuments.length >= 2);
{#each doc.tags as tag (tag.id)} {#each doc.tags as tag (tag.id)}
<button <button
type="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) => { onclick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();