@trops/dash-core 0.1.470 → 0.1.472

package/dist/index.esm.js

@@ -52874,11 +52874,12 @@ var EditField = function EditField(_ref7) {
 
 function ownKeys$h(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var GLOBAL_KEY = "__global__";
 var NotificationsSection = function NotificationsSection(_ref) {
   var _ref$workspaces = _ref.workspaces,
     workspaces = _ref$workspaces === void 0 ? [] : _ref$workspaces;
-  var appContext = useContext(AppContext);
-  appContext === null || appContext === void 0 ? void 0 : appContext.dashApi;
+  useContext(AppContext);
+
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     globalEnabled = _useState2[0],
@@ -52895,6 +52896,22 @@ var NotificationsSection = function NotificationsSection(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     loading = _useState8[0],
     setLoading = _useState8[1];
+  var _useState9 = useState(""),
+    _useState0 = _slicedToArray(_useState9, 2),
+    searchQuery = _useState0[0],
+    setSearchQuery = _useState0[1];
+  var _useState1 = useState(GLOBAL_KEY),
+    _useState10 = _slicedToArray(_useState1, 2),
+    selectedKey = _useState10[0],
+    setSelectedKey = _useState10[1];
+  var _useState11 = useState("all"),
+    _useState12 = _slicedToArray(_useState11, 2),
+    filterDashboard = _useState12[0],
+    setFilterDashboard = _useState12[1];
+  var _useState13 = useState("all"),
+    _useState14 = _slicedToArray(_useState13, 2),
+    filterPackage = _useState14[0],
+    setFilterPackage = _useState14[1];
 
   // Load preferences on mount
   useEffect(function () {
@@ -52911,38 +52928,79 @@ var NotificationsSection = function NotificationsSection(_ref) {
     });
   }, []);
 
-  // Collect all widget instances with notifications from workspaces.
-  // Route through `ComponentManager.resolve` so a legacy layout
-  // referencing a bare component name still finds its registered
-  // scoped form (post-v0.1.432). Direct `componentMap[item.component]`
-  // returns undefined for bare names after the migration.
-  var widgetInstances = [];
-  workspaces.forEach(function (ws) {
-    var items = flattenLayout(ws.layout);
-    items.forEach(function (item) {
-      var _config$notifications;
-      var config = ComponentManager.resolve(item.component, item);
-      if ((config === null || config === void 0 || (_config$notifications = config.notifications) === null || _config$notifications === void 0 ? void 0 : _config$notifications.length) > 0) {
-        var _item$userPrefs;
-        widgetInstances.push({
-          uuid: item.uuid || item.uuidString,
-          componentName: item.component,
-          title: ((_item$userPrefs = item.userPrefs) === null || _item$userPrefs === void 0 ? void 0 : _item$userPrefs.title) || config.displayName || item.component,
-          workspaceName: ws.name || ws.id,
-          notifications: config.notifications,
-          "package": config["package"]
-        });
-      }
+  // Collect every widget instance with notifications, alphabetized
+  // by display title. Route through `ComponentManager.resolve` so a
+  // legacy layout referencing a bare component name still finds the
+  // registered scoped form.
+  var widgetInstances = useMemo(function () {
+    var out = [];
+    workspaces.forEach(function (ws) {
+      var items = flattenLayout(ws.layout);
+      items.forEach(function (item) {
+        var _config$notifications;
+        var config = ComponentManager.resolve(item.component, item);
+        if ((config === null || config === void 0 || (_config$notifications = config.notifications) === null || _config$notifications === void 0 ? void 0 : _config$notifications.length) > 0) {
+          var _item$userPrefs;
+          out.push({
+            uuid: item.uuid || item.uuidString,
+            componentName: item.component,
+            title: ((_item$userPrefs = item.userPrefs) === null || _item$userPrefs === void 0 ? void 0 : _item$userPrefs.title) || config.displayName || item.component,
+            workspaceName: ws.name || ws.id,
+            notifications: config.notifications,
+            "package": config["package"] || "Other"
+          });
+        }
+      });
     });
-  });
+    return out.sort(function (a, b) {
+      return String(a.title).localeCompare(String(b.title), undefined, {
+        sensitivity: "base"
+      });
+    });
+  }, [workspaces]);
 
-  // Group by package
-  var grouped = {};
-  widgetInstances.forEach(function (wi) {
-    var pkg = wi["package"] || "Other";
-    if (!grouped[pkg]) grouped[pkg] = [];
-    grouped[pkg].push(wi);
-  });
+  // Derive dropdown option lists. Both sorted alphabetically so the
+  // dropdowns don't shuffle as the underlying list changes order.
+  var dashboardOptions = useMemo(function () {
+    var set = new Set();
+    widgetInstances.forEach(function (wi) {
+      if (wi.workspaceName) set.add(wi.workspaceName);
+    });
+    return _toConsumableArray(set).sort(function (a, b) {
+      return String(a).localeCompare(String(b), undefined, {
+        sensitivity: "base"
+      });
+    });
+  }, [widgetInstances]);
+  var packageOptions = useMemo(function () {
+    var set = new Set();
+    widgetInstances.forEach(function (wi) {
+      if (wi["package"]) set.add(wi["package"]);
+    });
+    return _toConsumableArray(set).sort(function (a, b) {
+      return String(a).localeCompare(String(b), undefined, {
+        sensitivity: "base"
+      });
+    });
+  }, [widgetInstances]);
+  var hasActiveFilters = searchQuery.trim() !== "" || filterDashboard !== "all" || filterPackage !== "all";
+  var clearFilters = function clearFilters() {
+    setSearchQuery("");
+    setFilterDashboard("all");
+    setFilterPackage("all");
+  };
+
+  // Filter by search + dashboard + package (composed AND).
+  var filteredInstances = useMemo(function () {
+    var q = searchQuery.trim().toLowerCase();
+    return widgetInstances.filter(function (wi) {
+      if (filterDashboard !== "all" && wi.workspaceName !== filterDashboard) return false;
+      if (filterPackage !== "all" && wi["package"] !== filterPackage) return false;
+      if (!q) return true;
+      var hay = [wi.title, wi["package"], wi.workspaceName, wi.componentName].filter(Boolean).join(" ").toLowerCase();
+      return hay.includes(q);
+    });
+  }, [widgetInstances, searchQuery, filterDashboard, filterPackage]);
   function handleGlobalToggle(value) {
     var _window$mainApi2;
     setGlobalEnabled(value);
@@ -52976,16 +53034,126 @@ var NotificationsSection = function NotificationsSection(_ref) {
       children: "Loading notification preferences..."
     });
   }
-  return /*#__PURE__*/jsx("div", {
-    className: "flex-1 overflow-y-auto p-6",
-    children: /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col space-y-6",
-      children: [/*#__PURE__*/jsxs("div", {
+
+  // ── Left list ──────────────────────────────────────────────────────
+  var listContent = /*#__PURE__*/jsxs("div", {
+    className: "flex flex-col h-full",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-2 px-3 py-2 flex-shrink-0 border-b border-white/10",
+      children: [/*#__PURE__*/jsx(SearchInput, {
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: "Search widgets...",
+        inputClassName: "py-1.5 text-xs"
+      }), /*#__PURE__*/jsxs("div", {
+        className: "grid grid-cols-2 gap-1.5",
+        children: [/*#__PURE__*/jsxs("select", {
+          value: filterDashboard,
+          onChange: function onChange(e) {
+            return setFilterDashboard(e.target.value);
+          },
+          className: "w-full px-2 py-1 text-xs bg-gray-800/50 border border-white/10 rounded text-gray-200 focus:outline-none",
+          children: [/*#__PURE__*/jsx("option", {
+            value: "all",
+            children: "All Dashboards"
+          }), dashboardOptions.map(function (d) {
+            return /*#__PURE__*/jsx("option", {
+              value: d,
+              children: d
+            }, d);
+          })]
+        }), /*#__PURE__*/jsxs("select", {
+          value: filterPackage,
+          onChange: function onChange(e) {
+            return setFilterPackage(e.target.value);
+          },
+          className: "w-full px-2 py-1 text-xs bg-gray-800/50 border border-white/10 rounded text-gray-200 focus:outline-none",
+          children: [/*#__PURE__*/jsx("option", {
+            value: "all",
+            children: "All Packages"
+          }), packageOptions.map(function (p) {
+            return /*#__PURE__*/jsx("option", {
+              value: p,
+              children: p
+            }, p);
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-between text-[10px] px-0.5",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "opacity-50",
+          children: hasActiveFilters ? "".concat(filteredInstances.length, " of ").concat(widgetInstances.length, " widgets") : "".concat(widgetInstances.length, " widget").concat(widgetInstances.length === 1 ? "" : "s")
+        }), hasActiveFilters && /*#__PURE__*/jsx("button", {
+          type: "button",
+          onClick: clearFilters,
+          className: "opacity-60 hover:opacity-100 transition-opacity text-gray-300 hover:bg-white/10 px-1.5 py-0.5 rounded",
+          children: "Clear"
+        })]
+      })]
+    }), /*#__PURE__*/jsxs(Sidebar.Content, {
+      children: [/*#__PURE__*/jsx(Sidebar.Item, {
+        icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: globalEnabled ? "bell" : "bell-slash",
+          className: "h-3.5 w-3.5"
+        }),
+        active: selectedKey === GLOBAL_KEY,
+        onClick: function onClick() {
+          return setSelectedKey(GLOBAL_KEY);
+        },
+        children: /*#__PURE__*/jsxs("span", {
+          className: "flex flex-col",
+          children: [/*#__PURE__*/jsx("span", {
+            className: "font-medium",
+            children: "Global"
+          }), /*#__PURE__*/jsx("span", {
+            className: "text-[10px] opacity-40",
+            children: "Master switch + Do Not Disturb"
+          })]
+        })
+      }), filteredInstances.length === 0 && widgetInstances.length === 0 && /*#__PURE__*/jsx("div", {
+        className: "px-3 py-2 text-xs opacity-50",
+        children: "No widgets with notification support found. Add widgets that declare notifications to see per-type controls here."
+      }), filteredInstances.length === 0 && widgetInstances.length > 0 && /*#__PURE__*/jsxs("div", {
+        className: "px-3 py-2 text-xs opacity-50",
+        children: ["No widgets match \"", searchQuery, "\"."]
+      }), filteredInstances.map(function (wi) {
+        var isActive = selectedKey === wi.uuid;
+        return /*#__PURE__*/jsx(Sidebar.Item, {
+          icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+            icon: "bell",
+            className: "h-3.5 w-3.5"
+          }),
+          active: isActive,
+          onClick: function onClick() {
+            return setSelectedKey(wi.uuid);
+          },
+          className: isActive ? "bg-white/10 opacity-100" : "",
+          children: /*#__PURE__*/jsxs("span", {
+            className: "flex flex-col",
+            children: [/*#__PURE__*/jsx("span", {
+              className: "font-medium truncate",
+              children: wi.title
+            }), /*#__PURE__*/jsxs("span", {
+              className: "text-[10px] opacity-40 truncate",
+              children: [wi["package"], wi.workspaceName ? " \xB7 ".concat(wi.workspaceName) : ""]
+            })]
+          })
+        }, wi.uuid);
+      })]
+    })]
+  });
+
+  // ── Right detail ───────────────────────────────────────────────────
+  var detailContent;
+  if (selectedKey === GLOBAL_KEY) {
+    detailContent = /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col p-6 space-y-6",
+      children: [/*#__PURE__*/jsx(SubHeading3, {
+        title: "Global",
+        padding: false
+      }), /*#__PURE__*/jsxs("div", {
         className: "flex flex-col space-y-3",
-        children: [/*#__PURE__*/jsx(SubHeading3, {
-          title: "Global",
-          padding: false
-        }), /*#__PURE__*/jsxs("div", {
+        children: [/*#__PURE__*/jsxs("div", {
           className: "flex flex-row items-center justify-between py-2",
           children: [/*#__PURE__*/jsxs("div", {
             className: "flex flex-col",
@@ -53016,49 +53184,59 @@ var NotificationsSection = function NotificationsSection(_ref) {
             onChange: handleDndToggle
           })]
         })]
-      }), Object.keys(grouped).length > 0 ? Object.entries(grouped).map(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          pkg = _ref3[0],
-          widgets = _ref3[1];
-        return /*#__PURE__*/jsxs("div", {
-          className: "flex flex-col space-y-3",
+      })]
+    });
+  } else {
+    var wi = widgetInstances.find(function (w) {
+      return w.uuid === selectedKey;
+    });
+    if (!wi) {
+      detailContent = /*#__PURE__*/jsx("div", {
+        className: "flex-1 p-6 text-sm opacity-50",
+        children: "Select a widget on the left to configure its notifications."
+      });
+    } else {
+      detailContent = /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col p-6 space-y-4",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "flex flex-col space-y-1",
           children: [/*#__PURE__*/jsx(SubHeading3, {
-            title: pkg,
+            title: wi.title,
             padding: false
-          }), widgets.map(function (wi) {
+          }), /*#__PURE__*/jsxs("span", {
+            className: "text-xs opacity-50",
+            children: [wi["package"], wi.workspaceName ? " \xB7 ".concat(wi.workspaceName) : ""]
+          })]
+        }), /*#__PURE__*/jsx("div", {
+          className: "flex flex-col space-y-3",
+          children: wi.notifications.map(function (notif) {
             return /*#__PURE__*/jsxs("div", {
-              className: "flex flex-col space-y-2 pl-2 border-l-2 border-white/10",
-              children: [/*#__PURE__*/jsx("span", {
-                className: "text-sm font-medium opacity-80",
-                children: wi.title
-              }), wi.notifications.map(function (notif) {
-                return /*#__PURE__*/jsxs("div", {
-                  className: "flex flex-row items-center justify-between py-1 pl-2",
-                  children: [/*#__PURE__*/jsxs("div", {
-                    className: "flex flex-col",
-                    children: [/*#__PURE__*/jsx("span", {
-                      className: "text-sm",
-                      children: notif.displayName
-                    }), notif.description && /*#__PURE__*/jsx("span", {
-                      className: "text-xs opacity-50",
-                      children: notif.description
-                    })]
-                  }), /*#__PURE__*/jsx(Switch, {
-                    checked: getTypeEnabled(wi.uuid, notif.key, notif.defaultEnabled),
-                    onChange: function onChange(value) {
-                      return handleTypeToggle(wi.uuid, notif.key, value);
-                    }
-                  })]
-                }, notif.key);
+              className: "flex flex-row items-center justify-between py-1",
+              children: [/*#__PURE__*/jsxs("div", {
+                className: "flex flex-col",
+                children: [/*#__PURE__*/jsx("span", {
+                  className: "text-sm",
+                  children: notif.displayName
+                }), notif.description && /*#__PURE__*/jsx("span", {
+                  className: "text-xs opacity-50",
+                  children: notif.description
+                })]
+              }), /*#__PURE__*/jsx(Switch, {
+                checked: getTypeEnabled(wi.uuid, notif.key, notif.defaultEnabled),
+                onChange: function onChange(value) {
+                  return handleTypeToggle(wi.uuid, notif.key, value);
+                }
               })]
-            }, wi.uuid);
-          })]
-        }, pkg);
-      }) : /*#__PURE__*/jsx("div", {
-        className: "text-sm opacity-50",
-        children: "No widgets with notification support found. Add widgets that declare notifications to see per-type controls here."
-      })]
-    })
+            }, notif.key);
+          })
+        })]
+      });
+    }
+  }
+  return /*#__PURE__*/jsx(SectionLayout, {
+    listContent: listContent,
+    detailContent: detailContent,
+    emptyDetailMessage: "Select a widget to configure notifications"
   });
 };