From 3211878ae099ee28bbf7a0bafebc7f985a3f7528 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 31 Mar 2026 13:11:57 +0200
Subject: [PATCH] feat(todo): add clickable Tags label pill linking to /tags
 management

Add a "Tags:" label pill before tag chips in the filter strip that
navigates to the tag management page. Shows even with no tags so
users can discover the feature.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../web/src/lib/components/TaskFilters.svelte | 54 ++++++++++++++-----
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/apps/todo/apps/web/src/lib/components/TaskFilters.svelte b/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
index 2bfc11cee..00245983a 100644
--- a/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskFilters.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import type { TaskPriority } from '@todo/shared';
 	import { getContext } from 'svelte';
 	import type { Project } from '@todo/shared';
@@ -139,19 +140,24 @@
 			</button>
 
 			<!-- Tag Chips -->
-			{#if showTags && tagsCtx.value.length > 0}
-				{#each tagsCtx.value as tag (tag.id)}
-					<button
-						class="tag-chip glass-pill"
-						class:selected={selectedLabelIds.includes(tag.id)}
-						onclick={() => toggleLabel(tag.id)}
-						title={tag.name}
-						style="--tag-color: {tag.color || '#6b7280'}"
-					>
-						<span class="tag-dot"></span>
-						<span class="pill-label">{tag.name}</span>
-					</button>
-				{/each}
+			{#if showTags}
+				<button class="label-pill glass-pill" onclick={() => goto('/tags')} title="Tags verwalten">
+					<span class="pill-label label-text">Tags:</span>
+				</button>
+				{#if tagsCtx.value.length > 0}
+					{#each tagsCtx.value as tag (tag.id)}
+						<button
+							class="tag-chip glass-pill"
+							class:selected={selectedLabelIds.includes(tag.id)}
+							onclick={() => toggleLabel(tag.id)}
+							title={tag.name}
+							style="--tag-color: {tag.color || '#6b7280'}"
+						>
+							<span class="tag-dot"></span>
+							<span class="pill-label">{tag.name}</span>
+						</button>
+					{/each}
+				{/if}
 				<span class="strip-divider"></span>
 			{/if}
 
@@ -498,6 +504,28 @@
 		color: #8b5cf6;
 	}
 
+	/* Label pill (section header) */
+	.label-pill {
+		padding: 0.5rem 0.75rem;
+		cursor: pointer;
+	}
+
+	.label-pill .label-text {
+		font-size: 0.8125rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: #6b7280;
+	}
+
+	:global(.dark) .label-pill .label-text {
+		color: #9ca3af;
+	}
+
+	.label-pill:hover .label-text {
+		color: #8b5cf6;
+	}
+
 	/* Tag chips */
 	.tag-chip .tag-dot {
 		width: 10px;