[TOOL-3556] Dashboard: Add Notifications, Revamp Team Overview page (#6368)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the notification system in the dashboard by integrating changelog and inbox notifications, improving UI components, and updating dependencies.

### Detailed summary
- Added `getChangelogNotifications`, `getInboxNotifications`, and `markNotificationAsRead` functions.
- Integrated notifications in `AccountHeaderUI`, `TeamHeader`, and `SecondaryNav`.
- Updated styles for various components.
- Replaced `Changelog` component with a new layout in `TeamProjectsPage`.
- Enhanced notification handling using `idb-keyval` for local storage.

> The following files were skipped due to too many changes: `pnpm-lock.yaml`

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/package.json

@@ -63,6 +63,7 @@
     "flat": "^6.0.1",
     "framer-motion": "12.4.7",
     "fuse.js": "7.1.0",
+    "idb-keyval": "^6.2.1",
     "input-otp": "^1.4.1",
     "ioredis": "^5.5.0",
     "ipaddr.js": "^2.2.0",

apps/dashboard/src/@/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground/10 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background selection:bg-foreground/10 file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className,
         )}
         ref={ref}

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -76,7 +76,7 @@ export function TabLinks(props: {
 
 export function TabButtons(props: {
   tabs: {
-    name: string;
+    name: React.ReactNode;
     onClick: () => void;
     isActive: boolean;
     isEnabled?: boolean;
@@ -108,10 +108,11 @@ export function TabButtons(props: {
           className={cn("flex", props.tabContainerClassName)}
           ref={containerRef}
         >
-          {props.tabs.map((tab) => {
+          {props.tabs.map((tab, index) => {
             return (
               <Button
-                key={tab.name}
+                // biome-ignore lint/suspicious/noArrayIndexKey: tabs don't change order, so index is stable
+                key={index}
                 variant="ghost"
                 ref={tab.isActive ? activeTabRef : undefined}
                 className={cn(

apps/dashboard/src/app/account/components/AccountHeader.tsx

@@ -10,6 +10,11 @@ import { useCallback, useState } from "react";
 import { useActiveWallet, useDisconnect } from "thirdweb/react";
 import { LazyCreateProjectDialog } from "../../../components/settings/ApiKeys/Create/LazyCreateAPIKeyDialog";
 import { doLogout } from "../../login/auth-actions";
+import {
+  getChangelogNotifications,
+  getInboxNotifications,
+  markNotificationAsRead,
+} from "../../team/components/NotificationButton/fetch-notifications";
 import {
   type AccountHeaderCompProps,
   AccountHeaderDesktopUI,
@@ -54,6 +59,9 @@ export function AccountHeader(props: {
     account: props.account,
     client,
     accountAddress: props.accountAddress,
+    getChangelogNotifications: getChangelogNotifications,
+    getInboxNotifications: getInboxNotifications,
+    markNotificationAsRead: markNotificationAsRead,
   };
 
   return (

apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx

@@ -62,6 +62,9 @@ function Variants(props: {
                 email: "foo@example.com",
               }}
               client={client}
+              getChangelogNotifications={() => Promise.resolve([])}
+              getInboxNotifications={() => Promise.resolve([])}
+              markNotificationAsRead={() => Promise.resolve()}
             />
           </div>
         </BadgeContainer>

apps/dashboard/src/app/account/components/AccountHeaderUI.tsx

@@ -8,6 +8,10 @@ import type { ThirdwebClient } from "thirdweb";
 import { SecondaryNav } from "../../components/Header/SecondaryNav/SecondaryNav";
 import { MobileBurgerMenuButton } from "../../components/MobileBurgerMenuButton";
 import { ThirdwebMiniLogo } from "../../components/ThirdwebMiniLogo";
+import {
+  NotificationButtonUI,
+  type NotificationMetadata,
+} from "../../team/components/NotificationButton/NotificationButton";
 import { TeamAndProjectSelectorPopoverButton } from "../../team/components/TeamHeader/TeamAndProjectSelectorPopoverButton";
 import { TeamSelectorMobileMenuButton } from "../../team/components/TeamHeader/TeamSelectorMobileMenuButton";
 
@@ -20,6 +24,9 @@ export type AccountHeaderCompProps = {
   account: Pick<Account, "email" | "id" | "image">;
   client: ThirdwebClient;
   accountAddress: string;
+  getChangelogNotifications: () => Promise<NotificationMetadata[]>;
+  getInboxNotifications: () => Promise<NotificationMetadata[]>;
+  markNotificationAsRead: (id: string) => Promise<void>;
 };
 
 export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
@@ -70,6 +77,9 @@ export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
         connectButton={props.connectButton}
         client={props.client}
         accountAddress={props.accountAddress}
+        getChangelogs={props.getChangelogNotifications}
+        getInboxNotifications={props.getInboxNotifications}
+        markNotificationAsRead={props.markNotificationAsRead}
       />
     </header>
   );
@@ -111,13 +121,21 @@ export function AccountHeaderMobileUI(props: AccountHeaderCompProps) {
         </div>
       </div>
 
-      <MobileBurgerMenuButton
-        type="loggedIn"
-        email={props.account?.email}
-        logout={props.logout}
-        connectButton={props.connectButton}
-        accountAddress={props.accountAddress}
-      />
+      <div className="flex items-center gap-3">
+        <NotificationButtonUI
+          getChangelogs={props.getChangelogNotifications}
+          getInboxNotifications={props.getInboxNotifications}
+          markNotificationAsRead={props.markNotificationAsRead}
+        />
+
+        <MobileBurgerMenuButton
+          type="loggedIn"
+          email={props.account?.email}
+          logout={props.logout}
+          connectButton={props.connectButton}
+          accountAddress={props.accountAddress}
+        />
+      </div>
     </header>
   );
 }

apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx

@@ -2,6 +2,10 @@ import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import Link from "next/link";
 import type React from "react";
 import type { ThirdwebClient } from "thirdweb";
+import {
+  NotificationButtonUI,
+  type NotificationMetadata,
+} from "../../../team/components/NotificationButton/NotificationButton";
 import { ResourcesDropdownButton } from "./ResourcesDropdownButton";
 import { AccountButton } from "./account-button.client";
 
@@ -11,17 +15,27 @@ export function SecondaryNav(props: {
   connectButton: React.ReactNode;
   client: ThirdwebClient;
   accountAddress: string;
+  getChangelogs: () => Promise<NotificationMetadata[]>;
+  getInboxNotifications: () => Promise<NotificationMetadata[]>;
+  markNotificationAsRead: (id: string) => Promise<void>;
 }) {
   return (
     <div className="flex items-center gap-6">
       <SecondaryNavLinks />
-      <AccountButton
-        logout={props.logout}
-        connectButton={props.connectButton}
-        account={props.account}
-        client={props.client}
-        accountAddress={props.accountAddress}
-      />
+      <div className="flex items-center gap-3">
+        <NotificationButtonUI
+          getChangelogs={props.getChangelogs}
+          getInboxNotifications={props.getInboxNotifications}
+          markNotificationAsRead={props.markNotificationAsRead}
+        />
+        <AccountButton
+          logout={props.logout}
+          connectButton={props.connectButton}
+          account={props.account}
+          client={props.client}
+          accountAddress={props.accountAddress}
+        />
+      </div>
     </div>
   );
 }

apps/dashboard/src/app/components/Header/SecondaryNav/account-button.client.tsx

@@ -33,7 +33,7 @@ export function AccountButton(props: {
         <Button
           size="icon"
           asChild
-          className="size-10 cursor-pointer rounded-full hover:ring-2 hover:ring-offset-2"
+          className="size-10 cursor-pointer rounded-full hover:ring-2 hover:ring-ring hover:ring-offset-1"
           variant="ghost"
         >
           {/* Don't remove the div */}

apps/dashboard/src/app/components/MobileBurgerMenuButton.tsx

@@ -59,10 +59,10 @@ export function MobileBurgerMenuButton(
       /> */}
       <Button
         variant="outline"
-        className="!h-auto p-1"
+        className="flex size-10 items-center justify-center rounded-full bg-background p-0"
         onClick={() => setIsMenuOpen(true)}
       >
-        <MenuIcon className="size-6 text-muted-foreground" />
+        <MenuIcon className="size-4 text-muted-foreground" />
       </Button>
 
       {isMenuOpen && (

apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx

@@ -1,7 +1,6 @@
 import { getWalletConnections } from "@/api/analytics";
 import { type Project, getProjects } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
-import { Changelog } from "components/dashboard/Changelog";
 import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
 import {
@@ -23,16 +22,17 @@ export default async function Page(props: {
   const projectsWithTotalWallets = await getProjectsWithAnalytics(projects);
 
   return (
-    <div className="container flex grow flex-col gap-12 py-8 lg:flex-row">
-      <div className="flex grow flex-col">
-        <h1 className="mb-4 font-semibold text-2xl tracking-tight">Projects</h1>
-        <TeamProjectsPage projects={projectsWithTotalWallets} team={team} />
+    <div className="flex grow flex-col">
+      <div className="border-border border-b py-10">
+        <div className="container">
+          <h1 className="font-semibold text-3xl tracking-tight">
+            Team Overview
+          </h1>
+        </div>
       </div>
-      <div className="shrink-0 lg:w-[320px]">
-        <h2 className="mb-4 font-semibold text-2xl tracking-tight">
-          Changelog
-        </h2>
-        <Changelog />
+
+      <div className="container flex grow flex-col pt-8 pb-20">
+        <TeamProjectsPage projects={projectsWithTotalWallets} team={team} />
       </div>
     </div>
   );