@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/src/suite/components/app-switcher.tsx

@@ -1,32 +1,32 @@
-'use client';
+"use client";
 
-import Image from 'next/image';
-import { useState, type ReactNode } from 'react';
-import { Check, NavArrowDown as ChevronDown } from 'iconoir-react';
+import Image from "next/image";
+import { useState, type ReactNode } from "react";
+import { Check, NavArrowDown as ChevronDown } from "iconoir-react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 import type {
   SuiteDropdownItemComponent,
   SuiteDropdownMenuComponent,
-} from '../lib/injected';
+} from "../lib/injected";
 
 export function appSwitcherTriggerClass(open: boolean, collapsed = false) {
   return cn(
-    'group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200',
-    collapsed ? 'h-11 w-11 justify-center px-0 py-0' : 'w-full',
+    "group flex min-w-0 items-center gap-2 rounded-lg border px-2 py-1.5 text-left transition-all duration-200",
+    collapsed ? "h-11 w-11 justify-center px-0 py-0" : "w-full",
     open
-      ? 'border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15'
-      : 'border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm',
+      ? "border-ph-brand/30 bg-ph-muted shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-ph-brand/15"
+      : "border-transparent hover:border-ph-border hover:bg-ph-muted/80 hover:shadow-sm",
   );
 }
 
 export function appSwitcherMarkClass() {
-  return 'h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]';
+  return "h-8 w-8 shrink-0 rounded-lg shadow-[0_1px_2px_rgba(0,0,0,0.1),0_4px_12px_rgba(0,0,0,0.08)] ring-1 ring-black/[0.06]";
 }
 
 /** No sticky Radix highlight while waiting for cross-app redirect. */
 export function appSwitcherMenuItemClass() {
-  return 'rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80';
+  return "rounded-lg px-2 py-2 data-[highlighted]:bg-transparent hover:bg-ph-muted/80";
 }
 
 export function AppSwitcherMark({
@@ -39,8 +39,8 @@ export function AppSwitcherMark({
   return (
     <span
       className={cn(
-        'relative shrink-0',
-        collapsed && 'group-hover:scale-[1.02]',
+        "relative shrink-0",
+        collapsed && "group-hover:scale-[1.02]",
       )}
     >
       {children}
@@ -59,15 +59,15 @@ export function AppSwitcherChevron({
     return (
       <span
         className={cn(
-          'absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors',
-          open && 'border-ph-brand/40 bg-ph-brand/10',
+          "absolute bottom-0 right-0 flex h-3 w-3 items-center justify-center rounded-full border border-ph-border bg-ph-surface shadow-sm transition-colors",
+          open && "border-ph-brand/40 bg-ph-brand/10",
         )}
         aria-hidden
       >
         <ChevronDown
           className={cn(
-            'h-2 w-2 text-ph-mutedtext transition-transform duration-200',
-            open && 'rotate-180 text-ph-brand',
+            "h-2 w-2 text-ph-mutedtext transition-transform duration-200",
+            open && "rotate-180 text-ph-brand",
           )}
         />
       </span>
@@ -77,17 +77,17 @@ export function AppSwitcherChevron({
   return (
     <span
       className={cn(
-        'border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200',
+        "border-ph-border/80 flex h-5 w-5 shrink-0 items-center justify-center rounded-lg border bg-ph-canvas shadow-sm transition-all duration-200",
         open
-          ? 'border-ph-brand/35 bg-ph-brand/10 text-ph-brand'
-          : 'text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface',
+          ? "border-ph-brand/35 bg-ph-brand/10 text-ph-brand"
+          : "text-ph-mutedtext group-hover:border-ph-border group-hover:bg-ph-surface",
       )}
       aria-hidden
     >
       <ChevronDown
         className={cn(
-          'h-3 w-3 transition-transform duration-200',
-          open && 'rotate-180',
+          "h-3 w-3 transition-transform duration-200",
+          open && "rotate-180",
         )}
       />
     </span>
@@ -115,6 +115,8 @@ export function AppSwitcher({
   collapsed = false,
   dropdownMenu: DropdownMenu,
   dropdownItem: DropdownItem,
+  triggerId,
+  triggerDataTest,
 }: {
   apps: SuiteAppEntry[];
   currentApp: string;
@@ -124,13 +126,17 @@ export function AppSwitcher({
   collapsed?: boolean;
   dropdownMenu: SuiteDropdownMenuComponent;
   dropdownItem: SuiteDropdownItemComponent;
+  triggerId?: string;
+  triggerDataTest?: string;
 }) {
   const [open, setOpen] = useState(false);
 
   return (
     <DropdownMenu
       aria-label="Switch application"
-      className={collapsed ? 'w-11 shrink-0' : 'min-w-0 flex-1'}
+      triggerId={triggerId ?? "app-switcher-trigger"}
+      triggerDataTest={triggerDataTest ?? "app-switcher-trigger"}
+      className={collapsed ? "w-11 shrink-0" : "min-w-0 flex-1"}
       panelClassName="w-64"
       align="start"
       open={open}
@@ -150,13 +156,14 @@ export function AppSwitcher({
         </span>
       }
     >
-      <div className="p-1" data-test="app-switcher-menu">
+      <div id="app-switcher-menu" className="p-1" data-test="app-switcher-menu">
         <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
           Switch application
         </p>
         {apps.map((app) => (
           <DropdownItem
             key={app.slug}
+            id={`switch-app-${app.slug}`}
             data-test={`switch-app-${app.slug}`}
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => {

package/src/suite/components/command-palette-host.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 import type {
   SuiteCommandItem,
   SuiteCommandPaletteComponent,
-} from '../lib/injected';
+} from "../lib/injected";
 
 function isEditableTarget(): boolean {
-  if (typeof document === 'undefined') return false;
+  if (typeof document === "undefined") return false;
   const el = document.activeElement;
   return (
     el instanceof HTMLElement &&
@@ -27,26 +27,34 @@ function isEditableTarget(): boolean {
 export function CommandPaletteHost({
   items,
   isAuthenticated = true,
-  placeholder = 'Type a command or search…',
+  placeholder = "Type a command or search…",
+  id,
+  dataTest,
+  inputId,
+  inputDataTest,
   commandPalette: CommandPalette,
 }: {
   items: SuiteCommandItem[];
   isAuthenticated?: boolean;
   placeholder?: string;
+  id?: string;
+  dataTest?: string;
+  inputId?: string;
+  inputDataTest?: string;
   commandPalette: SuiteCommandPaletteComponent;
 }) {
   const [open, setOpen] = useState(false);
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) return;
+      if (!((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k")) return;
       // Leave editors (BlockNote uses Cmd/Ctrl+K for links) alone unless the palette is open.
       if (!open && isEditableTarget()) return;
       e.preventDefault();
       setOpen((o) => !o);
     };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
   }, [open]);
 
   if (!isAuthenticated) return null;
@@ -57,6 +65,10 @@ export function CommandPaletteHost({
       isOpen={open}
       onClose={() => setOpen(false)}
       placeholder={placeholder}
+      id={id}
+      dataTest={dataTest}
+      inputId={inputId}
+      inputDataTest={inputDataTest}
     />
   );
 }

package/src/suite/components/suite-app-layout.tsx

@@ -1,8 +1,8 @@
-'use client';
+"use client";
 
-import { type ReactNode, type PointerEvent } from 'react';
+import { type ReactNode, type PointerEvent } from "react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
 export interface SuiteAppLayoutProps {
   sidebar: ReactNode;
@@ -20,6 +20,8 @@ export interface SuiteAppLayoutProps {
   lockMainScroll?: boolean;
   /** Drag this to resize the sidebar. */
   onStartResize?: (e: PointerEvent<HTMLDivElement>) => void;
+  /** Keyboard equivalent for the resize handle. */
+  onResizeBy?: (delta: number) => void;
   /** Double-click to reset sidebar width. */
   onResetWidth?: () => void;
   className?: string;
@@ -39,18 +41,22 @@ export function SuiteAppLayout({
   collapsed = false,
   lockMainScroll = false,
   onStartResize,
+  onResizeBy,
   onResetWidth,
   className,
 }: SuiteAppLayoutProps) {
   return (
     <div
       data-test="app-shell"
-      className={cn('flex min-h-dvh lg:h-screen lg:overflow-hidden', className)}
+      className={cn(
+        "suite-app-layout flex h-dvh overflow-hidden",
+        className,
+      )}
     >
       <aside
-        className="relative hidden shrink-0 flex-col overflow-hidden border-r border-ph-border transition-[width] duration-200 ease-out lg:flex"
+        className="relative hidden shrink-0 flex-col overflow-visible border-r border-ph-border ease-out lg:flex"
         style={{ width: `${sidebarWidth}px` }}
-        data-collapsed={collapsed ? 'true' : 'false'}
+        data-collapsed={collapsed ? "true" : "false"}
       >
         {sidebar}
         {onStartResize ? (
@@ -58,9 +64,23 @@ export function SuiteAppLayout({
             role="separator"
             aria-orientation="vertical"
             aria-label="Resize sidebar"
+            data-test="sidebar-resize-handle"
+            tabIndex={onResizeBy ? 0 : undefined}
             onPointerDown={onStartResize}
             onDoubleClick={onResetWidth}
-            className="absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
+            onKeyDown={(event) => {
+              if (event.key === "Home") {
+                event.preventDefault();
+                onResetWidth?.();
+              } else if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                onResizeBy?.(-16);
+              } else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                onResizeBy?.(16);
+              }
+            }}
+            className="absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize touch-none transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
           />
         ) : null}
       </aside>
@@ -72,10 +92,11 @@ export function SuiteAppLayout({
         <main
           id="main-content"
           tabIndex={-1}
-          data-lock-scroll={lockMainScroll ? 'true' : undefined}
+          data-lock-scroll={lockMainScroll ? "true" : undefined}
           className={cn(
-            'flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none',
-            lockMainScroll ? 'overflow-hidden' : 'overflow-y-auto',
+            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overscroll-contain bg-ph-canvas focus:outline-none",
+            "suite-app-layout__main",
+            lockMainScroll ? "overflow-hidden" : "overflow-y-auto",
           )}
         >
           {children}

package/src/suite/components/suite-bottom-nav.tsx

@@ -1,15 +1,15 @@
-'use client';
+"use client";
 
-import Link from 'next/link';
-import type { ComponentType } from 'react';
+import Link from "next/link";
+import type { ComponentType } from "react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
 /** Any icon component that accepts sizing/stroke props (Lucide, theme icons). */
 export type SuiteNavIcon = ComponentType<{
   className?: string;
   strokeWidth?: number | string;
-  'aria-hidden'?: boolean | 'true' | 'false';
+  "aria-hidden"?: boolean | "true" | "false";
 }>;
 
 /**
@@ -23,14 +23,15 @@ export interface SuiteBottomNavItem {
   href: string;
   label: string;
   icon: SuiteNavIcon;
+  id?: string;
   active?: boolean;
   dataTest?: string;
 }
 
 export function SuiteBottomNav({
   items,
-  ariaLabel = 'Primary navigation',
-  dataTest = 'suite-bottom-nav',
+  ariaLabel = "Primary navigation",
+  dataTest = "suite-bottom-nav",
   className,
 }: {
   items: readonly SuiteBottomNavItem[];
@@ -38,7 +39,7 @@ export function SuiteBottomNav({
   dataTest?: string;
   className?: string;
 }) {
-  if (process.env.NODE_ENV !== 'production' && items.length > 5) {
+  if (process.env.NODE_ENV !== "production" && items.length > 5) {
     // eslint-disable-next-line no-console
     console.warn(
       `SuiteBottomNav: ${items.length} items — bottom nav should have at most 5 (Hick's Law).`,
@@ -54,20 +55,20 @@ export function SuiteBottomNav({
       <div
         aria-hidden
         className="shrink-0 lg:hidden"
-        style={{ height: 'calc(60px + env(safe-area-inset-bottom))' }}
+        style={{ height: "calc(60px + env(safe-area-inset-bottom))" }}
       />
       <nav
         aria-label={ariaLabel}
         data-test={dataTest}
         className={cn(
-          'suite-bottom-nav no-print z-40 grid auto-cols-fr grid-flow-col lg:hidden',
+          "suite-bottom-nav no-print z-40 grid auto-cols-fr grid-flow-col lg:hidden",
           className,
         )}
         style={
           {
             gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
-            '--suite-nav-items': items.length,
-            '--suite-nav-active': activeIndex >= 0 ? activeIndex : 0,
+            "--suite-nav-items": items.length,
+            "--suite-nav-active": activeIndex >= 0 ? activeIndex : 0,
           } as React.CSSProperties
         }
       >
@@ -82,17 +83,21 @@ export function SuiteBottomNav({
             <Link
               key={item.href}
               href={item.href}
-              data-test={item.dataTest ?? `suite-nav-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
-              aria-current={active ? 'page' : undefined}
+              id={item.id}
+              data-test={
+                item.dataTest ??
+                `suite-nav-${item.label.toLowerCase().replace(/\s+/g, "-")}`
+              }
+              aria-current={active ? "page" : undefined}
               className={cn(
-                'suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none',
-                active && 'font-semibold text-ph-brand',
+                "suite-bottom-nav__item relative flex min-h-[60px] min-w-0 flex-col items-center justify-center gap-1 px-1 pb-1.5 pt-2 text-[10px] font-medium leading-none text-ph-mutedtext transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ph-brand motion-reduce:transition-none",
+                active && "font-semibold text-ph-brand",
               )}
             >
               <span
                 className={cn(
-                  'suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center',
-                  active && 'suite-bottom-nav__icon--active',
+                  "suite-bottom-nav__icon relative z-10 inline-flex items-center justify-center",
+                  active && "suite-bottom-nav__icon--active",
                 )}
               >
                 <Icon

package/src/suite/components/suite-layout.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SuiteAppLayout } from "./suite-app-layout";
+import { SuitePageHeader } from "./suite-layout";
+
+describe("suite scroll ownership", () => {
+  it("keeps mobile chrome outside the main scrollport and locks only on request", () => {
+    render(
+      <SuiteAppLayout
+        sidebar={<div>Sidebar</div>}
+        mobileHeader={<header>Mobile chrome</header>}
+        lockMainScroll
+      >
+        <div>Page content</div>
+      </SuiteAppLayout>,
+    );
+
+    const main = screen.getByRole("main");
+    const mobileHeader = screen.getByText("Mobile chrome").closest("header");
+
+    expect(main).toHaveAttribute("data-lock-scroll", "true");
+    expect(main).toHaveClass("overflow-hidden");
+    expect(main).not.toContainElement(mobileHeader);
+    expect(within(main).getByText("Page content")).toBeInTheDocument();
+  });
+
+  it("lets page headers and actions reflow without clipping narrow screens", () => {
+    render(
+      <SuitePageHeader
+        title="A very long responsive page title"
+        actions={<button type="button">Export report</button>}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        name: "A very long responsive page title",
+      }),
+    ).toHaveClass("break-words", "text-balance");
+    expect(screen.getByRole("button", { name: "Export report" }).parentElement)
+      .toHaveClass("max-w-full", "overflow-x-auto");
+  });
+});

package/src/suite/components/suite-layout.tsx

@@ -181,7 +181,7 @@ export function SuitePageHeader({
       data-test={dataTest}
       data-stuck={sticky ? (stuck ? 'true' : 'false') : undefined}
       className={cn(
-        'flex items-start justify-between gap-4 pb-2 sm:pb-3',
+        'flex min-w-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3',
         // No extra pt here — page inset sets the shared title baseline.
         // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
         sticky && 'suite-page-header-sticky',
@@ -212,7 +212,7 @@ export function SuitePageHeader({
           <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
             <h1
               className={cn(
-                'font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink sm:text-[2.25rem]',
+                'min-w-0 break-words font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink text-balance sm:text-[2.25rem]',
                 titleClassName,
               )}
             >
@@ -237,7 +237,7 @@ export function SuitePageHeader({
         ) : null}
       </div>
       {actions ? (
-        <div className="flex shrink-0 items-center gap-2 self-center">
+        <div className="flex max-w-full items-center gap-2 self-stretch overflow-x-auto pb-1 sm:shrink-0 sm:self-center sm:overflow-visible sm:pb-0">
           {actions}
         </div>
       ) : null}

package/src/suite/components/suite-mobile-drawer.tsx

@@ -23,6 +23,10 @@ export function SuiteMobileDrawer({
   durationMs = 200,
   dataTest,
   panelDataTest,
+  backdropId,
+  backdropDataTest,
+  closeButtonId,
+  closeButtonDataTest,
   panelClassName,
 }: {
   open: boolean;
@@ -42,6 +46,10 @@ export function SuiteMobileDrawer({
   durationMs?: number;
   dataTest?: string;
   panelDataTest?: string;
+  backdropId?: string;
+  backdropDataTest?: string;
+  closeButtonId?: string;
+  closeButtonDataTest?: string;
   /** Panel surface overrides (e.g. `bg-ph-canvas`). */
   panelClassName?: string;
 }) {
@@ -106,6 +114,8 @@ export function SuiteMobileDrawer({
     <div data-test={dataTest} className="no-print fixed inset-0 z-50 lg:hidden">
       <button
         type="button"
+        id={backdropId}
+        data-test={backdropDataTest}
         tabIndex={-1}
         className={cn(
           "absolute inset-0 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle",
@@ -148,6 +158,8 @@ export function SuiteMobileDrawer({
             ) : null}
             <button
               type="button"
+              id={closeButtonId}
+              data-test={closeButtonDataTest}
               onClick={onClose}
               className="-mr-1.5 inline-flex h-11 w-11 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
               aria-label={closeLabel}

package/src/suite/components/suite-mobile-header.tsx

@@ -1,11 +1,14 @@
-'use client';
+"use client";
 
-import type { ComponentType, ReactNode } from 'react';
-import { Menu } from 'iconoir-react';
+import type { ComponentType, ReactNode } from "react";
+import { Menu } from "iconoir-react";
 
-import { cn } from '../lib/cn';
+import { cn } from "../lib/cn";
 
-type SuiteMenuIcon = ComponentType<{ className?: string; 'aria-hidden'?: boolean | 'true' | 'false' }>;
+type SuiteMenuIcon = ComponentType<{
+  className?: string;
+  "aria-hidden"?: boolean | "true" | "false";
+}>;
 
 /**
  * Suite mobile app bar — the standardized top of every app on phone/tablet.
@@ -18,7 +21,8 @@ export function SuiteMobileHeader({
   menuIcon: MenuIcon = Menu,
   title,
   actions,
-  menuLabel = 'Open navigation',
+  menuLabel = "Open navigation",
+  menuId,
   menuDataTest,
   dataTest,
   className,
@@ -32,6 +36,7 @@ export function SuiteMobileHeader({
   /** Right-hand slot — search, bell, avatar (keep this order). */
   actions?: ReactNode;
   menuLabel?: string;
+  menuId?: string;
   menuDataTest?: string;
   dataTest?: string;
   className?: string;
@@ -40,13 +45,14 @@ export function SuiteMobileHeader({
     <header
       data-test={dataTest}
       className={cn(
-        'suite-app-bar no-print sticky top-0 z-30 flex min-h-[56px] shrink-0 items-center gap-1 border-b border-ph-border px-2 lg:hidden',
+        "suite-app-bar no-print sticky top-0 z-30 flex min-h-[56px] shrink-0 items-center gap-1 border-b border-ph-border px-2 lg:hidden",
         className,
       )}
     >
       {onMenuClick ? (
         <button
           type="button"
+          id={menuId}
           data-test={menuDataTest}
           className="suite-press inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
           onClick={onMenuClick}
@@ -57,8 +63,8 @@ export function SuiteMobileHeader({
       ) : null}
       <div
         className={cn(
-          'flex min-w-0 flex-1 items-center',
-          !onMenuClick && 'pl-2',
+          "flex min-w-0 flex-1 items-center",
+          !onMenuClick && "pl-2",
         )}
       >
         {title}

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

@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Bell } from 'iconoir-react';
+import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Bell } from "iconoir-react";
 
-import type { SuiteDropdownMenuComponent } from '../lib/injected';
-import { resolveSuiteNotificationHref } from '../lib/apps';
+import type { SuiteDropdownMenuComponent } from "../lib/injected";
+import { resolveSuiteNotificationHref } from "../lib/apps";
 
 const POLL_MS = 60_000;
 
@@ -30,9 +30,9 @@ export interface SuiteNotificationsResponse {
 
 function timeAgo(iso: string): string {
   const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) return '';
+  if (Number.isNaN(then)) return "";
   const secs = Math.max(0, Math.round((Date.now() - then) / 1000));
-  if (secs < 60) return 'just now';
+  if (secs < 60) return "just now";
   const mins = Math.round(secs / 60);
   if (mins < 60) return `${mins}m ago`;
   const hrs = Math.round(mins / 60);
@@ -45,7 +45,10 @@ export function SuiteNotificationBell({
   markRead,
   markAllRead,
   dropdownMenu: DropdownMenu,
-  cacheKey = 'suite-notifications-cache',
+  cacheKey = "suite-notifications-cache",
+  dataTest = "suite-notifications",
+  triggerId,
+  triggerDataTest,
 }: {
   fetchNotifications: () => Promise<SuiteNotificationsResponse>;
   markRead: (id: string) => Promise<unknown>;
@@ -53,6 +56,9 @@ export function SuiteNotificationBell({
   dropdownMenu: SuiteDropdownMenuComponent;
   /** sessionStorage key for stale-while-revalidate; `null` disables caching. */
   cacheKey?: string | null;
+  dataTest?: string;
+  triggerId?: string;
+  triggerDataTest?: string;
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -165,16 +171,18 @@ export function SuiteNotificationBell({
   return (
     <DropdownMenu
       aria-label="Notifications"
+      triggerId={triggerId ?? `${dataTest}-trigger`}
+      triggerDataTest={triggerDataTest ?? `${dataTest}-trigger`}
       align="end"
       panelClassName="w-80 overflow-hidden p-0"
       open={open}
       onOpenChange={onOpenChange}
       trigger={
-        <span className="relative inline-flex h-9 w-9 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
+        <span className="relative inline-flex h-11 w-11 items-center justify-center rounded-full text-ph-mutedtext transition hover:bg-ph-muted hover:text-ph-ink">
           <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
           {unread > 0 ? (
             <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-ph-brand px-1 text-[10px] font-semibold leading-none text-white ring-2 ring-ph-surface">
-              {unread > 9 ? '9+' : unread}
+              {unread > 9 ? "9+" : unread}
             </span>
           ) : null}
         </span>
@@ -185,6 +193,8 @@ export function SuiteNotificationBell({
         {unread > 0 ? (
           <button
             type="button"
+            id={`${dataTest}-mark-all`}
+            data-test={`${dataTest}-mark-all`}
             onClick={markAll}
             className="text-xs font-medium text-ph-brand hover:underline"
           >
@@ -202,6 +212,8 @@ export function SuiteNotificationBell({
             <button
               key={n.id}
               type="button"
+              id={`${dataTest}-item-${n.id}`}
+              data-test={`${dataTest}-item-${n.id}`}
               onClick={() => void openItem(n)}
               className="flex w-full flex-col gap-0.5 px-3 py-2 text-left transition hover:bg-ph-muted"
             >