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

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;