tags

public/js/modules/buckets.js

@@ -131,14 +131,15 @@ function autoBucketNameFromCard(card) {
 }
 
 function updateHeaderTint() {
-    const tint = $('header-tint');
-    if (!tint) return;
+    const header = $('main-header');
+    if (!header) return;
     const bucket = state.buckets.find(b => b.id == state.activeBucket);
     if (bucket && bucket.color) {
-        tint.style.background = `linear-gradient(135deg, ${bucket.color}30 0%, ${bucket.color}12 100%)`;
-        tint.style.opacity = '1';
+        header.style.borderBottomWidth = '4px';
+        header.style.borderBottomColor = bucket.color;
     } else {
-        tint.style.opacity = '0';
+        header.style.borderBottomWidth = '';
+        header.style.borderBottomColor = '';
     }
 }
 
@@ -155,7 +156,7 @@ function renderBar() {
         ${state.buckets.map(b => {
             const c = b.color || '#64748b';
             const active = state.activeBucket == b.id;
-            return `<button class="${tab(active)}" data-bucket="${b.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${active ? `border-color:${c};color:${c}` : ''}"><i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px]">${esc(b.name)}</span></button>`;
+            return `<button class="${tab(active)}" data-bucket="${b.id}" draggable="true" data-bucket-drag="${b.id}" style="border-top:3px solid ${c};${active ? `background:${c};color:var(--t-bg);border-color:${c}` : ''}"><i class="ph ph-folder text-sm"></i><span class="font-pixel text-[10px]">${esc(b.name)}</span></button>`;
         }).join('')}
         <button id="add-bucket-btn" class="bucket-add flex items-center gap-1 px-2 py-1 text-xs text-t-dim hover:text-t-accent transition-colors shrink-0"><i class="ph ph-plus text-sm"></i><span class="font-pixel text-[10px]">bucket</span></button>`;
 
@@ -279,4 +280,44 @@ function renderBar() {
         await loadBuckets();
         await window._reloadAll();
     });
+
+    renderTagBar();
+}
+
+export function renderTagBar() {
+    let tagBar = $('tag-bar');
+    if (!tagBar) {
+        tagBar = document.createElement('div');
+        tagBar.id = 'tag-bar';
+        tagBar.className = 'flex items-center gap-1.5 px-6 py-1';
+        const bucketRow = $('bucket-row');
+        bucketRow?.parentNode.insertBefore(tagBar, bucketRow.nextSibling);
+    }
+    if (!state.activeTags.length) {
+        tagBar.classList.add('hidden');
+        return;
+    }
+    tagBar.classList.remove('hidden');
+    tagBar.innerHTML = `<i class="ph ph-funnel text-xs text-t-accent"></i>` +
+        state.activeTags.map(t => `
+            <span class="tag-chip" style="font-size:10px;">
+                <span class="font-pixel">#${esc(t)}</span>
+                <i class="ph ph-x text-[9px] ml-0.5 cursor-pointer hover:text-t-danger" data-remove-tag="${t}"></i>
+            </span>`).join('') +
+        `<button id="clear-tag-filter" class="flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-pixel text-t-dim hover:text-t-danger transition-colors">
+            <i class="ph ph-x text-xs"></i>clear all
+        </button>`;
+    tagBar.querySelectorAll('[data-remove-tag]').forEach(btn => {
+        btn.addEventListener('click', e => {
+            e.stopPropagation();
+            state.activeTags = state.activeTags.filter(t => t !== btn.dataset.removeTag);
+            renderTagBar();
+            window._renderBoard();
+        });
+    });
+    $('clear-tag-filter')?.addEventListener('click', () => {
+        state.activeTags = [];
+        renderTagBar();
+        window._renderBoard();
+    });
 }