Highlight the Inbox tab while the task has open inbox items

web/dist/panes.js

@@ -38,8 +38,10 @@ export function taskPane() {
         const first = state.focus.tabs.filter((t, i, all) => tabs.includes(t) && all.indexOf(t) === i);
         const order = [...first, ...tabs.filter((t) => !first.includes(t))];
         const tab = state.focus.tab;
+        const waiting = state.inbox.filter((item) => item.task_id === state.selectedTaskId).length;
         replace(strip, ...order.map((t) => {
-            const b = h("button", { class: t === tab ? "active" : "" }, views[t].label);
+            const attention = t === "inbox" && waiting > 0;
+            const b = h("button", { class: [t === tab ? "active" : "", attention ? "attention" : ""].join(" ").trim() }, views[t].label, attention && h("span", { class: "badge", title: "inbox items" }, waiting));
             b.onclick = () => focusTab(t);
             return b;
         }), h("span", { class: "spacer" }), picker);
@@ -52,7 +54,7 @@ export function taskPane() {
         replace(body, root);
         dispose = views[tab].mount(root);
     };
-    on("focus", render);
+    onEach(["focus", "inbox", "selection"], render);
     onEach(["projects", "tasks", "selection", "focus"], renderPicker);
     render();
     renderPicker();

web/src/panes.ts

@@ -43,10 +43,17 @@ export function taskPane(): HTMLElement {
     const first = state.focus.tabs.filter((t, i, all) => tabs.includes(t) && all.indexOf(t) === i);
     const order = [...first, ...tabs.filter((t) => !first.includes(t))];
     const tab = state.focus.tab;
+    const waiting = state.inbox.filter((item) => item.task_id === state.selectedTaskId).length;
     replace(
       strip,
       ...order.map((t) => {
-        const b = h("button", { class: t === tab ? "active" : "" }, views[t].label);
+        const attention = t === "inbox" && waiting > 0;
+        const b = h(
+          "button",
+          { class: [t === tab ? "active" : "", attention ? "attention" : ""].join(" ").trim() },
+          views[t].label,
+          attention && h("span", { class: "badge", title: "inbox items" }, waiting),
+        );
         b.onclick = () => focusTab(t);
         return b;
       }),
@@ -63,7 +70,7 @@ export function taskPane(): HTMLElement {
     dispose = views[tab].mount(root);
   };
 
-  on("focus", render);
+  onEach(["focus", "inbox", "selection"], render);
   onEach(["projects", "tasks", "selection", "focus"], renderPicker);
   render();
   renderPicker();

web/style.css

@@ -295,6 +295,20 @@ textarea {
   border-bottom-color: var(--accent);
 }
 
+.pane-tabs button.attention {
+  background: var(--warn-tint);
+  color: var(--warn);
+  font-weight: 700;
+}
+
+.pane-tabs button.attention:not(.active) {
+  border-bottom-color: var(--warn);
+}
+
+.pane-tabs button .badge {
+  margin-left: 6px;
+}
+
 .pane-body,
 .view,
 .transcript-view,