byre/web/dist/panes.js

import { mountAdmin } from "./admin.js";
import { mountChanges } from "./changes.js";
import { h, replace } from "./dom.js";
import { mountInbox } from "./inbox.js";
import { mountSettings } from "./settings.js";
import { mountTranscript } from "./task.js";
import { mountTasks } from "./tasks.js";
const views = {
    transcript: { label: "Transcript", mount: mountTranscript },
    changes: { label: "Changes", mount: (root) => mountChanges(root) },
    tasks: { label: "Tasks", mount: mountTasks },
    inbox: { label: "Inbox", mount: mountInbox },
    admin: { label: "Admin", mount: mountAdmin },
    settings: { label: "Settings", mount: mountSettings },
};
const order = ["transcript", "changes", "tasks", "inbox", "admin", "settings"];
const panes = [];
export function openTranscript() {
    if (panes.some((p) => p.current() === "transcript")) {
        return;
    }
    (panes.find((p) => p.current() !== "tasks") ?? panes[0])?.show("transcript");
}
export class Pane {
    key;
    el;
    tabs;
    body;
    view;
    dispose = () => { };
    constructor(key, fallback) {
        this.key = key;
        this.tabs = h("nav", { class: "pane-tabs" });
        this.body = h("div", { class: "pane-body" });
        this.el = h("section", { class: "pane" }, this.tabs, this.body);
        const saved = localStorage.getItem(this.storageKey());
        this.view = saved && saved in views ? saved : fallback;
        this.show(this.view);
        panes.push(this);
    }
    current() {
        return this.view;
    }
    show(view) {
        this.dispose();
        this.view = view;
        localStorage.setItem(this.storageKey(), view);
        replace(this.tabs, ...order.map((v) => {
            const b = h("button", { class: v === view ? "active" : "" }, views[v].label);
            b.onclick = () => this.show(v);
            return b;
        }));
        const root = h("div", { class: `view view-${view}` });
        replace(this.body, root);
        this.dispose = views[view].mount(root);
    }
    storageKey() {
        return `byre.pane.${this.key}`;
    }
}
//# sourceMappingURL=panes.js.map