flexdesk 0.13.0 → 0.14.1

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);
         },