@xenide-io/the-old-ui-theme 0.7.0 → 0.9.0

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

@@ -1,14 +1,15 @@
 "use client";
 
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useEffect, useState, type ReactNode } from "react";
 import { Xmark as X } from "iconoir-react";
 
 import { cn } from "../lib/cn";
 
 /**
  * Suite mobile navigation drawer. Backdrop fade + panel slide, Escape to
- * close, body scroll-lock and focus hand-off while open. Nav content stays
- * app-side via `children`.
+ * close, body scroll-lock and focus containment while open. Nav content stays
+ * app-side via `children`; Radix owns the modal interaction model.
  */
 export function SuiteMobileDrawer({
   open,
@@ -57,13 +58,6 @@ export function SuiteMobileDrawer({
   // `shown` drives the slide/fade end-state.
   const [rendered, setRendered] = useState(open);
   const [shown, setShown] = useState(open);
-  const panelRef = useRef<HTMLElement | null>(null);
-  const onCloseRef = useRef(onClose);
-
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
   useEffect(() => {
     if (open) {
       queueMicrotask(() => setRendered(true));
@@ -82,101 +76,74 @@ export function SuiteMobileDrawer({
     return () => window.clearTimeout(timeout);
   }, [open, durationMs]);
 
-  // Escape to close, body scroll-lock, and focus inside while open.
-  useEffect(() => {
-    if (!open) return;
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onCloseRef.current();
-    };
-    window.addEventListener("keydown", onKeyDown);
-
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
-    const previouslyFocused =
-      document.activeElement instanceof HTMLElement
-        ? document.activeElement
-        : null;
-    const frame = requestAnimationFrame(() => panelRef.current?.focus());
-
-    return () => {
-      window.removeEventListener("keydown", onKeyDown);
-      document.body.style.overflow = previousOverflow;
-      cancelAnimationFrame(frame);
-      if (previouslyFocused?.isConnected) previouslyFocused.focus();
-    };
-  }, [open]);
-
   if (!rendered) return null;
 
   return (
-    <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",
-          shown ? "opacity-100" : "opacity-0",
-        )}
-        style={{ transitionDuration: `${durationMs}ms` }}
-        onClick={onClose}
-        aria-label={backdropLabel}
-      />
-      <aside
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={dialogLabel}
-        tabIndex={-1}
-        data-test={panelDataTest}
-        className={cn(
-          "relative flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast",
-          side === "right" && "ml-auto",
-          shown
-            ? "translate-x-0"
-            : side === "right"
-              ? "translate-x-full"
-              : "-translate-x-full",
-          panelClassName,
-        )}
-        style={{ transitionDuration: `${durationMs}ms` }}
-      >
-        {showCloseButton ? (
-          <div
+    <Dialog.Root open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <Dialog.Portal forceMount>
+        <Dialog.Overlay
+          forceMount
+          id={backdropId}
+          data-test={backdropDataTest ?? dataTest}
+          aria-label={backdropLabel}
+          className={cn(
+            "no-print fixed inset-0 z-50 bg-black/25 backdrop-blur-sm motion-safe:transition-opacity motion-safe:ease-spring-subtle lg:hidden",
+            shown ? "opacity-100" : "opacity-0",
+          )}
+          style={{ transitionDuration: `${durationMs}ms` }}
+        />
+        <Dialog.Content forceMount asChild>
+          <aside
+            role="dialog"
+            data-test={panelDataTest}
+            aria-modal="true"
             className={cn(
-              "flex h-14 shrink-0 items-center border-b border-ph-border px-3",
-              title ? "justify-between" : "justify-end",
+              "fixed inset-y-0 left-0 z-50 flex h-dvh max-h-dvh w-[86%] max-w-72 flex-col overflow-hidden bg-ph-surface shadow-xl outline-none motion-safe:transition-transform motion-safe:ease-spring-fast lg:hidden",
+              side === "right" && "left-auto right-0",
+              shown
+                ? "translate-x-0"
+                : side === "right"
+                  ? "translate-x-full"
+                  : "-translate-x-full",
+              panelClassName,
             )}
+            style={{ transitionDuration: `${durationMs}ms` }}
           >
-            {title ? (
-              <span className="truncate text-sm font-semibold text-ph-ink">
-                {title}
-              </span>
+            <Dialog.Title className="sr-only">{dialogLabel}</Dialog.Title>
+            {showCloseButton ? (
+              <div
+                className={cn(
+                  "flex h-14 shrink-0 items-center border-b border-ph-border px-3",
+                  title ? "justify-between" : "justify-end",
+                )}
+              >
+                {title ? (
+                  <span className="truncate text-sm font-semibold text-ph-ink">
+                    {title}
+                  </span>
+                ) : null}
+                <Dialog.Close asChild>
+                  <button
+                    type="button"
+                    id={closeButtonId}
+                    data-test={closeButtonDataTest}
+                    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}
+                  >
+                    <X className="h-4 w-4" aria-hidden />
+                  </button>
+                </Dialog.Close>
+              </div>
             ) : 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}
+            <div
+              data-test="suite-mobile-drawer-body"
+              className="suite-scroll-lock flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain pb-[max(0.75rem,env(safe-area-inset-bottom))]"
             >
-              <X className="h-4 w-4" aria-hidden />
-            </button>
-          </div>
-        ) : null}
-        {/* One column scroller, same as desktop SuiteSidebar body. Nested
-            flex-1 overflow-y-auto regions trap the tree in a leftover strip. */}
-        <div
-          data-test="suite-mobile-drawer-body"
-          className="suite-scroll-lock flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain pb-[max(0.75rem,env(safe-area-inset-bottom))]"
-        >
-          {children}
-        </div>
-      </aside>
-    </div>
+              {children}
+            </div>
+          </aside>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }

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

@@ -5,7 +5,11 @@ import { useRouter } from "next/navigation";
 import { Bell } from "iconoir-react";
 
 import type { SuiteDropdownMenuComponent } from "../lib/injected";
-import { resolveSuiteNotificationHref } from "../lib/apps";
+import {
+  resolveSuiteNotificationHref,
+  suiteAppBaseUrl,
+  suiteAppSlugForNotificationSource,
+} from "../lib/apps";
 
 const POLL_MS = 60_000;
 
@@ -143,8 +147,30 @@ export function SuiteNotificationBell({
       }
       const target = resolveSuiteNotificationHref(n.href, n.source_app);
       if (!target) return;
-      // Cross-app notifications must leave this product origin.
       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;
       }
@@ -184,7 +210,7 @@ export function SuiteNotificationBell({
           <span className="relative inline-flex h-5 w-5">
             <Bell className="h-5 w-5" strokeWidth={1.75} aria-hidden />
             {unread > 0 ? (
-              <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-white ring-2 ring-ph-surface">
+              <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">
                 {unread > 9 ? "9+" : unread}
               </span>
             ) : null}
@@ -215,7 +241,6 @@ export function SuiteNotificationBell({
           items.map((n) => (
             <button
               key={n.id}
-              type="button"
               id={`${dataTest}-item-${n.id}`}
               data-test={`${dataTest}-item-${n.id}`}
               onClick={() => void openItem(n)}

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

@@ -6,10 +6,7 @@ import { NavArrowLeft, Sparks } from "iconoir-react";
 
 import { Tooltip } from "../../components/ui/Tooltip";
 import { cn } from "../lib/cn";
-import {
-  persistSuiteAskAiOpen,
-  SUITE_OPEN_ASK_AI_EVENT,
-} from "./ai-panel";
+import { persistSuiteAskAiOpen, SUITE_OPEN_ASK_AI_EVENT } from "./ai-panel";
 import type { SuiteNavIcon } from "./suite-bottom-nav";
 
 type CollapsedNode = ReactNode | ((collapsed: boolean) => ReactNode);
@@ -31,7 +28,7 @@ export interface SuiteSidebarProps {
   /** Optional custom app switcher node, or a function of collapsed state. */
   appSwitcher?: CollapsedNode;
   /** Workspace/org/project switcher rendered below the app switcher. */
-  contextSwitcher: CollapsedNode;
+  contextSwitcher?: CollapsedNode;
   navItems: SuiteSidebarNavItem[];
   /** Optional secondary nav / tree rendered below primary nav. */
   secondaryNav?: ReactNode;
@@ -157,17 +154,15 @@ export function SuiteSidebar({
             surface ? "bg-ph-surface" : "bg-ph-canvas",
           )}
         >
-          <Tooltip content="Back to navigation">
-            <button
-              type="button"
-              data-test="suite-ask-ai-back"
-              aria-label="Back to navigation"
-              onClick={() => setAskAi(false)}
-              className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
-            >
-              <NavArrowLeft className="h-4 w-4" aria-hidden />
-            </button>
-          </Tooltip>
+          <button
+            type="button"
+            data-test="suite-ask-ai-back"
+            aria-label="Back to navigation"
+            onClick={() => setAskAi(false)}
+            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
+          >
+            <NavArrowLeft className="h-4 w-4" aria-hidden />
+          </button>
           <span className="min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink">
             Shelly AI
           </span>
@@ -211,12 +206,19 @@ export function SuiteSidebar({
           "flex min-h-0 flex-1 flex-col",
           surface ? "bg-ph-surface" : "bg-ph-canvas",
           chatOpen ? "min-h-0" : "overflow-y-auto",
-          collapsed ? "px-1.5 py-2" : "p-2",
+          collapsed ? "px-1.5 py-2" : "p-3",
         )}
       >
-        <div className={cn("mb-3 w-full shrink-0", collapsed && "flex justify-center")}>
-          {renderNode(contextSwitcher, collapsed)}
-        </div>
+        {contextSwitcher ? (
+          <div
+            className={cn(
+              "mb-4 w-full shrink-0",
+              collapsed && "flex justify-center",
+            )}
+          >
+            {renderNode(contextSwitcher, collapsed)}
+          </div>
+        ) : null}
 
         {chatOpen ? (
           <div className="flex min-h-0 flex-1 flex-col">
@@ -238,8 +240,8 @@ export function SuiteSidebar({
           </div>
         ) : (
           <>
-            <nav aria-label="Pages" className="shrink-0 space-y-0.5">
-              <div className="space-y-0.5">
+            <nav aria-label="Pages" className="shrink-0 space-y-1">
+              <div className="space-y-1">
                 {navItems.map((item) => {
                   const Icon = item.icon;
                   const active = Boolean(item.active);
@@ -331,9 +333,7 @@ export function SuiteSidebar({
         >
           {renderNode(userMenu, collapsed)}
           {showAskAi ? (
-            <div
-              className={cn("shrink-0", collapsed ? "mt-2" : "ml-auto")}
-            >
+            <div className={cn("shrink-0", collapsed ? "mt-2" : "ml-auto")}>
               <Tooltip content="Shelly AI" side={collapsed ? "right" : "top"}>
                 {askAiButton}
               </Tooltip>

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

@@ -167,14 +167,14 @@ export function SuiteEmptyState({
             {icon}
           </div>
         ) : null}
-        <h3
+        <h2
           className={cn(
             'font-semibold text-ph-ink',
             size === 'sm' ? 'text-base' : 'text-lg',
           )}
         >
           {title}
-        </h3>
+        </h2>
         {description ? (
           <p className="mx-auto mt-2 max-w-sm text-sm leading-relaxed text-ph-subtle">
             {description}

package/src/suite/components/suite-user-menu.tsx

@@ -43,12 +43,12 @@ function computeInitials(
  * email or name so avatars without a photo get a per-user colour instead of a
  * flat grey. Uses theme `--ph-*` tokens so it adapts to light and dark themes.
  */
-const AVATAR_TOKENS = [
-  "bg-ph-brand",
-  "bg-ph-violet",
-  "bg-ph-info",
-  "bg-ph-success",
-  "bg-ph-danger",
+const AVATAR_TOKENS: Array<[string, string]> = [
+  ["bg-ph-brand", "text-[var(--ph-on-accent)]"],
+  ["bg-ph-violet", "text-[var(--ph-on-violet)]"],
+  ["bg-ph-info", "text-[var(--ph-on-info)]"],
+  ["bg-ph-success", "text-[var(--ph-on-success)]"],
+  ["bg-ph-danger", "text-[var(--ph-on-danger)]"],
 ];
 
 function avatarColorClass(seed: string): string {
@@ -56,7 +56,8 @@ function avatarColorClass(seed: string): string {
   for (let i = 0; i < seed.length; i += 1) {
     hash = seed.charCodeAt(i) + ((hash << 5) - hash);
   }
-  return AVATAR_TOKENS[Math.abs(hash) % AVATAR_TOKENS.length];
+  const [bg, ink] = AVATAR_TOKENS[Math.abs(hash) % AVATAR_TOKENS.length];
+  return `${bg} ${ink}`;
 }
 
 /**
@@ -96,7 +97,7 @@ export function SuiteUserMenu({
       ) : (
         <span
           className={cn(
-            "flex h-full w-full items-center justify-center text-sm font-semibold text-white",
+            "flex h-full w-full items-center justify-center text-sm font-semibold",
             fallbackColor,
           )}
         >

package/src/suite/components/theme-provider.test.tsx

@@ -1,7 +1,15 @@
-import { cleanup, render, waitFor } from "@testing-library/react";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { useEffect } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { SuiteThemeProvider, type SuiteThemeConfig } from "./theme-provider";
+import { SUITE_THEME_COOKIE } from "../lib/theme-cookie";
+import { suiteThemeBootScript } from "../lib/theme-boot";
+import {
+  SuiteThemeProvider,
+  useSuiteTheme,
+  type SuiteThemeConfig,
+  type SuiteThemeContextValue,
+} from "./theme-provider";
 
 const config: SuiteThemeConfig = {
   storageKey: "test-theme",
@@ -36,8 +44,8 @@ beforeEach(() => {
 afterEach(() => {
   cleanup();
   vi.unstubAllGlobals();
+  document.cookie = `${SUITE_THEME_COOKIE}=; Path=/; Max-Age=0`;
   document.documentElement.removeAttribute("data-theme");
-  document.documentElement.removeAttribute("data-suite-lock-page-zoom");
   document.documentElement.classList.remove("dark");
   document.getElementById("theme-color-meta")?.remove();
 });
@@ -60,4 +68,80 @@ describe("SuiteThemeProvider", () => {
       expect(meta).toHaveAttribute("content", config.themeColorDark),
     );
   });
+
+  it("adopts a shared-cookie preference from another suite app", async () => {
+    document.cookie = `${SUITE_THEME_COOKIE}=light; Path=/`;
+    document.documentElement.setAttribute("data-theme", config.darkThemeId);
+
+    render(
+      <SuiteThemeProvider config={config}>
+        <div />
+      </SuiteThemeProvider>,
+    );
+
+    await waitFor(() =>
+      expect(document.documentElement.getAttribute("data-theme")).toBe(
+        config.lightThemeId,
+      ),
+    );
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  it("persists setTheme to the shared cookie for other suite apps", async () => {
+    document.cookie = `${SUITE_THEME_COOKIE}=system; Path=/`;
+    document.documentElement.setAttribute("data-theme", config.lightThemeId);
+
+    let captured: SuiteThemeContextValue | null = null;
+    function Probe() {
+      const ctx = useSuiteTheme();
+      useEffect(() => {
+        captured = ctx;
+      }, [ctx]);
+      return null;
+    }
+
+    render(
+      <SuiteThemeProvider config={config}>
+        <Probe />
+      </SuiteThemeProvider>,
+    );
+
+    await waitFor(() => expect(captured).not.toBeNull());
+    act(() => captured!.setTheme("dark"));
+
+    expect(document.documentElement.getAttribute("data-theme")).toBe(
+      config.darkThemeId,
+    );
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+    expect(document.cookie).toContain(`${SUITE_THEME_COOKIE}=dark`);
+  });
+});
+
+describe("suiteThemeBootScript", () => {
+  it("applies the shared cookie mode before the OS preference", () => {
+    document.cookie = `${SUITE_THEME_COOKIE}=light; Path=/`;
+    const script = suiteThemeBootScript({
+      lightThemeId: "x-light",
+      darkThemeId: "x-dark",
+      storageKey: "legacy",
+    });
+    new Function(script)();
+    expect(document.documentElement.getAttribute("data-theme")).toBe(
+      "x-light",
+    );
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+  });
+
+  it("falls back to the OS preference when no cookie or stored mode exists", () => {
+    const script = suiteThemeBootScript({
+      lightThemeId: "x-light",
+      darkThemeId: "x-dark",
+      storageKey: "legacy",
+      fallback: "light",
+    });
+    // The stubbed localStorage returns a legacy "dark" preference.
+    new Function(script)();
+    expect(document.documentElement.getAttribute("data-theme")).toBe("x-dark");
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
 });