@xenide-io/the-old-ui-theme 0.9.13 → 0.9.15

package/src/suite/components/suite-notification-bell.tsx

@@ -1,36 +1,15 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Bell } from "iconoir-react";
 
 import type { SuiteDropdownMenuComponent } from "../lib/injected";
-import {
-  resolveSuiteNotificationHref,
-  suiteAppBaseUrl,
-  suiteAppSlugForNotificationSource,
-} from "../lib/apps";
+import { useSuiteNotifications } from "../lib/suite-notifications";
 
-const POLL_MS = 60_000;
-
-/** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
-export interface SuiteNotification {
-  id: string;
-  title: string;
-  body: string;
-  href: string;
-  kind: string;
-  source_app: string;
-  read_at: string | null;
-  created_at: string;
-  workspace: string | null;
-  organisation: string | null;
-}
-
-export interface SuiteNotificationsResponse {
-  notifications: SuiteNotification[];
-  unread_count: number;
-}
+export type {
+  SuiteNotification,
+  SuiteNotificationsResponse,
+} from "../lib/suite-notifications";
 
 function timeAgo(iso: string): string {
   const then = new Date(iso).getTime();
@@ -44,155 +23,35 @@ function timeAgo(iso: string): string {
   return `${Math.round(hrs / 24)}d ago`;
 }
 
+/**
+ * Presentational notification bell. State, polling, caching and navigation
+ * live in SuiteNotificationsProvider — this just renders the shared context
+ * and forwards user intent back to it.
+ */
 export function SuiteNotificationBell({
-  fetchNotifications,
-  markRead,
-  markAllRead,
   dropdownMenu: DropdownMenu,
-  cacheKey = "suite-notifications-cache",
   dataTest = "suite-notifications",
   triggerId,
   triggerDataTest,
 }: {
-  fetchNotifications: () => Promise<SuiteNotificationsResponse>;
-  markRead: (id: string) => Promise<unknown>;
-  markAllRead: () => Promise<unknown>;
   dropdownMenu: SuiteDropdownMenuComponent;
-  /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
-  cacheKey?: string | null;
   dataTest?: string;
   triggerId?: string;
   triggerDataTest?: string;
 }) {
-  const router = useRouter();
+  const {
+    notifications,
+    unreadCount: unread,
+    refresh,
+    select,
+    markAllRead,
+  } = useSuiteNotifications();
   const [open, setOpen] = useState(false);
-  const [items, setItems] = useState<SuiteNotification[]>([]);
-  const [unread, setUnread] = useState(0);
-
-  const load = useCallback(async () => {
-    try {
-      const data = await fetchNotifications();
-      setItems(data.notifications);
-      setUnread(data.unread_count);
-      // Stale-while-revalidate: keep last inbox for instant paint next visit.
-      if (cacheKey) {
-        try {
-          sessionStorage.setItem(
-            cacheKey,
-            JSON.stringify({
-              notifications: data.notifications,
-              unread_count: data.unread_count,
-            }),
-          );
-        } catch {
-          // ignore quota / private mode
-        }
-      }
-    } catch {
-      // Non-critical chrome — never surface bell errors to the user.
-    }
-  }, [fetchNotifications, cacheKey]);
-
-  useEffect(() => {
-    if (cacheKey) {
-      queueMicrotask(() => {
-        try {
-          const raw = sessionStorage.getItem(cacheKey);
-          if (raw) {
-            const cached = JSON.parse(raw) as {
-              notifications?: SuiteNotification[];
-              unread_count?: number;
-            };
-            if (Array.isArray(cached.notifications)) {
-              setItems(cached.notifications);
-              setUnread(cached.unread_count ?? 0);
-            }
-          }
-        } catch {
-          // ignore
-        }
-      });
-    }
-    const kick = window.setTimeout(() => void load(), 0);
-    const id = window.setInterval(() => void load(), POLL_MS);
-    return () => {
-      window.clearTimeout(kick);
-      window.clearInterval(id);
-    };
-  }, [load, cacheKey]);
-
-  const onOpenChange = useCallback(
-    (next: boolean) => {
-      setOpen(next);
-      if (next) void load();
-    },
-    [load],
-  );
-
-  const openItem = useCallback(
-    async (n: SuiteNotification) => {
-      setOpen(false);
-      if (!n.read_at) {
-        setItems((prev) =>
-          prev.map((i) =>
-            i.id === n.id ? { ...i, read_at: new Date().toISOString() } : i,
-          ),
-        );
-        setUnread((u) => Math.max(0, u - 1));
-        try {
-          await markRead(n.id);
-        } catch {
-          // ignore
-        }
-      }
-      const target = resolveSuiteNotificationHref(n.href, n.source_app);
-      if (!target) return;
-      if (/^https?:\/\//i.test(target)) {
-        try {
-          const url = new URL(target);
-          const sourceApp = suiteAppSlugForNotificationSource(n.source_app);
-          const path = `${url.pathname}${url.search}${url.hash}`;
-          if (url.origin === window.location.origin) {
-            router.push(path);
-            return;
-          }
-          if (sourceApp && sourceApp !== "shellstack") {
-            const sourceOrigin = new URL(suiteAppBaseUrl(sourceApp)).origin;
-            if (url.origin === sourceOrigin) {
-              const launchUrl = new URL(
-                `/launch/${sourceApp}`,
-                suiteAppBaseUrl("shellstack"),
-              );
-              launchUrl.searchParams.set("next", path);
-              window.location.assign(launchUrl.toString());
-              return;
-            }
-          }
-        } catch {
-          // Fall through to the original external link.
-        }
-        window.location.assign(target);
-        return;
-      }
-      router.push(target);
-    },
-    [router, markRead],
-  );
 
-  const markAll = useCallback(async () => {
-    setItems((prev) =>
-      prev.map((i) => ({
-        ...i,
-        read_at: i.read_at ?? new Date().toISOString(),
-      })),
-    );
-    setUnread(0);
-    try {
-      await markAllRead();
-    } catch {
-      // ignore
-    }
-  }, [markAllRead]);
+  const onOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (next) refresh();
+  };
 
   return (
     <DropdownMenu
@@ -225,7 +84,7 @@ export function SuiteNotificationBell({
             type="button"
             id={`${dataTest}-mark-all`}
             data-test={`${dataTest}-mark-all`}
-            onClick={markAll}
+            onClick={markAllRead}
             className="text-xs font-medium text-ph-brand hover:underline"
           >
             Mark all read
@@ -233,17 +92,20 @@ export function SuiteNotificationBell({
         ) : null}
       </div>
       <div className="max-h-80 overflow-y-auto py-1">
-        {items.length === 0 ? (
+        {notifications.length === 0 ? (
           <p className="px-3 py-6 text-center text-sm text-ph-mutedtext">
             You&apos;re all caught up.
           </p>
         ) : (
-          items.map((n) => (
+          notifications.map((n) => (
             <button
               key={n.id}
               id={`${dataTest}-item-${n.id}`}
               data-test={`${dataTest}-item-${n.id}`}
-              onClick={() => void openItem(n)}
+              onClick={() => {
+                setOpen(false);
+                select(n);
+              }}
               className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
             >
               <span className="flex items-center gap-2">

package/src/suite/index.ts

@@ -10,11 +10,15 @@ export {
   type SuiteAppEntry,
   type SuiteAppSelectOptions,
 } from "./components/app-switcher";
+export { SuiteNotificationBell } from "./components/suite-notification-bell";
 export {
-  SuiteNotificationBell,
+  SuiteNotificationsProvider,
+  useSuiteNotifications,
+  SUITE_NOTIFICATIONS_POLL_MS,
   type SuiteNotification,
   type SuiteNotificationsResponse,
-} from "./components/suite-notification-bell";
+  type SuiteNotificationsContextValue,
+} from "./lib/suite-notifications";
 export { CommandPaletteHost } from "./components/command-palette-host";
 export { DeferredChrome } from "./components/deferred-chrome";
 export { SuiteMobileDrawer } from "./components/suite-mobile-drawer";
@@ -174,9 +178,7 @@ export {
   type SuiteDirectoryProject,
   type SuiteDirectoryProjectFields,
 } from "./components/suite-clients-projects-directory";
-export {
-  SuiteEntityIcon,
-} from "./components/suite-entity-icon";
+export { SuiteEntityIcon } from "./components/suite-entity-icon";
 export {
   SuitePaletteLibrary,
   type SuitePalettePick,

package/src/suite/lib/suite-notifications.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { useRouter } from "next/navigation";
+
+import {
+  resolveSuiteNotificationHref,
+  suiteAppBaseUrl,
+  suiteAppSlugForNotificationSource,
+} from "./apps";
+
+/** Cross-app (suite) notification from `/api/notifications/` — shared across ShellStack apps. */
+export interface SuiteNotification {
+  id: string;
+  title: string;
+  body: string;
+  href: string;
+  kind: string;
+  source_app: string;
+  read_at: string | null;
+  created_at: string;
+  workspace: string | null;
+  organisation: string | null;
+}
+
+export interface SuiteNotificationsResponse {
+  notifications: SuiteNotification[];
+  unread_count: number;
+}
+
+export interface SuiteNotificationsContextValue {
+  notifications: SuiteNotification[];
+  unreadCount: number;
+  refresh: () => void;
+  select: (notification: SuiteNotification) => void;
+  markAllRead: () => void;
+}
+
+export const SUITE_NOTIFICATIONS_POLL_MS = 60_000;
+
+const SuiteNotificationsContext =
+  createContext<SuiteNotificationsContextValue | null>(null);
+
+/**
+ * Read the shared notification state. Must be rendered inside a
+ * `SuiteNotificationsProvider`: one provider per app owns the single poller,
+ * however many bells consume it.
+ */
+export function useSuiteNotifications(): SuiteNotificationsContextValue {
+  const value = useContext(SuiteNotificationsContext);
+  if (!value) {
+    throw new Error(
+      "useSuiteNotifications must be used within a SuiteNotificationsProvider",
+    );
+  }
+  return value;
+}
+
+/**
+ * Application-layer notification runtime. Owns fetching, polling cadence,
+ * tab-visibility gating, stale-while-revalidate caching, optimistic read
+ * state, and cross-app navigation. The UI (SuiteNotificationBell) stays
+ * presentational and consumes this context, so multiple bells share one
+ * request per interval instead of polling independently.
+ */
+export function SuiteNotificationsProvider({
+  fetchNotifications,
+  markRead,
+  markAllRead: markAllReadRequest,
+  pollMs = SUITE_NOTIFICATIONS_POLL_MS,
+  cacheKey = "suite-notifications-cache",
+  enabled = true,
+  children,
+}: {
+  fetchNotifications: () => Promise<SuiteNotificationsResponse>;
+  markRead: (id: string) => Promise<unknown>;
+  markAllRead: () => Promise<unknown>;
+  /** Poll cadence while the tab is visible. Defaults to 60s. */
+  pollMs?: number;
+  /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
+  cacheKey?: string | null;
+  /** Set false to suspend fetching entirely (e.g. before auth resolves). */
+  enabled?: boolean;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+  const [notifications, setNotifications] = useState<SuiteNotification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  const load = useCallback(async () => {
+    try {
+      const data = await fetchNotifications();
+      setNotifications(data.notifications);
+      setUnreadCount(data.unread_count);
+      if (cacheKey) {
+        try {
+          sessionStorage.setItem(
+            cacheKey,
+            JSON.stringify({
+              notifications: data.notifications,
+              unread_count: data.unread_count,
+            }),
+          );
+        } catch {
+          // ignore quota / private mode
+        }
+      }
+    } catch {
+      // Non-critical chrome — never surface bell errors to the user.
+    }
+  }, [fetchNotifications, cacheKey]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    if (cacheKey) {
+      queueMicrotask(() => {
+        try {
+          const raw = sessionStorage.getItem(cacheKey);
+          if (!raw) return;
+          const cached = JSON.parse(raw) as {
+            notifications?: SuiteNotification[];
+            unread_count?: number;
+          };
+          if (Array.isArray(cached.notifications)) {
+            setNotifications(cached.notifications);
+            setUnreadCount(cached.unread_count ?? 0);
+          }
+        } catch {
+          // ignore
+        }
+      });
+    }
+
+    let timer: number | undefined;
+    const stop = () => {
+      if (timer !== undefined) {
+        window.clearInterval(timer);
+        timer = undefined;
+      }
+    };
+    const start = () => {
+      if (timer !== undefined) return;
+      void load();
+      timer = window.setInterval(() => void load(), pollMs);
+    };
+    const onVisibilityChange = () => {
+      if (document.visibilityState === "visible") start();
+      else stop();
+    };
+
+    if (document.visibilityState === "visible") start();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      stop();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [enabled, load, pollMs, cacheKey]);
+
+  const select = useCallback(
+    (notification: SuiteNotification) => {
+      if (!notification.read_at) {
+        setNotifications((prev) =>
+          prev.map((item) =>
+            item.id === notification.id
+              ? { ...item, read_at: new Date().toISOString() }
+              : item,
+          ),
+        );
+        setUnreadCount((count) => Math.max(0, count - 1));
+        void (async () => {
+          try {
+            await markRead(notification.id);
+          } catch {
+            // ignore
+          }
+        })();
+      }
+
+      const target = resolveSuiteNotificationHref(
+        notification.href,
+        notification.source_app,
+      );
+      if (!target) return;
+      if (/^https?:\/\//i.test(target)) {
+        try {
+          const url = new URL(target);
+          const sourceApp = suiteAppSlugForNotificationSource(
+            notification.source_app,
+          );
+          const path = `${url.pathname}${url.search}${url.hash}`;
+          if (url.origin === window.location.origin) {
+            router.push(path);
+            return;
+          }
+          if (sourceApp && sourceApp !== "shellstack") {
+            const sourceOrigin = new URL(suiteAppBaseUrl(sourceApp)).origin;
+            if (url.origin === sourceOrigin) {
+              const launchUrl = new URL(
+                `/launch/${sourceApp}`,
+                suiteAppBaseUrl("shellstack"),
+              );
+              launchUrl.searchParams.set("next", path);
+              window.location.assign(launchUrl.toString());
+              return;
+            }
+          }
+        } catch {
+          // Fall through to the original external link.
+        }
+        window.location.assign(target);
+        return;
+      }
+      router.push(target);
+    },
+    [router, markRead],
+  );
+
+  const markAllRead = useCallback(() => {
+    setNotifications((prev) =>
+      prev.map((item) => ({
+        ...item,
+        read_at: item.read_at ?? new Date().toISOString(),
+      })),
+    );
+    setUnreadCount(0);
+    void (async () => {
+      try {
+        await markAllReadRequest();
+      } catch {
+        // ignore
+      }
+    })();
+  }, [markAllReadRequest]);
+
+  const value = useMemo<SuiteNotificationsContextValue>(
+    () => ({
+      notifications,
+      unreadCount,
+      refresh: () => void load(),
+      select,
+      markAllRead,
+    }),
+    [notifications, unreadCount, load, select, markAllRead],
+  );
+
+  return (
+    <SuiteNotificationsContext.Provider value={value}>
+      {children}
+    </SuiteNotificationsContext.Provider>
+  );
+}