wip

Author: OliverDudgeon

src/components/eventStream/EventStream.tsx

@@ -12,13 +12,15 @@ import { useSnackbar } from "notistack";
 import { useASAuthorizationStatus } from "../../hooks/useIsAuthorized";
 import { getMessageFromEvent, protoBlobToText } from "../../protobuf/protobuf";
 import { eventStreamEnabledAtom } from "../../state/eventStream";
+import { useUnreadEventCount } from "../../state/notifications";
 import { EventMessage } from "../eventMessages/EventMessage";
 import { useIsEventStreamInstalled } from "./useIsEventStreamInstalled";
 
 export const EventStream = () => {
   const isEventStreamInstalled = useIsEventStreamInstalled();
   const [location, setLocation] = useState<string | null>(null);
   const { enqueueSnackbar } = useSnackbar();
+  const { incrementCount } = useUnreadEventCount();
   const asRole = useASAuthorizationStatus();
 
   const { data, error: streamError } = useGetEventStream({
@@ -69,11 +71,13 @@ export const EventStream = () => {
 
   const handleWebSocketMessage = useCallback(
     (event: MessageEvent) => {
+      console.log("message");
       if (event.data instanceof Blob) {
         protoBlobToText(event.data)
           .then((textData) => {
             const message = getMessageFromEvent(textData);
             if (message) {
+              incrementCount();
               enqueueSnackbar(<EventMessage message={message} />, {
                 variant: "default",
                 anchorOrigin: { horizontal: "right", vertical: "bottom" },
@@ -97,10 +101,19 @@ export const EventStream = () => {
         console.warn("Received non-Blob WebSocket message:", event.data);
       }
     },
-    [enqueueSnackbar],
+    [enqueueSnackbar, incrementCount],
   );
 
-  const wsUrl = eventStreamEnabled && asRole ? (location?.replace("ws", "wss") ?? null) : null;
+  let wsUrl = null;
+  if (eventStreamEnabled && asRole && location) {
+    const url = new URL(location);
+    url.protocol = "wss:";
+    url.search = new URLSearchParams({
+      // stream_from_timestamp: encodeURIComponent("2025-07-1T12:00:00Z"),
+      stream_from_ordinal: "1",
+    }).toString();
+    wsUrl = url.toString();
+  }
 
   useWebSocket(wsUrl, {
     onOpen: handleWebSocketOpen,

src/layouts/navigation/UserMenu.tsx

@@ -1,8 +1,9 @@
 import { AccountCircle as AccountCircleIcon } from "@mui/icons-material";
-import { Box, Fade, IconButton, Paper, Popper, Tooltip } from "@mui/material";
+import { Badge, Box, Fade, IconButton, Paper, Popper, Tooltip } from "@mui/material";
 import { bindPopper, bindToggle, usePopupState } from "material-ui-popup-state/hooks";
 
 import { useKeycloakUser } from "../../hooks/useKeycloakUser";
+import { useUnreadEventCount } from "../../state/notifications";
 import { UserMenuContent } from "./UserMenuContent";
 
 /**
@@ -11,20 +12,32 @@ import { UserMenuContent } from "./UserMenuContent";
 export const UserMenu = () => {
   const popupState = usePopupState({ variant: "popper", popupId: "user-menu" });
   const { isLoading } = useKeycloakUser();
+  const { count, resetCount } = useUnreadEventCount();
+
+  // Reset count when menu is opened
+  const handleToggle = bindToggle(popupState);
+  const handleMenuToggle = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (!popupState.isOpen) {
+      resetCount();
+    }
+    handleToggle.onClick(event);
+  };
 
   return (
     <>
       <Tooltip title="Account">
         <span>
-          <IconButton
-            color="inherit"
-            disabled={isLoading}
-            edge="end"
-            {...bindToggle(popupState)}
-            size="large"
-          >
-            <AccountCircleIcon />
-          </IconButton>
+          <Badge badgeContent={count} color="success" max={99}>
+            <IconButton
+              color="inherit"
+              disabled={isLoading}
+              edge="end"
+              size="large"
+              onClick={handleMenuToggle}
+            >
+              <AccountCircleIcon />
+            </IconButton>
+          </Badge>
         </span>
       </Tooltip>
 

src/state/notifications.ts

@@ -0,0 +1,18 @@
+import { atom, useAtom } from "jotai";
+
+/**
+ * Atom to track the number of unread event notifications
+ */
+export const unreadEventCountAtom = atom(0);
+
+/**
+ * Hook to access and update the unread event count
+ */
+export const useUnreadEventCount = () => {
+  const [count, setCount] = useAtom(unreadEventCountAtom);
+
+  const incrementCount = () => setCount((prev) => prev + 1);
+  const resetCount = () => setCount(0);
+
+  return { count, incrementCount, resetCount };
+};