@checkstack/notification-frontend 0.2.36 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,192 @@
 # @checkstack/notification-frontend
 
+## 0.3.0
+
+### Minor Changes
+
+- 32d52c6: Bulk notifications affecting multiple systems and collapse lifecycle events into a single card.
+
+  Notifications now carry an optional `subjects` array (the entities they affect) and an optional `collapseKey` (so related notifications collapse into one row per recipient). Incidents, maintenances, anomalies, healthchecks, and dependency-impact events route through these new fields, so an incident affecting three systems produces one in-app notification + one external send per subscriber instead of three. Lifecycle updates for the same entity (created → updated → resolved) also collapse, with an expandable "+N updates" timeline.
+
+  Subject kinds are namespaced as `<pluginId>.<localKind>` and built via type-safe helpers exported from each domain's common package (`createSystemSubject`, `incidentCollapseKey`, etc.). The frontend kind registry (`registerSubjectKind`) lets plugins bind icon + label for their kinds; unknown kinds fall back to a generic chip.
+
+  All notification strategies (SMTP, Slack, Discord, Teams, Telegram, Pushover, Gotify, Webex, Backstage) render the affected subjects natively in their format (HTML cards, Slack blocks, Discord embed fields, adaptive cards, markdown lists, etc.).
+
+- 32d52c6: feat: unified notification-subscription manager dialog driven by spec registry
+
+  Replaces the bell-toggle UX (which only managed a single legacy
+  catalog group) with a modal that lists every notification type
+  registered against a target — system or group — and exposes both
+  per-type toggles and a bulk "Subscribe to all / Unsubscribe from all"
+  action. Both surfaces (system detail page header bell, dashboard group
+  header bell) now open the same `NotificationSubscriptionsManager`
+  component.
+
+  **Key change vs. the prior slot-based approach**: rows are now driven
+  by `notificationClient.listSubscriptionSpecs` — the backend's spec
+  registry is the single source of truth. Previously, a row only
+  appeared if a frontend plugin had remembered to register a
+  `createNotificationSubscriptionExtension`; this caused silent drift
+  (healthcheck and dependency registered backend specs without frontend
+  extensions, so the dialog counted them but never rendered rows). Now,
+  every spec the platform knows about renders a row using the spec's
+  `display` metadata (title, description, iconName resolved via
+  `DynamicIcon`).
+
+  **Sub-controls registry** (`@checkstack/notification-frontend`):
+  plugins that want sub-granularity (anomaly's per-field mute list,
+  future severity / channel filters) call
+  `registerSubscriptionSubControls(spec, Component)` at module load —
+  the manager looks the component up by `specId` when expanding a row.
+
+  **Removed (no compat)**:
+
+  - `createNotificationSubscriptionExtension` (replaced by the
+    spec-driven manager + the SubControls registry)
+  - `target.slot` field on `NotificationTarget` and the
+    `NotificationTargetInput.slot` parameter on
+    `defineNotificationTarget`
+  - `SystemNotificationSubscriptionsSlot` and
+    `GroupNotificationSubscriptionsSlot` from `@checkstack/catalog-common`
+  - `SystemNotificationsCard` from the system detail page's main column
+  - `SubscribeButton` wiring on dashboard group cards and the system
+    detail page header
+
+  **Migrated frontends**: anomaly (now registers `AnomalyFieldMuteList`
+  via the SubControls registry), incident, maintenance — all dropped
+  their `createNotificationSubscriptionExtension` calls. healthcheck and
+  dependency now show up automatically via the spec registry — no
+  frontend changes needed for them to render.
+
+  The trigger button reflects aggregate state — filled bell when at
+  least one spec is subscribed for the resource, ghost bell when none.
+
+- 32d52c6: feat: notification target pattern + per-spec subscriptions
+
+  Replaces the all-or-nothing catalog system/group notification model with a
+  platform-level target pattern. Each notification-emitting plugin declares
+  _subscription specs_ against typed _target_ objects exported from the
+  target's owning plugin (catalog ships `catalogSystemTarget` and
+  `catalogGroupTarget`). Notification-backend handles every per-resource
+  group lifecycle, parent-edge inheritance, and legacy-subscription seeding
+  — plugins never author groupId helpers, lifecycle hooks, or migration
+  code again.
+
+  **Plugin-author surface area is now ~12 lines per emitter:**
+
+  ```ts
+  // <plugin>-common
+  const { defineSubscription } = createSubscriptionFactory(pluginMetadata);
+  export const fooSystemSubscription = defineSubscription({
+    localId: "system",
+    target: catalogSystemTarget,
+    display: { title: "Foo Alerts", description: "...", iconName: "Bell" },
+  });
+
+  // <plugin>-backend register()
+  env.registerSubscriptionSpecs([fooSystemSubscription]);
+  //   ^ feeds the plugin loader's dependency sorter — each spec's
+  //     target.ownerPlugin becomes an implicit init-order dep, so this
+  //     plugin automatically waits for catalog (the target owner) to
+  //     finish init + afterPluginsReady before its own runs.
+
+  // <plugin>-backend afterPluginsReady
+  await notificationClient.registerSubscriptionSpec(
+    specToRegistration(fooSystemSubscription)
+  );
+  // dispatch
+  await notificationClient.notifyForSubscription({
+    specId: fooSystemSubscription.specId,
+    resourceKeys: [systemId],
+    title,
+    body,
+    importance,
+    action,
+    collapseKey,
+    subjects,
+  });
+
+  // <plugin>-frontend
+  createNotificationSubscriptionExtension({ spec: fooSystemSubscription });
+  ```
+
+  **Migrated plugins**: anomaly, incident, maintenance, healthcheck,
+  dependency. Each lost its bespoke `notification-groups.ts`,
+  `bootstrap*NotificationGroups`, `ensure*Group`, and inheritance walk —
+  all of that is now centralized in notification-backend's
+  `subscription-engine`.
+
+  **Plugin loader change** (`@checkstack/backend-api`,
+  `@checkstack/backend`): the register-time API gains
+  `env.registerSubscriptionSpecs([...specs])`. The dependency sorter
+  walks `spec.target.ownerPlugin` for every declared spec and adds the
+  target owner as an init-order dependency of the emitting plugin. This
+  guarantees that catalog (the owner of the platform's `system` and
+  `group` targets) completes init + afterPluginsReady before any
+  emitting plugin tries to register its specs against the notification
+  service — no string-prefix heuristics, no manual `dependsOnPlugins`
+  list, no stub rows. Plugins that fail to declare their specs at
+  register time get a clear `Target type X is not registered. Did the
+emitting plugin declare this spec via env.registerSubscriptionSpecs?`
+  error from the dispatcher.
+
+  **Removed** (no backwards compat):
+
+  - `catalogClient.notifySystemSubscribers` and
+    `catalogClient.notifyManySystemSubscribers`
+  - `notificationClient.notifyUsers` and `notificationClient.notifyGroups`
+    as direct dispatch primitives — replaced by spec-bound
+    `notifyForSubscription`
+  - catalog's `bootstrapNotificationGroups` (replaced by
+    `bootstrapNotificationTargets`)
+
+  **Enforcement**: the dispatcher rejects calls referencing unregistered
+  specIds, specs owned by other plugins, or resourceKeys that haven't been
+  pushed via `upsertNotificationResource`. Display metadata for any
+  groupId is recoverable via the spec registry, so audit lists render
+  correct labels even when an emitter's frontend isn't loaded.
+
+  **Per-field anomaly mute** keeps working — it now lives inside the
+  generic SubscriptionRow's optional `SubControls` panel
+  (`AnomalyFieldMuteList`), exposed through the catalog system detail
+  page's notifications card.
+
+  The catalog system detail page renders a "Notifications" card hosting
+  `SystemNotificationSubscriptionsSlot`. The matching group surface is
+  not yet rendered — group-level subscriptions are wired end-to-end on
+  the backend; a follow-up will add the host UI.
+
+  **Migration of existing subscribers**: target types declare a
+  `legacyGroupIdTemplate`; on first registration of each spec,
+  notification-backend reads subscribers from the legacy
+  `catalog.system.<id>` / `catalog.group.<id>` groups and seeds the new
+  spec groups exactly once per (spec × resource) pair, tracked in
+  `subscription_migrations`. Anomaly stays opt-in (its target also
+  declares the template, but the user-explicit nature of the original
+  opt-in flow means the seeding produces the same set of subscribers
+  they already had).
+
+### Patch Changes
+
+- 32d52c6: Fix several modal/sheet/overlay closing issues:
+
+  - Replace the custom `DropdownMenu` container with a Radix-based `Popover` (desktop) and `Sheet` (mobile). The previous mobile implementation suppressed outside-click closing, leaving the notification bell's panel only closable by clicking the bell again. `UserMenu` and `NotificationBell` were updated to the new pattern. Leaf primitives `DropdownMenuItem`, `DropdownMenuLabel`, and `DropdownMenuSeparator` are preserved (now backed by a `MenuCloseContext`) so existing call sites continue to work.
+  - Fix `Dialog` outside-click closing. The previous structure made `DialogPrimitive.Content` cover the full viewport, so Radix never registered clicks on the dimmed area as "outside" — only ESC could close the modal. The centering wrapper is now a non-Content `<div>` and the actual modal box is the Content, so outside-click closes correctly. A visible X button is now rendered by default; pass `hideCloseButton` to suppress it (e.g. for the search overlay where it would clash with a custom header).
+  - Export a standalone `useIsMobile` hook and a new `Popover` primitive.
+  - Prevent Radix's auto-focus-return on `NotificationBell` and `UserMenu` overlays. Closing via an item with a `<Link>` (e.g. "View all notifications") would synchronously refocus the trigger via `onCloseAutoFocus`, stealing focus from the link mid-click on pages where another element held focus and requiring a second click to navigate.
+
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+- Updated dependencies [32d52c6]
+  - @checkstack/notification-common@1.0.0
+  - @checkstack/frontend-api@0.4.1
+  - @checkstack/auth-frontend@0.5.32
+  - @checkstack/ui@1.7.0
+
 ## 0.2.36
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/notification-frontend",
-  "version": "0.2.36",
+  "version": "0.3.0",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {
@@ -12,12 +12,12 @@
     "lint:code": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@checkstack/notification-common": "0.2.9",
-    "@checkstack/frontend-api": "0.3.11",
-    "@checkstack/auth-frontend": "0.5.30",
-    "@checkstack/signal-frontend": "0.0.16",
+    "@checkstack/notification-common": "0.3.0",
+    "@checkstack/frontend-api": "0.4.0",
+    "@checkstack/auth-frontend": "0.5.31",
+    "@checkstack/signal-frontend": "0.1.0",
     "@checkstack/common": "0.7.0",
-    "@checkstack/ui": "1.6.0",
+    "@checkstack/ui": "1.6.1",
     "react": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "lucide-react": "^0.344.0"

package/src/components/CollapsedGroupTimeline.tsx

@@ -0,0 +1,63 @@
+import { stripMarkdown } from "@checkstack/ui";
+import type { Notification } from "@checkstack/notification-common";
+
+interface CollapsedGroupTimelineProps {
+  /**
+   * The full chronological list of notifications in the group, newest
+   * first. The first item (the representative) is rendered above the
+   * timeline by the parent, so this component skips it.
+   */
+  notifications: Notification[];
+  variant?: "bell" | "page";
+}
+
+/**
+ * Compact timeline of older entries in a collapsed notification group.
+ * Each row shows the relative time, title, and a one-line body excerpt.
+ * The representative (newest) entry is rendered separately by the parent
+ * card; this component only renders the historical tail.
+ */
+export function CollapsedGroupTimeline({
+  notifications,
+  variant = "bell",
+}: CollapsedGroupTimelineProps) {
+  const older = notifications.slice(1);
+  if (older.length === 0) return <></>;
+
+  const sizeClass = variant === "page" ? "text-sm" : "text-xs";
+
+  return (
+    <div
+      className={`mt-2 border-l-2 border-border pl-3 space-y-2 ${sizeClass}`}
+    >
+      {older.map((n) => (
+        <div key={n.id} className="flex flex-col gap-0.5">
+          <span className="text-muted-foreground">{formatRelative(n.createdAt)}</span>
+          <span className="font-medium text-foreground line-clamp-1">
+            {n.title}
+          </span>
+          {n.body && (
+            <span className="text-muted-foreground line-clamp-2">
+              {stripMarkdown(n.body)}
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const RTF = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+
+function formatRelative(input: Date | string): string {
+  const date = typeof input === "string" ? new Date(input) : input;
+  const diffMs = date.getTime() - Date.now();
+  const absMin = Math.round(Math.abs(diffMs) / 60_000);
+
+  if (absMin < 1) return "just now";
+  if (absMin < 60) return RTF.format(Math.round(diffMs / 60_000), "minute");
+  const absHr = Math.round(absMin / 60);
+  if (absHr < 24) return RTF.format(Math.round(diffMs / 3_600_000), "hour");
+  const absDay = Math.round(absHr / 24);
+  return RTF.format(Math.round(diffMs / 86_400_000), absDay < 30 ? "day" : "month");
+}

package/src/components/NotificationBell.tsx

@@ -1,16 +1,20 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, type ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { Bell, CheckCheck } from "lucide-react";
 import {
   Badge,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+  SheetHeader,
+  SheetTitle,
   Button,
   stripMarkdown,
   useToast,
+  useIsMobile,
 } from "@checkstack/ui";
 import { useApi, usePluginClient } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
@@ -18,6 +22,10 @@ import {
   NotificationApi,
   notificationRoutes,
 } from "@checkstack/notification-common";
+import { NotificationSubjects } from "./NotificationSubjects";
+import { groupByCollapseKey, type CollapsedNotification } from "./collapse";
+import { CollapsedGroupTimeline } from "./CollapsedGroupTimeline";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import { authApiRef } from "@checkstack/auth-frontend/api";
 
 export const NotificationBell = () => {
@@ -25,8 +33,24 @@ export const NotificationBell = () => {
   const { data: session, isPending: isAuthLoading } = authApi.useSession();
   const notificationClient = usePluginClient(NotificationApi);
   const toast = useToast();
+  const isMobile = useIsMobile();
 
   const [isOpen, setIsOpen] = useState(false);
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
+    () => new Set(),
+  );
+
+  const toggleExpanded = useCallback((key: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
 
   // Realtime updates arrive via SignalAutoInvalidator on `[["notification"]]`,
   // so both queries stay fresh without per-component signal handlers.
@@ -62,7 +86,6 @@ export const NotificationBell = () => {
     setIsOpen(false);
   }, []);
 
-  // Hide notification bell for unauthenticated users
   if (isAuthLoading || !session) {
     return;
   }
@@ -77,119 +100,174 @@ export const NotificationBell = () => {
     );
   }
 
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger
+  const trigger = (
+    <Button variant="ghost" size="icon" className="relative group">
+      <Bell className="h-5 w-5 transition-transform group-hover:scale-110" />
+      {unreadCount > 0 && (
+        <span className="absolute -top-1 -right-1 flex h-5 min-w-[20px] items-center justify-center">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75" />
+          <Badge
+            variant="destructive"
+            className="relative h-5 min-w-[20px] flex items-center justify-center p-0 text-xs font-bold"
+          >
+            {unreadCount > 99 ? "99+" : unreadCount}
+          </Badge>
+        </span>
+      )}
+    </Button>
+  );
+
+  const headerActions =
+    unreadCount > 0 ? (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 text-xs"
         onClick={() => {
-          setIsOpen(!isOpen);
+          void handleMarkAllAsRead();
         }}
       >
-        <Button variant="ghost" size="icon" className="relative group">
-          <Bell className="h-5 w-5 transition-transform group-hover:scale-110" />
-          {unreadCount > 0 && (
-            <span className="absolute -top-1 -right-1 flex h-5 min-w-[20px] items-center justify-center">
-              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-destructive opacity-75" />
+        <CheckCheck className="h-3 w-3 mr-1" />
+        Mark all read
+      </Button>
+    ) : undefined;
+
+  const renderItem = (group: CollapsedNotification): ReactNode => {
+    const notification = group.representative;
+    const isExpanded = expandedGroups.has(group.key);
+    return (
+      <div
+        key={group.key}
+        className={`flex flex-col items-start gap-1 px-3 py-2 hover:bg-accent transition-colors ${
+          notification.importance === "critical"
+            ? "border-l-2 border-l-destructive"
+            : notification.importance === "warning"
+              ? "border-l-2 border-l-warning"
+              : ""
+        }`}
+      >
+        <div className="flex items-center gap-2 w-full">
+          <div
+            className={`font-medium text-sm flex-1 truncate ${
+              notification.importance === "critical"
+                ? "text-destructive"
+                : notification.importance === "warning"
+                  ? "text-warning"
+                  : "text-foreground"
+            }`}
+          >
+            {notification.title}
+          </div>
+          {group.collapsed && (
+            <button
+              type="button"
+              className="inline-flex items-center gap-0.5 shrink-0"
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation();
+                toggleExpanded(group.key);
+              }}
+              aria-label={
+                isExpanded
+                  ? "Collapse update history"
+                  : "Show update history"
+              }
+            >
               <Badge
-                variant="destructive"
-                className="relative h-5 min-w-[20px] flex items-center justify-center p-0 text-xs font-bold"
+                variant="secondary"
+                className="text-[10px] h-5 cursor-pointer hover:bg-accent"
               >
-                {unreadCount > 99 ? "99+" : unreadCount}
+                +{group.count - 1} updates
+                {isExpanded ? (
+                  <ChevronUp className="ml-0.5 h-3 w-3" />
+                ) : (
+                  <ChevronDown className="ml-0.5 h-3 w-3" />
+                )}
               </Badge>
-            </span>
+            </button>
           )}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        isOpen={isOpen}
-        onClose={handleClose}
-        className="w-80"
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between px-3 py-2 border-b border-border">
-          <span className="font-semibold text-sm">Notifications</span>
-          {unreadCount > 0 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-6 text-xs"
-              onClick={() => {
-                void handleMarkAllAsRead();
+        </div>
+        <div className="text-xs text-muted-foreground line-clamp-2">
+          {stripMarkdown(notification.body)}
+        </div>
+        {notification.subjects && notification.subjects.length > 0 && (
+          <NotificationSubjects subjects={notification.subjects} />
+        )}
+        {notification.action && (
+          <div className="flex gap-2 mt-1">
+            <Link
+              to={notification.action.url}
+              className="text-xs text-primary hover:underline"
+              onClick={(e: React.MouseEvent) => {
+                e.stopPropagation();
               }}
             >
-              <CheckCheck className="h-3 w-3 mr-1" />
-              Mark all read
-            </Button>
-          )}
-        </div>
+              {notification.action.label}
+            </Link>
+          </div>
+        )}
+        {group.collapsed && isExpanded && (
+          <CollapsedGroupTimeline notifications={group.notifications} />
+        )}
+      </div>
+    );
+  };
 
-        {/* Notification List */}
-        <div className="max-h-[400px] overflow-y-auto">
-          {recentNotifications.length === 0 ? (
-            <div className="px-3 py-6 text-center text-sm text-muted-foreground">
-              No unread notifications
-            </div>
-          ) : (
-            <>
-              {recentNotifications.map((notification) => (
-                <DropdownMenuItem
-                  key={notification.id}
-                  className={`flex flex-col items-start gap-1 px-3 py-2 cursor-pointer ${
-                    notification.importance === "critical"
-                      ? "border-l-2 border-l-destructive"
-                      : notification.importance === "warning"
-                        ? "border-l-2 border-l-warning"
-                        : ""
-                  }`}
-                >
-                  <div
-                    className={`font-medium text-sm ${
-                      notification.importance === "critical"
-                        ? "text-destructive"
-                        : notification.importance === "warning"
-                          ? "text-warning"
-                          : "text-foreground"
-                    }`}
-                  >
-                    {notification.title}
-                  </div>
-                  <div className="text-xs text-muted-foreground line-clamp-2">
-                    {stripMarkdown(notification.body)}
-                  </div>
-                  {notification.action && (
-                    <div className="flex gap-2 mt-1">
-                      <Link
-                        to={notification.action.url}
-                        className="text-xs text-primary hover:underline"
-                        onClick={(e: React.MouseEvent) => {
-                          e.stopPropagation();
-                        }}
-                      >
-                        {notification.action.label}
-                      </Link>
-                    </div>
-                  )}
-                </DropdownMenuItem>
-              ))}
-            </>
-          )}
-        </div>
+  const collapsedGroups = groupByCollapseKey(recentNotifications);
 
-        <DropdownMenuSeparator />
+  const list =
+    collapsedGroups.length === 0 ? (
+      <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+        No unread notifications
+      </div>
+    ) : (
+      <>{collapsedGroups.map((g) => renderItem(g))}</>
+    );
 
-        {/* Footer */}
-        <DropdownMenuItem
-          onClick={() => {
-            handleClose();
-          }}
+  const footer = (
+    <Link
+      to={resolveRoute(notificationRoutes.routes.home)}
+      className="block w-full text-center text-sm text-primary hover:bg-accent transition-colors px-3 py-2"
+      onClick={handleClose}
+    >
+      View all notifications
+    </Link>
+  );
+
+  if (isMobile) {
+    return (
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>{trigger}</SheetTrigger>
+        <SheetContent
+          size="full"
+          className="flex flex-col p-0"
+          onCloseAutoFocus={(e) => e.preventDefault()}
         >
-          <Link
-            to={resolveRoute(notificationRoutes.routes.home)}
-            className="w-full text-center text-sm text-primary"
-          >
-            View all notifications
-          </Link>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+          <SheetHeader className="flex flex-row items-center justify-between gap-2 px-4 py-3 border-b border-border space-y-0">
+            <SheetTitle className="text-base">Notifications</SheetTitle>
+            <div className="pr-8">{headerActions}</div>
+          </SheetHeader>
+          <div className="flex-1 overflow-y-auto">{list}</div>
+          <div className="border-t border-border">{footer}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        className="w-80 p-0"
+        align="end"
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+          <span className="font-semibold text-sm">Notifications</span>
+          {headerActions}
+        </div>
+        <div className="max-h-[400px] overflow-y-auto">{list}</div>
+        <div className="border-t border-border">{footer}</div>
+      </PopoverContent>
+    </Popover>
   );
 };