strapi-plugin-notifier 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 datrine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# strapi-plugin-notifier
+
+A first-class notification system for Strapi v5 admin panels. Adds a live bell icon to the sidebar, a full notification inbox, a runtime Settings panel, and a simple API to send notifications from anywhere in your Strapi application.
+
+## Features
+
+- **Live bell icon** — badge count updated by polling the server (interval configurable)
+- **Notification inbox** — filter by type, mark as read, dismiss, load more, clear all
+- **Targeting** — broadcast to all admins, or target by user ID or role code
+- **Configurable** — poll interval, page size, retention policy, and UI accent colours
+- **Settings panel** — runtime configuration via Settings → Notifier (persisted in Strapi plugin store)
+- **Retention cron** — daily cleanup at 3 AM, respects maxDays and maxPerUser limits
+- **Strapi v5 only**
+
+## Installation
+
+```bash
+npm install strapi-plugin-notifier
+# or
+yarn add strapi-plugin-notifier
+```
+
+Enable the plugin in `config/plugins.ts`:
+
+```typescript
+export default {
+  notifier: {
+    enabled: true,
+    config: {
+      // all fields are optional — see Configuration below
+    },
+  },
+};
+```
+
+## Configuration
+
+All configuration is optional. Built-in defaults apply unless overridden.
+
+```typescript
+// config/plugins.ts
+export default {
+  notifier: {
+    enabled: true,
+    config: {
+      retention: {
+        maxDays: 90,       // delete notifications older than N days
+        maxPerUser: 500,   // cap notifications stored per user
+      },
+      delivery: {
+        pollIntervalMs: 30_000, // how often the Bell polls (ms)
+        pageSize: 20,           // notifications per page in inbox
+      },
+      ui: {
+        theme: {
+          accent: {
+            info:    '#4945ff',
+            success: '#5cb85c',
+            warning: '#f0ad4e',
+            error:   '#ee5e52',
+          },
+        },
+      },
+    },
+  },
+};
+```
+
+Settings can also be updated at runtime from the Strapi admin panel under **Settings → Notifier**. Runtime settings take precedence over `config/plugins.ts`.
+
+## Sending notifications
+
+Use the `notifier` service from anywhere in your Strapi code (services, controllers, lifecycles, webhooks):
+
+```typescript
+const notifier = strapi.plugin('notifier').service('notifier');
+
+// Broadcast to all admin users
+notifier.broadcast({ title: 'Maintenance scheduled', type: 'warning' });
+
+// Send to a specific role
+notifier.toRole('strapi-editor', {
+  title: 'New content submitted',
+  message: 'An article is waiting for review.',
+  url: '/content-manager/collection-types/api::article.article',
+});
+
+// Send to a specific admin user (by user ID)
+notifier.toUser(42, {
+  title: 'Your export is ready',
+  type: 'success',
+  url: '/uploads/export-2024.csv',
+});
+
+// Generic send with full control
+notifier.send({
+  title: 'Hello',
+  message: 'World',
+  type: 'info',
+  url: 'https://example.com',
+  to: { role: 'strapi-super-admin' },
+});
+```
+
+### Notification options
+
+| Field     | Type                                      | Required | Default     |
+|-----------|-------------------------------------------|----------|-------------|
+| `title`   | `string`                                  | Yes      | —           |
+| `message` | `string`                                  | No       | —           |
+| `type`    | `'info' \| 'success' \| 'warning' \| 'error'` | No  | `'info'`    |
+| `url`     | `string`                                  | No       | —           |
+
+## API routes
+
+All routes require `admin::isAuthenticatedAdmin`. The plugin mounts under `/notifier/`.
+
+| Method | Path                            | Description                          |
+|--------|---------------------------------|--------------------------------------|
+| GET    | `/notifier/notifications`       | List notifications (paginated)       |
+| PUT    | `/notifier/notifications/read-all` | Mark all as read                  |
+| DELETE | `/notifier/notifications`       | Clear all notifications              |
+| PUT    | `/notifier/notifications/:id/read` | Mark one as read                 |
+| DELETE | `/notifier/notifications/:id`   | Clear one notification               |
+| GET    | `/notifier/config`              | Fetch UI config (safe for frontend)  |
+| GET    | `/notifier/settings`            | Get full settings (requires permission) |
+| PUT    | `/notifier/settings`            | Update settings (requires permission) |
+| DELETE | `/notifier/settings`            | Reset settings to defaults           |
+
+Query parameters for `GET /notifier/notifications`:
+
+| Param      | Default | Description         |
+|------------|---------|---------------------|
+| `page`     | `1`     | Page number         |
+| `pageSize` | `20`    | Results per page    |
+
+## Permissions
+
+Two permissions are registered under the **Notifier** plugin section in **Settings → Roles**:
+
+- `plugin::notifier.settings.read` — view the settings panel
+- `plugin::notifier.settings.update` — save or reset settings
+
+## Content type
+
+Notifications are stored in `plugin::notifier.notification` (collection: `notifier_notifications`). The content type is hidden from Content Manager and Content-Type Builder by default.
+
+## License
+
+MIT

package/dist/_chunks/Index-CiDBgkGf.js

@@ -0,0 +1,310 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+require("react-dom/client");
+const icons = require("@strapi/icons");
+const index = require("./index-7WJGsVEY.js");
+require("@strapi/icons/symbols");
+const toStoreItem = (n) => ({
+  id: String(n.id),
+  title: n.title,
+  message: n.message ?? "",
+  type: n.type ?? "info",
+  read: n.read,
+  createdAt: n.createdAt,
+  url: n.url
+});
+const useNotificationActions = () => {
+  const { get, put, del } = index.useFetchClient();
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [pagination, setPagination] = React.useState(null);
+  const currentPage = React.useRef(1);
+  const fetchPage = React.useCallback(
+    async (page, append = false) => {
+      const { pageSize } = index.getConfig();
+      setIsLoading(true);
+      try {
+        const { data } = await get(
+          `/notifier/notifications?page=${page}&pageSize=${pageSize}`
+        );
+        if (Array.isArray(data?.data)) {
+          const incoming = data.data.map(toStoreItem);
+          if (append) {
+            index.setNotifications([...index.getNotifications(), ...incoming]);
+          } else {
+            index.setNotifications(incoming);
+          }
+          setPagination(data.pagination ?? null);
+          currentPage.current = page;
+        }
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [get]
+  );
+  const fetchAll = React.useCallback(() => fetchPage(1, false), [fetchPage]);
+  const loadMore = React.useCallback(() => {
+    if (!pagination || currentPage.current >= pagination.pageCount) return;
+    fetchPage(currentPage.current + 1, true);
+  }, [fetchPage, pagination]);
+  const handleMarkAsRead = React.useCallback(
+    async (id) => {
+      index.markAsRead(id);
+      try {
+        await put(`/notifier/notifications/${id}/read`);
+      } catch {
+      }
+    },
+    [put]
+  );
+  const handleMarkAllAsRead = React.useCallback(async () => {
+    index.markAllAsRead();
+    try {
+      await put("/notifier/notifications/read-all");
+    } catch {
+    }
+  }, [put]);
+  const handleClear = React.useCallback(
+    async (id) => {
+      index.clearNotification(id);
+      try {
+        await del(`/notifier/notifications/${id}`);
+      } catch {
+      }
+    },
+    [del]
+  );
+  const handleClearAll = React.useCallback(async () => {
+    index.clearAll();
+    try {
+      await del("/notifier/notifications");
+    } catch {
+    }
+  }, [del]);
+  const hasMore = pagination ? currentPage.current < pagination.pageCount : false;
+  return {
+    fetchAll,
+    loadMore,
+    handleMarkAsRead,
+    handleMarkAllAsRead,
+    handleClear,
+    handleClearAll,
+    isLoading,
+    hasMore
+  };
+};
+const FILTERS = ["all", "unread", "info", "success", "warning", "error"];
+const FILTER_LABELS = {
+  all: "All",
+  unread: "Unread",
+  info: "Info",
+  success: "Success",
+  warning: "Warning",
+  error: "Error"
+};
+function InboxHeader({
+  filter,
+  onFilterChange,
+  onMarkAllAsRead,
+  onClearAll
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingBottom: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", children: "Notifications" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", size: "S", onClick: onMarkAllAsRead, children: "Mark all as read" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            variant: "danger-light",
+            size: "S",
+            onClick: onClearAll,
+            children: "Clear all"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 2, wrap: "wrap", children: FILTERS.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onFilterChange(f),
+        style: {
+          padding: "4px 12px",
+          borderRadius: "16px",
+          border: "1px solid",
+          borderColor: filter === f ? "#4945ff" : "#dcdce4",
+          backgroundColor: filter === f ? "#f0f0ff" : "transparent",
+          color: filter === f ? "#4945ff" : "#32324d",
+          cursor: "pointer",
+          fontSize: "12px",
+          fontWeight: filter === f ? 600 : 400,
+          transition: "all 0.15s"
+        },
+        children: FILTER_LABELS[f]
+      },
+      f
+    )) })
+  ] });
+}
+const useNotifications = () => {
+  const [notifications, setNotifications] = React.useState(index.getNotifications);
+  React.useEffect(() => index.subscribeToNotifications(setNotifications), []);
+  return notifications;
+};
+const UNREAD_BG = {
+  info: "#f0f0ff",
+  success: "#f0fff4",
+  warning: "#fffbf0",
+  error: "#fff5f5"
+};
+function NotificationItem({
+  notification,
+  onMarkAsRead,
+  onClear
+}) {
+  const config = index.usePluginConfig();
+  const accent = config.theme.accent[notification.type];
+  const handleClick = () => {
+    if (!notification.read) onMarkAsRead(notification.id);
+    if (notification.url) {
+      if (notification.url.startsWith("http")) {
+        window.open(notification.url, "_blank", "noopener,noreferrer");
+      } else {
+        window.location.href = notification.url;
+      }
+    }
+  };
+  const handleDismiss = (e) => {
+    e.stopPropagation();
+    onClear(notification.id);
+  };
+  const bg = !notification.read ? UNREAD_BG[notification.type] : "transparent";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Box,
+    {
+      onClick: handleClick,
+      style: {
+        borderLeft: `4px solid ${accent}`,
+        backgroundColor: bg,
+        cursor: notification.url ? "pointer" : "default",
+        transition: "background 0.15s"
+      },
+      padding: 4,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "flex-start", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Typography,
+              {
+                variant: "omega",
+                fontWeight: notification.read ? "normal" : "bold",
+                style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: notification.title
+              }
+            ),
+            notification.url && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "↗" })
+          ] }),
+          notification.message && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: 2 }, children: notification.message }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral400", style: { marginTop: 4 }, children: new Date(notification.createdAt).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.IconButton,
+          {
+            label: "Dismiss",
+            onClick: handleDismiss,
+            variant: "ghost",
+            size: "S",
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
+          }
+        )
+      ] })
+    }
+  );
+}
+const MESSAGES = {
+  all: "No notifications yet.",
+  unread: "No unread notifications.",
+  info: "No info notifications.",
+  success: "No success notifications.",
+  warning: "No warning notifications.",
+  error: "No error notifications."
+};
+function EmptyInbox({ filter = "all" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, style: { textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: MESSAGES[filter] }) });
+}
+const applyFilter = (items, filter) => {
+  if (filter === "all") return items;
+  if (filter === "unread") return items.filter((n) => !n.read);
+  return items.filter((n) => n.type === filter);
+};
+function NotificationList({
+  filter,
+  onMarkAsRead,
+  onClear,
+  isLoading,
+  hasMore,
+  onLoadMore
+}) {
+  const notifications = useNotifications();
+  const filtered = applyFilter(notifications, filter);
+  if (isLoading && notifications.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true, children: "Loading notifications…" }) });
+  }
+  if (filtered.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(EmptyInbox, { filter });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+    filtered.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+      NotificationItem,
+      {
+        notification: n,
+        onMarkAsRead,
+        onClear
+      },
+      n.id
+    )),
+    hasMore && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", onClick: onLoadMore, loading: isLoading, children: isLoading ? "Loading…" : "Load more" }) })
+  ] });
+}
+function Index() {
+  const [filter, setFilter] = React.useState("all");
+  const {
+    fetchAll,
+    loadMore,
+    handleMarkAsRead,
+    handleMarkAllAsRead,
+    handleClear,
+    handleClearAll,
+    isLoading,
+    hasMore
+  } = useNotificationActions();
+  React.useEffect(() => {
+    fetchAll();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, style: { height: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      InboxHeader,
+      {
+        filter,
+        onFilterChange: setFilter,
+        onMarkAllAsRead: handleMarkAllAsRead,
+        onClearAll: handleClearAll
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NotificationList,
+      {
+        filter,
+        onMarkAsRead: handleMarkAsRead,
+        onClear: handleClear,
+        isLoading,
+        hasMore,
+        onLoadMore: loadMore
+      }
+    )
+  ] });
+}
+exports.default = Index;