remove the notifications (#197)

* remove the notifications

* removed notification and the WS connection

* restore notification and notificationSocket

Author: karamba228

frontend/src/api/notifications.ts

@@ -1,3 +1,6 @@
+// This module is currently unused but intentionally retained for future notification work.
+// Do not remove it.
+
 import { apiFetch } from "./client";
 
 export type Notification = {

frontend/src/api/notificationsSocket.ts

@@ -1,3 +1,6 @@
+// This module is currently unused but intentionally retained for future notification work.
+// Do not remove it.
+
 import type { Notification } from "./notifications";
 import { createWebSocketClient } from "./ws";
 

frontend/src/app/index.css

@@ -35,7 +35,6 @@
   --accent-foreground: oklch(32.95% 0.0209 254.12);
 
   --destructive: oklch(95.06% 0.0247 29.93);
-  --notification-badge: #d00000;
   --sign-out-foreground: #d2161c;
 
   --border: oklch(78.06% 0.0056 286.27);
@@ -119,7 +118,6 @@
   --accent-foreground: oklch(95.04% 0.0042 236.5);
 
   --destructive: oklch(33.1% 0.1332 27.42);
-  --notification-badge: #e00000;
   --sign-out-foreground: #ff6b6b;
 
   --border: oklch(47.01% 0.0112 285.96);
@@ -192,7 +190,6 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
-  --color-notification-badge: var(--notification-badge);
   --color-sign-out-foreground: var(--sign-out-foreground);
 
   --color-accent-foreground: var(--accent-foreground);

frontend/src/app/index.tsx

@@ -11,7 +11,7 @@ import { getAppConfig } from "./config";
 export default function App() {
   const { themeMode, isDarkMode, setThemeMode } = useTheme();
   const { user } = useUser();
-  const { services, notifications, onNotificationsViewed, onTogglePin } = useLaunchpadData(user);
+  const { services, onTogglePin } = useLaunchpadData(user);
 
   const config = getAppConfig();
 
@@ -24,8 +24,6 @@ export default function App() {
         onThemeChange={setThemeMode}
         user={user}
         onSignOut={() => signOut()}
-        notifications={notifications}
-        onNotificationsViewed={onNotificationsViewed}
         logoSrc={config?.logoUrl || undefined}
         logoSrcDark={config?.logoUrlDark || undefined}
       />

frontend/src/components/Header.tsx

@@ -1,5 +1,5 @@
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { Bell, ChevronDown, LogOut, Monitor, Moon, Sun } from "lucide-react";
+import { ChevronDown, LogOut, Monitor, Moon, Sun } from "lucide-react";
 import type { ReactNode } from "react";
 import builtInLogoDark from "../assets/nebari-logo_dark.svg";
 import builtInLogoLight from "../assets/nebari-logo_light.svg";
@@ -17,15 +17,6 @@ import {
 } from "./ui/dropdown-menu";
 import { MenuBarActions, MenuBarBrand, NavigationMenu } from "./ui/navigation-menu";
 
-type Notification = {
-  id: string;
-  title: string;
-  message: string;
-  createdAt: string;
-  image?: string;
-  read?: boolean;
-};
-
 type User = {
   name?: string;
   email?: string;
@@ -40,8 +31,6 @@ export type HeaderProps = {
   user?: User | null;
   onSignIn?: () => void;
   onSignOut?: () => void;
-  notifications?: Notification[];
-  onNotificationsViewed?: (ids: string[]) => void | Promise<void>;
   logoSrc?: string;
   logoSrcDark?: string;
 };
@@ -55,14 +44,10 @@ export function Header(props: HeaderProps): ReactNode {
     user,
     onSignIn,
     onSignOut,
-    notifications = [],
-    onNotificationsViewed,
     logoSrc: logoSrcProp,
     logoSrcDark: logoSrcDarkProp,
   } = props;
 
-  const unreadNotifications = notifications.filter((item) => !item.read);
-  const unreadCount = unreadNotifications.length;
   // Dark mode prefers the dark logo, then the light/general custom logo, then
   // the built-in dark logo. Light mode uses the custom logo or the built-in.
   const logoSrc = isDarkMode
@@ -71,82 +56,13 @@ export function Header(props: HeaderProps): ReactNode {
 
   const initials = getUserInitials(user?.name, user?.email);
 
-  const handleNotificationsOpen = () => {
-    if (!onNotificationsViewed) return;
-
-    const unreadIds = unreadNotifications.map((item) => item.id);
-    if (unreadIds.length > 0) {
-      void onNotificationsViewed(unreadIds);
-    }
-  };
-
   return (
     <NavigationMenu className="h-14 justify-between border-header-border bg-header-background pl-4 text-header-foreground">
       <MenuBarBrand href={homeHref} aria-label="Go to homepage">
         <img src={logoSrc} alt="Nebari" className="h-8 w-auto" />
       </MenuBarBrand>
 
       <MenuBarActions className="gap-2">
-        <DropdownMenu modal={false} onOpenChange={(open) => open && handleNotificationsOpen()}>
-          <DropdownMenuTrigger
-            variant="ghost"
-            className="relative w-8 px-0 hover:bg-header-action-hover hover:no-underline focus-visible:ring-offset-0 active:bg-header-action-hover"
-            aria-label="Notifications"
-          >
-            <Bell />
-            {unreadCount > 0 ? (
-              <span className="absolute -right-0.5 -top-0.5 z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-notification-badge px-1 pt-px text-[9px] font-semibold leading-none text-white tabular-nums">
-                {unreadCount}
-              </span>
-            ) : null}
-          </DropdownMenuTrigger>
-
-          <DropdownMenuPortal>
-            <DropdownMenuContent
-              align="end"
-              className="max-h-(--available-height) w-[552px] overflow-y-auto p-0"
-            >
-              {notifications.length > 0 ? (
-                notifications.map((notification) => (
-                  <DropdownMenuItem
-                    key={notification.id}
-                    className="items-start gap-4 rounded-none border-b px-4 py-4 whitespace-normal last:border-b-0"
-                  >
-                    <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-muted">
-                      {notification.image ? (
-                        <img
-                          src={notification.image}
-                          alt=""
-                          aria-hidden="true"
-                          className="h-9 w-9 object-contain"
-                        />
-                      ) : null}
-                    </div>
-
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-start justify-between gap-3">
-                        <span className="text-[15px] font-semibold leading-6 text-foreground">
-                          {notification.title}
-                        </span>
-
-                        {!notification.read ? (
-                          <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-primary" />
-                        ) : null}
-                      </div>
-
-                      <p className="text-(--text-secondary) text-sm leading-7">
-                        {notification.message}
-                      </p>
-                    </div>
-                  </DropdownMenuItem>
-                ))
-              ) : (
-                <div className="px-4 py-4 text-sm text-muted-foreground">No notifications</div>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenuPortal>
-        </DropdownMenu>
-
         {user ? (
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger

frontend/src/components/ui/navigation-menu.tsx

@@ -197,7 +197,7 @@ function MenuBarNav({ className, ...props }: MenuBarNavProps) {
   );
 }
 
-/** Right-side action slot for notifications, settings, and account controls. */
+/** Right-side action slot for settings and account controls. */
 function MenuBarActions({ className, ...props }: MenuBarActionsProps) {
   return (
     <div

frontend/src/hooks/useLaunchpadData.ts

@@ -2,45 +2,17 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { apiFetch } from "../api/client";
 import { listServices, type Service } from "../api/listServices";
 import { mapService } from "../api/mapServices";
-import { listNotifications, markNotificationRead, type Notification } from "../api/notifications";
-import type { NotificationSocketMessage } from "../api/notificationsSocket";
 import { deletePin, putPin } from "../api/pin";
 import type { ServiceSocketMessage } from "../api/servicesSocket";
 import { createWebSocketClient } from "../api/ws";
 
-type AppSocketMessage = ServiceSocketMessage | NotificationSocketMessage;
-
 export function useLaunchpadData(user: unknown) {
   const [services, setServices] = useState<Service[]>([]);
-  const [notifications, setNotifications] = useState<Notification[]>([]);
 
   useEffect(() => {
     listServices().then(setServices).catch(console.error);
-    listNotifications().then(setNotifications).catch(console.error);
   }, [user]);
 
-  const onNotificationsViewed = useCallback(async (ids: string[]) => {
-    const uniqueIds = [...new Set(ids)];
-    if (uniqueIds.length === 0) return;
-
-    setNotifications((prev) =>
-      prev.map((notification) =>
-        uniqueIds.includes(notification.id) ? { ...notification, read: true } : notification,
-      ),
-    );
-
-    try {
-      await Promise.all(uniqueIds.map((id) => markNotificationRead(id)));
-    } catch (err) {
-      console.error("markNotificationRead failed", err);
-      setNotifications((prev) =>
-        prev.map((notification) =>
-          uniqueIds.includes(notification.id) ? { ...notification, read: false } : notification,
-        ),
-      );
-    }
-  }, []);
-
   const onTogglePin = useCallback(async (serviceId: string, nextPinned: boolean) => {
     let previousPinned: boolean | undefined;
 
@@ -84,7 +56,7 @@ export function useLaunchpadData(user: unknown) {
   const appSocket = useMemo(() => {
     const isAuthenticated = Boolean(user);
 
-    return createWebSocketClient<AppSocketMessage>({
+    return createWebSocketClient<ServiceSocketMessage>({
       path: "/ws",
       // Fetch a fresh single-use ticket before each connect (and each reconnect).
       // Browsers cannot send Authorization headers on WebSocket upgrade requests,
@@ -106,23 +78,9 @@ export function useLaunchpadData(user: unknown) {
       onClose: () => console.log("app websocket disconnected"),
       onError: (event) => console.error("app websocket error", event),
       onMessage: (message) => {
-        if (message.type === "notification.created") {
-          const nextNotification: Notification = {
-            id: message.notification.id,
-            title: message.notification.title,
-            message: message.notification.message,
-            createdAt: message.notification.createdAt,
-            image: message.notification.image ?? "",
-            read: message.notification.read ?? false,
-          };
-
-          setNotifications((prev) => {
-            const exists = prev.some((n) => n.id === nextNotification.id);
-            return exists ? prev : [nextNotification, ...prev];
-          });
-
-          return;
-        }
+        // The backend WebSocket also carries other event types. Ignore any
+        // frame that is not a service event without changing React state.
+        if (!message.service) return;
 
         const nextService = mapService(message.service);
 
@@ -174,8 +132,6 @@ export function useLaunchpadData(user: unknown) {
 
   return {
     services,
-    notifications,
-    onNotificationsViewed,
     onTogglePin,
   };
 }

frontend/src/mocks/fixtures.ts

@@ -2,7 +2,6 @@
 // place that defines what the SPA renders under VITE_USE_MOCKS=1.
 
 import type { Service } from "../api/listServices";
-import type { Notification } from "../api/notifications";
 
 export type AccessRequest = {
   id: string;
@@ -60,25 +59,6 @@ export const seedServices: Service[] = [
   },
 ];
 
-export const seedNotifications: Notification[] = [
-  {
-    id: "ntf-1",
-    image: "",
-    title: "Welcome to Nebari (mocked)",
-    message: "You are running against MSW mocks. Set VITE_USE_MOCKS=0 to hit a real webapi.",
-    read: false,
-    createdAt: new Date(Date.now() - 1000 * 60 * 60).toISOString(),
-  },
-  {
-    id: "ntf-2",
-    image: "",
-    title: "Maintenance window scheduled",
-    message: "Brief restart of JupyterHub planned for tonight at 22:00 UTC.",
-    read: false,
-    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString(),
-  },
-];
-
 export const seedAccessRequests: AccessRequest[] = [
   {
     id: "req-1",

frontend/src/mocks/handlers.ts

@@ -1,6 +1,6 @@
 // Stateful MSW handlers. These override a subset of the generated handlers
-// so the SPA sees realistic mutation across calls (pin/unpin, mark-read,
-// request access, approve/deny). Anything not listed here falls through to
+// so the SPA sees realistic mutation across calls (pin/unpin, request access,
+// approve/deny). Anything not listed here falls through to
 // the generated layer in ./generated/handlers.ts.
 
 import { HttpResponse, http } from "msw";
@@ -56,15 +56,6 @@ const overrides = [
     return HttpResponse.json({ success: true, message: "Request submitted" });
   }),
 
-  http.get("/api/v1/notifications", () => HttpResponse.json(store.notifications)),
-
-  http.put("/api/v1/notifications/:id/read", ({ params }) => {
-    const n = store.notifications.find((x) => x.id === params.id);
-    if (!n) return new HttpResponse(null, { status: 404 });
-    n.read = true;
-    return new HttpResponse(null, { status: 204 });
-  }),
-
   http.get("/api/v1/pins", () => {
     const uids = store.services.filter((s) => s.pinned).map((s) => s.id);
     return HttpResponse.json({ pins: uids.map((id) => ({ id })), uids });

frontend/src/mocks/store.ts

@@ -4,26 +4,17 @@
 // seed fixtures.
 
 import type { Service } from "../api/listServices";
-import type { Notification } from "../api/notifications";
-import {
-  type AccessRequest,
-  seedAccessRequests,
-  seedCategories,
-  seedNotifications,
-  seedServices,
-} from "./fixtures";
+import { type AccessRequest, seedAccessRequests, seedCategories, seedServices } from "./fixtures";
 
 type Store = {
   services: Service[];
-  notifications: Notification[];
   accessRequests: AccessRequest[];
   categories: Record<string, string>;
 };
 
 function snapshot(): Store {
   return {
     services: seedServices.map((s) => ({ ...s, category: [...s.category] })),
-    notifications: seedNotifications.map((n) => ({ ...n })),
     accessRequests: seedAccessRequests.map((r) => ({ ...r })),
     categories: { ...seedCategories },
   };
@@ -34,7 +25,6 @@ export const store: Store = snapshot();
 export function resetStore(): void {
   const fresh = snapshot();
   store.services = fresh.services;
-  store.notifications = fresh.notifications;
   store.accessRequests = fresh.accessRequests;
   store.categories = fresh.categories;
 }