feat: separate column toggle buttons

src/views/taskKanbanHtml.ts

@@ -76,6 +76,46 @@ export function getTaskKanbanHtml(
       line-height: 1.2;
       min-width: 24px;
     }
+    button.eye-btn {
+      padding: 0 4px;
+      font-size: 0.85em;
+      line-height: 1.2;
+      min-width: 20px;
+      background: transparent;
+      border: 1px solid transparent;
+      color: var(--vscode-foreground);
+      opacity: 0.6;
+      cursor: pointer;
+    }
+    button.eye-btn:hover { opacity: 1; }
+    #visibility-bar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 12px;
+      border-bottom: 1px solid var(--vscode-panel-border, var(--vscode-widget-border));
+      font-size: 0.85em;
+    }
+    #visibility-bar .label {
+      opacity: 0.7;
+      margin-right: 4px;
+    }
+    #visibility-bar button {
+      font: inherit;
+      cursor: pointer;
+      padding: 2px 8px;
+      border: 1px solid var(--vscode-input-border, transparent);
+      border-radius: 2px;
+      background: var(--vscode-input-background);
+      color: var(--vscode-input-foreground);
+      font-size: 0.85em;
+    }
+    #visibility-bar button.shown {
+      background: var(--vscode-button-background);
+      color: var(--vscode-button-foreground);
+      border-color: transparent;
+    }
     #status-line {
       font-size: 0.85em;
       opacity: 0.85;
@@ -147,11 +187,11 @@ export function getTaskKanbanHtml(
     <h1>Kanban</h1>
     <label for="scopeFilter">Scope</label>
     <select id="scopeFilter" title="Project / Global filter"></select>
-    <button id="toggleHidden" type="button" class="secondary" title="Show or hide backlog and cancelled">Show hidden</button>
     <span class="spacer"></span>
     <span id="status-line"></span>
     <button id="refresh" type="button" class="secondary" title="Refresh">↻</button>
   </header>
+  <div id="visibility-bar"></div>
   <div id="board"></div>
   <script nonce="${nonce}">
     const vscode = acquireVsCodeApi();
@@ -164,11 +204,12 @@ export function getTaskKanbanHtml(
     const statusLine = document.getElementById("status-line");
     const refreshBtn = document.getElementById("refresh");
     const scopeFilterEl = document.getElementById("scopeFilter");
-    const toggleHiddenBtn = document.getElementById("toggleHidden");
+    const visibilityBarEl = document.getElementById("visibility-bar");
 
     let board = { columns: [] };
     let scopeFilter = "all";
-    let showHidden = false;
+    let shownHiddenColumns = [];
+    let defaultHiddenStatuses = [];
     let availableScopes = [];
     let dragTaskId = null;
 
@@ -214,13 +255,30 @@ export function getTaskKanbanHtml(
         .join("");
     }
 
-    function renderToggleHidden() {
-      toggleHiddenBtn.textContent = showHidden ? "Hide backlog/cancelled" : "Show hidden";
+    function renderVisibilityBar() {
+      visibilityBarEl.innerHTML = "";
+      if (defaultHiddenStatuses.length === 0) return;
+      const label = document.createElement("span");
+      label.className = "label";
+      label.textContent = "Columns:";
+      visibilityBarEl.appendChild(label);
+      for (const status of defaultHiddenStatuses) {
+        const btn = document.createElement("button");
+        btn.textContent = status;
+        btn.dataset.status = status;
+        if (shownHiddenColumns.indexOf(status) >= 0) {
+          btn.classList.add("shown");
+        }
+        btn.addEventListener("click", () => {
+          post({ variant: "toggleHiddenColumn", status: status });
+        });
+        visibilityBarEl.appendChild(btn);
+      }
     }
 
     function render() {
       renderScopeFilter();
-      renderToggleHidden();
+      renderVisibilityBar();
       boardEl.innerHTML = "";
       for (const column of board.columns || []) {
         const col = document.createElement("section");
@@ -308,17 +366,14 @@ export function getTaskKanbanHtml(
       post({ variant: "setScopeFilter", scope: scopeFilterEl.value });
     });
 
-    toggleHiddenBtn.addEventListener("click", () => {
-      post({ variant: "setShowHidden", showHidden: !showHidden });
-    });
-
     window.addEventListener("message", (event) => {
       const message = event.data;
       if (!message || typeof message !== "object") return;
       if (message.variant === "state") {
         board = message.board || { columns: [] };
         scopeFilter = message.scopeFilter || "all";
-        showHidden = Boolean(message.showHidden);
+        shownHiddenColumns = message.shownHiddenColumns || [];
+        defaultHiddenStatuses = message.defaultHiddenStatuses || [];
         availableScopes = message.availableScopes || [];
         setStatus("");
         render();