flexdesk 0.12.1 → 0.14.0

package/src/ui/components/alerts_pane.js

@@ -0,0 +1,294 @@
+/**
+ * ══ THE ALERTS PANE ═══════════════════════════════════════════════════════
+ *
+ * An alert log (`alert_log.js`) drawn as the bottom panel's Alerts tab: level
+ * chips with counts, a text filter, entries grouped by day with relative
+ * times, an unread mark, Open and Dismiss on each row, Mark all read and Clear
+ * for the lot (FlexDesk STORY-0019, from bugdesk's `alerts.js`). The same
+ * layout whether the log is local or pages a server: *Load older* appears
+ * when the source has more.
+ *
+ *     mountAlertsPane(el, { log, onOpen: (entry) => …, onBadge: ({ unread, level }) => … })
+ *
+ * OPTIONAL, for an embedder with rules of its own (bugdesk): `rules` is
+ * `{ list() → [{ id, name, level, meta?, off? }], onEdit?, foot? }` — a column
+ * of them on the left that narrows the log to one rule (entries carry
+ * `ruleId`) — and `stillMatches(entry)` → true / false / null, drawn as "still
+ * matches" or "no longer matches" on each row.
+ *
+ * NEVER REBUILT UNDER THE POINTER. A log changes on its own — a push from the
+ * server, a rule firing, the minute tick — and a row repainted between a
+ * mousedown and its click loses the click (Tables' recorded trap). While a
+ * button is down inside the pane a repaint waits, and runs once it is up.
+ * The bar (chips, the filter, the buttons) is built once and updated in
+ * place, so typing in the filter never loses the caret either.
+ */
+
+import { ALERT_LEVELS, ago, dayLabel, normalizeLevel } from './alert_log.js';
+
+const CHIPS = [['all', 'All'], ['alert', 'Alert'], ['warning', 'Warning'], ['info', 'Info']];
+
+/**
+ * @param {HTMLElement} host
+ * @param {object}   opts
+ * @param {object}   opts.log           `createAlertLog(…)`
+ * @param {Function}[opts.onOpen]       `(entry)` — Open; the entry is marked read first
+ * @param {Function}[opts.onBadge]      `({ unread, level })` after every change — a tab's badge
+ * @param {object}  [opts.rules]        `{ list, onEdit?, foot? }`
+ * @param {Function}[opts.stillMatches] `(entry) → boolean | null`
+ * @param {Function}[opts.describe]     `(entry) → string` — a small chip on the row (bugdesk: the store)
+ * @param {string}  [opts.status]       the footer line
+ * @param {object}  [opts.empty]        `{ none, filtered }` — the two empty texts
+ * @returns {{ refresh, destroy, root }}
+ */
+export function mountAlertsPane(host, {
+    log, onOpen = null, onBadge = null, rules = null, stillMatches = null, describe = null,
+    status = '', empty = {},
+} = {}) {
+    const doc = host.ownerDocument;
+    const el = (tag, cls, text) => {
+        const n = doc.createElement(tag);
+        if (cls) n.className = cls;
+        if (text !== undefined) n.textContent = text;
+        return n;
+    };
+    const icon = (name) => el('span', 'material-symbols-outlined', name);
+
+    let level = 'all';
+    let rule = null;
+    let q = '';
+    let pointerDown = false;
+    let pending = false;
+    let destroyed = false;
+
+    // ── the frame, built once ────────────────────────────────────────────
+    const root = el('div', 'twm-alerts');
+    let ruleList = null;
+    if (rules) {
+        const side = el('div', 'twm-alerts__rules');
+        const head = el('div', 'twm-alerts__head');
+        head.append(el('span', 'twm-alerts__caps', 'RULES'), el('span', 'twm-alerts__spacer'));
+        if (rules.onEdit) {
+            const edit = el('button', 'twm-alerts__link', 'Edit rules');
+            edit.type = 'button';
+            edit.dataset.act = 'edit-rules';
+            head.append(edit);
+        }
+        ruleList = el('div', 'twm-alerts__rulelist');
+        side.append(head, ruleList);
+        if (rules.foot) side.append(el('div', 'twm-alerts__foot', rules.foot));
+        root.append(side);
+    }
+    const main = el('div', 'twm-alerts__main');
+    const bar = el('div', 'twm-alerts__bar');
+    const chips = el('div', 'twm-alerts__chips');
+    chips.setAttribute('role', 'group');
+    chips.setAttribute('aria-label', 'Level');
+    const chipEls = new Map();
+    for (const [key, label] of CHIPS) {
+        const chip = el('button', 'twm-alerts__chip');
+        chip.type = 'button';
+        chip.dataset.level = key;
+        chip.append(doc.createTextNode(`${label} `), el('span', 'twm-alerts__count', '0'));
+        chips.append(chip);
+        chipEls.set(key, chip);
+    }
+    const input = el('input', 'twm-alerts__q');
+    input.type = 'text';
+    input.autocomplete = 'off';
+    input.spellcheck = false;
+    input.placeholder = 'Filter';
+    input.setAttribute('aria-label', 'Filter alerts');
+    const readAll = el('button', 'twm-btn twm-alerts__btn', 'Mark all read');
+    readAll.type = 'button';
+    readAll.dataset.act = 'read-all';
+    const clear = el('button', 'twm-btn twm-alerts__btn', 'Clear');
+    clear.type = 'button';
+    clear.dataset.act = 'clear';
+    bar.append(chips, input, el('span', 'twm-alerts__spacer'), readAll, clear);
+    const list = el('div', 'twm-alerts__log');
+    const foot = el('div', 'twm-alerts__status', status);
+    foot.hidden = !status;
+    main.append(bar, list, foot);
+    root.append(main);
+    host.append(root);
+
+    // ── what is shown ───────────────────────────────────────────────────
+    const byRule = () => (rule ? log.entries().filter((e) => String(e.ruleId) === rule) : log.entries());
+    const shown = () => {
+        const needle = q.trim().toLowerCase();
+        return byRule()
+            .filter((e) => level === 'all' || e.level === level)
+            .filter((e) => !needle || `${e.ref ?? ''} ${e.title} ${e.body ?? ''} ${e.rule ?? ''}`
+                .toLowerCase().includes(needle));
+    };
+
+    function row(entry, now) {
+        const lv = ALERT_LEVELS[normalizeLevel(entry.level)];
+        const r = el('div', `twm-alerts__row twm-alerts__row--${entry.level}${entry.read ? '' : ' twm-alerts__row--unread'}`);
+        r.dataset.id = entry.id;
+        const mark = el('span', 'twm-alerts__unread');
+        mark.setAttribute('aria-label', entry.read ? 'Read' : 'Unread');
+        const ic = icon(lv.icon);
+        ic.classList.add('twm-alerts__icon');
+        ic.title = lv.label;
+        const time = el('span', 'twm-alerts__time', ago(entry.at, now));
+        time.title = entry.at.toLocaleString();
+        const text = el('span', 'twm-alerts__text');
+        text.append(el('span', 'twm-alerts__title', entry.title));
+        if (entry.body) text.append(el('span', 'twm-alerts__body', entry.body));
+        const cells = [mark, ic, time];
+        if (rules) cells.push(el('span', 'twm-alerts__rule', entry.rule ?? ''));
+        const tag = describe?.(entry);
+        cells.push(el('span', tag ? 'twm-alerts__tag' : 'twm-alerts__tag twm-alerts__tag--none', tag ?? ''));
+        const ref = el(entry.ref && onOpen ? 'button' : 'span', 'twm-alerts__ref', entry.ref ?? '');
+        if (ref.tagName === 'BUTTON') { ref.type = 'button'; ref.dataset.open = entry.id; }
+        cells.push(ref, text);
+        if (stillMatches) {
+            const still = stillMatches(entry);
+            cells.push(el('span', `twm-alerts__state${still === false ? ' twm-alerts__state--gone' : ''}`,
+                still === true ? 'still matches' : still === false ? 'no longer matches' : ''));
+        }
+        const acts = el('span', 'twm-alerts__acts');
+        if (onOpen) {
+            const open = el('button', 'twm-alerts__icon-btn');
+            open.type = 'button';
+            open.dataset.open = entry.id;
+            open.title = 'Open';
+            open.setAttribute('aria-label', 'Open');
+            open.append(icon('open_in_new'));
+            acts.append(open);
+        }
+        if (log.canDismiss()) {
+            const dis = el('button', 'twm-alerts__icon-btn');
+            dis.type = 'button';
+            dis.dataset.dismiss = entry.id;
+            dis.title = 'Dismiss';
+            dis.setAttribute('aria-label', 'Dismiss');
+            dis.append(icon('close'));
+            acts.append(dis);
+        }
+        cells.push(acts);
+        r.append(...cells);
+        return r;
+    }
+
+    function paint() {
+        if (destroyed) return;
+        if (pointerDown) { pending = true; return; }
+        pending = false;
+        const now = new Date();
+        const all = log.entries();
+        const scoped = byRule();
+
+        for (const [key, chip] of chipEls) {
+            const on = level === key;
+            chip.classList.toggle('twm-alerts__chip--on', on);
+            chip.setAttribute('aria-pressed', String(on));
+            chip.querySelector('.twm-alerts__count').textContent =
+                String(scoped.filter((e) => key === 'all' || e.level === key).length);
+        }
+        readAll.disabled = !all.some((e) => !e.read) && log.unreadCount() === 0;
+        clear.hidden = !log.canDismiss();
+        clear.disabled = !all.length;
+
+        if (ruleList) {
+            const items = [{ id: null, name: 'All alerts', meta: String(all.length) }, ...(rules.list?.() ?? [])];
+            ruleList.replaceChildren(...items.map((r) => {
+                const key = r.id === null ? null : String(r.id);
+                const b = el('button', `twm-alerts__rulebtn${rule === key ? ' twm-alerts__rulebtn--on' : ''}${r.off ? ' twm-alerts__rulebtn--off' : ''}`);
+                b.type = 'button';
+                b.dataset.rule = key ?? '';
+                b.setAttribute('aria-pressed', String(rule === key));
+                b.append(el('span', `twm-alerts__dot${r.level ? ` twm-alerts__dot--${normalizeLevel(r.level)}` : ''}`),
+                         el('span', 'twm-alerts__rulename', r.name || 'Unnamed rule'),
+                         el('span', 'twm-alerts__meta', r.meta ?? ''));
+                return b;
+            }));
+        }
+
+        const rows = [];
+        let lastDay = '';
+        for (const entry of shown()) {
+            const day = dayLabel(entry.at, now);
+            if (day !== lastDay) rows.push(el('div', 'twm-alerts__day', day));
+            lastDay = day;
+            rows.push(row(entry, now));
+        }
+        if (!rows.length) {
+            rows.push(el('div', 'twm-alerts__none', !log.loaded() ? 'Loading…'
+                : all.length ? (empty.filtered ?? 'No alerts match.') : (empty.none ?? 'Nothing yet.')));
+        }
+        if (log.hasMore()) {
+            const older = el('button', 'twm-btn twm-alerts__more', 'Load older');
+            older.type = 'button';
+            older.dataset.act = 'more';
+            rows.push(older);
+        }
+        const scroll = list.scrollTop;
+        list.replaceChildren(...rows);
+        list.scrollTop = scroll;
+        onBadge?.({ unread: log.unreadCount(), level: log.worstUnread() });
+    }
+
+    // ── input ───────────────────────────────────────────────────────────
+    const onDown = () => { pointerDown = true; };
+    const onUp = () => {
+        if (!pointerDown) return;
+        // After the click this mouseup belongs to has been dispatched.
+        setTimeout(() => {
+            pointerDown = false;
+            if (pending) paint();
+        }, 0);
+    };
+    root.addEventListener('mousedown', onDown, true);
+    root.addEventListener('pointerdown', onDown, true);
+    doc.addEventListener('mouseup', onUp, true);
+    doc.addEventListener('pointerup', onUp, true);
+    doc.addEventListener('pointercancel', onUp, true);
+
+    root.addEventListener('click', (event) => {
+        const t = event.target;
+        const chip = t.closest('[data-level]');
+        if (chip) { level = chip.dataset.level; paint(); return; }
+        const r = t.closest('[data-rule]');
+        if (r) { rule = r.dataset.rule || null; paint(); return; }
+        const open = t.closest('[data-open]');
+        if (open) {
+            const entry = log.get(open.dataset.open);
+            if (!entry) return;
+            log.markRead([entry.id]);
+            onOpen?.(entry);
+            return;
+        }
+        const dis = t.closest('[data-dismiss]');
+        if (dis) { log.dismiss([dis.dataset.dismiss]); return; }
+        const act = t.closest('[data-act]')?.dataset.act;
+        if (act === 'read-all') log.markRead();
+        else if (act === 'clear') log.dismiss();
+        else if (act === 'more') log.loadMore();
+        else if (act === 'edit-rules') rules?.onEdit?.();
+    });
+    input.addEventListener('input', () => { q = input.value; paint(); });
+
+    const unsubscribe = log.subscribe(() => paint());
+    // "5 min ago" moves on its own.
+    const timer = setInterval(paint, 60000);
+    paint();
+    log.load?.();
+
+    return {
+        root,
+        refresh: paint,
+        destroy() {
+            if (destroyed) return;
+            destroyed = true;
+            clearInterval(timer);
+            unsubscribe();
+            doc.removeEventListener('mouseup', onUp, true);
+            doc.removeEventListener('pointerup', onUp, true);
+            doc.removeEventListener('pointercancel', onUp, true);
+            root.remove();
+        },
+    };
+}

package/src/ui/components/notification_history.js

@@ -4,13 +4,33 @@
  * Bell icon in the global-bottom-bar that opens a popover listing past notifications.
  * Reads from NotificationCenter.history (no modifications to NotificationCenter needed).
  * Tracks unread count via lastSeenCount delta and updates a badge on the bell icon.
+ *
+ * THREE OPTIONS, all additive (FlexDesk STORY-0020); without them it is the bell
+ * it always was:
+ *
+ *   mountPoint  the element the bell is appended to. Without it, the hard-coded
+ *               `.twm-global-bottom-bar .twm-bar-right`, which only FlexDesk's own
+ *               bottom bar has.
+ *   alertLog    an alert log (`alert_log.js`). The badge is then the log's unread
+ *               count, in the worst unread level's colour, and nothing when all is
+ *               read — not a delta of a toast history the user may never have
+ *               opened. A click opens the bottom panel's Alerts tab instead of the
+ *               popover, and the toasts' "+N more" (`notification:summary`) does too.
+ *   alertsTab   the tab a click asks for, `bottompanel:show { tab }`; 'alerts'.
+ *   onOpen      a click, instead of the bus event — for an embedder with no bus,
+ *               or whose panel must be opened before a tab can be chosen.
  */
 
 export class NotificationHistory {
-    constructor({ notificationCenter, eventBus, logger } = {}) {
+    constructor({ notificationCenter, eventBus, logger, mountPoint = null, alertLog = null,
+                  alertsTab = 'alerts', onOpen = null } = {}) {
         this.notificationCenter = notificationCenter;
         this.eventBus = eventBus || null;
         this.logger = logger || console;
+        this.mountPoint = mountPoint;
+        this.alertLog = alertLog;
+        this.alertsTab = alertsTab;
+        this.onOpen = typeof onOpen === 'function' ? onOpen : null;
 
         this.triggerEl = null;
         this.badgeEl = null;
@@ -20,7 +40,8 @@ export class NotificationHistory {
     }
 
     mount() {
-        const barRight = document.querySelector('.twm-global-bottom-bar .twm-bar-right');
+        const barRight = this.mountPoint
+            || document.querySelector('.twm-global-bottom-bar .twm-bar-right');
         if (!barRight) {
             this.logger.warn?.('[NotificationHistory] .bar-right not found');
             return;
@@ -45,9 +66,20 @@ export class NotificationHistory {
 
         this.triggerEl.addEventListener('click', (e) => {
             e.stopPropagation();
-            this.#togglePanel();
+            if (this.alertLog) this.#openAlerts();
+            else this.#togglePanel();
         });
 
+        if (this.alertLog) {
+            this.triggerEl.setAttribute('data-tooltip', 'Alerts');
+            this.triggerEl.setAttribute('aria-label', 'Alerts');
+            this._subscriptions.push(this.alertLog.subscribe(() => this.#updateBadge()));
+            const summary = this.eventBus?.on?.('notification:summary', () => this.#openAlerts());
+            if (summary) this._subscriptions.push(() => summary.dispose?.());
+            this.#updateBadge();
+            return;
+        }
+
         // Sync initial count so existing history doesn't show as unread
         this.lastSeenCount = this.notificationCenter?.history?.length ?? 0;
 
@@ -81,12 +113,30 @@ export class NotificationHistory {
         });
     }
 
+    /** The Alerts tab, asked for on the bus — or the embedder's own verb. */
+    #openAlerts() {
+        if (this.onOpen) {
+            try { this.onOpen(); } catch (err) { this.logger.warn?.('[NotificationHistory] onOpen failed', err); }
+            return;
+        }
+        this.eventBus?.emit?.('bottompanel:show', { tab: this.alertsTab });
+    }
+
     #updateBadge() {
         const historyLen = this.notificationCenter?.history?.length ?? 0;
-        const unread = Math.max(0, historyLen - this.lastSeenCount);
+        const unread = this.alertLog
+            ? this.alertLog.unreadCount()
+            : Math.max(0, historyLen - this.lastSeenCount);
 
         if (!this.badgeEl) return;
 
+        if (this.alertLog) {
+            const level = unread > 0 ? this.alertLog.worstUnread() : null;
+            this.badgeEl.className = 'twm-notification-history__badge'
+                + (level ? ` twm-notification-history__badge--${level}` : '');
+            this.triggerEl?.classList.toggle('twm-notification-history__trigger--unread', unread > 0);
+        }
+
         if (unread > 0) {
             this.badgeEl.textContent = unread > 99 ? '99+' : String(unread);
             this.badgeEl.style.display = '';

package/src/ui/utils/auto_scrollbars.js

@@ -21,6 +21,9 @@
  *     it actually overflows. They fade out a moment after the pointer leaves
  *     or the scrolling stops. Nested scroll areas each show their own.
  *   - The thumb drags and the track pages, as a native bar does.
+ *   - The layer is above everything, so a bar would also draw over whatever
+ *     covers its element — a popover, a menu, a dialog. A bar whose track is
+ *     covered anywhere is not drawn; it comes back when it is uncovered.
  *
  * Discovery is lazy: the pointer and scroll events name the elements worth
  * measuring, so nothing walks the DOM looking for scroll areas.
@@ -49,6 +52,22 @@ export function thumbGeometry(scrollSize, clientSize, scrollPos, trackLen) {
     return { size, pos };
 }
 
+/**
+ * Whether something else covers `el` at any of the points a bar runs along.
+ * Pure, so it can be tested without a layout engine.
+ *
+ * @param {Element} el
+ * @param {Element[][]} stacks  what `elementsFromPoint` gave at each point,
+ *   topmost first. The overlay layer's own bars are skipped.
+ * @returns {boolean}
+ */
+export function barCovered(el, stacks) {
+    return stacks.some((stack) => {
+        const top = (stack || []).find((h) => !h.closest?.('.twm-autoscroll-layer'));
+        return Boolean(top) && top !== el && !el.contains(top);
+    });
+}
+
 /** Whether an element scrolls on an axis: its overflow allows it and its
  *  content is larger than its box. */
 function scrollsOn(el, axis) {
@@ -151,6 +170,9 @@ export function installAutoScrollbars(root = document.body, { exclude = null } =
         return rec;
     };
 
+    const coveredAlong = (el, points) => typeof doc.elementsFromPoint === 'function'
+        && barCovered(el, points.map(([x, y]) => doc.elementsFromPoint(x, y)));
+
     /** Place and size an element's bars; drop the element when it is gone. */
     const place = (el) => {
         const rec = managed.get(el);
@@ -178,12 +200,16 @@ export function installAutoScrollbars(root = document.body, { exclude = null } =
                 const g = thumbGeometry(el.scrollHeight * z, el.clientHeight * z, el.scrollTop * z, len);
                 if (!g) { bar.style.display = 'none'; continue; }
                 Object.assign(thumb.style, { top: `${g.pos}px`, height: `${g.size}px`, left: '0', width: '100%' });
+                const x = right - BAR / 2 - 1;
+                if (coveredAlong(el, [[x, top + 2], [x, top + len / 2], [x, bottom - 2]])) bar.style.display = 'none';
             } else {
                 const len = right - left;
                 Object.assign(bar.style, { left: `${left}px`, top: `${bottom - BAR - 1}px`, width: `${len}px`, height: `${BAR}px` });
                 const g = thumbGeometry(el.scrollWidth * z, el.clientWidth * z, el.scrollLeft * z, len);
                 if (!g) { bar.style.display = 'none'; continue; }
                 Object.assign(thumb.style, { left: `${g.pos}px`, width: `${g.size}px`, top: '0', height: '100%' });
+                const y = bottom - BAR / 2 - 1;
+                if (coveredAlong(el, [[left + 2, y], [left + len / 2, y], [right - 2, y]])) bar.style.display = 'none';
             }
         }
     };
@@ -256,6 +282,9 @@ export function installAutoScrollbars(root = document.body, { exclude = null } =
     doc.addEventListener('mouseout', onLeaveWindow, true);
     doc.addEventListener('scroll', onScroll, true);
     win.addEventListener('resize', onResize);
+    // A popover or dialog takes the focus as it opens, often over a bar that
+    // is showing because the pointer has not moved: look again once it is drawn.
+    doc.addEventListener('focusin', onResize, true);
 
     return {
         dispose() {
@@ -263,6 +292,7 @@ export function installAutoScrollbars(root = document.body, { exclude = null } =
             doc.removeEventListener('mouseout', onLeaveWindow, true);
             doc.removeEventListener('scroll', onScroll, true);
             win.removeEventListener('resize', onResize);
+            doc.removeEventListener('focusin', onResize, true);
             for (const el of [...managed.keys()]) drop(el);
             root.classList.remove(ROOT_CLASS);
         },