feat(notifications): open bell popover

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 ?? []);