feat: dashboard notifications count

showcase.json

@@ -60,5 +60,6 @@
   "atlas",
   "meow-7218",
   "erection",
-  "vup"
+  "vup",
+  "jowno"
 ]

src/components/dashboard/DashboardLayout.tsx

@@ -12,7 +12,8 @@ import { SiteSwitcher } from "./SiteSwitcher"
 import { useGetUserSites } from "~/queries/site"
 import { useAccount } from "wagmi"
 import { ConnectButton } from "~/components/common/ConnectButton"
-import { useGetSite } from "~/queries/site"
+import { useGetNotifications, useGetSite } from "~/queries/site"
+import { getStorage } from "~/lib/storage"
 
 export function DashboardLayout({
   children,
@@ -29,6 +30,25 @@ export function DashboardLayout({
 
   const userSite = useGetUserSites(address)
 
+  const notifications = useGetNotifications({
+    siteCId: site.data?.metadata?.proof,
+  })
+
+  const notificationCreatedAt =
+    getStorage(`notification-${subdomain}`)?.createdAt || 0
+
+  const [notificationCount, setNotificationCount] = useState(0)
+
+  useEffect(() => {
+    if (notifications.data && subdomain) {
+      const count = notifications.data.filter(
+        (notification: any) =>
+          +new Date(notification.createdAt) > +new Date(notificationCreatedAt),
+      ).length
+      setNotificationCount(count)
+    }
+  }, [notifications.data, subdomain, notificationCreatedAt])
+
   useEffect(() => {
     if (!address) {
       router.push("/")
@@ -67,8 +87,10 @@ export function DashboardLayout({
     {
       href: `/dashboard/${subdomain}/notifications`,
       isActive: ({ href, pathname }) => href === pathname,
-      icon: "i-bi:bell",
-      text: "Notifications",
+      icon: notificationCount > 0 ? "i-bi:bell-fill" : "i-bi:bell",
+      text:
+        "Notifications" +
+        (notificationCount > 0 ? ` (${notificationCount})` : ""),
     },
     {
       href: `/dashboard/${subdomain}/settings/general`,

src/pages/dashboard/[subdomain]/notifications.tsx

@@ -12,6 +12,8 @@ import relativeTime from "dayjs/plugin/relativeTime"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { CSB_SCAN } from "~/lib/env"
 import { PageContent } from "~/components/common/PageContent"
+import { useEffect, useMemo, useState } from "react"
+import { setStorage, getStorage } from "~/lib/storage"
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -26,6 +28,24 @@ export default function SubdomainIndex() {
     siteCId: site.data?.metadata?.proof,
   })
 
+  const [lastNotificationCreated, setLastNotificationCreated] = useState(0)
+
+  useMemo(() => {
+    if (subdomain && !lastNotificationCreated) {
+      setLastNotificationCreated(
+        +new Date(getStorage(`notification-${subdomain}`)?.createdAt || 1),
+      )
+    }
+  }, [subdomain])
+
+  useEffect(() => {
+    if (notifications.data?.[0].createdAt && subdomain) {
+      setStorage(`notification-${subdomain}`, {
+        createdAt: notifications.data[0].createdAt,
+      })
+    }
+  }, [notifications.data, subdomain])
+
   return (
     <DashboardLayout title="Dashboard">
       <DashboardMain>
@@ -59,7 +79,13 @@ export default function SubdomainIndex() {
 
               return (
                 <div key={key} className="border-t border-dashed pt-4">
-                  <div className="flex group items-center">
+                  <div className="flex group items-center relative">
+                    {+new Date(notification.createdAt) >
+                      +new Date(lastNotificationCreated) && (
+                      <div className="absolute right-full text-xs pr-2 top-1/2 -translate-y-1/2 font-bold text-accent">
+                        New
+                      </div>
+                    )}
                     <div>
                       <CharacterCard siteId={character?.handle}>
                         <div>
@@ -70,7 +96,7 @@ export default function SubdomainIndex() {
                                 subdomain: character.handle,
                               })
                             }
-                            className="block align-middle mr-3"
+                            className="block align-middle mr-3 text-[0px]"
                           >
                             <Avatar
                               images={