I added functioonality to the notifications

src/components/layout/sidebar.tsx

@@ -20,9 +20,7 @@ import {
 } from "lucide-react"
 import { COMPANY_NAME } from "@/lib/constants"
 import { useUser } from "@/providers/user-provider"
-import { conversations as conversationsData } from "@/data/chats"
-
-const totalUnread = conversationsData.reduce((sum, c) => sum + c.unread, 0)
+import { useNotifications } from "@/providers/notification-provider"
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
@@ -42,6 +40,7 @@ interface SidebarProps {
 export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
   const pathname = usePathname()
   const { user } = useUser()
+  const { unreadChatCount } = useNotifications()
   if (!user) return null
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
@@ -104,9 +103,9 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
                     )}
                   >
                     <item.icon className="h-5 w-5" />
-                    {item.label === "Chats" && totalUnread > 0 && (
+                    {item.label === "Chats" && unreadChatCount > 0 && (
                       <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-medium text-destructive-foreground">
-                        {totalUnread}
+                        {unreadChatCount}
                       </span>
                     )}
                   </Link>