@checkstack/notification-frontend 0.2.35 → 0.3.0

package/src/components/NotificationBell.tsx

@@ -1,28 +1,31 @@
-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 { useSignal } from "@checkstack/signal-frontend";
 import { resolveRoute } from "@checkstack/common";
-import type { Notification } from "@checkstack/notification-common";
 import {
   NotificationApi,
-  NOTIFICATION_RECEIVED,
-  NOTIFICATION_COUNT_CHANGED,
-  NOTIFICATION_READ,
   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 = () => {
@@ -30,25 +33,33 @@ 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(),
+  );
 
-  // State for real-time updates
-  const [signalUnreadCount, setSignalUnreadCount] = useState<
-    number | undefined
-  >();
-  const [signalNotifications, setSignalNotifications] = useState<
-    Notification[] | undefined
-  >();
+  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;
+    });
+  }, []);
 
-  // Fetch unread count via useQuery
+  // Realtime updates arrive via SignalAutoInvalidator on `[["notification"]]`,
+  // so both queries stay fresh without per-component signal handlers.
   const { data: unreadData, isLoading: unreadLoading } =
     notificationClient.getUnreadCount.useQuery(undefined, {
       enabled: !!session,
       staleTime: 30_000,
     });
 
-  // Fetch recent notifications via useQuery
   const { data: notificationsData, isLoading: notificationsLoading } =
     notificationClient.getNotifications.useQuery(
       { limit: 5, offset: 0, unreadOnly: true },
@@ -58,80 +69,14 @@ export const NotificationBell = () => {
       },
     );
 
-  // Mark all as read mutation
   const markAsReadMutation = notificationClient.markAsRead.useMutation();
 
-  // Use signal data if available, otherwise use query data
-  const unreadCount = signalUnreadCount ?? unreadData?.count ?? 0;
-  const recentNotifications =
-    signalNotifications ?? notificationsData?.notifications ?? [];
-
-  // ==========================================================================
-  // REALTIME SIGNAL SUBSCRIPTIONS (replaces polling)
-  // ==========================================================================
-
-  // Handle new notification received
-  useSignal(
-    NOTIFICATION_RECEIVED,
-    useCallback((payload) => {
-      // Increment unread count
-      setSignalUnreadCount((prev) => (prev ?? 0) + 1);
-
-      // Add to recent notifications if dropdown is open
-      setSignalNotifications((prev) => [
-        {
-          id: payload.id,
-          title: payload.title,
-          body: payload.body,
-          importance: payload.importance,
-          userId: "", // Not needed for display
-          isRead: false,
-          createdAt: new Date(),
-        },
-        ...(prev ?? []).slice(0, 4), // Keep only 5 items
-      ]);
-    }, []),
-  );
-
-  // Handle count changes from other sources
-  useSignal(
-    NOTIFICATION_COUNT_CHANGED,
-    useCallback((payload) => {
-      setSignalUnreadCount(payload.unreadCount);
-    }, []),
-  );
-
-  // Handle notification marked as read
-  useSignal(
-    NOTIFICATION_READ,
-    useCallback(
-      (payload) => {
-        if (payload.notificationId) {
-          // Single notification marked as read - remove from list
-          setSignalNotifications((prev) =>
-            (prev ?? []).filter((n) => n.id !== payload.notificationId),
-          );
-          // Use unreadData?.count as fallback when signalUnreadCount hasn't been set yet
-          setSignalUnreadCount((prev) =>
-            Math.max(0, (prev ?? unreadData?.count ?? 1) - 1),
-          );
-        } else {
-          // All marked as read - clear the list
-          setSignalNotifications([]);
-          setSignalUnreadCount(0);
-        }
-      },
-      [unreadData?.count],
-    ),
-  );
-
-  // ==========================================================================
+  const unreadCount = unreadData?.count ?? 0;
+  const recentNotifications = notificationsData?.notifications ?? [];
 
   const handleMarkAllAsRead = async () => {
     try {
       await markAsReadMutation.mutateAsync({});
-      setSignalUnreadCount(0);
-      setSignalNotifications([]);
     } catch {
       toast.error("Failed to mark all as read");
     }
@@ -141,7 +86,6 @@ export const NotificationBell = () => {
     setIsOpen(false);
   }, []);
 
-  // Hide notification bell for unauthenticated users
   if (isAuthLoading || !session) {
     return;
   }
@@ -156,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);
+
+  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))}</>
+    );
 
-        <DropdownMenuSeparator />
+  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>
+  );
 
-        {/* Footer */}
-        <DropdownMenuItem
-          onClick={() => {
-            handleClose();
-          }}
+  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>
   );
 };

package/src/components/NotificationSubjects.tsx

@@ -0,0 +1,154 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Button,
+  usePerformance,
+} from "@checkstack/ui";
+import type { NotificationSubject } from "@checkstack/notification-common";
+import { getSubjectKindRenderer } from "./SubjectKindRegistry";
+
+const STATUS_DOT_COLOR: Record<
+  NonNullable<NotificationSubject["status"]>,
+  string
+> = {
+  healthy: "bg-emerald-500",
+  degraded: "bg-amber-500",
+  unhealthy: "bg-rose-500",
+  unknown: "bg-zinc-400",
+};
+
+interface NotificationSubjectsProps {
+  subjects: NotificationSubject[];
+  /** Inline cap before collapsing the rest into a "+N" overflow popover. */
+  maxVisible?: number;
+  /** Optional callback fired when a chip's link is clicked. */
+  onSubjectClick?: () => void;
+}
+
+/**
+ * Compact chip list of affected entities. Each chip shows the kind icon (via
+ * the kind registry) and the subject name; clicking links to the subject's
+ * url when present. Status maps to a small colored dot.
+ *
+ * On low-power devices, transitions are disabled.
+ */
+export function NotificationSubjects({
+  subjects,
+  maxVisible = 3,
+  onSubjectClick,
+}: NotificationSubjectsProps) {
+  const [overflowOpen, setOverflowOpen] = useState(false);
+  const { isLowPower } = usePerformance();
+
+  if (subjects.length === 0) return <></>;
+
+  const visible = subjects.slice(0, maxVisible);
+  const overflow = subjects.slice(maxVisible);
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 mt-2">
+      {visible.map((subject) => (
+        <SubjectChip
+          key={`${subject.kind}:${subject.id}`}
+          subject={subject}
+          isLowPower={isLowPower}
+          onClick={onSubjectClick}
+        />
+      ))}
+      {overflow.length > 0 && (
+        <Popover open={overflowOpen} onOpenChange={setOverflowOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-6 px-2 text-xs"
+            >
+              +{overflow.length} more
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-72 p-2"
+            align="start"
+            onCloseAutoFocus={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <div className="flex flex-col gap-1">
+              {overflow.map((subject) => (
+                <SubjectChip
+                  key={`${subject.kind}:${subject.id}`}
+                  subject={subject}
+                  isLowPower={isLowPower}
+                  onClick={() => {
+                    setOverflowOpen(false);
+                    onSubjectClick?.();
+                  }}
+                  fullWidth
+                />
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}
+
+interface SubjectChipProps {
+  subject: NotificationSubject;
+  isLowPower: boolean;
+  onClick?: () => void;
+  fullWidth?: boolean;
+}
+
+function SubjectChip({
+  subject,
+  isLowPower,
+  onClick,
+  fullWidth,
+}: SubjectChipProps) {
+  const renderer = getSubjectKindRenderer(subject.kind);
+  const Icon = renderer.icon;
+  const dotColor = subject.status
+    ? STATUS_DOT_COLOR[subject.status]
+    : undefined;
+
+  const baseClass = [
+    "inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md",
+    "border border-border bg-card text-foreground",
+    "text-xs font-medium max-w-[14rem] truncate",
+    isLowPower ? "" : "transition-colors hover:bg-accent",
+    fullWidth ? "w-full" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const content = (
+    <>
+      <Icon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      {dotColor && (
+        <span
+          className={`inline-block h-2 w-2 rounded-full shrink-0 ${dotColor}`}
+          aria-label={subject.status ?? undefined}
+        />
+      )}
+      <span className="truncate" title={`${renderer.label}: ${subject.name}`}>
+        {subject.name}
+      </span>
+    </>
+  );
+
+  if (subject.url) {
+    return (
+      <Link to={subject.url} className={baseClass} onClick={onClick}>
+        {content}
+      </Link>
+    );
+  }
+
+  return <span className={baseClass}>{content}</span>;
+}