feat: integrate unread notification count in sidebars and navbar

- Added unread notification count display in HomeLeftSidebar and DashboardSidebar components.
- Created NotificationsNavLink and DashboardNotificationsMenuItem for improved navigation and user experience.
- Updated NavbarActions to include a notification button that reflects unread counts.

This enhancement provides users with immediate visibility of unread notifications across the application.

Author: kingRayhan

src/app/(home)/_components/HomeLeftSidebar.tsx

@@ -18,6 +18,7 @@ import {
   TagsIcon,
 } from "lucide-react";
 import Link from "next/link";
+import { useUnreadNotificationCount } from "@/components/notifications/use-unread-notification-count";
 
 const HomeLeftSidebar = () => {
   const [open, setOpen] = useAtom(homeSidebarOpenAtom);
@@ -94,11 +95,7 @@ const Sidebar = () => {
             icon={<BookmarkIcon size={17} />}
             label={_t("Bookmarks")}
           />
-          <NavLink
-            href="/dashboard/notifications"
-            icon={<BellIcon size={17} />}
-            label={_t("Notifications")}
-          />
+          <NotificationsNavLink />
         </div>
       )}
 
@@ -139,16 +136,36 @@ const NavLink = ({
   href,
   icon,
   label,
+  badge,
 }: {
   href: string;
   icon: React.ReactNode;
   label: string;
+  badge?: number;
 }) => (
   <Link
     href={href}
-    className="flex items-center gap-2.5 px-2 py-1.5 rounded-md text-sm text-foreground hover:bg-muted transition-colors"
+    className="flex min-w-0 items-center gap-2.5 px-2 py-1.5 rounded-md text-sm text-foreground hover:bg-muted transition-colors"
   >
-    <span className="text-muted-foreground">{icon}</span>
-    {label}
+    <span className="text-muted-foreground shrink-0">{icon}</span>
+    <span className="min-w-0 flex-1 truncate">{label}</span>
+    {badge != null && badge > 0 ? (
+      <span className="ml-auto flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground tabular-nums">
+        {badge > 99 ? "99+" : badge}
+      </span>
+    ) : null}
   </Link>
 );
+
+const NotificationsNavLink = () => {
+  const { _t } = useTranslation();
+  const { data: unread = 0 } = useUnreadNotificationCount();
+  return (
+    <NavLink
+      href="/dashboard/notifications"
+      icon={<BellIcon size={17} />}
+      label={_t("Notifications")}
+      badge={unread}
+    />
+  );
+};

src/app/dashboard/_components/DashboardSidebar.tsx

@@ -16,11 +16,11 @@ import {
   Bookmark,
   Home,
   KeySquareIcon,
-  Settings,
   Settings2,
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useUnreadNotificationCount } from "@/components/notifications/use-unread-notification-count";
 
 const DashboardSidebar = () => {
   const { _t } = useTranslation();
@@ -36,11 +36,6 @@ const DashboardSidebar = () => {
     //   url: "/series",
     //   icon: Home,
     // },
-    // {
-    //   title: _t("Notifications"),
-    //   url: "/notifications",
-    //   icon: BellIcon,
-    // },
     {
       title: _t("Bookmarks"),
       url: "/bookmarks",
@@ -64,7 +59,7 @@ const DashboardSidebar = () => {
           <SidebarGroupLabel>{_t("Dashboard")}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              {items.map((item, key) => (
+              {items.slice(0, 1).map((item, key) => (
                 <SidebarMenuItem key={key}>
                   <SidebarMenuButton
                     asChild
@@ -80,6 +75,26 @@ const DashboardSidebar = () => {
                   </SidebarMenuButton>
                 </SidebarMenuItem>
               ))}
+              <DashboardNotificationsMenuItem
+                pathName={pathName}
+                label={_t("Notifications")}
+              />
+              {items.slice(1).map((item, key) => (
+                <SidebarMenuItem key={`rest-${key}`}>
+                  <SidebarMenuButton
+                    asChild
+                    isActive={pathName === `/dashboard${item.url}`}
+                  >
+                    <Link
+                      className="text-muted-foreground"
+                      href={`/dashboard${item.url}`}
+                    >
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
@@ -88,4 +103,35 @@ const DashboardSidebar = () => {
   );
 };
 
+function DashboardNotificationsMenuItem({
+  pathName,
+  label,
+}: {
+  pathName: string;
+  label: string;
+}) {
+  const { data: unread = 0 } = useUnreadNotificationCount();
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={pathName === "/dashboard/notifications"}
+      >
+        <Link
+          className="text-muted-foreground flex w-full min-w-0 items-center gap-2"
+          href="/dashboard/notifications"
+        >
+          <BellIcon className="shrink-0" />
+          <span className="min-w-0 flex-1 truncate">{label}</span>
+          {unread > 0 ? (
+            <span className="flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground tabular-nums">
+              {unread > 99 ? "99+" : unread}
+            </span>
+          ) : null}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}
+
 export default DashboardSidebar;

src/components/Navbar/NavbarActions.tsx

@@ -18,6 +18,7 @@ import LanguageSwitcher from "./LanguageSwitcher";
 import Link from "next/link";
 import { useAtom } from "jotai";
 import { searchBarAtom } from "@/store/search-bar.atom";
+import { NavbarNotificationButton } from "@/components/notifications/NavbarNotificationButton";
 
 const NavbarActions: React.FC = () => {
   const { _t } = useTranslation();
@@ -35,6 +36,7 @@ const NavbarActions: React.FC = () => {
       </Button>
       <LanguageSwitcher />
       <ThemeSwitcher />
+      <NavbarNotificationButton />
 
       {authSession?.session ? (
         <>

src/components/notifications/NavbarNotificationButton.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "@/i18n/use-translation";
+import { useSession } from "@/store/session.atom";
+import { Bell } from "lucide-react";
+import Link from "next/link";
+import { useUnreadNotificationCount } from "./use-unread-notification-count";
+
+export function NavbarNotificationButton() {
+  const { _t } = useTranslation();
+  const authSession = useSession();
+  const { data: unread = 0 } = useUnreadNotificationCount();
+
+  if (!authSession?.session) return null;
+
+  return (
+    <Button variant="ghost" size="icon" className="relative shrink-0" asChild>
+      <Link
+        href="/dashboard/notifications"
+        aria-label={_t("Notifications")}
+        title={_t("Notifications")}
+      >
+        <Bell className="size-[1.15rem]" strokeWidth={2} />
+        {unread > 0 ? (
+          <span className="absolute right-0.5 top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-none text-primary-foreground tabular-nums">
+            {unread > 99 ? "99+" : unread}
+          </span>
+        ) : null}
+      </Link>
+    </Button>
+  );
+}

src/components/notifications/use-unread-notification-count.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import * as notificationActions from "@/backend/services/notifications.actions";
+import { useSession } from "@/store/session.atom";
+import { useQuery } from "@tanstack/react-query";
+
+export function useUnreadNotificationCount() {
+  const session = useSession();
+  return useQuery({
+    queryKey: ["unread-notification-count"],
+    queryFn: async () => {
+      const r = await notificationActions.unreadNotificationCount();
+      if (!r.success) return 0;
+      return r.data.count;
+    },
+    enabled: Boolean(session?.session),
+    staleTime: 60 * 1000,
+  });
+}