Tabs

web/dist/panes.js

@@ -31,7 +31,7 @@ export function taskPane() {
     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;
     let dispose = () => { };
     const renderPicker = () => {
@@ -67,14 +67,13 @@ export function taskPane() {
         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) => 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)]) {
@@ -129,7 +128,7 @@ export function taskPane() {
                 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) {
@@ -153,14 +152,10 @@ export function taskPane() {
     };
     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;
 }