Implement Smart Notification Popover

src/components/layout/TopBar.tsx

@@ -1,4 +1,5 @@
-import { Search, Bell, ChevronDown, LogOut } from 'lucide-react';
+import { Search, ChevronDown, LogOut } from 'lucide-react';
+import { NotificationPopover } from '@/components/notifications/NotificationPopover';
 import { cn } from '@/lib/utils';
 import { useAuth } from '@/contexts/AuthContext';
 import {
@@ -60,17 +61,7 @@ export function TopBar({ title, description }: TopBarProps) {
         </div>
 
         {/* Notifications */}
-        <button
-          className={cn(
-            "relative h-10 w-10 flex items-center justify-center rounded-xl",
-            "neu-button"
-          )}
-        >
-          <Bell className="h-5 w-5 text-muted-foreground" />
-          <span className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full bg-error text-[10px] font-bold text-error-foreground">
-            3
-          </span>
-        </button>
+        <NotificationPopover />
 
         {/* Profile Dropdown */}
         <DropdownMenu>