@multiplatform.one/backoffice 6.3.0

package/dist/cjs/chrome/notifications-data.native.js

@@ -0,0 +1,271 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var notifications_data_exports = {};
+__export(notifications_data_exports, {
+  useNotifications: () => useNotifications
+});
+module.exports = __toCommonJS(notifications_data_exports);
+var import_react = __toESM(require("react"));
+var import_frappe = require("@multiplatform.one/frappe");
+var import_frappe_ui = require("@multiplatform.one/frappe-ui");
+var import_react2 = require("react");
+var import_useFrappeApp = require("../shared/useFrappeApp.native.js");
+var import_notifications_utils = require("./notifications-utils.native.js");
+var NOTIFICATION_FIELDS = ["name", "subject", "type", "document_type", "document_name", "read", "from_user", "creation"];
+var NOTIFICATION_WINDOW_LIMIT = 100;
+var MARK_AS_READ_METHOD = "frappe.desk.doctype.notification_log.notification_log.mark_as_read";
+var MARK_ALL_AS_READ_METHOD = "frappe.desk.doctype.notification_log.notification_log.mark_all_as_read";
+var sessionUserCache = /* @__PURE__ */new WeakMap();
+function useNotificationsSessionUser(fixtureMode) {
+  var app = (0, import_useFrappeApp.useFrappeApp)();
+  var [state, setState] = (0, import_react2.useState)({
+    resolved: false
+  });
+  (0, import_react2.useEffect)(function () {
+    if (fixtureMode || !app) {
+      setState({
+        resolved: true
+      });
+      return;
+    }
+    var cancelled = false;
+    var promise = sessionUserCache.get(app);
+    if (!promise) {
+      promise = app.call().get("frappe.auth.get_logged_user").then(function (res) {
+        var _res_payload;
+        var user = (_res_payload = res.payload) === null || _res_payload === void 0 ? void 0 : _res_payload.message;
+        return user && user !== "Guest" ? user : void 0;
+      }).catch(function () {
+        sessionUserCache.delete(app);
+        return void 0;
+      });
+      sessionUserCache.set(app, promise);
+    }
+    promise.then(function (user) {
+      if (!cancelled) setState({
+        user,
+        resolved: true
+      });
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [app, fixtureMode]);
+  return state;
+}
+async function setReadViaSetValue(app, name) {
+  await app.call().post("frappe.client.set_value", {
+    doctype: "Notification Log",
+    name,
+    fieldname: "read",
+    value: 1
+  });
+}
+async function markAsReadOnServer(app, name) {
+  try {
+    await app.call().post(MARK_AS_READ_METHOD, {
+      docname: name
+    });
+  } catch (unused) {
+    await setReadViaSetValue(app, name);
+  }
+}
+async function markAllAsReadOnServer(app, unreadNames) {
+  try {
+    await app.call().post(MARK_ALL_AS_READ_METHOD, {});
+  } catch (unused) {
+    await Promise.all(unreadNames.map(function (name) {
+      return setReadViaSetValue(app, name);
+    }));
+  }
+}
+function useNotifications() {
+  var config = (0, import_frappe_ui.useFrappeConfig)();
+  var app = (0, import_useFrappeApp.useFrappeApp)();
+  var fixtureMode = Boolean(config === null || config === void 0 ? void 0 : config.fixtures);
+  var {
+    user: sessionUser,
+    resolved: sessionResolved
+  } = useNotificationsSessionUser(fixtureMode);
+  var connectionConfig = (0, import_react2.useMemo)(function () {
+    return config ? {
+      baseURL: config.baseURL,
+      socketPort: config.socketPort,
+      auth: config.auth,
+      syncOptions: config.syncOptions,
+      socketOptions: config.socketOptions,
+      fixtures: config.fixtures
+    } : void 0;
+  }, [config]);
+  var ready = Boolean(connectionConfig) && (fixtureMode || Boolean(sessionUser));
+  var collection = (0, import_frappe.useFrappeCollection)(ready ? connectionConfig : void 0, "Notification Log", {
+    fields: NOTIFICATION_FIELDS,
+    filters: !fixtureMode && sessionUser ? [["for_user", "=", sessionUser]] : void 0,
+    orderBy: {
+      field: "creation",
+      order: import_frappe.Order.Desc
+    },
+    limit: NOTIFICATION_WINDOW_LIMIT
+  });
+  var {
+    data: rawData,
+    isLoading: queryLoading
+  } = (0, import_frappe.useLiveQuery)(function (q) {
+    return collection ? q.from({
+      _notification: collection
+    }) : null;
+  }, [collection]);
+  var [readOverrides, setReadOverrides] = (0, import_react2.useState)(/* @__PURE__ */new Set());
+  var items = (0, import_react2.useMemo)(function () {
+    var docs = rawData !== null && rawData !== void 0 ? rawData : [];
+    return docs.filter(function (doc) {
+      return doc.name;
+    }).map(function (doc) {
+      return {
+        ...doc,
+        unread: !doc.read && !readOverrides.has(doc.name),
+        subjectText: (0, import_notifications_utils.stripHtmlToText)(doc.subject),
+        timestampMs: (0, import_notifications_utils.parseFrappeTimestamp)(doc.creation)
+      };
+    }).sort(function (a, b) {
+      var _b_timestampMs, _a_timestampMs;
+      return ((_b_timestampMs = b.timestampMs) !== null && _b_timestampMs !== void 0 ? _b_timestampMs : 0) - ((_a_timestampMs = a.timestampMs) !== null && _a_timestampMs !== void 0 ? _a_timestampMs : 0) || a.name.localeCompare(b.name);
+    });
+  }, [rawData, readOverrides]);
+  var unreadCount = (0, import_react2.useMemo)(function () {
+    return items.filter(function (item) {
+      return item.unread;
+    }).length;
+  }, [items]);
+  var isLoading = Boolean(connectionConfig) && !fixtureMode && !sessionResolved ||
+  // Session resolved without a user (Guest / unreachable bench): settle on
+  // an empty feed instead of skeleting forever.
+  ready && (collection === void 0 || Boolean(queryLoading));
+  var addOverrides = (0, import_react2.useCallback)(function (names) {
+    if (!names.length) return;
+    setReadOverrides(function (prev) {
+      var next = new Set(prev);
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = names[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var name = _step.value;
+          next.add(name);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      return next;
+    });
+  }, []);
+  var removeOverrides = (0, import_react2.useCallback)(function (names) {
+    if (!names.length) return;
+    setReadOverrides(function (prev) {
+      var next = new Set(prev);
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      try {
+        for (var _iterator = names[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var name = _step.value;
+          next.delete(name);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+      return next;
+    });
+  }, []);
+  var markAsRead = (0, import_react2.useCallback)(async function (name) {
+    addOverrides([name]);
+    if (fixtureMode || !app) return;
+    try {
+      await markAsReadOnServer(app, name);
+    } catch (err) {
+      removeOverrides([name]);
+      throw err;
+    }
+  }, [app, fixtureMode, addOverrides, removeOverrides]);
+  var markAllAsRead = (0, import_react2.useCallback)(async function () {
+    var unreadNames = items.filter(function (item) {
+      return item.unread;
+    }).map(function (item) {
+      return item.name;
+    });
+    if (!unreadNames.length) return;
+    addOverrides(unreadNames);
+    if (fixtureMode || !app) return;
+    try {
+      await markAllAsReadOnServer(app, unreadNames);
+    } catch (err) {
+      removeOverrides(unreadNames);
+      throw err;
+    }
+  }, [app, fixtureMode, items, addOverrides, removeOverrides]);
+  return (0, import_react2.useMemo)(function () {
+    return {
+      items,
+      unreadCount,
+      isLoading,
+      markAsRead,
+      markAllAsRead
+    };
+  }, [items, unreadCount, isLoading, markAsRead, markAllAsRead]);
+}
+//# sourceMappingURL=notifications-data.native.js.map

package/dist/cjs/chrome/notifications-data.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["to","__toESM","mod","isNodeMode","target","__create","__getProtoOf","__copyProps","__esModule","__defProp","value","enumerable","__toCommonJS","notifications_data_exports","__export","useNotifications","module","exports","import_react","require","import_frappe","import_frappe_ui","import_react2","import_useFrappeApp","import_notifications_utils","NOTIFICATION_FIELDS","NOTIFICATION_WINDOW_LIMIT","MARK_AS_READ_METHOD","MARK_ALL_AS_READ_METHOD","sessionUserCache","WeakMap","useNotificationsSessionUser","fixtureMode","app","useFrappeApp","state","setState","useState","resolved","useEffect","cancelled","promise","get","call","then","res","_res_payload","user","payload","message","catch","delete","set","setReadViaSetValue","name","post","doctype","fieldname","markAsReadOnServer","docname","unused","markAllAsReadOnServer","unreadNames","Promise","all","map","config","useFrappeConfig","Boolean","fixtures","sessionUser","sessionResolved","connectionConfig","useMemo","baseURL","socketPort","auth","syncOptions","socketOptions","ready","collection","useFrappeCollection","fields","filters","orderBy","field","order","Order","Desc","limit","data","rawData","isLoading","queryLoading","useLiveQuery","q","from","_notification","readOverrides","setReadOverrides","Set","items","docs","filter","doc","unread","read","has","subjectText","stripHtmlToText","subject","timestampMs","parseFrappeTimestamp","creation","sort","a","b","_b_timestampMs","_a_timestampMs","localeCompare","unreadCount","item","length"],"sources":["../../../src/chrome/notifications-data.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/chrome/notifications-panel.cjs

@@ -0,0 +1,171 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var notifications_panel_exports = {};
+__export(notifications_panel_exports, {
+  NotificationsPanel: () => NotificationsPanel
+});
+module.exports = __toCommonJS(notifications_panel_exports);
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function NotificationRow({
+  item,
+  onPress
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const subject = item.subjectText || t("notifications.untitled", "Notification");
+  const relative = (0, import_theme.formatRelativeTimestamp)(item.timestampMs ?? item.creation);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    alignItems: "flex-start",
+    gap: "$3",
+    paddingHorizontal: "$3",
+    paddingVertical: "$2.5",
+    backgroundColor: item.unread ? "$color2" : "transparent",
+    hoverStyle: {
+      backgroundColor: "$color3"
+    },
+    pressStyle: {
+      backgroundColor: "$color4"
+    },
+    cursor: "pointer",
+    onPress,
+    role: "button",
+    "aria-label": subject,
+    "data-testid": "backoffice-notification-row",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+      name: item.from_user || "?",
+      size: "$2.5"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flex: 1,
+      minWidth: 0,
+      gap: "$1",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$3",
+        fontWeight: item.unread ? "600" : "400",
+        color: item.unread ? "$color12" : "$color11",
+        numberOfLines: 2,
+        children: subject
+      }), relative ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color9",
+        children: relative
+      }) : null]
+    }), item.unread && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.View, {
+      width: 8,
+      height: 8,
+      borderRadius: 1e3,
+      backgroundColor: "$accentBackground",
+      marginTop: "$1.5",
+      flexShrink: 0,
+      "aria-hidden": true
+    })]
+  });
+}
+function NotificationSkeletonRows() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    "data-testid": "backoffice-notifications-loading",
+    children: Array.from({
+      length: 3
+    }, (_, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$3",
+      paddingHorizontal: "$3",
+      paddingVertical: "$2.5",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkeletonCircle, {
+        size: 28
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+        flex: 1,
+        gap: "$1.5",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          height: 12,
+          width: "85%"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+          height: 10,
+          width: 64
+        })]
+      })]
+    }, index))
+  });
+}
+function NotificationsPanel({
+  items,
+  isLoading,
+  width,
+  onItemPress,
+  onMarkAllRead
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  const hasUnread = items.some(item => item.unread);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    width,
+    maxWidth: "100%",
+    paddingVertical: "$2",
+    "data-testid": "backoffice-notifications-panel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$2",
+      paddingHorizontal: "$3",
+      paddingBottom: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        size: "$4",
+        fontWeight: "700",
+        flex: 1,
+        numberOfLines: 1,
+        children: t("notifications.title", "Notifications")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+        chromeless: true,
+        size: "$2",
+        disabled: !hasUnread,
+        opacity: hasUnread ? 1 : 0.5,
+        onPress: onMarkAllRead,
+        "data-testid": "backoffice-notifications-mark-all",
+        children: t("notifications.markAllRead", "Mark all as read")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+        chromeless: true,
+        circular: true,
+        size: "$2",
+        icon: import_react.GearSixIcon,
+        disabled: true,
+        opacity: 0.5,
+        "aria-label": t("notifications.settingsUnavailable", "Notification settings (not available yet)")
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Separator, {}), isLoading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NotificationSkeletonRows, {}) : items.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+      compact: true,
+      paddingVertical: "$6",
+      title: t("notifications.emptyTitle", "No new notifications"),
+      description: t("notifications.emptyDescription", "Mentions, assignments, and shares will show up here.")
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      children: items.map(item => /* @__PURE__ */(0, import_jsx_runtime.jsx)(NotificationRow, {
+        item,
+        onPress: () => onItemPress(item)
+      }, item.name))
+    })]
+  });
+}

package/dist/cjs/chrome/notifications-panel.native.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var notifications_panel_exports = {};
+__export(notifications_panel_exports, {
+  NotificationsPanel: () => NotificationsPanel
+});
+module.exports = __toCommonJS(notifications_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_i18n = require("../i18n/index.native.js");
+function NotificationRow(param) {
+  var {
+    item,
+    onPress
+  } = param;
+  var _item_timestampMs;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  var subject = item.subjectText || t("notifications.untitled", "Notification");
+  var relative = (0, import_theme.formatRelativeTimestamp)((_item_timestampMs = item.timestampMs) !== null && _item_timestampMs !== void 0 ? _item_timestampMs : item.creation);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+    alignItems: "flex-start",
+    gap: "$3",
+    paddingHorizontal: "$3",
+    paddingVertical: "$2.5",
+    backgroundColor: item.unread ? "$color2" : "transparent",
+    hoverStyle: {
+      backgroundColor: "$color3"
+    },
+    pressStyle: {
+      backgroundColor: "$color4"
+    },
+    cursor: "pointer",
+    onPress,
+    role: "button",
+    "aria-label": subject,
+    "data-testid": "backoffice-notification-row",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Avatar, {
+      name: item.from_user || "?",
+      size: "$2.5"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+      flex: 1,
+      minWidth: 0,
+      gap: "$1",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$3",
+        fontWeight: item.unread ? "600" : "400",
+        color: item.unread ? "$color12" : "$color11",
+        numberOfLines: 2,
+        children: subject
+      }), relative ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$2",
+        color: "$color9",
+        children: relative
+      }) : null]
+    }), item.unread && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.View, {
+      width: 8,
+      height: 8,
+      borderRadius: 1e3,
+      backgroundColor: "$accentBackground",
+      marginTop: "$1.5",
+      flexShrink: 0,
+      "aria-hidden": true
+    })]
+  });
+}
+function NotificationSkeletonRows() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+    "data-testid": "backoffice-notifications-loading",
+    children: Array.from({
+      length: 3
+    }, function (_, index) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        alignItems: "center",
+        gap: "$3",
+        paddingHorizontal: "$3",
+        paddingVertical: "$2.5",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SkeletonCircle, {
+          size: 28
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+          flex: 1,
+          gap: "$1.5",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            height: 12,
+            width: "85%"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Skeleton, {
+            height: 10,
+            width: 64
+          })]
+        })]
+      }, index);
+    })
+  });
+}
+function NotificationsPanel(param) {
+  var {
+    items,
+    isLoading,
+    width,
+    onItemPress,
+    onMarkAllRead
+  } = param;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
+  var hasUnread = items.some(function (item) {
+    return item.unread;
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    width,
+    maxWidth: "100%",
+    paddingVertical: "$2",
+    "data-testid": "backoffice-notifications-panel",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      alignItems: "center",
+      gap: "$2",
+      paddingHorizontal: "$3",
+      paddingBottom: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SizableText, {
+        size: "$4",
+        fontWeight: "700",
+        flex: 1,
+        numberOfLines: 1,
+        children: t("notifications.title", "Notifications")
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Button, {
+        chromeless: true,
+        size: "$2",
+        disabled: !hasUnread,
+        opacity: hasUnread ? 1 : 0.5,
+        onPress: onMarkAllRead,
+        "data-testid": "backoffice-notifications-mark-all",
+        children: t("notifications.markAllRead", "Mark all as read")
+      }),
+      /* Desk links to /app/notification-settings; the backoffice has no
+      settings surface yet — disabled placeholder documents the gap. */
+      /* @__PURE__ */
+      (0, import_jsx_runtime.jsx)(import_components.Button, {
+        chromeless: true,
+        circular: true,
+        size: "$2",
+        icon: import_react.GearSixIcon,
+        disabled: true,
+        opacity: 0.5,
+        "aria-label": t("notifications.settingsUnavailable", "Notification settings (not available yet)")
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Separator, {}), isLoading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(NotificationSkeletonRows, {}) : items.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.EmptyState, {
+      compact: true,
+      paddingVertical: "$6",
+      title: t("notifications.emptyTitle", "No new notifications"),
+      description: t("notifications.emptyDescription", "Mentions, assignments, and shares will show up here.")
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+      children: items.map(function (item) {
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(NotificationRow, {
+          item,
+          onPress: function onPress() {
+            return onItemPress(item);
+          }
+        }, item.name);
+      })
+    })]
+  });
+}
+//# sourceMappingURL=notifications-panel.native.js.map

package/dist/cjs/chrome/notifications-panel.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","notifications_panel_exports","__export","NotificationsPanel","module","exports","import_jsx_runtime","require","import_components","import_theme","import_react","import_react_i18next","import_i18n","NotificationRow","param","item","onPress","_item_timestampMs","t","useTranslation","BACKOFFICE_I18N_NAMESPACE","subject","subjectText","relative","formatRelativeTimestamp","timestampMs","creation","jsxs","XStack","alignItems","gap","paddingHorizontal","paddingVertical","backgroundColor","unread","hoverStyle","pressStyle","cursor","role","children","jsx","Avatar","name","from_user","size","YStack","flex","minWidth","Text","fontSize","fontWeight","color","numberOfLines","View","width","height","borderRadius","marginTop","flexShrink","NotificationSkeletonRows","Array","from","length","_","index","SkeletonCircle","Skeleton","items","isLoading","onItemPress","onMarkAllRead","hasUnread","some","maxWidth","paddingBottom","SizableText","Button","chromeless","disabled","opacity","circular"],"sources":["../../../src/chrome/notifications-panel.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}