feat(notifications): open bell popover

job-tracker-ui/src/App.tsx

@@ -23,6 +23,7 @@ import { ConfirmProvider } from "./confirm";
 import { PromptProvider } from "./prompt";
 
 import JobTable from "./components/JobTable";
+import NotificationsPopover from "./components/NotificationsPopover";
 import type { JobTableColumns } from "./components/JobTable";
 import { I18nProvider, useI18n } from "./i18n/I18nProvider";
 import LoginPage from "./views/LoginPage";
@@ -164,6 +165,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
   const [reminderCount, setReminderCount] = useState(0);
   const [notificationCount, setNotificationCount] = useState(0);
+  const [notificationAnchor, setNotificationAnchor] = useState<HTMLElement | null>(null);
 
   const path = location.pathname;
   const isJobs = path.startsWith("/jobs");
@@ -347,7 +349,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
         onNavigate={(to) => { setMobileDrawerOpen(false); navigate(to); }}
         user={{ email: me?.email, userName: me?.userName, displayName: me?.displayName || fullName || undefined, avatarImageDataUrl: me?.avatarImageDataUrl, roleLabel: isAdmin ? t("superAdmin") : t("user") }}
         notificationsCount={notificationCount}
-        onOpenNotifications={() => navigate("/operations")}
+        onOpenNotifications={(anchor) => setNotificationAnchor(anchor)}
         onOpenSettings={() => navigate("/settings")}
         onOpenProfile={() => navigate("/profile")}
         onSignOut={() => { void api.post("/auth/logout").catch(() => undefined).finally(() => { clearAuthClientState(); navigate("/login"); }); }}
@@ -382,6 +384,13 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
         </Suspense>
       </AppShell>
 
+      <NotificationsPopover
+        anchorEl={notificationAnchor}
+        onClose={() => setNotificationAnchor(null)}
+        onNavigate={(to) => navigate(to)}
+        onChanged={() => window.dispatchEvent(new Event("notifications-changed"))}
+      />
+
       <Suspense fallback={null}>
         <AddJobModal open={addOpen} initialUrl={captureUrl} onClose={() => { setAddOpen(false); setCaptureUrl(undefined); }} onCreated={() => { setRefreshToken((t) => t + 1); }} />
         <QuickCommandDialog open={quickOpen} onClose={() => setQuickOpen(false)} onNavigate={(to) => navigate(to)} onOpenAddJob={() => setAddOpen(true)} />