Highlight the Inbox tab while the task has open inbox items

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();