@xenide-io/the-old-ui-theme 0.9.14 → 0.9.16

package/dist/suite.mjs

@@ -1028,6 +1028,7 @@ function AppSwitcher({
 }
 
 // src/suite/components/suite-notification-bell.tsx
+import { useState as useState3 } from "react";
 import { Bell } from "iconoir-react";
 
 // src/suite/lib/suite-notifications.tsx
@@ -1167,7 +1168,6 @@ function SuiteNotificationsProvider({
   const router = useRouter();
   const [notifications, setNotifications] = useState2([]);
   const [unreadCount, setUnreadCount] = useState2(0);
-  const [open, setOpen] = useState2(false);
   const load = useCallback(async () => {
     try {
       const data = await fetchNotifications();
@@ -1228,16 +1228,8 @@ function SuiteNotificationsProvider({
       document.removeEventListener("visibilitychange", onVisibilityChange);
     };
   }, [enabled, load, pollMs, cacheKey]);
-  const setOpenAndRefresh = useCallback(
-    (next) => {
-      setOpen(next);
-      if (next) void load();
-    },
-    [load]
-  );
   const select = useCallback(
     (notification) => {
-      setOpen(false);
       if (!notification.read_at) {
         setNotifications(
           (prev) => prev.map(
@@ -1310,21 +1302,11 @@ function SuiteNotificationsProvider({
     () => ({
       notifications,
       unreadCount,
-      open,
-      setOpen: setOpenAndRefresh,
       refresh: () => void load(),
       select,
       markAllRead
     }),
-    [
-      notifications,
-      unreadCount,
-      open,
-      setOpenAndRefresh,
-      load,
-      select,
-      markAllRead
-    ]
+    [notifications, unreadCount, load, select, markAllRead]
   );
   return /* @__PURE__ */ jsx6(SuiteNotificationsContext.Provider, { value, children });
 }
@@ -1351,11 +1333,15 @@ function SuiteNotificationBell({
   const {
     notifications,
     unreadCount: unread,
-    open,
-    setOpen,
+    refresh,
     select,
     markAllRead
   } = useSuiteNotifications();
+  const [open, setOpen] = useState3(false);
+  const onOpenChange = (next) => {
+    setOpen(next);
+    if (next) refresh();
+  };
   return /* @__PURE__ */ jsxs6(
     DropdownMenu2,
     {
@@ -1365,7 +1351,7 @@ function SuiteNotificationBell({
       align: "end",
       panelClassName: "w-80 overflow-hidden p-0",
       open,
-      onOpenChange: setOpen,
+      onOpenChange,
       trigger: /* @__PURE__ */ jsx7("span", { className: "relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink", children: /* @__PURE__ */ jsxs6("span", { className: "relative inline-flex h-5 w-5", children: [
         /* @__PURE__ */ jsx7(Bell, { className: "h-5 w-5", strokeWidth: 1.75, "aria-hidden": true }),
         unread > 0 ? /* @__PURE__ */ jsx7("span", { className: "pointer-events-none absolute -right-2 -top-2 z-[1] flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[9px] font-semibold leading-none text-[var(--ph-on-accent)] ring-2 ring-ph-surface", children: unread > 9 ? "9+" : unread }) : null
@@ -1390,7 +1376,10 @@ function SuiteNotificationBell({
           {
             id: `${dataTest}-item-${n.id}`,
             "data-test": `${dataTest}-item-${n.id}`,
-            onClick: () => select(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",
             children: [
               /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
@@ -1419,7 +1408,7 @@ function SuiteNotificationBell({
 }
 
 // src/suite/components/command-palette-host.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function isEditableTarget() {
   if (typeof document === "undefined") return false;
@@ -1440,7 +1429,7 @@ function CommandPaletteHost({
   inputDataTest,
   commandPalette: CommandPalette
 }) {
-  const [open, setOpen] = useState3(false);
+  const [open, setOpen] = useState4(false);
   useEffect2(() => {
     const onKey = (e) => {
       if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
@@ -1468,9 +1457,9 @@ function CommandPaletteHost({
 }
 
 // src/suite/lib/use-idle-mount.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useState as useState5 } from "react";
 function useIdleMount(timeoutMs = 1200) {
-  const [ready, setReady] = useState4(false);
+  const [ready, setReady] = useState5(false);
   useEffect3(() => {
     let timeoutId = 0;
     let idleId = 0;
@@ -1495,7 +1484,7 @@ function DeferredChrome({ children }) {
 
 // src/suite/components/suite-mobile-drawer.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useState as useState6 } from "react";
 import { Xmark as X } from "iconoir-react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function SuiteMobileDrawer({
@@ -1517,8 +1506,8 @@ function SuiteMobileDrawer({
   closeButtonDataTest,
   panelClassName
 }) {
-  const [rendered, setRendered] = useState5(open);
-  const [shown, setShown] = useState5(open);
+  const [rendered, setRendered] = useState6(open);
+  const [shown, setShown] = useState6(open);
   useEffect4(() => {
     if (open) {
       queueMicrotask(() => setRendered(true));
@@ -1658,7 +1647,7 @@ function SuiteMobileHeader({
 import {
   useEffect as useEffect5,
   useRef,
-  useState as useState6
+  useState as useState7
 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function SuiteBreadcrumbs({ items, className }) {
@@ -1739,7 +1728,7 @@ function SuitePageHeader({
   sticky = true
 }) {
   const headerRef = useRef(null);
-  const [stuck, setStuck] = useState6(false);
+  const [stuck, setStuck] = useState7(false);
   useEffect5(() => {
     if (!sticky) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -2231,7 +2220,7 @@ import {
   useEffect as useEffect6,
   useMemo as useMemo2,
   useRef as useRef2,
-  useState as useState7
+  useState as useState8
 } from "react";
 
 // src/suite/lib/cookies.ts
@@ -2348,7 +2337,7 @@ function SuiteThemeProvider({
   config,
   children
 }) {
-  const [state, setState] = useState7(() => {
+  const [state, setState] = useState8(() => {
     const theme = readStoredTheme(config.storageKey);
     if (typeof document === "undefined") {
       return { theme, resolvedTheme: config.fallbackTheme };
@@ -2467,7 +2456,7 @@ import {
   useId,
   useLayoutEffect,
   useRef as useRef3,
-  useState as useState8
+  useState as useState9
 } from "react";
 import {
   ArrowDown,
@@ -2569,8 +2558,8 @@ function SuiteAiPanel({
   isWaitingForReply = false
 }) {
   const inputId = useId();
-  const [uncontrolledOpen, setUncontrolledOpen] = useState8(false);
-  const [resolvingId, setResolvingId] = useState8("");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState9(false);
+  const [resolvingId, setResolvingId] = useState9("");
   const open = openProp != null ? openProp : uncontrolledOpen;
   const setOpen = useCallback3(
     (next) => {
@@ -2580,19 +2569,19 @@ function SuiteAiPanel({
     },
     [onOpenChange, openProp]
   );
-  const [prompt, setPrompt] = useState8("");
-  const [messages, setMessages] = useState8([]);
-  const [loading, setLoading] = useState8(false);
-  const [hydrating, setHydrating] = useState8(false);
-  const [error, setError] = useState8("");
-  const [atBottom, setAtBottom] = useState8(true);
+  const [prompt, setPrompt] = useState9("");
+  const [messages, setMessages] = useState9([]);
+  const [loading, setLoading] = useState9(false);
+  const [hydrating, setHydrating] = useState9(false);
+  const [error, setError] = useState9("");
+  const [atBottom, setAtBottom] = useState9(true);
   const scrollerRef = useRef3(null);
   const textareaRef = useRef3(null);
   const abortRef = useRef3(null);
   const pendingPromptRef = useRef3(null);
-  const [editingIndex, setEditingIndex] = useState8(null);
-  const [editDraft, setEditDraft] = useState8("");
-  const [copiedIndex, setCopiedIndex] = useState8(null);
+  const [editingIndex, setEditingIndex] = useState9(null);
+  const [editDraft, setEditDraft] = useState9("");
+  const [copiedIndex, setCopiedIndex] = useState9(null);
   const waiting = loading || isWaitingForReply;
   useEffect7(() => {
     function onOpen(event) {
@@ -3198,7 +3187,7 @@ function SuiteAiPanel({
 }
 
 // src/suite/components/workspace-switcher.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { Building, Check as Check2, NavArrowDown } from "iconoir-react";
 import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function SuiteWorkspaceSwitcher({
@@ -3216,7 +3205,7 @@ function SuiteWorkspaceSwitcher({
   footer
 }) {
   var _a2;
-  const [open, setOpen] = useState9(false);
+  const [open, setOpen] = useState10(false);
   const sections = (_a2 = groups == null ? void 0 : groups.filter((group) => group.workspaces.length > 0)) != null ? _a2 : workspaces.length > 0 ? [{ id: "workspaces", label: "Switch workspace", workspaces }] : [];
   return /* @__PURE__ */ jsx19(
     DropdownMenu2,
@@ -3364,7 +3353,7 @@ function SuiteIcon({
 import {
   useCallback as useCallback4,
   useLayoutEffect as useLayoutEffect2,
-  useState as useState10
+  useState as useState11
 } from "react";
 var SIDEBAR_RAIL_WIDTH = 56;
 var SIDEBAR_COLLAPSE_THRESHOLD = 80;
@@ -3450,8 +3439,8 @@ function resetSuiteSidebarWidth() {
 }
 function useSidebarWidth(storageKey = SUITE_SIDEBAR_WIDTH_KEY, defaultWidth = SIDEBAR_DEFAULT_WIDTH) {
   const fallbackWidth = snapWidth(clampWidth(defaultWidth));
-  const [width, setWidth] = useState10(fallbackWidth);
-  const [narrowViewport, setNarrowViewport] = useState10(false);
+  const [width, setWidth] = useState11(fallbackWidth);
+  const [narrowViewport, setNarrowViewport] = useState11(false);
   const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
   useLayoutEffect2(() => {
     const sync = () => {
@@ -4109,7 +4098,7 @@ import {
   useEffect as useEffect9,
   useMemo as useMemo3,
   useRef as useRef4,
-  useState as useState11
+  useState as useState12
 } from "react";
 import {
   Bridge3d,
@@ -4199,12 +4188,12 @@ function SuiteIntegrationPicker({
   description = "Connect an app to this workspace securely.",
   dataTest = "suite-integration-picker"
 }) {
-  const [query, setQuery] = useState11("");
-  const [category, setCategory] = useState11("all");
-  const [categoryQuery, setCategoryQuery] = useState11("");
-  const [categoryMenuOpen, setCategoryMenuOpen] = useState11(false);
-  const [expanded, setExpanded] = useState11(null);
-  const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState11(false);
+  const [query, setQuery] = useState12("");
+  const [category, setCategory] = useState12("all");
+  const [categoryQuery, setCategoryQuery] = useState12("");
+  const [categoryMenuOpen, setCategoryMenuOpen] = useState12(false);
+  const [expanded, setExpanded] = useState12(null);
+  const [bridgeOnlyInternal, setBridgeOnlyInternal] = useState12(false);
   const categoryMenuRef = useRef4(null);
   const categoryTriggerRef = useRef4(null);
   const categorySearchRef = useRef4(null);
@@ -4217,16 +4206,16 @@ function SuiteIntegrationPicker({
   const loadMoreInFlightRef = useRef4(false);
   const sentinelVisibleRef = useRef4(false);
   const authRequestRef = useRef4(0);
-  const [methodItem, setMethodItem] = useState11(null);
-  const [authItem, setAuthItem] = useState11(null);
-  const [authValues, setAuthValues] = useState11({});
-  const [authLoading, setAuthLoading] = useState11(false);
-  const [authSubmitting, setAuthSubmitting] = useState11(false);
-  const [authError, setAuthError] = useState11(null);
-  const [connectionError, setConnectionError] = useState11(null);
-  const [itemToDisconnect, setItemToDisconnect] = useState11(null);
-  const [disconnecting, setDisconnecting] = useState11(false);
-  const [disconnectError, setDisconnectError] = useState11(null);
+  const [methodItem, setMethodItem] = useState12(null);
+  const [authItem, setAuthItem] = useState12(null);
+  const [authValues, setAuthValues] = useState12({});
+  const [authLoading, setAuthLoading] = useState12(false);
+  const [authSubmitting, setAuthSubmitting] = useState12(false);
+  const [authError, setAuthError] = useState12(null);
+  const [connectionError, setConnectionError] = useState12(null);
+  const [itemToDisconnect, setItemToDisconnect] = useState12(null);
+  const [disconnecting, setDisconnecting] = useState12(false);
+  const [disconnectError, setDisconnectError] = useState12(null);
   const itemCategories = useMemo3(
     () => Array.from(
       new Set(items.flatMap((item) => {
@@ -4918,7 +4907,7 @@ function SuiteIntegrationPicker({
 }
 
 // src/suite/components/suite-integration-rules.tsx
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { Plus, Xmark as Xmark2 } from "iconoir-react";
 import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 var ACTION_LABELS = {
@@ -4950,18 +4939,18 @@ function SuiteIntegrationRules({
   onRefresh,
   dataTest = "integration-rules"
 }) {
-  const [formOpen, setFormOpen] = useState12(false);
-  const [name, setName] = useState12("");
-  const [trigger, setTrigger] = useState12("");
-  const [actionType, setActionType] = useState12("create_tides_task");
-  const [projectId, setProjectId] = useState12("");
-  const [minutes, setMinutes] = useState12("");
-  const [priority, setPriority] = useState12("low");
-  const [submitting, setSubmitting] = useState12(false);
-  const [formError, setFormError] = useState12(null);
-  const [busyId, setBusyId] = useState12(null);
-  const [ruleToDelete, setRuleToDelete] = useState12(null);
-  const [deleteError, setDeleteError] = useState12(null);
+  const [formOpen, setFormOpen] = useState13(false);
+  const [name, setName] = useState13("");
+  const [trigger, setTrigger] = useState13("");
+  const [actionType, setActionType] = useState13("create_tides_task");
+  const [projectId, setProjectId] = useState13("");
+  const [minutes, setMinutes] = useState13("");
+  const [priority, setPriority] = useState13("low");
+  const [submitting, setSubmitting] = useState13(false);
+  const [formError, setFormError] = useState13(null);
+  const [busyId, setBusyId] = useState13(null);
+  const [ruleToDelete, setRuleToDelete] = useState13(null);
+  const [deleteError, setDeleteError] = useState13(null);
   const needsProject = actionType === "create_tides_task" || actionType === "draft_time_entry";
   async function submitForm(event) {
     event.preventDefault();
@@ -5320,7 +5309,7 @@ import {
   useEffect as useEffect11,
   useMemo as useMemo5,
   useRef as useRef6,
-  useState as useState14
+  useState as useState15
 } from "react";
 import {
   ArrowLeft,
@@ -5331,6 +5320,9 @@ import {
   Trash
 } from "iconoir-react";
 
+// src/suite/components/suite-entity-icon.tsx
+import { Folder } from "iconoir-react";
+
 // src/suite/lib/palette-api.ts
 var _a;
 var PALETTE_URL = ((_a = process.env.NEXT_PUBLIC_PALETTE_URL) != null ? _a : "http://localhost:8010").replace(/\/$/, "");
@@ -5414,12 +5406,11 @@ function SuiteEntityIcon({
       }
     );
   }
-  const initial = label == null ? void 0 : label.trim().charAt(0).toUpperCase();
   return /* @__PURE__ */ jsx28(
     "span",
     {
       className: cn(
-        "inline-flex shrink-0 items-center justify-center font-semibold leading-none",
+        "inline-flex shrink-0 items-center justify-center leading-none",
         roundedClass,
         className
       ),
@@ -5428,7 +5419,15 @@ function SuiteEntityIcon({
         backgroundColor: tint ? `${tint}18` : neutralBackground
       }, style),
       "aria-hidden": "true",
-      children: initial ? /* @__PURE__ */ jsx28("span", { className: "text-[0.7em]", children: initial }) : /* @__PURE__ */ jsx28("span", { className: "block h-1.5 w-1.5 rounded-full bg-current opacity-40" })
+      title: label != null ? label : void 0,
+      children: /* @__PURE__ */ jsx28(
+        Folder,
+        {
+          className: "h-[0.85em] w-[0.85em]",
+          strokeWidth: 1.8,
+          "aria-hidden": true
+        }
+      )
     }
   );
 }
@@ -5439,7 +5438,7 @@ import {
   useEffect as useEffect10,
   useMemo as useMemo4,
   useRef as useRef5,
-  useState as useState13
+  useState as useState14
 } from "react";
 import { Filter as Filter2, FilterList, NavArrowDown as NavArrowDown3, Search as Search2 } from "iconoir-react";
 import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -5491,19 +5490,19 @@ function SuitePaletteLibrary({
   onPick
 }) {
   var _a2, _b;
-  const [collections, setCollections] = useState13([]);
-  const [typeFilter, setTypeFilter] = useState13("all");
-  const [collectionFilter, setCollectionFilter] = useState13("");
-  const [libraryOpen, setLibraryOpen] = useState13(false);
-  const [libraryQuery, setLibraryQuery] = useState13("");
+  const [collections, setCollections] = useState14([]);
+  const [typeFilter, setTypeFilter] = useState14("all");
+  const [collectionFilter, setCollectionFilter] = useState14("");
+  const [libraryOpen, setLibraryOpen] = useState14(false);
+  const [libraryQuery, setLibraryQuery] = useState14("");
   const libraryRef = useRef5(null);
-  const [icons, setIcons] = useState13([]);
-  const [total, setTotal] = useState13(0);
-  const [page, setPage] = useState13(1);
-  const [query, setQuery] = useState13("");
-  const [loading, setLoading] = useState13(true);
-  const [loadingMore, setLoadingMore] = useState13(false);
-  const [error, setError] = useState13(null);
+  const [icons, setIcons] = useState14([]);
+  const [total, setTotal] = useState14(0);
+  const [page, setPage] = useState14(1);
+  const [query, setQuery] = useState14("");
+  const [loading, setLoading] = useState14(true);
+  const [loadingMore, setLoadingMore] = useState14(false);
+  const [error, setError] = useState14(null);
   const requestId = useRef5(0);
   const libraryOptions = useMemo4(() => {
     const list = collections.filter(
@@ -5913,22 +5912,22 @@ function SuiteClientsProjectsDirectory({
   dataTest = "suite-clients-projects-directory"
 }) {
   var _a2;
-  const [query, setQuery] = useState14("");
-  const [selectedClientId, setSelectedClientId] = useState14(null);
-  const [mobileDetail, setMobileDetail] = useState14(false);
-  const [editing, setEditing] = useState14(null);
-  const [draft, setDraft] = useState14({
+  const [query, setQuery] = useState15("");
+  const [selectedClientId, setSelectedClientId] = useState15(null);
+  const [mobileDetail, setMobileDetail] = useState15(false);
+  const [editing, setEditing] = useState15(null);
+  const [draft, setDraft] = useState15({
     name: "",
     icon: DEFAULT_ICON,
     color: DEFAULT_COLOR
   });
-  const [draftClientId, setDraftClientId] = useState14(null);
-  const [preview, setPreview] = useState14(null);
-  const [libraryOpen, setLibraryOpen] = useState14(false);
-  const [draftArchived, setDraftArchived] = useState14(false);
-  const [confirming, setConfirming] = useState14(null);
-  const [saving, setSaving] = useState14(false);
-  const [mutationError, setMutationError] = useState14(null);
+  const [draftClientId, setDraftClientId] = useState15(null);
+  const [preview, setPreview] = useState15(null);
+  const [libraryOpen, setLibraryOpen] = useState15(false);
+  const [draftArchived, setDraftArchived] = useState15(false);
+  const [confirming, setConfirming] = useState15(null);
+  const [saving, setSaving] = useState15(false);
+  const [mutationError, setMutationError] = useState15(null);
   const clientButtonRefs = useRef6({});
   const backToClientsRef = useRef6(null);
   const mobileFocusTarget = useRef6(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/suite-entity-icon.tsx

@@ -1,15 +1,16 @@
 'use client';
 
 import type { CSSProperties } from 'react';
+import { Folder } from 'iconoir-react';
 import { paletteIconSrc } from '@/suite/lib/palette-api';
 import { cn } from '@/lib/cn';
 
 /**
  * A client/project icon.
  *
- * Shows the stored image when there is one; otherwise a neutral placeholder —
- * a tinted rounded square with the entity's initial, or a small dot when no
- * label is available. No icon font is involved.
+ * Shows the stored image when there is one; otherwise a folder outline (tinted
+ * to the entity colour when set). A folder is the neutral default for clients,
+ * projects, and their sidebar entries across every app.
  */
 export function SuiteEntityIcon({
   imageUrl,
@@ -54,12 +55,10 @@ export function SuiteEntityIcon({
     );
   }
 
-  const initial = label?.trim().charAt(0).toUpperCase();
-
   return (
     <span
       className={cn(
-        'inline-flex shrink-0 items-center justify-center font-semibold leading-none',
+        'inline-flex shrink-0 items-center justify-center leading-none',
         roundedClass,
         className,
       )}
@@ -69,12 +68,13 @@ export function SuiteEntityIcon({
         ...style,
       }}
       aria-hidden="true"
+      title={label ?? undefined}
     >
-      {initial ? (
-        <span className="text-[0.7em]">{initial}</span>
-      ) : (
-        <span className="block h-1.5 w-1.5 rounded-full bg-current opacity-40" />
-      )}
+      <Folder
+        className="h-[0.85em] w-[0.85em]"
+        strokeWidth={1.8}
+        aria-hidden
+      />
     </span>
   );
 }

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

@@ -1,4 +1,4 @@
-import { cleanup, render, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 vi.mock("next/navigation", () => ({
@@ -48,4 +48,78 @@ describe("SuiteNotificationBell", () => {
     expect(badge.parentElement?.className).toContain("h-5");
     expect(badge.parentElement?.className).toContain("w-5");
   });
+
+  it("keeps each responsive bell dropdown open state independent", () => {
+    render(
+      <SuiteNotificationsProvider
+        fetchNotifications={async () => ({
+          notifications: [],
+          unread_count: 0,
+        })}
+        markRead={async () => undefined}
+        markAllRead={async () => undefined}
+        cacheKey={null}
+      >
+        <SuiteNotificationBell
+          dataTest="desktop-notifications"
+          dropdownMenu={({
+            trigger,
+            children,
+            open,
+            onOpenChange,
+            triggerId,
+          }) => (
+            <div>
+              <button
+                id={triggerId}
+                type="button"
+                onClick={() => onOpenChange?.(!open)}
+              >
+                {trigger}
+              </button>
+              {open ? (
+                <div data-test={`${triggerId}-panel`}>{children}</div>
+              ) : null}
+            </div>
+          )}
+        />
+        <SuiteNotificationBell
+          dataTest="mobile-notifications"
+          dropdownMenu={({
+            trigger,
+            children,
+            open,
+            onOpenChange,
+            triggerId,
+          }) => (
+            <div>
+              <button
+                id={triggerId}
+                type="button"
+                onClick={() => onOpenChange?.(!open)}
+              >
+                {trigger}
+              </button>
+              {open ? (
+                <div data-test={`${triggerId}-panel`}>{children}</div>
+              ) : null}
+            </div>
+          )}
+        />
+      </SuiteNotificationsProvider>,
+    );
+
+    fireEvent.click(document.getElementById("desktop-notifications-trigger")!);
+
+    expect(
+      document.querySelector(
+        '[data-test="desktop-notifications-trigger-panel"]',
+      ),
+    ).not.toBeNull();
+    expect(
+      document.querySelector(
+        '[data-test="mobile-notifications-trigger-panel"]',
+      ),
+    ).toBeNull();
+  });
 });

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Bell } from "iconoir-react";
 
 import type { SuiteDropdownMenuComponent } from "../lib/injected";
@@ -41,11 +42,16 @@ export function SuiteNotificationBell({
   const {
     notifications,
     unreadCount: unread,
-    open,
-    setOpen,
+    refresh,
     select,
     markAllRead,
   } = useSuiteNotifications();
+  const [open, setOpen] = useState(false);
+
+  const onOpenChange = (next: boolean) => {
+    setOpen(next);
+    if (next) refresh();
+  };
 
   return (
     <DropdownMenu
@@ -57,7 +63,7 @@ export function SuiteNotificationBell({
       align="end"
       panelClassName="w-80 overflow-hidden p-0"
       open={open}
-      onOpenChange={setOpen}
+      onOpenChange={onOpenChange}
       trigger={
         <span className="relative inline-flex h-11 w-11 items-center justify-center overflow-visible rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
           <span className="relative inline-flex h-5 w-5">
@@ -96,7 +102,10 @@ export function SuiteNotificationBell({
               key={n.id}
               id={`${dataTest}-item-${n.id}`}
               data-test={`${dataTest}-item-${n.id}`}
-              onClick={() => select(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">