till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 22:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(todo): add clickable Tags label pill linking to /tags management

Browse source 
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>
This commit is contained in:
Till JS 2026-03-31 13:11:57 +02:00
parent bc1788941f
commit 3211878ae0
1 changed files with 41 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

54
apps/todo/apps/web/src/lib/components/TaskFilters.svelte
View file

@ -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;