Hide empty task tabs and move tabs that don't fit into a More menu

web/src/panes.ts

@@ -8,7 +8,7 @@ import { openSwitcher } from "./navbar.js";
 import { findTask, focusedProject, focusTab, on, onEach, state, tabs } from "./state.js";
 import { mountPreview } from "./preview.js";
 import { mountProject } from "./project.js";
-import { mountReviews } from "./reviews.js";
+import { isReviewEvent, mountReviews } from "./reviews.js";
 import { mountTranscript } from "./task.js";
 import { mountTerminal } from "./terminal.js";
 
@@ -49,27 +49,101 @@ export function taskPane(): HTMLElement {
     replace(picker, task ? `${project?.name ?? ""} ▸ ${task.title}` : (project?.name ?? "No task"), " ▾");
   };
 
+  const more = h("button", { type: "button", class: "more", title: "More tabs" });
+  const menu = h("div", { class: "tab-menu", popover: "auto" });
+  more.onclick = () => {
+    const rect = more.getBoundingClientRect();
+    menu.style.top = `${rect.bottom + 4}px`;
+    menu.style.left = `${rect.left}px`;
+    menu.togglePopover();
+  };
+  let buttons: { tab: TaskTab; button: HTMLButtonElement }[] = [];
+  let drawn = "";
+  let waiting = 0;
+
+  const layout = () => {
+    for (const { button } of buttons) {
+      button.hidden = false;
+    }
+    more.hidden = true;
+    const style = getComputedStyle(strip);
+    const gap = parseFloat(style.columnGap) || 0;
+    const inner = strip.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+    const pickerWidth = Math.min(picker.scrollWidth, inner * 0.4);
+    const widths = new Map(buttons.map(({ tab, button }) => [tab, button.offsetWidth]));
+    const total = (kept: TaskTab[]) => kept.reduce((sum, t) => sum + widths.get(t)! + gap, 0);
+    const all = buttons.map((b) => b.tab);
+    let kept = all;
+    if (total(all) + gap + pickerWidth > inner) {
+      more.hidden = false;
+      const budget = inner - pickerWidth - more.offsetWidth - 2 * gap;
+      const tab = state.focus.tab;
+      kept = [];
+      for (const t of [tab, ...all.filter((t) => t !== tab)]) {
+        if (kept.length > 0 && total([...kept, t]) > budget) {
+          break;
+        }
+        kept.push(t);
+      }
+    }
+    const hidden = all.filter((t) => !kept.includes(t));
+    for (const { tab, button } of buttons) {
+      button.hidden = hidden.includes(tab);
+    }
+    const attention = hidden.includes("inbox");
+    more.classList.toggle("attention", attention);
+    replace(more, "More ▾", attention && h("span", { class: "badge", title: "inbox items" }, waiting));
+    replace(
+      menu,
+      ...hidden.map((t) => {
+        const b = h("button", { type: "button" }, views[t].label, t === "inbox" && h("span", { class: "badge", title: "inbox items" }, waiting));
+        b.onclick = () => {
+          menu.hidePopover();
+          focusTab(t);
+        };
+        return b;
+      }),
+    );
+  };
+
+  const available = (t: TaskTab): boolean => {
+    if (t === state.focus.tab) {
+      return true;
+    }
+    switch (t) {
+      case "inbox":
+        return waiting > 0;
+      case "preview":
+        return state.transcript.some((ev) => ev.kind === "preview.exposed");
+      case "reviews":
+        return state.transcript.some(isReviewEvent);
+      default:
+        return true;
+    }
+  };
+
   const render = () => {
     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) => {
+    waiting = state.inbox.filter((item) => item.task_id === state.selectedTaskId).length;
+    const order = [...first, ...tabs.filter((t) => !first.includes(t))].filter(available);
+    const key = JSON.stringify([order, tab, waiting]);
+    if (key !== drawn) {
+      drawn = key;
+      buttons = order.map((t) => {
         const attention = t === "inbox" && waiting > 0;
-        const b = h(
+        const button = 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,
-    );
+        button.onclick = () => focusTab(t);
+        return { tab: t, button };
+      });
+      replace(strip, ...buttons.map((b) => b.button), more, h("span", { class: "spacer" }), picker, menu);
+      layout();
+    }
     if (tab === shown) {
       return;
     }
@@ -80,10 +154,15 @@ export function taskPane(): HTMLElement {
     dispose = views[tab].mount(root);
   };
 
-  onEach(["focus", "inbox", "selection"], render);
-  onEach(["projects", "tasks", "selection", "focus"], renderPicker);
+  onEach(["focus", "inbox", "selection", "transcript"], render);
+  onEach(["projects", "tasks", "selection", "focus"], () => {
+    renderPicker();
+    layout();
+  });
+  new ResizeObserver(layout).observe(strip);
   render();
   renderPicker();
+  layout();
   trackPaneFocus(pane);
   return pane;
 }