@carlonicora/nextjs-jsonapi 3.19.1 → 3.20.1

package/src/features/notification/components/modals/NotificationModal.tsx

@@ -1,19 +1,23 @@
-import { BellIcon } from "lucide-react";
+import { BellIcon, ExternalLinkIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { showToast } from "../../../../utils/toast";
+import { cn } from "../../../../utils";
 import { useSocketContext } from "../../../../contexts";
+import { Modules } from "../../../../core";
 import { usePageUrlGenerator } from "../../../../hooks";
 import {
-  Card,
-  CardHeader,
-  CardTitle,
+  Link,
   Popover,
   PopoverContent,
+  PopoverHeader,
+  PopoverTitle,
   PopoverTrigger,
   ScrollArea,
-  Separator,
   SidebarMenuButton,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "../../../../shadcnui";
 import { useNotificationContext } from "../../contexts/NotificationContext";
 import { NotificationInterface } from "../../data";
@@ -184,32 +188,98 @@ function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps)
 
   return (
     <Popover open={isOpen} onOpenChange={handleOpenChange} data-testid={`sidebar-notification button`}>
-      <PopoverTrigger>
-        <SidebarMenuButton render={<div />} className="text-muted-foreground h-6" disabled={isLoading}>
+      {/* The badge overhangs the bell's top-end corner, so nothing between it
+          and the sidebar may clip: `overflow-visible` beats the button
+          variant's own `overflow-hidden`, and the label is wrapped in its own
+          span so the variant's `[&>span:last-child]:truncate` (which sets
+          overflow:hidden) lands on the label rather than on the icon slot. */}
+      <PopoverTrigger
+        render={<SidebarMenuButton className="text-muted-foreground h-6 overflow-visible" disabled={isLoading} />}
+      >
+        <span className="relative flex shrink-0 items-center justify-center overflow-visible">
           <BellIcon
-            className={`h-5 w-5 cursor-pointer ${unreadNotifications ? "text-destructive" : ""} ${isLoading ? "animate-pulse" : ""}`}
+            className={cn(
+              "h-5 w-5 cursor-pointer",
+              // Filled, not just tinted: an outline bell in the danger colour
+              // is easy to miss at this size, a solid one is not.
+              unreadNotifications && "fill-destructive text-destructive",
+              isLoading && "animate-pulse",
+            )}
           />
-          {t(`entities.notifications`, { count: 2 })}
-        </SidebarMenuButton>
+          {unreadNotifications && (
+            // Fixed px, not rem: the app's root font size is 14px, so a
+            // rem-sized badge renders a quarter smaller than the scale implies
+            // and the count stops being readable. The ring separates the dot
+            // from the bell it sits on.
+            <span
+              data-testid="sidebar-notification-unread-dot"
+              className="bg-destructive ring-sidebar pointer-events-none absolute -top-[3px] -end-[4px] size-[9px] rounded-full ring-2 group-data-[collapsible=icon]:block md:hidden"
+            />
+          )}
+        </span>
+        <span className="truncate">{t(`entities.notifications`, { count: 2 })}</span>
+        {unreadNotifications && (
+          <span
+            data-testid="sidebar-notification-unread-count"
+            className="bg-destructive text-destructive-foreground pointer-events-none ms-auto flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full px-[5px] text-[11px] leading-none font-semibold tabular-nums group-data-[collapsible=icon]:hidden"
+          >
+            {unreadCount > 99 ? "99+" : unreadCount}
+          </span>
+        )}
       </PopoverTrigger>
-      <PopoverContent className="relative start-10 w-80 border-0 p-0 shadow-none">
-        <Card>
-          <CardHeader className="p-4">
-            <CardTitle>{t(`entities.notifications`, { count: 2 })}</CardTitle>
-            {isLoading && <div className="text-muted-foreground text-xs">Loading...</div>}
-            {error && <div className="text-destructive text-xs/relaxed">Error: {error}</div>}
-          </CardHeader>
-          <Separator />
-          <ScrollArea className="h-96">
-            {notifications.length > 0 ? (
-              notifications.map((notification: NotificationInterface) => (
+      {/* The popup IS the surface — a Card inside it stacked two paddings
+          (Card py-4 + CardHeader p-4) around a 20px title, which is why the
+          header was so tall. Widths are in a 14px rem here, so the previous
+          w-80 measured 280px on screen, not 320; 30rem = 420px. */}
+      <PopoverContent className="relative start-10 w-[30rem] gap-0 overflow-hidden p-0">
+        <PopoverHeader className="flex flex-row items-center justify-between gap-2 border-b px-3 py-2">
+          {/* Typography role 4 (section header) rather than role 5 (panel
+              title): the popover reads as a mini-page, not a card slot. */}
+          <PopoverTitle className="text-lg font-semibold">{t(`entities.notifications`, { count: 2 })}</PopoverTitle>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Link
+                  href={generateUrl({ page: Modules.Notification })}
+                  onClick={() => setIsOpen(false)}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                />
+              }
+            >
+              <ExternalLinkIcon className="size-4" />
+            </TooltipTrigger>
+            <TooltipContent>{t(`notification.all`)}</TooltipContent>
+          </Tooltip>
+        </PopoverHeader>
+        {isLoading && <div className="text-muted-foreground px-3 py-2 text-xs">{t(`common.loading`)}</div>}
+        {error && <div className="text-destructive px-3 py-2 text-xs">{error}</div>}
+        {/* The cap goes on the scroll viewport, not on the ScrollArea root: the
+            viewport carries Base UI's inline overflow and h-full, so a height
+            on the root leaves it stretching to its content instead of
+            scrolling.
+            It is measured against --available-height (set by the positioner,
+            after any flip) minus the header, the same way the package combobox
+            sizes its list. A fixed cap lets the popup outgrow the room below
+            the trigger, and floating-ui's shift() then clamps it into the
+            viewport — which is why it landed in the same spot wherever the
+            trigger sat, and never scrolled. */}
+        {/* The ScrollBar styles itself with data-vertical:w-2.5, but Base UI
+            emits data-orientation="vertical" — no data-vertical attribute
+            exists, so the track renders 2px wide with a 0px-wide thumb: an
+            invisible scrollbar. Forced here by data-slot until the primitive is
+            fixed. The thumb's bg-border is also invisible against the popup,
+            hence the explicit colour. */}
+        <ScrollArea className="[&_[data-slot=scroll-area-scrollbar]]:w-2.5 [&_[data-slot=scroll-area-thumb]]:bg-muted-foreground/40 [&>[data-slot=scroll-area-viewport]]:max-h-[min(32rem,calc(var(--available-height,32rem)-3.5rem))]">
+          {notifications.length > 0 ? (
+            <div className="divide-border divide-y">
+              {notifications.map((notification: NotificationInterface) => (
                 <Fragment key={notification.id}>{generateNotification(notification, () => setIsOpen(false))}</Fragment>
-              ))
-            ) : (
-              <div className="text-muted-foreground p-4 text-center text-sm">{t(`notification.empty`)}</div>
-            )}
-          </ScrollArea>
-        </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted-foreground p-6 text-center text-sm">{t(`notification.empty`)}</div>
+          )}
+        </ScrollArea>
       </PopoverContent>
     </Popover>
   );

package/src/features/notification/components/modals/__tests__/NotificationModal.spec.tsx

@@ -46,6 +46,15 @@ vi.mock("../../../../../contexts", () =>
 );
 
 vi.mock("../../../../../hooks", () => mocks.barrel({ usePageUrlGenerator: () => (p: unknown) => String(p) }));
+
+// `Modules` is a Proxy that throws for any module the app has not registered,
+// and the "view all" link reads `Modules.Notification` while rendering. Only
+// that key is replaced — the rest of the barrel stays real, because the data
+// layer imported alongside it still extends `AbstractApiData`.
+vi.mock("../../../../../core", async () => {
+  const actual = await vi.importActual<Record<string, unknown>>("../../../../../core");
+  return { ...actual, Modules: { Notification: { name: "notifications", pageUrl: "/notifications" } } };
+});
 vi.mock("next-intl", () => ({ useTranslations: () => (key: string) => key }));
 
 vi.mock("../../../contexts/NotificationContext", () => ({
@@ -66,15 +75,17 @@ vi.mock("../../../contexts/NotificationContext", () => ({
 vi.mock("../../../../../shadcnui", () => {
   const passthrough = ({ children }: { children?: React.ReactNode }) => <div>{children}</div>;
   return mocks.barrel({
-    Card: passthrough,
-    CardHeader: passthrough,
-    CardTitle: passthrough,
+    Link: passthrough,
     Popover: passthrough,
     PopoverContent: passthrough,
+    PopoverHeader: passthrough,
+    PopoverTitle: passthrough,
     PopoverTrigger: passthrough,
     ScrollArea: passthrough,
-    Separator: () => null,
     SidebarMenuButton: passthrough,
+    Tooltip: passthrough,
+    TooltipContent: passthrough,
+    TooltipTrigger: passthrough,
   });
 });
 

package/src/features/notification/components/notifications/Notification.tsx

@@ -4,9 +4,11 @@ import { useTranslations } from "next-intl";
 import { ReactElement, useEffect, useState } from "react";
 import { usePageUrlGenerator } from "../../../../hooks";
 import { Link } from "../../../../shadcnui";
+import { formatDate } from "../../../../utils";
 import { UserInterface } from "../../../user";
 import { UserAvatar } from "../../../user/components";
 import { NotificationInterface } from "../../data";
+import { NotificationIcon } from "./NotificationIcon";
 
 type TaskCommentedOnProps = {
   notification: NotificationInterface;
@@ -93,34 +95,37 @@ export function NotificationMenuItem({ notification, closePopover }: TaskComment
   const data = generateNotificationData({ notification: notification, generateUrl: generateUrl });
 
   const response = (
-    <div className={`flex w-full flex-row p-2 ${isRead ? "" : "bg-muted"} items-center`}>
-      {data.actor ? (
-        <div className="flex w-12 max-w-12 px-2">
-          <UserAvatar user={data.actor} className="h-8 w-8" />
-        </div>
-      ) : (
-        <div className="flex w-14 max-w-14 px-2"></div>
-      )}
-      <div className="flex w-full flex-col">
-        <p className="text-sm">
+    /* Unread is marked with a tinted row + dot, not the muted background the
+       row used to carry: grey-on-grey reads as disabled, the opposite of
+       "needs your attention". */
+    <div
+      className={`hover:bg-accent flex w-full flex-row items-start gap-3 px-3 py-2.5 transition-colors ${isRead ? "" : "bg-primary/5"}`}
+    >
+      <NotificationIcon notificationType={notification.notificationType} />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <p className="text-foreground text-sm">
           {t.rich(`notification.${notification.notificationType}.description` as any, {
-            strong: (chunks: any) => <strong>{chunks}</strong>,
+            strong: (chunks: any) => <strong className="font-medium">{chunks}</strong>,
             actor: data.actor?.name ?? "",
             title: data.title,
             message: notification.message ?? "",
           })}
         </p>
-        <div className="text-muted-foreground mt-1 w-full text-xs">
-          {new Date(notification.createdAt).toLocaleString()}
+        <div className="text-muted-foreground mt-0.5 text-xs">
+          {formatDate(new Date(notification.createdAt), "default")}
         </div>
       </div>
+      {!isRead && <span className="bg-primary mt-1.5 size-2 shrink-0 rounded-full" aria-hidden />}
     </div>
   );
 
   if (!data.url) return response;
 
+  /* The whole row is the click target, so the package Link's text-primary
+     font-medium (typography role 14 — inline navigational text) would paint
+     every notification blue. Emphasis inside the sentence comes from weight. */
   return (
-    <Link href={data.url} onClick={closePopover}>
+    <Link href={data.url} onClick={closePopover} className="text-foreground block font-normal">
       {response}
     </Link>
   );

package/src/features/notification/components/notifications/NotificationIcon.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { AudioLinesIcon, BellIcon, LucideIcon } from "lucide-react";
+import { cn } from "../../../../utils";
+
+type IconTone = "muted" | "warning" | "destructive";
+
+/* Every row carries a glyph in the same 32px circle, which keeps the left rail
+   aligned and gives the eye a faster channel than reading the sentence. Types
+   not listed here fall back to the bell. */
+const notificationIcons: Record<string, { icon: LucideIcon; tone: IconTone }> = {
+  transcript_ready: { icon: AudioLinesIcon, tone: "muted" },
+};
+
+const toneClasses: Record<IconTone, string> = {
+  muted: "bg-muted text-muted-foreground",
+  warning: "bg-warning/10 text-warning",
+  destructive: "bg-destructive/10 text-destructive",
+};
+
+type NotificationIconProps = {
+  notificationType: string;
+  className?: string;
+};
+
+export function NotificationIcon({ notificationType, className }: NotificationIconProps) {
+  const { icon: Icon, tone } = notificationIcons[notificationType] ?? { icon: BellIcon, tone: "muted" as IconTone };
+
+  return (
+    <div
+      className={cn("flex size-8 shrink-0 items-center justify-center rounded-full", toneClasses[tone], className)}
+      aria-hidden
+    >
+      <Icon className="size-4" />
+    </div>
+  );
+}

package/src/features/notification/components/notifications/index.ts

@@ -1,2 +1,3 @@
 export * from "./Notification";
 export * from "./PushNotificationProvider";
+export * from "./NotificationIcon";

package/src/features/notification/data/notification.fields.ts

@@ -3,6 +3,10 @@ export enum NotificationFields {
 
   name = "name",
 
+  icon = "icon",
+  description = "description",
+  actions = "actions",
+
   createdAt = "createdAt",
   updatedAt = "updatedAt",
 }

package/src/features/notification/hooks/useNotificationTableStructure.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { ArchiveIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { registerTableGenerator, TableContent, usePageUrlGenerator, UseTableStructureHook } from "../../../hooks";
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "../../../shadcnui";
+import { formatDate } from "../../../utils";
+import { generateNotificationData } from "../components/notifications/Notification";
+import { useNotificationContext } from "../contexts/NotificationContext";
+import { NotificationIcon } from "../components/notifications/NotificationIcon";
+import { NotificationInterface } from "../data";
+import { NotificationFields } from "../data/notification.fields";
+import { NotificationService } from "../data/notification.service";
+
+const NOTIFICATIONS_MODULE_NAME = "notifications";
+
+/**
+ * Columns for the /notifications list.
+ *
+ * The row shape deliberately mirrors the notification popover row
+ * (`Notification.tsx` → `NotificationMenuItem`): the same `NotificationIcon` in
+ * a fixed first column, the same `t.rich(...)` sentence with `font-medium`
+ * emphasis, the same timestamp. Someone moving from the bell to the full page
+ * should recognise the same rows, not a different rendering of them.
+ *
+ * `context.archived` comes from `ContentListTable`'s `context` prop — the
+ * archive control is hidden in the archived tab, where it has nothing to do.
+ */
+export const useNotificationTableStructure: UseTableStructureHook<NotificationInterface, NotificationFields> = (
+  params,
+) => {
+  const t = useTranslations();
+  const generateUrl = usePageUrlGenerator();
+  const { loadNotifications } = useNotificationContext();
+
+  const archived: boolean = params.context?.archived === true;
+
+  /* The shared context is refetched, not just this list's retriever: the bell
+     renders from that context, and the API already hides archived rows from
+     it. Dropping the row only here left the popover showing a notification the
+     page had just archived until the context's 5-minute cache expired. */
+  const archiveNotification = async (notification: NotificationInterface) => {
+    await NotificationService.archive({ id: notification.id });
+    params.dataRetriever?.removeElement(notification);
+    await loadNotifications();
+  };
+
+  const tableData = useMemo(() => {
+    return params.data.map((notification: NotificationInterface) => {
+      const entry: TableContent<NotificationInterface> = { jsonApiData: notification };
+      entry[NotificationFields.notificationId] = notification.id;
+      entry[NotificationFields.createdAt] = notification.createdAt;
+      return entry;
+    });
+  }, [params.data]);
+
+  const fieldColumnMap: Partial<Record<NotificationFields, () => any>> = {
+    [NotificationFields.icon]: () => ({
+      id: "icon",
+      accessorKey: "icon",
+      header: ``,
+      meta: { className: "w-20" },
+      cell: ({ row }: { row: TableContent<NotificationInterface> }) => {
+        const notification: NotificationInterface = row.original.jsonApiData;
+
+        /* `isRead` here is the value the row was FETCHED with, and it stays
+           that way: opening the page marks what it shows as read, so a dot
+           that reacted to that would blink out under the reader's eyes. It
+           means "was unread when you opened the page", and it leads the row so
+           the eye picks up what is new before reading anything else. */
+        return (
+          <div className="flex items-center gap-2">
+            {notification.isRead ? (
+              <span className="size-2 shrink-0" aria-hidden />
+            ) : (
+              <Tooltip>
+                <TooltipTrigger render={<span className="bg-primary size-2 shrink-0 rounded-full" />}>
+                  <span className="sr-only">{t(`notification.unread`)}</span>
+                </TooltipTrigger>
+                <TooltipContent>{t(`notification.unread`)}</TooltipContent>
+              </Tooltip>
+            )}
+            <NotificationIcon notificationType={notification.notificationType} />
+          </div>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [NotificationFields.description]: () => ({
+      id: "description",
+      accessorKey: "description",
+      header: t(`notification.description`),
+      cell: ({ row }: { row: TableContent<NotificationInterface> }) => {
+        const notification: NotificationInterface = row.original.jsonApiData;
+        const data = generateNotificationData({ notification: notification, generateUrl: generateUrl });
+
+        return (
+          <p className="text-foreground text-sm">
+            {t.rich(`notification.${notification.notificationType}.description` as any, {
+              strong: (chunks: any) => <strong className="font-medium">{chunks}</strong>,
+              actor: data.actor?.name ?? "",
+              title: data.title,
+              message: notification.message ?? "",
+            })}
+          </p>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [NotificationFields.createdAt]: () => ({
+      id: "createdAt",
+      accessorKey: "createdAt",
+      header: t(`notification.createdAt`),
+      meta: { className: "w-40" },
+      cell: ({ row }: { row: TableContent<NotificationInterface> }) => {
+        const notification: NotificationInterface = row.original.jsonApiData;
+
+        /* Not `cellDate`: that renders the absolute shape, and the popover row
+           shows how long ago it arrived. The two must match. */
+        return (
+          <span className="text-muted-foreground text-xs">
+            {formatDate(new Date(notification.createdAt), "default")}
+          </span>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [NotificationFields.actions]: () => ({
+      id: "actions",
+      accessorKey: "actions",
+      header: ``,
+      meta: { className: "w-16" },
+      cell: ({ row }: { row: TableContent<NotificationInterface> }) => {
+        const notification: NotificationInterface = row.original.jsonApiData;
+
+        return (
+          <div className="flex flex-row items-center justify-end gap-x-1">
+            {!archived && (
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <Button
+                      variant={`link`}
+                      data-testid="notification-archive-button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        archiveNotification(notification);
+                      }}
+                      className="text-muted-foreground hover:text-destructive"
+                    />
+                  }
+                >
+                  <ArchiveIcon className="h-4 w-4 cursor-pointer" />
+                </TooltipTrigger>
+                <TooltipContent>{t(`notification.buttons.archive`)}</TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+        );
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }),
+  };
+
+  const columns = useMemo(() => {
+    return params.fields.map((field) => fieldColumnMap[field]?.()).filter((col) => col !== undefined) as ColumnDef<
+      TableContent<NotificationInterface>
+    >[];
+  }, [params.fields, fieldColumnMap, t, generateUrl]);
+
+  return useMemo(() => ({ data: tableData, columns: columns }), [tableData, columns]);
+};
+
+/* Registered by module NAME, not by `Modules.Notification`: `Modules` is a
+   Proxy that throws for any module the app has not bootstrapped yet, and this
+   line runs while the module graph is still being evaluated — before
+   `configureJsonApi` has had a chance to register anything. The lookup in
+   `useTableGenerator` keys off `module.name`, so the two are equivalent. */
+registerTableGenerator(NOTIFICATIONS_MODULE_NAME, useNotificationTableStructure);

package/src/features/notification/notification.module.ts

@@ -1,3 +1,4 @@
+import { BellIcon } from "lucide-react";
 import { ModuleFactory } from "../../permissions";
 import { Notification } from "./data/notification";
 
@@ -6,5 +7,6 @@ export const NotificationModule = (factory: ModuleFactory) =>
     pageUrl: "/notifications",
     name: "notifications",
     model: Notification,
+    icon: BellIcon,
     moduleId: "9259d704-c670-4e77-a3a1-a728ffc5be3d",
   });