From e03fb38274e973db5af941765ef411d09d457c57 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Thu, 16 Apr 2026 16:14:32 +0200
Subject: [PATCH] feat(#221): add color dot to tag chips in DocumentList

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/DocumentList.svelte       | 13 ++++++++++--
 .../src/routes/DocumentList.svelte.spec.ts    | 20 +++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/DocumentList.svelte b/frontend/src/routes/DocumentList.svelte
index bbcd609f..dce0853b 100644
--- a/frontend/src/routes/DocumentList.svelte
+++ b/frontend/src/routes/DocumentList.svelte
@@ -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}
diff --git a/frontend/src/routes/DocumentList.svelte.spec.ts b/frontend/src/routes/DocumentList.svelte.spec.ts
index 2e8666ec..bb6e61da 100644
--- a/frontend/src/routes/DocumentList.svelte.spec.ts
+++ b/frontend/src/routes/DocumentList.svelte.spec.ts
@@ -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',