Tabs

web/src/panes.ts

@@ -34,7 +34,7 @@ export function taskPane(): HTMLElement {
   const body = h("div", { class: "pane-body" });
   const picker = h("button", { class: "task-picker", title: "Switch task (⌘K)" });
   picker.onclick = openSwitcher;
-  const pane = h("section", { class: "pane task-pane", tabIndex: -1 }, strip, body);
+  const pane = h("section", { class: "pane task-pane", tabIndex: -1 }, h("header", { class: "task-bar" }, picker), strip, body);
   let shown: TaskTab | undefined;
   let dispose: () => void = () => {};
 
@@ -73,14 +73,13 @@ export function taskPane(): HTMLElement {
     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) {
+    if (total(all) > inner) {
       more.hidden = false;
-      const budget = inner - pickerWidth - more.offsetWidth - 2 * gap;
+      const budget = inner - more.offsetWidth - gap;
       const tab = state.focus.tab;
       kept = [];
       for (const t of [tab, ...all.filter((t) => t !== tab)]) {
@@ -140,7 +139,7 @@ export function taskPane(): HTMLElement {
         button.onclick = () => focusTab(t);
         return { tab: t, button };
       });
-      replace(strip, ...buttons.map((b) => b.button), more, h("span", { class: "spacer" }), picker, menu);
+      replace(strip, ...buttons.map((b) => b.button), more, menu);
       layout();
     }
     if (tab === shown) {
@@ -166,14 +165,10 @@ export function taskPane(): HTMLElement {
 
   on("inbox", openAsked);
   onEach(["focus", "inbox", "selection", "transcript"], render);
-  onEach(["projects", "tasks", "selection", "focus"], () => {
-    renderPicker();
-    layout();
-  });
+  onEach(["projects", "tasks", "selection"], renderPicker);
   new ResizeObserver(layout).observe(strip);
   render();
   renderPicker();
-  layout();
   trackPaneFocus(pane);
   return pane;
 }