From b3a37cd927fbd383e7b2eb77c0c322545da068e4 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Fri, 13 Feb 2026 19:34:27 -0600
Subject: [PATCH] added system tag for buckets

---
 src/components/TagPicker.tsx | 10 ++++++++--
 src/views/SettingsView.tsx   |  8 ++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/TagPicker.tsx b/src/components/TagPicker.tsx
index 6dcfcaf..450088a 100644
--- a/src/components/TagPicker.tsx
+++ b/src/components/TagPicker.tsx
@@ -17,7 +17,11 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
     const [valueScore, setValueScore] = createSignal(5);
 
     // Filter tags for the "Name" part
-    const allTagNames = () => store.tagDefinitions.map(d => d.name).sort();
+    const allTagNames = () => {
+        const definedTags = store.tagDefinitions.map(d => d.name);
+        const bucketTags = store.buckets.map(b => b.name);
+        return [...new Set([...definedTags, ...bucketTags])].sort();
+    };
 
     // When a tag name is selected, update the value score to match its current definition
     createEffect(() => {
@@ -35,7 +39,9 @@ export const TagPicker: Component<TagPickerProps> = (props) => {
         if (!name) return;
 
         // update global definition
-        upsertTagDefinition(name, valueScore(), undefined, resolvedTheme());
+        const bucket = store.buckets.find(b => b.name === name);
+        const color = bucket ? bucket.color : undefined;
+        upsertTagDefinition(name, valueScore(), color, resolvedTheme());
 
         // Toggle in current task selection if not already there
         const currentSelected = props.selectedTags;
diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
index 85f1054..aef15c5 100644
--- a/src/views/SettingsView.tsx
+++ b/src/views/SettingsView.tsx
@@ -500,7 +500,7 @@ export const SettingsView: Component = () => {
                     <Show when={isTagsOpen()}>
                         <div class="space-y-2 pt-2 animate-in fade-in slide-in-from-top-2 duration-300">
                             <div class="space-y-2">
-                                <For each={store.tagDefinitions.filter(t => !t.isUser).sort((a, b) => a.name.localeCompare(b.name))} fallback={
+                                <For each={store.tagDefinitions.filter(t => !t.isUser && !store.buckets.some(b => b.name === t.name)).sort((a, b) => a.name.localeCompare(b.name))} fallback={
                                     <div class="text-center py-8 text-muted-foreground text-sm italic border border-dashed border-border rounded-xl">
                                         No custom tags found.
                                     </div>
@@ -580,16 +580,16 @@ export const SettingsView: Component = () => {
                                 </For>
                             </div>
 
-                            {/* User Tags Expansion */}
+                            {/* User/System Tags Expansion */}
                             <details class="group/details">
                                 <summary class="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground cursor-pointer hover:text-foreground transition-colors py-2 select-none pt-4">
                                     <div class="bg-muted/50 p-1 rounded-md group-open/details:rotate-90 transition-transform">
                                         <ChevronRight size={12} />
                                     </div>
-                                    User Tags (System)
+                                    System Tags (Users & Buckets)
                                 </summary>
                                 <div class="pt-2 pl-4 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200">
-                                    <For each={store.tagDefinitions.filter(t => t.isUser).sort((a, b) => a.name.localeCompare(b.name))}>
+                                    <For each={store.tagDefinitions.filter(t => t.isUser || store.buckets.some(b => b.name === t.name)).sort((a, b) => a.name.localeCompare(b.name))}>
                                         {(tag) => (
                                             <div class="flex flex-col sm:flex-row sm:items-center justify-between p-2 rounded-lg bg-muted/10 border border-border/20 gap-3 sm:gap-4 group opacity-80">
                                                 <div class="flex items-center gap-3 min-w-0 flex-1">