From 0d142efa3c5a2dc7c31dac71c9d0b2c58161964d Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 3 Apr 2026 00:30:44 +0200
Subject: [PATCH] feat(manacore/web): show tags as labeled pills instead of
 dots

Replace tiny 6px tag dots with readable pills showing colored dot +
tag name. Uses color-mix for subtle tinted background per tag color.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/modules/calendar/ListView.svelte  | 25 ++++++++++++++++---
 .../src/lib/modules/contacts/ListView.svelte  | 25 ++++++++++++++++---
 .../web/src/lib/modules/todo/ListView.svelte  | 25 ++++++++++++++++---
 3 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte
index 4e78e6edb..dc8c962e3 100644
--- a/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte
@@ -156,7 +156,10 @@
 					{#if eventTags.length > 0}
 						<div class="event-tags">
 							{#each eventTags as tag (tag.id)}
-								<span class="tag-dot" style="background: {tag.color}" title={tag.name}></span>
+								<span class="tag-pill" style="--tag-color: {tag.color}">
+									<span class="tag-dot" style="background: {tag.color}"></span>
+									{tag.name}
+								</span>
 							{/each}
 						</div>
 					{/if}
@@ -318,9 +321,25 @@
 		gap: 0.25rem;
 		flex-shrink: 0;
 	}
+	.tag-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.1875rem;
+		padding: 0 0.325rem;
+		border-radius: 9999px;
+		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
+		font-size: 0.5625rem;
+		color: #6b7280;
+		line-height: 1.25rem;
+		white-space: nowrap;
+	}
+	:global(.dark) .tag-pill {
+		background: color-mix(in srgb, var(--tag-color) 18%, transparent);
+		color: #9ca3af;
+	}
 	.tag-dot {
-		width: 6px;
-		height: 6px;
+		width: 5px;
+		height: 5px;
 		border-radius: 9999px;
 		flex-shrink: 0;
 	}
diff --git a/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte
index f6b1a9dbb..fa969bd87 100644
--- a/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte
@@ -125,7 +125,10 @@
 					{#if contactTags.length > 0}
 						<div class="contact-tags">
 							{#each contactTags as tag (tag.id)}
-								<span class="tag-dot" style="background: {tag.color}" title={tag.name}></span>
+								<span class="tag-pill" style="--tag-color: {tag.color}">
+									<span class="tag-dot" style="background: {tag.color}"></span>
+									{tag.name}
+								</span>
 							{/each}
 						</div>
 					{/if}
@@ -284,9 +287,25 @@
 		gap: 0.25rem;
 		margin-top: 0.125rem;
 	}
+	.tag-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.1875rem;
+		padding: 0 0.325rem;
+		border-radius: 9999px;
+		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
+		font-size: 0.5625rem;
+		color: #6b7280;
+		line-height: 1.25rem;
+		white-space: nowrap;
+	}
+	:global(.dark) .tag-pill {
+		background: color-mix(in srgb, var(--tag-color) 18%, transparent);
+		color: #9ca3af;
+	}
 	.tag-dot {
-		width: 6px;
-		height: 6px;
+		width: 5px;
+		height: 5px;
 		border-radius: 9999px;
 		flex-shrink: 0;
 	}
diff --git a/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte
index 6049b018b..78d906aad 100644
--- a/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte
@@ -146,7 +146,10 @@
 								<span class="task-due">{new Date(task.dueDate).toLocaleDateString('de')}</span>
 							{/if}
 							{#each taskTags as tag (tag.id)}
-								<span class="tag-dot" style="background: {tag.color}" title={tag.name}></span>
+								<span class="tag-pill" style="--tag-color: {tag.color}">
+									<span class="tag-dot" style="background: {tag.color}"></span>
+									{tag.name}
+								</span>
 							{/each}
 						</div>
 					{/if}
@@ -325,9 +328,25 @@
 		font-size: 0.6875rem;
 		color: #9ca3af;
 	}
+	.tag-pill {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.1875rem;
+		padding: 0 0.325rem;
+		border-radius: 9999px;
+		background: color-mix(in srgb, var(--tag-color) 12%, transparent);
+		font-size: 0.5625rem;
+		color: #6b7280;
+		line-height: 1.25rem;
+		white-space: nowrap;
+	}
+	:global(.dark) .tag-pill {
+		background: color-mix(in srgb, var(--tag-color) 18%, transparent);
+		color: #9ca3af;
+	}
 	.tag-dot {
-		width: 6px;
-		height: 6px;
+		width: 5px;
+		height: 5px;
 		border-radius: 9999px;
 		flex-shrink: 0;
 	}