marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 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}

20
frontend/src/routes/DocumentList.svelte.spec.ts
View File

@@ -342,6 +342,26 @@ describe('DocumentList – match snippets and highlights', () => {
await expect.element(receiverMark).toHaveTextContent('Anna Schmidt');
});
it('renders a color dot on tag chips that have a color', async () => {
const doc = makeDoc({
id: 'doc1',
tags: [{ id: 'tag-1', name: 'Familie', color: 'sage' }]
});
render(DocumentList, { ...baseProps, documents: [doc], total: 1 });
const dot = page.getByTestId('tag-color-dot');
await expect.element(dot).toBeInTheDocument();
await expect.element(dot).toHaveAttribute('data-color', 'sage');
});
it('does not render a color dot on tag chips without a color', async () => {
const doc = makeDoc({
id: 'doc1',
tags: [{ id: 'tag-1', name: 'Familie' }]
});
render(DocumentList, { ...baseProps, documents: [doc], total: 1 });
await expect.element(page.getByTestId('tag-color-dot')).not.toBeInTheDocument();
});
it('visually marks matched tag when its id is in matchedTagIds', async () => {
const doc = makeDoc({
id: 'doc1',