flexdesk 0.17.1 → 0.17.3

package/dist/widgets.js

@@ -3033,7 +3033,7 @@ var NotificationHistory = class {
     this.onOpen = typeof onOpen === "function" ? onOpen : null;
     this.triggerEl = null;
     this.badgeEl = null;
-    this.lastSeenCount = 0;
+    this.unreadCount = 0;
     this._popoverCleanup = null;
     this._subscriptions = [];
   }
@@ -3064,8 +3064,13 @@ var NotificationHistory = class {
       this.#updateBadge();
       return;
     }
-    this.lastSeenCount = this.notificationCenter?.history?.length ?? 0;
-    this.#subscribeEvents();
+    this.unreadCount = 0;
+    const unsubscribe = this.notificationCenter?.subscribe?.(() => {
+      this.unreadCount += 1;
+      this.#updateBadge();
+    });
+    if (typeof unsubscribe === "function") this._subscriptions.push(unsubscribe);
+    this.#updateBadge();
   }
   unmount() {
     this.#closePanel();
@@ -3079,21 +3084,6 @@ var NotificationHistory = class {
     this.triggerEl = null;
     this.badgeEl = null;
   }
-  #subscribeEvents() {
-    if (!this.eventBus) return;
-    const badgeUpdate = () => queueMicrotask(() => this.#updateBadge());
-    const events = [
-      "toast:show",
-      "notification:show",
-      "log:entry",
-      "workspace:save:failed",
-      "workspace:import:failed"
-    ];
-    events.forEach((name) => {
-      const handle = this.eventBus.on(name, badgeUpdate);
-      this._subscriptions.push(() => handle?.dispose?.());
-    });
-  }
   /** The Alerts tab, asked for on the bus — or the embedder's own verb. */
   #openAlerts() {
     if (this.onOpen) {
@@ -3108,7 +3098,7 @@ var NotificationHistory = class {
   }
   #updateBadge() {
     const historyLen = this.notificationCenter?.history?.length ?? 0;
-    const unread = this.alertLog ? this.alertLog.unreadCount() : Math.max(0, historyLen - this.lastSeenCount);
+    const unread = this.alertLog ? this.alertLog.unreadCount() : Math.min(this.unreadCount, historyLen);
     if (!this.badgeEl) return;
     if (this.alertLog) {
       const level = unread > 0 ? this.alertLog.worstUnread() : null;
@@ -3140,7 +3130,7 @@ var NotificationHistory = class {
   }
   #openPanel() {
     this.#closePanel();
-    this.lastSeenCount = this.notificationCenter?.history?.length ?? 0;
+    this.unreadCount = 0;
     this.#updateBadge();
     const panel = document.createElement("div");
     panel.className = "twm-notification-history__panel";
@@ -3155,7 +3145,7 @@ var NotificationHistory = class {
     header.querySelector(".twm-notification-history__close-btn").addEventListener("click", () => this.#closePanel());
     header.querySelector(".twm-notification-history__clear-btn").addEventListener("click", () => {
       this.notificationCenter.history.splice(0);
-      this.lastSeenCount = 0;
+      this.unreadCount = 0;
       this.#updateBadge();
       this.#renderList(list);
     });
@@ -3939,6 +3929,51 @@ function fitNumber(n, { min, max, step }) {
   if (lo != null && at(k) < lo) k = Math.ceil((lo - base) / s - EPS);
   return at(k);
 }
+function filterBox(onInput) {
+  const label = el2("label", "twm-settings__search");
+  const input = el2("input", "twm-settings__search-input");
+  input.type = "search";
+  input.placeholder = "Filter settings\u2026";
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  input.setAttribute("aria-label", "Filter settings");
+  input.addEventListener("input", () => onInput(input.value));
+  label.append(icon("search"), input);
+  return { label, input };
+}
+function categoryNav(onSelect) {
+  const nav = el2("nav", "twm-settings__nav");
+  nav.setAttribute("aria-label", "Settings categories");
+  nav.addEventListener("click", (e) => {
+    const btn = e.target.closest?.("[data-category]");
+    if (btn && nav.contains(btn)) onSelect(btn.dataset.category);
+  });
+  return nav;
+}
+function paintCategories(nav, categories, active) {
+  const buttons = categories.map((cat) => {
+    const b = el2("button", "twm-settings__cat");
+    b.type = "button";
+    b.dataset.category = cat.id;
+    if (cat.id === active) {
+      b.classList.add("twm-settings__cat--active");
+      b.setAttribute("aria-current", "page");
+    }
+    b.append(icon(cat.icon || "tune"), el2("span", "twm-settings__cat-label", cat.label ?? cat.id));
+    if (cat.description) b.title = String(cat.description);
+    return b;
+  });
+  nav.replaceChildren(...buttons);
+}
+function resetAllButton(onClick) {
+  const b = el2("button", "twm-btn twm-settings__reset-all");
+  b.type = "button";
+  b.append(icon("restart_alt"), el2("span", "", "Reset all"));
+  b.addEventListener("click", () => {
+    onClick();
+  });
+  return b;
+}
 var SettingsView = class extends ComponentBase {
   /**
    * @param {object}    o
@@ -3948,6 +3983,8 @@ var SettingsView = class extends ComponentBase {
    * @param {string}   [o.category] the category shown first (default: the first)
    * @param {number}   [o.textDebounceMs]
    * @param {string}   [o.title='Settings']  the sidebar heading
+   * @param {boolean}  [o.sidebar=true]  false leaves the sidebar (filter,
+   *        categories, *Reset all*) out, for a `SettingsCategories` elsewhere
    */
   constructor({
     store,
@@ -3956,6 +3993,7 @@ var SettingsView = class extends ComponentBase {
     category = null,
     textDebounceMs = SETTINGS_TEXT_DEBOUNCE_MS,
     title = "Settings",
+    sidebar = true,
     logger
   } = {}) {
     super({ eventBus, logger });
@@ -3971,6 +4009,8 @@ var SettingsView = class extends ComponentBase {
     this._query = "";
     this._debounceMs = textDebounceMs;
     this._title = title;
+    this._sidebar = sidebar !== false;
+    this._listeners = /* @__PURE__ */ new Set();
     this.root = null;
     this._nav = null;
     this._content = null;
@@ -3984,36 +4024,19 @@ var SettingsView = class extends ComponentBase {
   mount(container) {
     if (this.root) return this.root;
     const root = el2("div", "twm-settings");
-    const side = el2("aside", "twm-settings__sidebar");
-    const head = el2("div", "twm-settings__sidebar-title");
-    head.append(icon("settings"), el2("span", "", this._title));
-    const search = el2("label", "twm-settings__search");
-    const input = el2("input", "twm-settings__search-input");
-    input.type = "search";
-    input.placeholder = "Filter settings\u2026";
-    input.autocomplete = "off";
-    input.spellcheck = false;
-    input.setAttribute("aria-label", "Filter settings");
-    input.addEventListener("input", () => this.setQuery(input.value));
-    search.append(icon("search"), input);
-    this._search = input;
-    const nav = el2("nav", "twm-settings__nav");
-    nav.setAttribute("aria-label", "Settings categories");
-    nav.addEventListener("click", (e) => {
-      const btn = e.target.closest?.("[data-category]");
-      if (btn && nav.contains(btn)) this.selectCategory(btn.dataset.category);
-    });
-    this._nav = nav;
-    const resetAll = el2("button", "twm-btn twm-settings__reset-all");
-    resetAll.type = "button";
-    resetAll.append(icon("restart_alt"), el2("span", "", "Reset all"));
-    resetAll.addEventListener("click", () => {
-      this.resetAll();
-    });
-    side.append(head, search, nav, resetAll);
+    if (this._sidebar) {
+      const side = el2("aside", "twm-settings__sidebar");
+      const head = el2("div", "twm-settings__sidebar-title");
+      head.append(icon("settings"), el2("span", "", this._title));
+      const search = filterBox((text) => this.setQuery(text));
+      this._search = search.input;
+      this._nav = categoryNav((id) => this.selectCategory(id));
+      side.append(head, search.label, this._nav, resetAllButton(() => this.resetAll()));
+      root.append(side);
+    }
     const content = el2("div", "twm-settings__content");
     this._content = content;
-    root.append(side, content);
+    root.append(content);
     this.root = root;
     container.appendChild(root);
     this._mounted = true;
@@ -4024,6 +4047,7 @@ var SettingsView = class extends ComponentBase {
     this._subs.push(this.eventBus.on("settings:registered", (p) => this.#onRegistered(p)));
     this.#paintNav();
     this.#paintContent();
+    this.#notify();
     return root;
   }
   /** The category on screen (its id), or null. */
@@ -4034,6 +4058,19 @@ var SettingsView = class extends ComponentBase {
   getQuery() {
     return this._query;
   }
+  /** True while the filter is in effect (its trimmed text is not empty). */
+  isFiltering() {
+    return this.#searching();
+  }
+  /**
+   * `fn({ category, query })` after every change of the category, the filter
+   * or the registered categories, until the view is disposed. Answers the
+   * unsubscribe.
+   */
+  subscribe(fn) {
+    this._listeners.add(fn);
+    return () => this._listeners.delete(fn);
+  }
   /** Show one category; clears the filter. */
   selectCategory(id) {
     if (!this.root) return;
@@ -4043,6 +4080,7 @@ var SettingsView = class extends ComponentBase {
     if (this._search) this._search.value = "";
     this.#paintNav();
     this.#paintContent();
+    this.#notify();
   }
   /** Search every category; an empty query goes back to the category. */
   setQuery(query) {
@@ -4052,6 +4090,7 @@ var SettingsView = class extends ComponentBase {
     if (this._search && this._search.value !== q) this._search.value = q;
     this.#paintNav();
     this.#paintContent();
+    this.#notify();
   }
   /** Reset one category after `confirm`; resolves true when it was reset. */
   async resetCategory(id = this.getCategory()) {
@@ -4097,6 +4136,7 @@ var SettingsView = class extends ComponentBase {
     this._nav = null;
     this._content = null;
     this._search = null;
+    this._listeners.clear();
     super.dispose();
   }
   // ── store events ─────────────────────────────────────────────────────
@@ -4115,10 +4155,11 @@ var SettingsView = class extends ComponentBase {
     const touches = this.#searching() || !this._rows.size || paths.some((p) => schema[p]?.category === active);
     if (touches) {
       this.#paintContent();
-      return;
+    } else {
+      this.#flushAll();
+      this.#syncAll();
     }
-    this.#flushAll();
-    this.#syncAll();
+    this.#notify();
   }
   /** True while a filter is in effect: the trimmed query is not empty. */
   #searching() {
@@ -4140,20 +4181,13 @@ var SettingsView = class extends ComponentBase {
     return cats.find((c) => c.id === this._category) ?? cats[0] ?? null;
   }
   #paintNav() {
-    const active = this.#searching() ? null : this.getCategory();
-    const buttons = this.store.getCategories().map((cat) => {
-      const b = el2("button", "twm-settings__cat");
-      b.type = "button";
-      b.dataset.category = cat.id;
-      if (cat.id === active) {
-        b.classList.add("twm-settings__cat--active");
-        b.setAttribute("aria-current", "page");
-      }
-      b.append(icon(cat.icon || "tune"), el2("span", "twm-settings__cat-label", cat.label ?? cat.id));
-      if (cat.description) b.title = String(cat.description);
-      return b;
-    });
-    this._nav.replaceChildren(...buttons);
+    if (!this._nav) return;
+    paintCategories(this._nav, this.store.getCategories(), this.#searching() ? null : this.getCategory());
+  }
+  /** Tell the listeners, after the content is drawn (it settles the category). */
+  #notify() {
+    const state = { category: this.getCategory(), query: this._query };
+    for (const fn of [...this._listeners]) fn(state);
   }
   #paintContent() {
     this.#flushAll();
@@ -4418,6 +4452,54 @@ var SettingsView = class extends ComponentBase {
     }
   }
 };
+var SettingsCategories = class extends ComponentBase {
+  /**
+   * @param {object}       o
+   * @param {SettingsView} o.view  the view it lists the categories of
+   */
+  constructor({ view, logger } = {}) {
+    if (!(view instanceof SettingsView)) {
+      throw new TypeError("SettingsCategories: `view` must be a SettingsView");
+    }
+    super({ eventBus: view.eventBus, logger });
+    this.view = view;
+    this.root = null;
+    this._search = null;
+    this._nav = null;
+    this._unsubscribe = null;
+  }
+  /** Build the list into `container` (once). */
+  mount(container) {
+    if (this.root) return this.root;
+    const view = this.view;
+    const root = el2("div", "twm-settings-categories");
+    const search = filterBox((text) => view.setQuery(text));
+    this._search = search.input;
+    this._nav = categoryNav((id) => view.selectCategory(id));
+    root.append(search.label, this._nav, resetAllButton(() => view.resetAll()));
+    this.root = root;
+    container.appendChild(root);
+    this._mounted = true;
+    this._unsubscribe = view.subscribe(() => this.#paint());
+    this.#paint();
+    return root;
+  }
+  dispose() {
+    this._unsubscribe?.();
+    this._unsubscribe = null;
+    this.root?.remove();
+    this.root = null;
+    this._search = null;
+    this._nav = null;
+    super.dispose();
+  }
+  #paint() {
+    const view = this.view;
+    const q = view.getQuery();
+    if (this._search.value !== q) this._search.value = q;
+    paintCategories(this._nav, view.store.getCategories(), view.isFiltering() ? null : view.getCategory());
+  }
+};
 function settingsViewContent(opts = {}) {
   return (hostEl, props = {}) => {
     const view = new SettingsView({ ...opts, category: props?.category ?? opts.category ?? null });
@@ -6607,6 +6689,7 @@ var SUPPRESSED_NAMESPACE_TITLES = /* @__PURE__ */ new Set(["bootstrap", "app"]);
 var NotificationCenter = class _NotificationCenter extends ComponentBase {
   #items;
   #summaryEl;
+  #historyListeners;
   constructor({
     eventBus,
     logger,
@@ -6637,6 +6720,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
     this.eventDisposers = [];
     this.#items = /* @__PURE__ */ new Map();
     this.#summaryEl = null;
+    this.#historyListeners = /* @__PURE__ */ new Set();
     this.container = null;
     this.rootEl = null;
     this.listEl = null;
@@ -6648,7 +6732,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
       this.container = existingContainer;
       this.rootEl = existingContainer.querySelector(".twm-notification-center");
       this.listEl = existingContainer.querySelector(".twm-notification-center__list");
-      this.liveRegionEl = existingContainer.querySelector(".notification-center__live-region");
+      this.liveRegionEl = existingContainer.querySelector(".twm-notification-center__live-region");
       this._mounted = true;
       this.#subscribeEvents();
       this.#claimToastBus();
@@ -6662,7 +6746,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
     this.listEl = document.createElement("div");
     this.listEl.className = "twm-notification-center__list";
     this.liveRegionEl = document.createElement("div");
-    this.liveRegionEl.className = "notification-center__live-region";
+    this.liveRegionEl.className = "twm-notification-center__live-region";
     this.liveRegionEl.setAttribute("aria-live", "polite");
     this.liveRegionEl.setAttribute("aria-atomic", "true");
     this.liveRegionEl.style.position = "absolute";
@@ -6685,6 +6769,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
   dispose() {
     this.#clearTimers();
     this.#unsubscribeEvents();
+    this.#historyListeners.clear();
     if (this.eventBus && getToastBus() === this.eventBus) setToastBus(null);
     this.#items.forEach((entry) => entry.bar?.dispose());
     this.#items.clear();
@@ -6717,7 +6802,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
       if (idx !== -1) {
         const [removed] = this.notifications.splice(idx, 1);
         this.#stopTimer(removed.id);
-        this.#recordHistory({ ...removed, dismissed: true, reason: "overflow" });
+        this.#recordDismissal(removed, "overflow");
       }
     }
     this.#recordHistory(normalized);
@@ -6732,13 +6817,13 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
       const h = this.held.findIndex((item) => item.id === notificationId);
       if (h === -1) return false;
       const [gone] = this.held.splice(h, 1);
-      this.#recordHistory({ ...gone, dismissed: true, reason });
+      this.#recordDismissal(gone, reason);
       this.#render();
       return true;
     }
     const [removed] = this.notifications.splice(idx, 1);
     this.#stopTimer(notificationId);
-    this.#recordHistory({ ...removed, dismissed: true, reason });
+    this.#recordDismissal(removed, reason);
     this.#rebalance();
     this.#render();
     return true;
@@ -6965,12 +7050,40 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
     this.activeTimers.forEach((timer) => clearTimeout(timer));
     this.activeTimers.clear();
   }
+  /**
+   * Hear of every entry added to `history`, by `show()`, `warn()`/`error()`/
+   * `info()`/`success()` and the bus alike: `listener(entry, center)`, once
+   * per toast, after the entry is in `history`. A dismissal changes the
+   * toast's own entry and is not an entry of its own. Answers the unsubscribe.
+   */
+  subscribe(listener) {
+    if (typeof listener !== "function") return () => {
+    };
+    this.#historyListeners.add(listener);
+    return () => {
+      this.#historyListeners.delete(listener);
+    };
+  }
   #recordHistory(entry) {
     if (entry.skipHistory) return;
     this.history.push(entry);
     if (this.history.length > this.historyLimit) {
       this.history.shift();
     }
+    [...this.#historyListeners].forEach((listener) => {
+      try {
+        listener(entry, this);
+      } catch (err) {
+        this.logger?.warn?.("twm-notification-center", "History listener failed", { err });
+      }
+    });
+  }
+  /** A toast that left marks its own entry: one toast, one entry. */
+  #recordDismissal(notification, reason) {
+    if (notification.skipHistory) return;
+    const at = this.history.findLastIndex((entry) => entry.id === notification.id);
+    if (at === -1) return;
+    this.history[at] = { ...notification, dismissed: true, reason };
   }
   /** A progress toast that has not been given an outcome yet. */
   static #isRunning(notification) {
@@ -7085,7 +7198,7 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
     if (!this.#summaryEl) {
       const more2 = document.createElement("button");
       more2.type = "button";
-      more2.className = "notification twm-notification--summary";
+      more2.className = "twm-notification twm-notification--summary";
       more2.addEventListener("click", () => {
         const held = [...this.held];
         try {
@@ -7212,8 +7325,8 @@ var NotificationCenter = class _NotificationCenter extends ComponentBase {
   #patchItem(entry, notification) {
     const item = entry.el;
     if (entry.severity !== notification.severity) {
-      if (entry.severity) item.classList.remove(`notification--${entry.severity}`);
-      item.classList.add("notification", `notification--${notification.severity}`);
+      if (entry.severity) item.classList.remove(`twm-notification--${entry.severity}`);
+      item.classList.add("twm-notification", `twm-notification--${notification.severity}`);
       entry.severity = notification.severity;
     }
     if (entry.titleEl) _NotificationCenter.#setText(entry.titleEl, notification.title);
@@ -8393,6 +8506,7 @@ export {
   SCALAR_TYPES,
   SETTINGS_TEXT_DEBOUNCE_MS,
   STEP_STATES,
+  SettingsCategories,
   SettingsView,
   SlideOutPanel,
   SliderField,