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

feat(search): highlight snippet terms and mark sender/receiver/tag matches in document list

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-15 20:03:04 +02:00
committed by marcel
parent 162397d4eb
commit 9ff8423da6
3 changed files with 226 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,8 +22,13 @@ let {
originalFilename: string;
documentDate?: string | null;
location?: string | null;
sender?: { firstName?: string | null; lastName: string; displayName: string } | null;
receivers?: { firstName?: string | null; lastName: string; displayName: string }[];
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 }[];
}[];
canWrite: boolean;
@@ -80,9 +85,14 @@ const showDividers = $derived(groupedDocuments.length >= 2);
<ul class="divide-y divide-line-2">
{#each group.documents as doc (doc.id)}
{@const titleText = doc.title || doc.originalFilename}
{@const titleOffsets = matchData?.[doc.id]?.titleOffsets ?? []}
{@const match = matchData?.[doc.id]}
{@const titleOffsets = match?.titleOffsets ?? []}
{@const titleSegments = applyOffsets(titleText, titleOffsets)}
{@const snippet = matchData?.[doc.id]?.transcriptionSnippet}
{@const snippet = match?.transcriptionSnippet}
{@const snippetSegments = snippet ? applyOffsets(snippet, match?.snippetOffsets ?? []) : 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">
@@ -123,12 +133,17 @@ const showDividers = $derived(groupedDocuments.length >= 2);
{/if}
</div>
{#if snippet}
{#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>{snippet}
<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>
{/if}
@@ -140,7 +155,15 @@ const showDividers = $derived(groupedDocuments.length >= 2);
>{m.docs_list_from()}</span
>
{#if doc.sender}
<span class="text-ink">{doc.sender.displayName}</span>
{#if senderMatched}
<mark
data-testid="sender-match"
class="bg-accent/20 text-inherit group-hover:bg-accent/30"
>{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}
@@ -152,7 +175,18 @@ const showDividers = $derived(groupedDocuments.length >= 2);
>
{#if doc.receivers && doc.receivers.length > 0}
<span class="text-ink">
{doc.receivers.map((p) => p.displayName).join(', ')}
{#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-accent/20 text-inherit group-hover:bg-accent/30"
>{receiver.displayName}</mark
>
{:else}
{receiver.displayName}
{/if}
{/each}
</span>
{:else}
<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
@@ -166,14 +200,18 @@ 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 bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-primary-fg"
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'}"
onclick={(e) => {
e.preventDefault();
e.stopPropagation();
goto(`/?tag=${encodeURIComponent(tag.name)}`);
}}
>
{tag.name}
{#if matchedTagIds.has(tag.id)}
<span data-testid="tag-match">{tag.name}</span>
{:else}
{tag.name}
{/if}
</button>
{/each}
</div>