From 72183f887e9511f2a0675ff20c75db6514cfde64 Mon Sep 17 00:00:00 2001
From: Moore <moorejohn2403@gmail.com>
Date: Fri, 10 Jul 2026 20:00:38 +0100
Subject: [PATCH] fix: make notification badge conditional and show unread
 count

- Create useNotifications hook to fetch notifications from API
- Update dashboard layout to use useNotifications hook
- Badge only renders when there are unread notifications
- Badge shows numeric count (capped at 9+)
- No layout shift when badge appears/disappears

Fixes #2
---
 src/app/dashboard/layout.tsx   |  6 +++++-
 src/hooks/use-notifications.ts | 36 ++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/use-notifications.ts

diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index fabd365..ee0bad8 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -9,11 +9,15 @@ import { Bell, Search, Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 import Link from "next/link"
 import { DashboardSkeleton } from "@/components/shared/skeletons"
+import { useNotifications } from "@/hooks/use-notifications"
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   const { isAuthenticated, isLoading } = useAuth()
   const router = useRouter()
   const { theme, setTheme } = useTheme()
+  const { data: notifications } = useNotifications()
+  
+  const unreadCount = notifications?.filter(n => !n.read).length ?? 0
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) router.push("/auth")
@@ -36,7 +40,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
               <Sun className="h-4 w-4 rotate-0 scale-100 dark:-rotate-90 dark:scale-0" />
               <Moon className="absolute h-4 w-4 rotate-90 scale-0 dark:rotate-0 dark:scale-100" />
             </Button>
-            <Link href="/dashboard/notifications"><Button variant="ghost" size="icon" className="relative"><Bell className="h-4 w-4" /><span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500" /></Button></Link>
+            <Link href="/dashboard/notifications"><Button variant="ghost" size="icon" className="relative"><Bell className="h-4 w-4" />{unreadCount > 0 && <span className="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-white text-xs font-semibold">{unreadCount > 9 ? '9+' : unreadCount}</span>}</Button></Link>
           </div>
         </header>
         <main className="flex-1 p-4 lg:p-8 pb-24 lg:pb-8">{children}</main>
diff --git a/src/hooks/use-notifications.ts b/src/hooks/use-notifications.ts
new file mode 100644
index 0000000..1240116
--- /dev/null
+++ b/src/hooks/use-notifications.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react"
+
+export interface Notification {
+  id: string
+  title: string
+  message: string
+  type: "warning" | "success" | "info" | "error"
+  read: boolean
+  createdAt: string
+}
+
+export function useNotifications() {
+  const [data, setData] = useState<Notification[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    const fetchNotifications = async () => {
+      try {
+        setIsLoading(true)
+        const response = await fetch("/api/notifications")
+        if (!response.ok) throw new Error("Failed to fetch notifications")
+        const notifications = await response.json()
+        setData(notifications)
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Unknown error"))
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchNotifications()
+  }, [])
+
+  return { data, isLoading, error }
+}