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

web/src/navbar.ts

@@ -1,13 +1,10 @@
 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: HTMLElement): void {
-  const crumb = h("button", { class: "crumb", title: "Switch task (⌘K)" });
-  crumb.onclick = openSwitcher;
-
   const status = h("button", { class: "nav-link" }, "Status");
   status.onclick = openStatus;
 
@@ -19,18 +16,14 @@ export function mountNavbar(root: HTMLElement): void {
   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) => {
@@ -47,7 +40,7 @@ export function mountNavbar(root: HTMLElement): void {
   });
 }
 
-function openSwitcher(): void {
+export function openSwitcher(): void {
   if (document.querySelector(".switcher")) {
     return;
   }
@@ -158,6 +151,9 @@ function openSwitcher(): void {
   };
   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/src/panes.ts

@@ -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";
 
@@ -25,9 +26,17 @@ export function leadPane(): HTMLElement {
 export function taskPane(): HTMLElement {
   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: TaskTab | undefined;
   let dispose: () => void = () => {};
 
+  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))];
@@ -39,6 +48,8 @@ export function taskPane(): HTMLElement {
         b.onclick = () => focusTab(t);
         return b;
       }),
+      h("span", { class: "spacer" }),
+      picker,
     );
     if (tab === shown) {
       return;
@@ -51,7 +62,9 @@ export function taskPane(): HTMLElement {
   };
 
   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;