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;
 }

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;
 }

web/style.css

@@ -297,19 +297,23 @@ textarea {
   padding: 8px 10px 6px;
 }
 
-.pane-tabs .task-picker {
+.task-bar {
+  display: flex;
+  justify-content: center;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--task) 12%, var(--bg));
+}
+
+.task-bar .task-picker {
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--text);
-}
-
-.task-pane > .pane-tabs {
-  background: color-mix(in srgb, var(--task) 12%, var(--bg));
-}
-
-.task-pane > .pane-tabs .task-picker {
+  padding: 6px 10px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
   color: var(--task);
   font-weight: 700;
 }
@@ -354,7 +358,7 @@ a.task-link {
   display: none;
 }
 
-.pane-tabs button:not(.task-picker) {
+.pane-tabs button {
   flex-shrink: 0;
   white-space: nowrap;
 }