Priority Notifications

__tests__/components/brain/notifications/item/NotificationItem.test.tsx

@@ -5,6 +5,7 @@ import { ApiNotificationCause } from '@/generated/models/ApiNotificationCause';
 
 jest.mock('@/components/brain/notifications/drop-quoted/NotificationDropQuoted', () => ({ __esModule: true, default: () => <div data-testid="quoted" /> }));
 jest.mock('@/components/brain/notifications/drop-replied/NotificationDropReplied', () => ({ __esModule: true, default: () => <div data-testid="replied" /> }));
+jest.mock('@/components/brain/notifications/priority-alert/NotificationPriorityAlert', () => ({ __esModule: true, default: () => <div data-testid="priority-alert" /> }));
 
 describe('NotificationItem', () => {
   const base = { id: '1' } as any;
@@ -17,4 +18,9 @@ describe('NotificationItem', () => {
     render(<NotificationItem notification={{ ...base, cause: ApiNotificationCause.DropReplied }} activeDrop={null} onReply={jest.fn()} onQuote={jest.fn()} />);
     expect(screen.getByTestId('replied')).toBeInTheDocument();
   });
+
+  it('renders priority alert component', () => {
+    render(<NotificationItem notification={{ ...base, cause: ApiNotificationCause.PriorityAlert }} activeDrop={null} onReply={jest.fn()} onQuote={jest.fn()} />);
+    expect(screen.getByTestId('priority-alert')).toBeInTheDocument();
+  });
 });

__tests__/components/brain/notifications/priority-alert/NotificationPriorityAlert.test.tsx

@@ -0,0 +1,98 @@
+import NotificationPriorityAlert from "@/components/brain/notifications/priority-alert/NotificationPriorityAlert";
+import { render, screen } from "@testing-library/react";
+import { useRouter } from "next/navigation";
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(() => ({ push: jest.fn() })),
+  useSearchParams: jest.fn(),
+  usePathname: jest.fn(),
+}));
+
+const DropMock = jest.fn(() => <div data-testid="drop" />);
+jest.mock("@/components/waves/drops/Drop", () => ({
+  __esModule: true,
+  default: (props: any) => {
+    DropMock(props);
+    return <div data-testid="drop" />;
+  },
+  DropLocation: {
+    MY_STREAM: "MY_STREAM",
+    WAVE: "WAVE",
+  },
+}));
+
+jest.mock("@/hooks/useDeviceInfo", () => ({
+  __esModule: true,
+  default: jest.fn(() => ({ isApp: false })),
+}));
+
+const baseNotification: any = {
+  id: 1,
+  cause: "PRIORITY_ALERT" as any,
+  related_identity: { handle: "alice", pfp: null },
+  related_drops: [
+    {
+      id: "d",
+      wave: { id: "w" },
+      author: { handle: "alice" },
+      serial_no: 1,
+      parts: [],
+      metadata: [],
+    },
+  ],
+  additional_context: {},
+  created_at: 1,
+  read_at: null,
+};
+
+describe("NotificationPriorityAlert", () => {
+  it("renders priority alert notification with drop", () => {
+    render(
+      <NotificationPriorityAlert
+        notification={baseNotification}
+        activeDrop={null}
+        onReply={jest.fn()}
+        onQuote={jest.fn()}
+      />
+    );
+    expect(screen.getByText("alice")).toBeInTheDocument();
+    expect(screen.getByText(/sent a priority alert/)).toBeInTheDocument();
+    expect(screen.getByTestId("drop")).toBeInTheDocument();
+  });
+
+  it("renders notification header when related_drops is empty", () => {
+    const notificationWithoutDrops = {
+      ...baseNotification,
+      related_drops: [],
+    };
+    render(
+      <NotificationPriorityAlert
+        notification={notificationWithoutDrops}
+        activeDrop={null}
+        onReply={jest.fn()}
+        onQuote={jest.fn()}
+      />
+    );
+    expect(screen.getByText("alice")).toBeInTheDocument();
+    expect(screen.getByText(/sent a priority alert/)).toBeInTheDocument();
+    expect(screen.queryByTestId("drop")).not.toBeInTheDocument();
+  });
+
+  it("uses router in reply and quote handlers", () => {
+    render(
+      <NotificationPriorityAlert
+        notification={baseNotification}
+        activeDrop={null}
+        onReply={jest.fn()}
+        onQuote={jest.fn()}
+      />
+    );
+    expect(DropMock).toHaveBeenCalled();
+    const props = DropMock.mock.calls[0][0];
+    props.onReplyClick(5);
+    props.onQuoteClick({ wave: { id: "w" }, serial_no: 6 } as any);
+    const router = (useRouter as jest.Mock).mock.results[0].value;
+    expect(router.push).toHaveBeenCalledWith("/waves?wave=w&serialNo=5/");
+    expect(router.push).toHaveBeenCalledWith("/waves?wave=w&serialNo=6/");
+  });
+});

components/brain/notifications/NotificationItem.tsx

@@ -1,16 +1,17 @@
-import { memo } from "react";
+import { DropInteractionParams } from "@/components/waves/drops/Drop";
 import { ApiNotificationCause } from "@/generated/models/ApiNotificationCause";
 import { assertUnreachable } from "@/helpers/AllowlistToolHelpers";
 import { ExtendedDrop } from "@/helpers/waves/drop.helpers";
-import { TypedNotification } from "@/types/feed.types";
 import { ActiveDropState } from "@/types/dropInteractionTypes";
-import { DropInteractionParams } from "@/components/waves/drops/Drop";
+import { TypedNotification } from "@/types/feed.types";
+import { memo } from "react";
+import NotificationAllDrops from "./all-drops/NotificationAllDrops";
 import NotificationDropQuoted from "./drop-quoted/NotificationDropQuoted";
 import NotificationDropReplied from "./drop-replied/NotificationDropReplied";
 import NotificationIdentityMentioned from "./identity-mentioned/NotificationIdentityMentioned";
 import NotificationIdentitySubscribed from "./identity-subscribed/NotificationIdentitySubscribed";
+import NotificationPriorityAlert from "./priority-alert/NotificationPriorityAlert";
 import NotificationWaveCreated from "./wave-created/NotificationWaveCreated";
-import NotificationAllDrops from "./all-drops/NotificationAllDrops";
 
 import type { JSX } from "react";
 import NotificationDropReacted from "./drop-reacted/NotificationDropReacted";
@@ -85,6 +86,16 @@ function NotificationItemComponent({
             onDropContentClick={onDropContentClick}
           />
         );
+      case ApiNotificationCause.PriorityAlert:
+        return (
+          <NotificationPriorityAlert
+            notification={notification}
+            activeDrop={activeDrop}
+            onReply={onReply}
+            onQuote={onQuote}
+            onDropContentClick={onDropContentClick}
+          />
+        );
       default:
         assertUnreachable(notification);
         return <div />;

components/brain/notifications/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo } from "react";
 import { ApiNotificationCause } from "@/generated/models/ApiNotificationCause";
 import type { ActiveDropState } from "@/types/dropInteractionTypes";
+import { useMemo } from "react";
 import NotificationsCauseFilter from "./NotificationsCauseFilter";
 import { useNotificationsController } from "./hooks/useNotificationsController";
 import { useNotificationsScroll } from "./hooks/useNotificationsScroll";
@@ -22,11 +22,12 @@ const NOTIFICATION_CAUSE_PRIORITY: Record<ApiNotificationCause, number> = {
   [ApiNotificationCause.DropReacted]: 5,
   [ApiNotificationCause.WaveCreated]: 6,
   [ApiNotificationCause.AllDrops]: 7,
+  [ApiNotificationCause.PriorityAlert]: 8,
 };
 
 const compareNotificationCause = (
   firstCause: ApiNotificationCause,
-  secondCause: ApiNotificationCause,
+  secondCause: ApiNotificationCause
 ): number =>
   NOTIFICATION_CAUSE_PRIORITY[firstCause] -
   NOTIFICATION_CAUSE_PRIORITY[secondCause];
@@ -52,7 +53,7 @@ export default function Notifications({
       activeFilter?.cause
         ? [...activeFilter.cause].sort(compareNotificationCause).join("|")
         : "notifications-filter-all",
-    [activeFilter],
+    [activeFilter]
   );
 
   const { scrollContainerRef, handleScroll } = useNotificationsScroll({

components/brain/notifications/priority-alert/NotificationPriorityAlert.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import Drop, {
+  DropInteractionParams,
+  DropLocation,
+} from "@/components/waves/drops/Drop";
+import { ApiDrop } from "@/generated/models/ApiDrop";
+import { getTimeAgoShort } from "@/helpers/Helpers";
+import { getScaledImageUri, ImageScale } from "@/helpers/image.helpers";
+import { getWaveRoute } from "@/helpers/navigation.helpers";
+import { DropSize, ExtendedDrop } from "@/helpers/waves/drop.helpers";
+import useDeviceInfo from "@/hooks/useDeviceInfo";
+import { ActiveDropState } from "@/types/dropInteractionTypes";
+import { INotificationPriorityAlert } from "@/types/feed.types";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function NotificationPriorityAlert({
+  notification,
+  activeDrop,
+  onReply,
+  onQuote,
+  onDropContentClick,
+}: {
+  readonly notification: INotificationPriorityAlert;
+  readonly activeDrop: ActiveDropState | null;
+  readonly onReply: (param: DropInteractionParams) => void;
+  readonly onQuote: (param: DropInteractionParams) => void;
+  readonly onDropContentClick?: (drop: ExtendedDrop) => void;
+}) {
+  const router = useRouter();
+  const { isApp } = useDeviceInfo();
+
+  const headerSection = (
+    <div className="tw-flex tw-gap-x-2 tw-items-center">
+      <div className="tw-h-7 tw-w-7">
+        {notification.related_identity.pfp ? (
+          <img
+            src={getScaledImageUri(
+              notification.related_identity.pfp,
+              ImageScale.W_AUTO_H_50
+            )}
+            alt="#"
+            className="tw-flex-shrink-0 tw-object-contain tw-h-full tw-w-full tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700"
+          />
+        ) : (
+          <div className="tw-flex-shrink-0 tw-object-contain tw-h-full tw-w-full tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" />
+        )}
+      </div>
+      <span className="tw-text-sm tw-font-normal tw-text-iron-50">
+        <Link
+          href={`/${notification.related_identity.handle}`}
+          className="tw-no-underline tw-font-semibold">
+          {notification.related_identity.handle}
+        </Link>{" "}
+        <span className="tw-text-iron-400">sent a priority alert 🚨</span>{" "}
+        <span className="tw-text-sm tw-text-iron-300 tw-font-normal tw-whitespace-nowrap">
+          <span className="tw-font-bold tw-mr-1 tw-text-xs tw-text-iron-400">
+            &#8226;
+          </span>{" "}
+          {getTimeAgoShort(notification.created_at)}
+        </span>
+      </span>
+    </div>
+  );
+
+  if (!notification.related_drops || notification.related_drops.length === 0) {
+    return (
+      <div className="tw-w-full tw-flex tw-gap-x-3">
+        <div className="tw-w-full tw-flex tw-flex-col tw-space-y-2">
+          {headerSection}
+        </div>
+      </div>
+    );
+  }
+
+  const baseWave = notification.related_drops[0]?.wave as any;
+  const isDirectMessage =
+    baseWave?.chat?.scope?.group?.is_direct_message ?? false;
+
+  const onReplyClick = (serialNo: number) => {
+    const firstDrop = notification.related_drops[0];
+    if (!firstDrop?.wave?.id) return;
+    router.push(
+      getWaveRoute({
+        waveId: firstDrop.wave.id,
+        serialNo,
+        isDirectMessage,
+        isApp,
+      })
+    );
+  };
+
+  const onQuoteClick = (quote: ApiDrop) => {
+    const quoteWave = quote.wave as any;
+    const quoteIsDm =
+      quoteWave?.chat?.scope?.group?.is_direct_message ?? isDirectMessage;
+
+    router.push(
+      getWaveRoute({
+        waveId: quote.wave.id,
+        serialNo: quote.serial_no,
+        isDirectMessage: quoteIsDm,
+        isApp,
+      })
+    );
+  };
+
+  return (
+    <div className="tw-w-full tw-flex tw-gap-x-3">
+      <div className="tw-w-full tw-flex tw-flex-col tw-space-y-2">
+        {headerSection}
+
+        <Drop
+          drop={{
+            type: DropSize.FULL,
+            ...notification.related_drops[0],
+            stableKey: "",
+            stableHash: "",
+          }}
+          previousDrop={null}
+          nextDrop={null}
+          showWaveInfo={true}
+          showReplyAndQuote={true}
+          activeDrop={activeDrop}
+          location={DropLocation.MY_STREAM}
+          dropViewDropId={null}
+          onReply={onReply}
+          onQuote={onQuote}
+          onReplyClick={onReplyClick}
+          onQuoteClick={onQuoteClick}
+          onDropContentClick={onDropContentClick}
+        />
+      </div>
+    </div>
+  );
+}

generated/models/ApiNotificationCause.ts

@@ -20,5 +20,6 @@ export enum ApiNotificationCause {
     DropVoted = 'DROP_VOTED',
     DropReacted = 'DROP_REACTED',
     WaveCreated = 'WAVE_CREATED',
-    AllDrops = 'ALL_DROPS'
+    AllDrops = 'ALL_DROPS',
+    PriorityAlert = 'PRIORITY_ALERT'
 }

openapi.yaml

@@ -5563,6 +5563,7 @@ components:
         - DROP_REACTED
         - WAVE_CREATED
         - ALL_DROPS
+        - PRIORITY_ALERT
     ApiNotificationsResponse:
       type: object
       required:

types/feed.types.ts

@@ -132,6 +132,16 @@ export type INotificationAllDrops = {
   };
 };
 
+export type INotificationPriorityAlert = {
+  readonly id: number;
+  readonly cause: ApiNotificationCause.PriorityAlert;
+  readonly created_at: number;
+  readonly read_at: number | null;
+  readonly related_identity: ApiProfileMin;
+  readonly related_drops: Array<ApiDrop>;
+  readonly additional_context: any;
+};
+
 export type TypedNotification =
   | INotificationIdentitySubscribed
   | INotificationIdentityMentioned
@@ -140,7 +150,8 @@ export type TypedNotification =
   | INotificationDropQuoted
   | INotificationDropReplied
   | INotificationWaveCreated
-  | INotificationAllDrops;
+  | INotificationAllDrops
+  | INotificationPriorityAlert;
 
 export interface TypedNotificationsResponse
   extends Omit<ApiNotificationsResponse, "notifications"> {