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:
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user