marcel/familienarchiv
1
0
Fork 0
Code Issues 117 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(search): restyle highlights to navy underline and add snippet labels

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/routes/DocumentList.svelte
View File

@@ -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();