@checkstack/notification-frontend 0.2.36 → 0.3.1

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>
   );
 };

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>;
+}