Move the task picker into the right pane and drop the switcher from it

web/dist/navbar.js

@@ -1,11 +1,9 @@
 import { post } from "./api.js";
 import { errorText, h, replace, showAlert } from "./dom.js";
 import { openSettings } from "./settings.js";
-import { activeTasks, currentSession, findTask, focusedProject, focusProject, focusTab, focusTask, lastVisits, onEach, state } from "./state.js";
+import { activeTasks, currentSession, focusedProject, focusProject, focusTab, focusTask, lastVisits, onEach, state } from "./state.js";
 import { openStatus } from "./status.js";
 export function mountNavbar(root) {
-    const crumb = h("button", { class: "crumb", title: "Switch task (⌘K)" });
-    crumb.onclick = openSwitcher;
     const status = h("button", { class: "nav-link" }, "Status");
     status.onclick = openStatus;
     const settings = h("button", { class: "nav-link" }, "Settings");
@@ -14,16 +12,13 @@ export function mountNavbar(root) {
     const connLabel = h("span", { class: "connection-label" }, "reconnecting…");
     const me = h("span", { class: "me" });
     const render = () => {
-        const task = state.selectedTaskId ? findTask(state.selectedTaskId) : undefined;
-        const project = focusedProject();
-        replace(crumb, task ? `${project?.name ?? ""} ▸ ${task.title}` : (project?.name ?? "No task"), " ▾");
         conn.className = state.connected ? "connection up" : "connection down";
         conn.title = state.connected ? "live" : "reconnecting";
         connLabel.hidden = state.connected;
         replace(me, state.me?.display_name ?? "");
     };
-    onEach(["me", "projects", "tasks", "selection", "focus", "connection"], render);
-    replace(root, h("a", { href: "#/", class: "brand" }, "byre"), crumb, h("span", { class: "spacer" }), status, settings, connLabel, conn, me);
+    onEach(["me", "connection"], render);
+    replace(root, h("a", { href: "#/", class: "brand" }, "byre"), h("span", { class: "spacer" }), status, settings, connLabel, conn, me);
     render();
     addEventListener("keydown", (e) => {
         if (!(e.metaKey || e.ctrlKey) || document.querySelector("dialog[open]")) {
@@ -39,7 +34,7 @@ export function mountNavbar(root) {
         }
     });
 }
-function openSwitcher() {
+export function openSwitcher() {
     if (document.querySelector(".switcher")) {
         return;
     }
@@ -139,6 +134,9 @@ function openSwitcher() {
         }
     };
     backdrop.onclick = close;
+    const anchor = document.querySelector(".task-picker").getBoundingClientRect();
+    box.style.top = `${anchor.bottom + 4}px`;
+    box.style.right = `${document.documentElement.clientWidth - anchor.right}px`;
     document.body.append(backdrop, box);
     render();
     input.focus();

web/dist/panes.js

@@ -4,7 +4,8 @@ import { h, replace } from "./dom.js";
 import { mountFiles } from "./files.js";
 import { mountInbox } from "./inbox.js";
 import { mountLead } from "./lead.js";
-import { focusTab, on, state, tabs } from "./state.js";
+import { openSwitcher } from "./navbar.js";
+import { findTask, focusedProject, focusTab, on, onEach, state, tabs } from "./state.js";
 import { mountProject } from "./project.js";
 import { mountTranscript } from "./task.js";
 const views = {
@@ -22,8 +23,15 @@ export function leadPane() {
 export function taskPane() {
     const strip = h("nav", { class: "pane-tabs" });
     const body = h("div", { class: "pane-body" });
+    const picker = h("button", { class: "task-picker", title: "Switch task (⌘K)" });
+    picker.onclick = openSwitcher;
     let shown;
     let dispose = () => { };
+    const renderPicker = () => {
+        const task = state.selectedTaskId ? findTask(state.selectedTaskId) : undefined;
+        const project = focusedProject();
+        replace(picker, task ? `${project?.name ?? ""} ▸ ${task.title}` : (project?.name ?? "No task"), " ▾");
+    };
     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))];
@@ -32,7 +40,7 @@ export function taskPane() {
             const b = h("button", { class: t === tab ? "active" : "" }, views[t].label);
             b.onclick = () => focusTab(t);
             return b;
-        }));
+        }), h("span", { class: "spacer" }), picker);
         if (tab === shown) {
             return;
         }
@@ -43,7 +51,9 @@ export function taskPane() {
         dispose = views[tab].mount(root);
     };
     on("focus", render);
+    onEach(["projects", "tasks", "selection", "focus"], renderPicker);
     render();
+    renderPicker();
     const pane = h("section", { class: "pane", tabIndex: -1 }, strip, body);
     trackPaneFocus(pane);
     return pane;