[Dashboard] Add notifications system with unread tracking (#7302)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new notifications system with a bell icon button displaying unread indicators.
  - Added a notifications panel with Inbox and Archive tabs supporting infinite scrolling and marking notifications as read.
  - Implemented a centralized notification state manager with optimized fetching, caching, and mutation handling.
  - Added a UI drawer component for mobile notification display with smooth open/close interactions.

- **Refactor**
  - Replaced legacy notification button and fetching logic with the new unified Notifications button using only account ID.
  - Removed legacy notification callbacks and components from header and navigation for simplified notification handling.

- **Chores**
  - Removed deprecated notification files and Storybook stories.
  - Updated dependencies by replacing "idb-keyval" with "vaul" for UI drawer functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on removing the `NotificationButton` component and its related files, replacing it with a new `NotificationsButton` component that integrates notifications more effectively within the application.

### Detailed summary
- Deleted `NotificationButton.tsx`, `fetch-notifications.ts`, and `NotificationButton.stories.tsx`.
- Added `NotificationsButton` component with enhanced functionality for displaying notifications.
- Updated various components (`AccountHeaderUI`, `SecondaryNav`, `TeamHeaderUI`) to use `NotificationsButton`.
- Removed references to `getInboxNotifications` and `markNotificationAsRead` from multiple components.
- Introduced new notification management logic and UI components in `notification-list.tsx` and `notification-entry.tsx`.
- Updated dependencies in `package.json` to include the new `vaul` library for UI elements.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: jnsdls

apps/dashboard/package.json

@@ -66,7 +66,6 @@
     "flat": "^6.0.1",
     "framer-motion": "12.9.2",
     "fuse.js": "7.1.0",
-    "idb-keyval": "^6.2.1",
     "input-otp": "^1.4.1",
     "ioredis": "^5.6.1",
     "ipaddr.js": "^2.2.0",
@@ -105,6 +104,7 @@
     "thirdweb": "workspace:*",
     "tiny-invariant": "^1.3.3",
     "use-debounce": "^10.0.4",
+    "vaul": "^1.1.2",
     "zod": "3.25.24"
   },
   "devDependencies": {

apps/dashboard/src/@/api/notifications.ts

@@ -0,0 +1,157 @@
+"use server";
+
+import "server-only";
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+
+export type Notification = {
+  id: string;
+  createdAt: string;
+  accountId: string;
+  teamId: string | null;
+  description: string;
+  readAt: string | null;
+  ctaText: string;
+  ctaUrl: string;
+};
+
+export type NotificationsApiResponse = {
+  result: Notification[];
+  nextCursor?: string;
+};
+
+export async function getUnreadNotifications(cursor?: string) {
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    throw new Error("No auth token found");
+  }
+  const url = new URL(
+    "/v1/dashboard-notifications/unread",
+    NEXT_PUBLIC_THIRDWEB_API_HOST,
+  );
+  if (cursor) {
+    url.searchParams.set("cursor", cursor);
+  }
+
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    return {
+      status: "error",
+      reason: "unknown",
+      body,
+    } as const;
+  }
+
+  const data = (await response.json()) as NotificationsApiResponse;
+
+  return {
+    status: "success",
+    data,
+  } as const;
+}
+
+export async function getArchivedNotifications(cursor?: string) {
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    throw new Error("No auth token found");
+  }
+
+  const url = new URL(
+    "/v1/dashboard-notifications/archived",
+    NEXT_PUBLIC_THIRDWEB_API_HOST,
+  );
+  if (cursor) {
+    url.searchParams.set("cursor", cursor);
+  }
+
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    return {
+      status: "error",
+      reason: "unknown",
+      body,
+    } as const;
+  }
+
+  const data = (await response.json()) as NotificationsApiResponse;
+
+  return {
+    status: "success",
+    data,
+  } as const;
+}
+
+export async function getUnreadNotificationsCount() {
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    throw new Error("No auth token found");
+  }
+
+  const url = new URL(
+    "/v1/dashboard-notifications/unread-count",
+    NEXT_PUBLIC_THIRDWEB_API_HOST,
+  );
+  const response = await fetch(url, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    return {
+      status: "error",
+      reason: "unknown",
+      body,
+    } as const;
+  }
+  const data = (await response.json()) as {
+    result: {
+      unreadCount: number;
+    };
+  };
+  return {
+    status: "success",
+    data,
+  } as const;
+}
+
+export async function markNotificationAsRead(notificationId?: string) {
+  const authToken = await getAuthToken();
+  if (!authToken) {
+    throw new Error("No auth token found");
+  }
+  const url = new URL(
+    "/v1/dashboard-notifications/mark-as-read",
+    NEXT_PUBLIC_THIRDWEB_API_HOST,
+  );
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+    // if notificationId is provided, mark it as read, otherwise mark all as read
+    body: JSON.stringify(notificationId ? { notificationId } : {}),
+  });
+  if (!response.ok) {
+    const body = await response.text();
+    return {
+      status: "error",
+      reason: "unknown",
+      body,
+    } as const;
+  }
+  return {
+    status: "success",
+  } as const;
+}

apps/dashboard/src/@/components/blocks/notifications/notification-button.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { BellIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { NotificationList } from "./notification-list";
+import { useNotifications } from "./state/manager";
+
+export function NotificationsButton(props: { accountId: string }) {
+  const manager = useNotifications(props.accountId);
+  const [open, setOpen] = useState(false);
+
+  const isMobile = useIsMobile();
+
+  const trigger = useMemo(
+    () => (
+      <Button variant="outline" size="icon" className="relative rounded-full">
+        <BellIcon className="h-4 w-4" />
+        {(manager.unreadNotificationsCount || 0) > 0 && (
+          <span className="absolute top-0 right-0 flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75" />
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
+          </span>
+        )}
+      </Button>
+    ),
+    [manager.unreadNotificationsCount],
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[90vh] min-h-[66vh]">
+          <DrawerTitle className="sr-only">Notifications</DrawerTitle>
+          <NotificationList {...manager} />
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        className="max-h-[90vh] min-h-[500px] w-[400px] max-w-md p-0"
+        align="end"
+      >
+        <NotificationList {...manager} />
+      </PopoverContent>
+    </Popover>
+  );
+}

apps/dashboard/src/@/components/blocks/notifications/notification-entry.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import type { Notification } from "@/api/notifications";
+import { Button } from "@/components/ui/button";
+import {
+  format,
+  formatDistanceToNow,
+  isBefore,
+  parseISO,
+  subDays,
+} from "date-fns";
+import { ArchiveIcon } from "lucide-react";
+import { useMemo } from "react";
+
+interface NotificationEntryProps {
+  notification: Notification;
+  onMarkAsRead?: (id: string) => void;
+}
+
+export function NotificationEntry({
+  notification,
+  onMarkAsRead,
+}: NotificationEntryProps) {
+  const timeAgo = useMemo(() => {
+    try {
+      const now = new Date();
+      const date = parseISO(notification.createdAt);
+      // if the date is older than 1 day, show the date
+      // otherwise, show the time ago
+
+      if (isBefore(date, subDays(now, 1))) {
+        return format(date, "MMM d, yyyy");
+      }
+
+      return formatDistanceToNow(date, {
+        addSuffix: true,
+      });
+    } catch (error) {
+      console.error("Failed to parse date", error);
+      return null;
+    }
+  }, [notification.createdAt]);
+
+  return (
+    <div className="flex flex-row py-1.5">
+      {onMarkAsRead && (
+        <div className="min-h-full w-1 shrink-0 rounded-r-lg bg-primary" />
+      )}
+      <div className="flex w-full flex-row justify-between gap-2 border-b px-4 py-2 transition-colors last:border-b-0">
+        <div className="flex items-start gap-3">
+          <div className="flex-1 space-y-1">
+            <p className="text-sm">{notification.description}</p>
+            {timeAgo && (
+              <p className="text-muted-foreground text-xs">{timeAgo}</p>
+            )}
+            <div className="flex flex-row justify-between gap-2 pt-1">
+              <Button asChild variant="link" size="sm" className="px-0">
+                <a
+                  href={notification.ctaUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {notification.ctaText}
+                </a>
+              </Button>
+            </div>
+          </div>
+        </div>
+        {onMarkAsRead && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onMarkAsRead(notification.id)}
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <ArchiveIcon className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}