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

feat(#221): add color dot to tag chips in DocumentList

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-16 16:14:32 +02:00
parent e8e54cc282
commit e03fb38274
2 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,7 @@ let {
displayName: string;
} | null;
receivers?: { id?: string; firstName?: string | null; lastName: string; displayName: string }[];
tags?: { id: string; name: string }[];
tags?: { id: string; name: string; color?: string | null }[];
}[];
canWrite: boolean;
error?: string | null;
@@ -224,13 +224,22 @@ 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-muted text-ink underline decoration-brand-navy decoration-2 underline-offset-2' : 'bg-muted text-ink'}"
class="relative z-10 inline-flex cursor-pointer items-center gap-1 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'}"
title={tag.name}
onclick={(e) => {
e.preventDefault();
e.stopPropagation();
goto(`/?tag=${encodeURIComponent(tag.name)}`);
}}
>
{#if tag.color}
<span
data-testid="tag-color-dot"
data-color={tag.color}
style="background-color: var(--c-tag-{tag.color})"
class="inline-block h-2 w-2 flex-shrink-0 rounded-full"
></span>
{/if}
{#if matchedTagIds.has(tag.id)}
<span data-testid="tag-match">{tag.name}</span>
{:else}