feat(notifications): open bell popover

docs/audits/verification-log.md

@@ -194,3 +194,4 @@ Output was reduced to filenames and commit counts. The token artifact appears un
 | V-160 | Focused overlay/workflow Jest; direct URL query hydration; full `npm test -- --runInBand --forceExit`; production build; diff review | `job-tracker-ui` | Verify JOBS-002 URL-owned list state without breaking workspace routes or workflow links | PASS — focused 2 suites and 6/6, full frontend 51 suites and 207/207, and optimized production build/TypeScript pass. Search survives overlay Back/Forward; direct URLs hydrate status/company/location/follow-up/readiness/deleted/sort/direction/page into the API request; company loading no longer produces a MUI out-of-range state | Existing Jest force-exit notice remains; browser refresh/history still to be exercised in Playwright | Local increment verified |
 | V-161 | `UsersControllerTests`; focused theme/confirm/admin-users Jest; production frontend build; native-confirm search; `git diff --check` | Repository root / `job-tracker-ui` | Verify canonical theme persistence, semantic Alert contrast ownership, app-owned destructive dialogs and final-admin safety | PASS — backend 4/4; theme/confirm 8/8; admin UI 3/3; production build/TypeScript pass; no remaining `window.confirm` in frontend. Self-demotion cancel/confirm, other-admin warning, preserved roles and final-admin disabled/API conflict paths are covered | JSDOM/local mocks only; authenticated real-browser refresh and production remain | Repository safety increment verified |
 | V-162 | Focused workspace/table/workflow Jest; `ApplicationWorkspaceTests`; production frontend build; standalone TypeScript audit; route/native-popup search | Repository root / `job-tracker-ui` | Verify canonical dedicated job workspace, whole-row navigation, independent controls, list-state return, contextual section routes and richer owner-scoped details | PASS — frontend 8/8 and backend 9/9; optimized build passes; direct `/jobs/:id`, section route, return state, missing job and control isolation pass. Standalone TypeScript found only pre-existing test-prop/target errors, with no new application-source error | JSDOM/InMemory backend only; browser widths/themes/refresh and production remain. Legacy dialog source retained for rollback but is no longer reachable from the list | Repository increment verified |
+| V-163 | Focused notification-popover/AppShell/Operations Jest; production frontend build; direct-navigation review | `job-tracker-ui` | Verify the header bell opens notification UI instead of routing to Reminders/Operations, while preserving global activity access | PASS — 3 suites and 6/6 tests; optimized TypeScript build passes. Popover fetch, count exposure, read, dismiss, notification-owned navigation and empty state are covered; Operations remains reachable through explicit “View all activity” | JSDOM/mocked API only; browser positioning/focus/theme and production remain | Repository increment verified |

docs/verification/jobs-002-application-workspace.md

@@ -22,6 +22,7 @@ Updated: 2026-08-15
 - The workspace aggregate now includes discovery date, full/translated advert text, language, tags, notes and available source/country provenance. Job Details renders these without overflowing and exposes the existing editor.
 - Workflow, quick-command, correspondence and Gmail-review links route to the appropriate dedicated workspace section.
 - Correspondence and Gmail Review are removed from primary sidebar navigation; the global inbox routes remain available for compatibility and genuinely global review work.
+- The header bell opens a theme-aware notification popover anchored to the bell. It supports loading/error/empty states, mark-read, dismiss, notification-owned destinations and a separate link to the global Operations page.
 - Return navigation preserves the complete URL-owned list state, including when a workspace section changes.
 
 ## Verification
@@ -29,11 +30,12 @@ Updated: 2026-08-15
 - Focused Jest: workspace/table and workflow routing — 8/8 pass.
 - Focused backend workspace aggregate: 9/9 pass.
 - Production build: pass. Standalone repository-wide `tsc --noEmit` still exposes pre-existing React Router test-prop and target errors; no new application-source error was reported.
-- Evidence: V-158–V-162 in `docs/audits/verification-log.md`.
+- Notification/AppShell/Operations focused Jest: 3 suites and 6/6 pass.
+- Evidence: V-158–V-163 in `docs/audits/verification-log.md`.
 
 ## Remaining before completion
 
 - URL-owned list state is implemented for search, status, company, location, follow-up, readiness, deleted visibility, sort/direction and page. Direct hydration and dedicated-page return pass focused tests; real-browser refresh/history remains.
-- Add a shared dirty-edit close/navigation guard for workspace sections that own unsaved content.
+- Confirm the existing section-level save/dirty behavior does not need an additional workspace-level navigation guard.
 - Add real-browser 375/768/1440, light/dark, keyboard/focus restoration, refresh/history, error and long-content evidence.
 - Run tenant-authorization regressions and the production smoke gate.

docs/work-programmes/master-progress.md

@@ -3,7 +3,7 @@
 Updated: 2026-08-15
 
 - **Overall programme status:** Active. Seven packages are locally verified; twenty-two packages through UX-003 are implemented with automated/runtime evidence but blocked from applicable live/provider/production gates; JOBS-002 is now in progress. Gitea run 609 passes the prior complete pull-request CI; DEP-001 awaits approved merge-to-main and production verification.
-- **Current work package:** `JOBS-002` — dedicated application workspace and scan-friendly applications table (`IN PROGRESS`). Canonical `/jobs/:id`, compact whole-row navigation, sidebar cleanup and richer job details are locally verified; notification popover and browser regression are next.
+- **Current work package:** `JOBS-002` — dedicated application workspace and scan-friendly applications table (`IN PROGRESS`). Canonical `/jobs/:id`, compact whole-row navigation, sidebar cleanup, richer details and anchored notification popover are locally verified; browser regression is next.
 - **Completed work packages:** None are `DONE`; all repository security/AI packages still have applicable browser, provider and/or production gates.
 - **Locally verified work:** SEC-001, SEC-002, SEC-003, SEC-005A, CORE-001, PROD-002 and DEP-001 (`VERIFIED LOCALLY`).
 - **Implemented, verification incomplete:** SEC-004, SEC-005B, SEC-008, CORE-002, BG-001, OPS-001A/B/C, POL-001/002, AI-001/002/003/004, UX-001/002/003, QA-001, CAREER-001/002, MAIL-001 and JOBS-001 (`IMPLEMENTED — NOT VERIFIED`). UX-003 safe local/browser scope is implemented; production/native-device gates remain.
@@ -12,7 +12,7 @@ Updated: 2026-08-15
 - **Deferred work:** None. Conditional multi-replica coordination, model deletion, realtime operation delivery and unrelated production changes remain outside current packages.
 - **Next five work packages:** JOBS-002 applications/workspace; PRODUCT-001 homepage/Pro claims; VER-001 action matrix; production-blocked SEC-006/007 when package-index permission is available; REL-001 after prerequisites.
 - **Status counts:** 7 `VERIFIED LOCALLY`; 22 `IMPLEMENTED — NOT VERIFIED`; 1 `IN PROGRESS`; 5 `NOT STARTED`; 5 `BLOCKED`; 0 `DONE`; 0 `DEFERRED`.
-- **Test status:** backend baseline 631/631 plus admin safety 4/4 and workspace 9/9; frontend baseline 51/51 suites and 207/207 plus theme/confirm/admin focused 11/11 and JOBS-002 focused 8/8; Playwright 6/6; npm audit 0 vulnerabilities; production build passes. Historical JT-019 and Jest force-exit/open-handle behavior remain recorded.
+- **Test status:** backend baseline 631/631 plus admin safety 4/4 and workspace 9/9; frontend baseline 51/51 suites and 207/207 plus theme/confirm/admin focused 11/11, JOBS-002 focused 8/8 and notification focused 6/6; Playwright 6/6; npm audit 0 vulnerabilities; production build passes. Historical JT-019 and Jest force-exit/open-handle behavior remain recorded.
 - **Deployment status:** Gitea pull-request run 609 passed the complete CI job in 4m20s. Deploy was intentionally skipped because the workflow deploys only a `push` to `main`; live remains unchanged. No merge/deployment was performed directly, no production migrations were run and the AI operation worker remains disabled by default.
 - **Production status:** Unchanged and unverified. No provider/model call, model pull, external request or paid API occurred.
 - **Known regressions:** None found by automated/local browser checks. Jest still needs `--forceExit` and reports its existing open-handle notice. Email-provider/send tests are fake/local only; real delivery is not claimed. Current MAIL browser evidence is 1280×720 only because the browser surface could not resize or perform native Tab traversal. Interrupted attempts are aged after 15 minutes and notified without retry; the five-minute scan is unmeasured on a large ledger. Direct clean EF-only SQLite migration still hits the pre-existing historical blank-chain defect before later migrations; normal startup owns reconciliation. Cross-feature monthly AI usage accounting remains a rollout gap.

docs/work-programmes/master-work-plan.md

@@ -689,7 +689,7 @@ Ordering differences from the suggested list:
 - **Blocker:** none after dependencies.
 - **Evidence:** V-158–V-162; `docs/verification/jobs-002-application-workspace.md`.
 - **Commit:** `bd5362c` (URL-owned list state); dedicated page commit pending.
-- **Remaining work:** canonical `/jobs/:id`, row/card navigation, compact priority columns, richer job details, contextual links and sidebar cleanup are implemented. Still required: dirty-edit navigation guard where section editors lack one; notification popover; browser widths/themes/keyboard/history/error/long-data checks; authorization regression and production smoke. Do not place every field in the table or duplicate workspace data.
+- **Remaining work:** canonical `/jobs/:id`, row/card navigation, compact priority columns, richer job details, contextual links, sidebar cleanup and notification popover are implemented. Still required: confirm section dirty-edit behavior; browser widths/themes/keyboard/history/error/long-data checks; authorization regression and production smoke. Do not place every field in the table or duplicate workspace data.
 
 ### UX-003 — Kanban theme-state correction
 

docs/work-programmes/session-handoff.md

@@ -2,17 +2,17 @@
 
 Updated: 2026-08-15
 
-- **Exact current task:** continue JOBS-002; implement the top notification popover, then complete browser regression for the dedicated application workspace.
-- **Last completed step:** canonical `/jobs/:id`, compact whole-row navigation, richer job details, route compatibility, contextual workflow links and sidebar cleanup passed focused tests.
-- **Files currently modified:** JOBS-002 API aggregate, workspace/list/routes/tests and tracking documents.
-- **Commands already run:** workspace/table/workflow Jest 8/8; ApplicationWorkspace backend 9/9; production frontend build; standalone `tsc --noEmit` baseline audit.
-- **Test results:** focused JOBS frontend 8/8 and backend 9/9; production build passes. Repository-wide standalone TypeScript still reports pre-existing React Router test `future` props, one Testing Library option and ES target errors; application source added no error.
+- **Exact current task:** continue JOBS-002 with real-browser workspace/table/theme/keyboard/history/error/long-content regression.
+- **Last completed step:** the header bell now opens a reusable anchored notification panel with read/dismiss/link/empty/error behavior; it no longer routes directly to Operations.
+- **Files currently modified:** notification model/popover/AppShell/App integration/tests/translations, Operations reuse and JOBS tracking.
+- **Commands already run:** notification/AppShell/Operations Jest 6/6 and production frontend build.
+- **Test results:** focused notification 6/6; focused JOBS frontend 8/8 and backend 9/9; production build passes. Repository-wide standalone TypeScript still reports pre-existing React Router test `future` props, one Testing Library option and ES target errors; application source added no error.
 - **Services currently running:** none on task-owned ports 3000/5202. Playwright stopped its disposable API/Next servers. Pre-existing Docker services were not changed.
 - **Temporary files or processes:** no task-owned process is running and the failed disposable migration database was removed. Existing synthetic browser evidence/account and startup-created local backup remain documented. No provider account, real email, private content, paid service or production service was accessed.
 - **Production changes currently active:** none. No deployment, migration, provider connection/sync/send or production payload occurred.
 - **Rollback status:** downgrade `20260810080858_AddEmailDraftClientRequestId`, then `20260810075206_AddEmailDrafts`, before reverting draft commits; then follow the existing MAIL rollback order (`ee5ef7e`, `449faeb`, `123fc55`/`e9937ac`, ledger downgrade before `653f011`). No production migration/deploy/provider grant occurred.
-- **Uncommitted changes:** V-162 dedicated job workspace/list/sidebar increment and tracking; no dependency/schema/config change.
+- **Uncommitted changes:** V-163 notification popover and tracking; no dependency/schema/config change.
 - **Known failures:** live deployment is not verified because PR deploy is intentionally skipped and the active branch is not approved for merge. Draft export/API/UI, full thread/category actions and non-Gmail review remain; existing accounts need re-consent and IMAP stays read-only. A clean full-chain SQLite apply fails in the pre-existing JT-019 migration before the new draft migration. Browser/provider/MariaDB/production unavailable or unverified; recovery scan performance is unmeasured at large ledger scale; Jest open handles; SEC-006 parser dependency work is still separately gated; parser isolation remains SEC-007.
-- **Exact next action:** commit/push V-162; add the bell notification popover without removing the Operations page.
+- **Exact next action:** commit/push V-163; run the JOBS-002 browser matrix and address evidence-backed defects.
 - **Work that can continue independently:** JOBS-002, PRODUCT-001 and VER-001. UX/JOBS production, MAIL provider mutations, SEC-006/007 and PROD packages retain their recorded external gates.
 - **Decisions still required from the user:** none for synthetic/code-inspected repository work. Any provider connection or send test, internet/package upgrades, private data, external/paid providers and production actions retain explicit approval/safety gates; SEC-009 retention/legal policy remains unresolved.

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)} />

job-tracker-ui/src/app-shell-notifications.test.tsx

@@ -34,4 +34,5 @@ test("notification bell exposes its unread count and keyboard-accessible action"
   expect(screen.getByText("3")).toBeInTheDocument();
   fireEvent.click(bell);
   expect(open).toHaveBeenCalledTimes(1);
+  expect(open.mock.calls[0][0]).toBeInstanceOf(HTMLElement);
 });

job-tracker-ui/src/components/NotificationsPopover.tsx

@@ -0,0 +1,167 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import {
+  Alert,
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  IconButton,
+  Popover,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import DoneIcon from "@mui/icons-material/Done";
+
+import { api, getApiErrorMessage } from "../api";
+import { useI18n } from "../i18n/I18nProvider";
+import { notificationDateLabel, UserNotification } from "../notifications";
+
+type Props = {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  onNavigate: (path: string) => void;
+  onChanged: () => void;
+};
+
+export default function NotificationsPopover({ anchorEl, onClose, onNavigate, onChanged }: Props) {
+  const { t } = useI18n();
+  const open = Boolean(anchorEl);
+  const [notifications, setNotifications] = useState<UserNotification[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await api.get<UserNotification[]>("/notifications?limit=10");
+      setNotifications(response.data ?? []);
+      setError(null);
+    } catch (requestError) {
+      setError(getApiErrorMessage(requestError, t("notificationsLoadFailed")));
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    if (open) void load();
+  }, [load, open]);
+
+  const markRead = async (notification: UserNotification) => {
+    if (notification.readAtUtc || busyId) return;
+    setBusyId(notification.id);
+    try {
+      await api.post(`/notifications/${notification.id}/read`);
+      setNotifications((items) => items.map((item) => item.id === notification.id
+        ? { ...item, readAtUtc: new Date().toISOString() }
+        : item));
+      setError(null);
+      onChanged();
+    } catch (requestError) {
+      setError(getApiErrorMessage(requestError, t("notificationsActionFailed")));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const dismiss = async (notification: UserNotification) => {
+    if (busyId) return;
+    setBusyId(notification.id);
+    try {
+      await api.delete(`/notifications/${notification.id}`);
+      setNotifications((items) => items.filter((item) => item.id !== notification.id));
+      setError(null);
+      onChanged();
+    } catch (requestError) {
+      setError(getApiErrorMessage(requestError, t("notificationsActionFailed")));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const openNotification = async (notification: UserNotification) => {
+    if (!notification.linkPath) return;
+    if (!notification.readAtUtc) await markRead(notification);
+    onClose();
+    onNavigate(notification.linkPath);
+  };
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      onClose={onClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      transformOrigin={{ vertical: "top", horizontal: "right" }}
+      slotProps={{
+        paper: {
+          "aria-label": t("notificationsPanel"),
+          sx: {
+            mt: 1,
+            width: "min(420px, calc(100vw - 24px))",
+            maxHeight: "min(70vh, 600px)",
+            borderRadius: 3,
+            overflow: "hidden",
+          },
+        },
+      }}
+    >
+      <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ px: 2, py: 1.5 }}>
+        <Box>
+          <Typography sx={{ fontWeight: 900 }}>{t("notifications")}</Typography>
+          <Typography variant="caption" color="text.secondary">{t("notificationsRecent")}</Typography>
+        </Box>
+        <Tooltip title={t("close")}>
+          <IconButton size="small" aria-label={t("close")} onClick={onClose}><CloseIcon fontSize="small" /></IconButton>
+        </Tooltip>
+      </Stack>
+      <Divider />
+
+      <Box sx={{ overflowY: "auto", maxHeight: "min(52vh, 450px)", p: 1 }}>
+        {loading ? <Box sx={{ py: 4, display: "grid", placeItems: "center" }}><CircularProgress size={28} aria-label={t("loading")} /></Box> : null}
+        {error ? <Alert severity="error" action={<Button color="inherit" size="small" onClick={() => void load()}>{t("retry")}</Button>} sx={{ m: 0.5 }}>{error}</Alert> : null}
+        {!loading && !error && notifications.length === 0 ? (
+          <Box sx={{ py: 4, px: 2, textAlign: "center" }}>
+            <Typography sx={{ fontWeight: 800 }}>{t("notificationsEmptyTitle")}</Typography>
+            <Typography variant="body2" color="text.secondary">{t("notificationsEmptyBody")}</Typography>
+          </Box>
+        ) : null}
+        {!loading ? notifications.map((notification) => (
+          <Box
+            key={notification.id}
+            sx={{
+              p: 1.5,
+              mb: 0.75,
+              borderRadius: 2.5,
+              border: "1px solid",
+              borderColor: "divider",
+              bgcolor: notification.readAtUtc ? "transparent" : "action.selected",
+              opacity: notification.readAtUtc ? 0.82 : 1,
+            }}
+          >
+            <Typography sx={{ fontWeight: notification.readAtUtc ? 700 : 900, overflowWrap: "anywhere" }}>{notification.title}</Typography>
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.25, overflowWrap: "anywhere" }}>{notification.message}</Typography>
+            <Typography variant="caption" color="text.secondary">{notificationDateLabel(notification.createdAtUtc)}</Typography>
+            <Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: 0.75, flexWrap: "wrap" }}>
+              {notification.linkPath ? <Button size="small" onClick={() => void openNotification(notification)}>{t("notificationsOpen")}</Button> : null}
+              {!notification.readAtUtc ? (
+                <Button size="small" startIcon={<DoneIcon />} disabled={busyId !== null} onClick={() => void markRead(notification)}>{t("notificationsMarkRead")}</Button>
+              ) : null}
+              <Button size="small" color="inherit" startIcon={<DeleteOutlineIcon />} disabled={busyId !== null} onClick={() => void dismiss(notification)}>{t("notificationsDismiss")}</Button>
+            </Stack>
+          </Box>
+        )) : null}
+      </Box>
+
+      <Divider />
+      <Box sx={{ p: 1 }}>
+        <Button fullWidth onClick={() => { onClose(); onNavigate("/operations"); }}>{t("notificationsViewAll")}</Button>
+      </Box>
+    </Popover>
+  );
+}

job-tracker-ui/src/i18n/translations.ts

@@ -33,6 +33,17 @@ export const translations = {
     systemStatus: "System status",
     manage: "Manage",
     notifications: "Notifications",
+    notificationsPanel: "Notifications panel",
+    notificationsRecent: "Recent updates and background work",
+    notificationsLoadFailed: "Notifications could not be loaded.",
+    notificationsActionFailed: "The notification could not be updated.",
+    notificationsEmptyTitle: "You're all caught up",
+    notificationsEmptyBody: "New alerts and completed background work will appear here.",
+    notificationsOpen: "Open",
+    notificationsMarkRead: "Mark read",
+    notificationsDismiss: "Dismiss",
+    notificationsViewAll: "View all activity",
+    retry: "Retry",
     quickSearch: "Quick Search",
     searchPlaceholder: "Search jobs, companies, or actions",
     noMatchingCommands: "No matching commands or records.",
@@ -1174,6 +1185,17 @@ export const translations = {
     systemStatus: "Systemstatus",
     manage: "Administrer",
     notifications: "Varsler",
+    notificationsPanel: "Varslingspanel",
+    notificationsRecent: "Nylige oppdateringer og bakgrunnsarbeid",
+    notificationsLoadFailed: "Varslene kunne ikke lastes.",
+    notificationsActionFailed: "Varslet kunne ikke oppdateres.",
+    notificationsEmptyTitle: "Du er ajour",
+    notificationsEmptyBody: "Nye varsler og fullført bakgrunnsarbeid vises her.",
+    notificationsOpen: "Åpne",
+    notificationsMarkRead: "Marker som lest",
+    notificationsDismiss: "Fjern",
+    notificationsViewAll: "Vis all aktivitet",
+    retry: "Prøv igjen",
     quickSearch: "Hurtigsøk",
     searchPlaceholder: "Søk etter jobber, selskaper eller handlinger",
     noMatchingCommands: "Ingen treff på kommandoer eller poster.",

job-tracker-ui/src/layout/AppShell.tsx

@@ -101,7 +101,7 @@ export default function AppShell({
   drawerOpen: boolean;
   user?: { email?: string; userName?: string; displayName?: string; avatarImageDataUrl?: string; roleLabel?: string };
   notificationsCount?: number;
-  onOpenNotifications?: () => void;
+  onOpenNotifications?: (anchorEl: HTMLElement) => void;
   onOpenSettings?: () => void;
   onOpenProfile?: () => void;
   onSignOut?: () => void;
@@ -301,7 +301,7 @@ export default function AppShell({
                     size="small"
                     title={t("notifications")}
                     aria-label={t("notifications")}
-                    onClick={onOpenNotifications}
+                    onClick={(event) => onOpenNotifications?.(event.currentTarget)}
                     sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2.5, width: 42, height: 42 }}
                   >
                     <Badge color="primary" badgeContent={notificationsCount || 0} max={99}>
@@ -363,7 +363,7 @@ export default function AppShell({
                   size="small"
                   title={t("notifications")}
                   aria-label={t("notifications")}
-                  onClick={onOpenNotifications}
+                  onClick={(event) => onOpenNotifications?.(event.currentTarget)}
                   sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2 }}
                 >
                   <Badge color="primary" badgeContent={notificationsCount || 0} max={99}>

job-tracker-ui/src/notifications-popover.test.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import { api } from "./api";
+import NotificationsPopover from "./components/NotificationsPopover";
+import { I18nProvider } from "./i18n/I18nProvider";
+
+jest.mock("./api", () => ({
+  api: {
+    get: jest.fn(),
+    post: jest.fn(),
+    delete: jest.fn(),
+    interceptors: { request: { use: jest.fn() }, response: { use: jest.fn() } },
+  },
+  getApiErrorMessage: (_error: unknown, fallback?: string) => fallback || "Request failed.",
+}));
+
+const mockedApi = api as jest.Mocked<typeof api>;
+const notification = {
+  id: "22222222-2222-2222-2222-222222222222",
+  operationId: null,
+  kind: "operation_failed",
+  title: "CV export failed",
+  message: "Review the operation and try again.",
+  linkPath: "/operations",
+  createdAtUtc: "2026-08-15T12:00:00Z",
+  readAtUtc: null,
+};
+
+function renderPopover(overrides: Partial<React.ComponentProps<typeof NotificationsPopover>> = {}) {
+  const anchor = document.createElement("button");
+  document.body.appendChild(anchor);
+  const props = {
+    anchorEl: anchor,
+    onClose: jest.fn(),
+    onNavigate: jest.fn(),
+    onChanged: jest.fn(),
+    ...overrides,
+  };
+  const result = render(<I18nProvider><NotificationsPopover {...props} /></I18nProvider>);
+  return { ...result, props, anchor };
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockedApi.get.mockResolvedValue({ data: [notification] } as any);
+  mockedApi.post.mockResolvedValue({ data: {} } as any);
+  mockedApi.delete.mockResolvedValue({ data: {} } as any);
+});
+
+test("shows notifications and updates read and dismissed state in place", async () => {
+  const { props } = renderPopover();
+
+  expect(await screen.findByText("CV export failed")).toBeInTheDocument();
+  expect(mockedApi.get).toHaveBeenCalledWith("/notifications?limit=10");
+
+  fireEvent.click(screen.getByRole("button", { name: "Mark read" }));
+  await waitFor(() => expect(mockedApi.post).toHaveBeenCalledWith(`/notifications/${notification.id}/read`));
+  expect(props.onChanged).toHaveBeenCalledTimes(1);
+  await waitFor(() => expect(screen.queryByRole("button", { name: "Mark read" })).not.toBeInTheDocument());
+
+  fireEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+  await waitFor(() => expect(mockedApi.delete).toHaveBeenCalledWith(`/notifications/${notification.id}`));
+  await waitFor(() => expect(screen.queryByText("CV export failed")).not.toBeInTheDocument());
+  expect(props.onChanged).toHaveBeenCalledTimes(2);
+});
+
+test("opens a notification destination instead of routing the bell itself", async () => {
+  const { props } = renderPopover();
+
+  fireEvent.click(await screen.findByRole("button", { name: "Open" }));
+
+  await waitFor(() => expect(props.onNavigate).toHaveBeenCalledWith("/operations"));
+  expect(mockedApi.post).toHaveBeenCalledWith(`/notifications/${notification.id}/read`);
+  expect(props.onClose).toHaveBeenCalledTimes(1);
+});
+
+test("shows an honest empty state", async () => {
+  mockedApi.get.mockResolvedValue({ data: [] } as any);
+  renderPopover();
+
+  expect(await screen.findByText("You're all caught up")).toBeInTheDocument();
+});

job-tracker-ui/src/notifications.ts

@@ -0,0 +1,15 @@
+export type UserNotification = {
+  id: string;
+  operationId?: string | null;
+  kind: string;
+  title: string;
+  message: string;
+  linkPath?: string | null;
+  createdAtUtc: string;
+  readAtUtc?: string | null;
+};
+
+export function notificationDateLabel(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+}

job-tracker-ui/src/views/OperationsPage.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 
 import { api, getApiErrorMessage } from "../api";
+import { notificationDateLabel, UserNotification } from "../notifications";
 
 type Operation = {
   id: string;
@@ -28,25 +29,12 @@ type Operation = {
   canRetry: boolean;
 };
 
-type Notification = {
-  id: string;
-  operationId?: string | null;
-  kind: string;
-  title: string;
-  message: string;
-  createdAtUtc: string;
-  readAtUtc?: string | null;
-};
-
 const statusLabel = (value: string) => value.replaceAll("_", " ");
-const dateLabel = (value: string) => {
-  const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
-};
+const dateLabel = notificationDateLabel;
 
 export default function OperationsPage() {
   const [operations, setOperations] = useState<Operation[]>([]);
-  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [notifications, setNotifications] = useState<UserNotification[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [busyKey, setBusyKey] = useState<string | null>(null);
@@ -56,7 +44,7 @@ export default function OperationsPage() {
     try {
       const [operationResponse, notificationResponse] = await Promise.all([
         api.get<Operation[]>("/operations?limit=50"),
-        api.get<Notification[]>("/notifications?limit=50"),
+        api.get<UserNotification[]>("/notifications?limit=50"),
       ]);
       setOperations(operationResponse.data ?? []);
       setNotifications(notificationResponse.data ?? []);