flexdesk 0.12.1 → 0.14.0

package/src/tiles/tile_grid.js

@@ -601,11 +601,12 @@ export class TileGrid {
                 if (this.data) {
                     state.tile.fullData = this.fullData;
                     state.tile.update(this.data);
-                } else if (this.dataSource) {
+                } else {
                     // Re-rendering from a dataset already in hand is free; asking
                     // the server again because a tile got 40 px wider is not. A
-                    // self-fetching tile is told the geometry settled and decides
-                    // what that costs it — for a chart, one `Plotly.Plots.resize`.
+                    // self-fetching tile — or one the embedder feeds through
+                    // `setData` — is told the geometry settled and decides what
+                    // that costs it — for a chart, one `Plotly.Plots.resize`.
                     state.tile.onResize?.();
                 }
             }

package/src/tiling/bottom_panel_tabs.js

@@ -0,0 +1,201 @@
+/**
+ * ══ THE BOTTOM PANEL'S TAB HOST ══════════════════════════════════════════
+ *
+ * The `.twm-bp*` CSS shipped for a long time with no JS behind it, and two
+ * embedders wrote the same strip on top of it: bugdesk (Alerts and Changes,
+ * with a count on each tab) and Tables (SQL, Database, History, Activity, each
+ * pane with storage of its own). This is the two merged, so the third embedder
+ * writes none of it (FlexDesk STORY-0018).
+ *
+ *     const tabs = createBottomPanelTabs(host, {
+ *         panes: [{ id: 'alerts', label: 'Alerts', eager: true, mount(el, store, api) { … } }],
+ *         remember: { read: () => saved, write: (id) => … },
+ *         eventBus,
+ *     });
+ *     tabs.setBadge('alerts', 3, 'warning');
+ *     eventBus.emit('bottompanel:show', { tab: 'alerts' });
+ *
+ * A PANE is `{ id, label, mount(el, store, api), eager? }`. `mount` answers an
+ * instance, or nothing; the host calls the instance's `onShow()` each time its
+ * tab comes to the front, `persist()` before the panel goes, `destroy()` when
+ * it is gone for good. A pane is mounted the first time it is shown — or at
+ * once, with `eager: true`, when its tab carries a count that must be right
+ * before anyone opens it (bugdesk's Alerts). Those two mount INSIDE this call,
+ * before it has answered: a pane reaches the host through its `api` argument
+ * (`api.setBadge(…)`), never through the variable the call is being assigned to.
+ *
+ * `store` is the pane's OWN persistence, from the embedder's `store(pane)`, or
+ * null. COLLAPSING A PANEL DESTROYS ITS CONTENT (the tile leaf goes, and its
+ * GC calls `destroy`), so a pane holding unsaved state — half-written SQL —
+ * saves it itself; the host cannot know what that is.
+ *
+ * `remember` keeps the tab last in front, in whatever store the embedder has
+ * (bugdesk: localStorage; Tables: its server blob, beside the panel's height).
+ * Its `read` may answer a promise. A remembered tab no longer offered falls
+ * back to the first; and A TAB A CALLER ALREADY CHOSE WINS — the read is a
+ * round trip, and a panel opened BY a button for one tab used to be put back
+ * on the remembered one when the read answered (Tables, 2026-10-12).
+ *
+ * `bottompanel:show` on the embedder's bus, with `{ tab }`, brings a tab to the
+ * front (a toast's "+N more" asks for Alerts). The host only selects; whether
+ * the panel itself is open is the embedder's (a tile it toggles), so the bus
+ * event is the embedder's to hear too.
+ *
+ * The strip is never rebuilt: a select toggles classes on the same buttons, so
+ * a click that lands while a tab is being selected keeps its target.
+ */
+
+/** Badge levels, worst last. Any other value draws the neutral badge. */
+export const BADGE_LEVELS = Object.freeze(['info', 'warning', 'alert']);
+
+/**
+ * @param {HTMLElement} container
+ * @param {object}   opts
+ * @param {Array}    opts.panes      `{ id, label, mount(el, store, api), eager? }`
+ * @param {object}  [opts.remember]  `{ read(): id|Promise<id>, write(id) }`
+ * @param {Function}[opts.store]     `(pane) => { read, write } | null` — a pane's own storage
+ * @param {object}  [opts.eventBus]  hears `bottompanel:show`
+ * @param {Function}[opts.onSelect]  `(id, pane)` — e.g. the tile's title
+ * @param {string}  [opts.initial]   the tab in front before `remember` answers
+ */
+export function createBottomPanelTabs(container, {
+    panes = [], remember = null, store = null, eventBus = null, onSelect = null, initial = null,
+} = {}) {
+    const doc = container.ownerDocument;
+    const root = doc.createElement('div');
+    root.className = 'twm-bp';
+    const strip = doc.createElement('div');
+    strip.className = 'twm-bp__tabs';
+    strip.setAttribute('role', 'tablist');
+    const body = doc.createElement('div');
+    body.className = 'twm-bp__body';
+    root.append(strip, body);
+    container.appendChild(root);
+
+    const byId = new Map(panes.map((pane) => [pane.id, pane]));
+    const tabs = new Map();
+    const mounted = new Map();
+    let active = null;
+    let chosen = false;
+    let destroyed = false;
+
+    for (const pane of panes) {
+        const tab = doc.createElement('button');
+        tab.type = 'button';
+        tab.className = 'twm-bp__tab';
+        tab.dataset.pane = pane.id;
+        tab.setAttribute('role', 'tab');
+        tab.setAttribute('aria-selected', 'false');
+        const label = doc.createElement('span');
+        label.className = 'twm-bp__label';
+        label.textContent = pane.label;
+        const badge = doc.createElement('span');
+        badge.className = 'twm-bp__badge';
+        badge.hidden = true;
+        tab.append(label, badge);
+        tab.addEventListener('click', () => api.select(pane.id));
+        strip.appendChild(tab);
+        tabs.set(pane.id, tab);
+    }
+
+    function mount(id) {
+        if (mounted.has(id)) return mounted.get(id);
+        const pane = byId.get(id);
+        const el = doc.createElement('div');
+        el.className = 'twm-bp-pane';
+        el.dataset.pane = id;
+        el.setAttribute('role', 'tabpanel');
+        el.hidden = id !== active;
+        body.appendChild(el);
+        const entry = { el, instance: null };
+        mounted.set(id, entry);
+        // ONE PANE THAT THROWS IS ONE EMPTY TAB, not a dead panel: the strip
+        // and every other pane go on working.
+        try {
+            entry.instance = pane.mount?.(el, store ? store(pane) : null, api) ?? null;
+        } catch (err) {
+            console.error(`[bottom-panel] pane "${id}" failed to mount`, err);
+        }
+        return entry;
+    }
+
+    function show(id) {
+        if (destroyed || !byId.has(id)) return false;
+        active = id;
+        for (const [key, tab] of tabs) {
+            const on = key === id;
+            tab.classList.toggle('twm-bp__tab--on', on);
+            tab.setAttribute('aria-selected', String(on));
+        }
+        for (const [key, entry] of mounted) entry.el.hidden = key !== id;
+        mount(id).instance?.onShow?.();
+        onSelect?.(id, byId.get(id));
+        return true;
+    }
+
+    const api = {
+        root,
+        /** Bring a tab to the front, and remember it. */
+        select(id) {
+            if (!show(id)) return;
+            chosen = true;
+            try { remember?.write?.(id); } catch { /* storage refused: not ours to fix */ }
+        },
+        /** The tab in front, or null. */
+        active: () => active,
+        /** `count` on a tab, coloured by `level`; nothing at zero. */
+        setBadge(id, count, level = null) {
+            const badge = tabs.get(id)?.querySelector('.twm-bp__badge');
+            if (!badge) return;
+            const n = Number(count) || 0;
+            badge.hidden = n <= 0;
+            badge.textContent = n > 99 ? '99+' : String(Math.max(n, 0));
+            badge.className = 'twm-bp__badge'
+                + (BADGE_LEVELS.includes(level) ? ` twm-bp__badge--${level}` : '');
+        },
+        /** A mounted pane's live instance, or null — how one tab hands work to
+         *  another. `select` it first, which mounts it. */
+        instance: (id) => mounted.get(id)?.instance ?? null,
+        /** The panel is on screen again (its tile re-mounted): tell the pane in front. */
+        reshow() {
+            if (active) mounted.get(active)?.instance?.onShow?.();
+        },
+        /** Before the panel is torn down: every mounted pane saves. */
+        async persist() {
+            for (const entry of mounted.values()) await entry.instance?.persist?.();
+        },
+        /** Gone for good: panes save, then are destroyed; the bus is let go. */
+        async destroy() {
+            if (destroyed) return;
+            await api.persist();
+            destroyed = true;
+            try { subscription?.dispose?.(); } catch { /* bus gone */ }
+            for (const entry of mounted.values()) {
+                try { entry.instance?.destroy?.(); } catch (err) {
+                    console.warn('[bottom-panel] pane destroy failed', err);
+                }
+            }
+            mounted.clear();
+            root.remove();
+        },
+    };
+
+    for (const pane of panes) if (pane.eager) mount(pane.id);
+
+    const subscription = eventBus?.on?.('bottompanel:show',
+        (payload) => api.select(payload?.tab ?? panes[0]?.id)) ?? null;
+
+    show(byId.has(initial) ? initial : panes[0]?.id);
+
+    if (remember?.read) {
+        Promise.resolve()
+            .then(() => remember.read())
+            .then((saved) => {
+                if (chosen || destroyed) return;
+                if (byId.has(saved)) show(saved);
+            })
+            .catch(() => { /* nothing remembered */ });
+    }
+
+    return api;
+}

package/src/ui/components/alert_log.js

@@ -0,0 +1,274 @@
+/**
+ * ══ THE ALERT LOG ═════════════════════════════════════════════════════════
+ *
+ * What an application told its user, kept: every entry, newest first, read or
+ * not, until it is dismissed or falls off the end (FlexDesk STORY-0019, from
+ * bugdesk's `alerts.js`). NotificationCenter's toasts are the moment; this is
+ * the history the Alerts pane (`alerts_pane.js`) and the bell
+ * (NotificationHistory's `alertLog` option) read.
+ *
+ * An ENTRY is `{ id, at, level, title, body?, ref?, read, ruleId?, rule? }`.
+ * `at` is a Date; `level` is one of `info`, `warning`, `alert` (`normalizeLevel`
+ * maps the toast's `warn`/`error` and the server's `danger` onto them).
+ *
+ * WHERE ENTRIES LIVE IS THE EMBEDDER'S — a pluggable SOURCE:
+ *
+ *     load({ offset, limit })  → { entries, more?, unread? }   a page, newest first
+ *     markRead(ids | null)     → null is "all"
+ *     dismiss(ids | null)      → optional; without it nothing can be dismissed
+ *
+ * bugdesk keeps the whole log in its workspace state (`localSource`: one
+ * blob, read once, written on every change); Tables pages its server's
+ * notifications and has no dismiss. A source's `unread` is the count beyond
+ * the loaded page — the server knows it, the page does not.
+ *
+ * CHANGES ARE APPLIED HERE FIRST and the source told after, so a click marks
+ * read at once; a source that refuses is logged and the log re-read, rather
+ * than the click being made to wait on a round trip.
+ */
+
+/** The three levels, worst last; `icon` is a Material Symbols name. */
+export const ALERT_LEVELS = Object.freeze({
+    info: Object.freeze({ label: 'Info', icon: 'info' }),
+    warning: Object.freeze({ label: 'Warning', icon: 'warning' }),
+    alert: Object.freeze({ label: 'Alert', icon: 'notifications_active' }),
+});
+
+const LEVEL_ALIASES = { warn: 'warning', error: 'alert', danger: 'alert', critical: 'alert', success: 'info' };
+
+/** One of `info`, `warning`, `alert`, whatever the caller spelt. */
+export function normalizeLevel(level) {
+    const l = String(level ?? '').toLowerCase();
+    if (ALERT_LEVELS[l]) return l;
+    return LEVEL_ALIASES[l] ?? 'info';
+}
+
+/** The worst level among these entries — a badge's colour — or null for none. */
+export function worstLevel(entries) {
+    let worst = null;
+    for (const e of entries || []) {
+        const l = normalizeLevel(e?.level);
+        if (l === 'alert') return 'alert';
+        if (l === 'warning') worst = 'warning';
+        else if (!worst) worst = 'info';
+    }
+    return worst;
+}
+
+/** "just now", "5 min ago", "3 h ago"; older than a day, the clock time (the day header has the date). */
+export function ago(at, now = new Date()) {
+    const s = Math.max(0, (now - at) / 1000);
+    if (s < 60) return 'just now';
+    if (s < 3600) return `${Math.floor(s / 60)} min ago`;
+    if (s < 86400) return `${Math.floor(s / 3600)} h ago`;
+    return at.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/** TODAY, YESTERDAY, or the date — the Alerts pane's day header. */
+export function dayLabel(at, now = new Date()) {
+    const d = new Date(at.getFullYear(), at.getMonth(), at.getDate());
+    const t = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    const days = Math.round((t - d) / 86400000);
+    if (days === 0) return 'TODAY';
+    if (days === 1) return 'YESTERDAY';
+    return at.toLocaleDateString([], { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })
+        .toUpperCase();
+}
+
+let _seq = 0;
+
+/** An entry in the shape the log keeps, from whatever a source or a caller handed in. */
+function normalizeEntry(raw) {
+    const at = raw.at instanceof Date ? raw.at : new Date(raw.at ?? Date.now());
+    return {
+        ...raw,
+        id: String(raw.id ?? `${Date.now().toString(36)}-${(_seq++).toString(36)}`),
+        at: Number.isNaN(at.getTime()) ? new Date() : at,
+        level: normalizeLevel(raw.level),
+        title: String(raw.title ?? ''),
+        read: !!raw.read,
+    };
+}
+
+/**
+ * A source that keeps the whole log in one stored value — bugdesk's workspace
+ * state, or localStorage. `read()` answers the saved array (or a promise of
+ * it); `write(array)` stores one. Dates are written as ISO strings.
+ */
+export function localSource({ read, write, limit = 300 } = {}) {
+    let all = null;
+    const save = () => {
+        try {
+            write?.(all.map((e) => ({ ...e, at: e.at.toISOString() })));
+        } catch (err) { console.warn('[alert-log] the log could not be saved', err); }
+    };
+    const ensure = async () => {
+        if (all) return all;
+        let saved = [];
+        try { saved = (await read?.()) ?? []; } catch (err) {
+            console.warn('[alert-log] the log could not be read', err);
+        }
+        all = (Array.isArray(saved) ? saved : []).filter((e) => e && typeof e === 'object')
+            .map(normalizeEntry).sort((a, b) => b.at - a.at).slice(0, limit);
+        return all;
+    };
+    return {
+        local: true,
+        async load({ offset = 0, limit: n = limit } = {}) {
+            const list = await ensure();
+            return { entries: list.slice(offset, offset + n), more: offset + n < list.length };
+        },
+        async add(entry) {
+            const list = await ensure();
+            list.unshift(entry);
+            if (list.length > limit) list.length = limit;
+            save();
+        },
+        async markRead(ids) {
+            const want = ids ? new Set(ids) : null;
+            for (const e of await ensure()) if (!want || want.has(e.id)) e.read = true;
+            save();
+        },
+        async dismiss(ids) {
+            const want = ids ? new Set(ids) : null;
+            all = (await ensure()).filter((e) => want && !want.has(e.id));
+            save();
+        },
+    };
+}
+
+/**
+ * @param {object}  [opts]
+ * @param {object}  [opts.source]  where entries live; none keeps them in memory only
+ * @param {number}  [opts.limit]   most entries held, and a page's size
+ * @returns the log
+ */
+export function createAlertLog({ source = null, limit = 300 } = {}) {
+    let entries = [];
+    let more = false;
+    let remoteUnread = null;
+    let loaded = false;
+    let loading = null;
+    const listeners = new Set();
+
+    const changed = () => {
+        for (const fn of [...listeners]) {
+            try { fn(log); } catch (err) { console.warn('[alert-log] listener failed', err); }
+        }
+    };
+    const tell = (verb, ...args) => {
+        const fn = source?.[verb];
+        if (typeof fn !== 'function') return;
+        Promise.resolve().then(() => fn.apply(source, args)).catch((err) => {
+            console.warn(`[alert-log] the source refused ${verb}`, err);
+            log.refresh();
+        });
+    };
+    const page = async (offset) => {
+        const res = (await source?.load?.({ offset, limit })) ?? {};
+        const got = (res.entries ?? []).map(normalizeEntry);
+        return { got, more: !!res.more, unread: Number.isFinite(res.unread) ? res.unread : null };
+    };
+
+    const log = {
+        /** Loaded entries, newest first. */
+        entries: () => entries,
+        loaded: () => loaded,
+        /** Whether the source has older entries than those loaded. */
+        hasMore: () => more,
+        /** Whether entries can be dismissed: a log with no source, or a source that can. */
+        canDismiss: () => !source || typeof source.dismiss === 'function',
+        /** Unread entries: the source's count when it knows one, else the loaded ones. */
+        unreadCount() {
+            const here = entries.filter((e) => !e.read).length;
+            return remoteUnread === null ? here : Math.max(remoteUnread, here);
+        },
+        /** The worst level among unread entries, or null. */
+        worstUnread: () => worstLevel(entries.filter((e) => !e.read)),
+        get: (id) => entries.find((e) => e.id === String(id)) ?? null,
+
+        /** `fn(log)` after every change; answers the unsubscribe. */
+        subscribe(fn) {
+            listeners.add(fn);
+            return () => listeners.delete(fn);
+        },
+
+        /** The first page, again. */
+        refresh() {
+            if (!source?.load) { loaded = true; changed(); return Promise.resolve(log); }
+            loading = page(0).then(({ got, more: m, unread }) => {
+                entries = got;
+                more = m;
+                remoteUnread = unread;
+                loaded = true;
+                changed();
+                return log;
+            }).catch((err) => {
+                console.warn('[alert-log] the log could not be loaded', err);
+                loaded = true;
+                changed();
+                return log;
+            }).finally(() => { loading = null; });
+            return loading;
+        },
+        /** Load once; later calls answer the same promise or nothing. */
+        load() { return loading ?? (loaded ? Promise.resolve(log) : log.refresh()); },
+        /** The next page, after the loaded ones. */
+        async loadMore() {
+            if (!more || !source?.load) return log;
+            const { got, more: m, unread } = await page(entries.length);
+            const seen = new Set(entries.map((e) => e.id));
+            entries = [...entries, ...got.filter((e) => !seen.has(e.id))];
+            more = m;
+            if (unread !== null) remoteUnread = unread;
+            changed();
+            return log;
+        },
+
+        /** A new entry raised HERE (bugdesk's rules): kept, and handed to the source to save. */
+        add(raw) {
+            const entry = normalizeEntry(raw);
+            entries = [entry, ...entries.filter((e) => e.id !== entry.id)];
+            if (entries.length > limit) entries.length = limit;
+            if (remoteUnread !== null && !entry.read) remoteUnread += 1;
+            tell('add', entry);
+            changed();
+            return entry;
+        },
+        /** Entries that arrived from the source's side (a push): shown, not saved back. */
+        receive(raws) {
+            const got = (Array.isArray(raws) ? raws : [raws]).map(normalizeEntry);
+            const ids = new Set(got.map((e) => e.id));
+            const fresh = got.filter((e) => !entries.some((x) => x.id === e.id));
+            entries = [...got, ...entries.filter((e) => !ids.has(e.id))]
+                .sort((a, b) => b.at - a.at).slice(0, limit);
+            if (remoteUnread !== null) remoteUnread += fresh.filter((e) => !e.read).length;
+            changed();
+        },
+        /** Mark these read — all of them when `ids` is omitted. */
+        markRead(ids = null) {
+            const want = ids ? new Set(ids.map(String)) : null;
+            let n = 0;
+            for (const e of entries) if (!e.read && (!want || want.has(e.id))) { e.read = true; n++; }
+            if (remoteUnread !== null) remoteUnread = want ? Math.max(0, remoteUnread - n) : 0;
+            if (!n && want) return;
+            tell('markRead', want ? [...want] : null);
+            changed();
+        },
+        /** Remove these — all of them when `ids` is omitted. Nothing, when the source cannot. */
+        dismiss(ids = null) {
+            if (!log.canDismiss()) return;
+            const want = ids ? new Set(ids.map(String)) : null;
+            const gone = entries.filter((e) => !want || want.has(e.id));
+            if (!gone.length) return;
+            entries = want ? entries.filter((e) => !want.has(e.id)) : [];
+            if (remoteUnread !== null) {
+                remoteUnread = want ? Math.max(0, remoteUnread - gone.filter((e) => !e.read).length) : 0;
+            }
+            tell('dismiss', want ? [...want] : null);
+            changed();
+        },
+    };
+    if (!source?.load) loaded = true;
+    return log;
+}