byre/web/src/panes.ts

import type { TaskTab } from "./api.js";
import { mountChanges } from "./changes.js";
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 { mountTranscript } from "./task.js";
import { mountTodo } from "./todo.js";

const views: Record<TaskTab, { label: string; mount: (root: HTMLElement) => () => void }> = {
  transcript: { label: "Transcript", mount: mountTranscript },
  changes: { label: "Changes", mount: (root) => mountChanges(root) },
  files: { label: "Files", mount: mountFiles },
  inbox: { label: "Inbox", mount: mountInbox },
  todo: { label: "Todo", mount: mountTodo },
};

export function leadPane(): HTMLElement {
  const root = h("div", { class: "view view-lead" });
  mountLead(root);
  return h("section", { class: "pane" }, h("nav", { class: "pane-tabs" }, h("button", { class: "active" }, "Lead")), h("div", { class: "pane-body" }, root));
}

export function taskPane(): HTMLElement {
  const strip = h("nav", { class: "pane-tabs" });
  const body = h("div", { class: "pane-body" });
  let shown: TaskTab | undefined;
  let dispose: () => void = () => {};

  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))];
    const tab = state.focus.tab;
    replace(
      strip,
      ...order.map((t) => {
        const b = h("button", { class: t === tab ? "active" : "" }, views[t].label);
        b.onclick = () => focusTab(t);
        return b;
      }),
    );
    if (tab === shown) {
      return;
    }
    dispose();
    shown = tab;
    const root = h("div", { class: `view view-${tab}` });
    replace(body, root);
    dispose = views[tab].mount(root);
  };

  on("focus", render);
  render();
  return h("section", { class: "pane" }, strip, body);
}