@carlonicora/nextjs-jsonapi 3.19.1 → 3.20.0

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