@xenide-io/the-old-ui-theme 0.6.7 → 0.6.8

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

@@ -58,7 +58,8 @@ export function SuiteAppLayout({
         style={{ width: `${sidebarWidth}px` }}
         data-collapsed={collapsed ? "true" : "false"}
       >
-        {sidebar}
+        {/* ponytail: isolate so Ask AI / BlockNote z-index cannot cover the handle */}
+        <div className="relative z-0 h-full min-h-0 isolate">{sidebar}</div>
         {onStartResize ? (
           <div
             role="separator"
@@ -80,7 +81,7 @@ export function SuiteAppLayout({
                 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)]"
+            className="absolute inset-y-0 right-0 z-20 w-2 cursor-col-resize touch-none transition-colors hover:bg-[color-mix(in_oklab,var(--ph-accent)_30%,transparent)]"
           />
         ) : null}
       </aside>

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

@@ -1,9 +1,43 @@
-import { render, screen, within } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
 
+import { sidebarColumnWidth } from "../lib/use-sidebar-width";
 import { SuiteAppLayout } from "./suite-app-layout";
 import { SuitePageHeader } from "./suite-layout";
 
+afterEach(cleanup);
+
+describe("sidebarColumnWidth", () => {
+  it("uses the persisted nav width, including while Ask AI is open", () => {
+    expect(sidebarColumnWidth(320, false, false)).toBe(320);
+    expect(sidebarColumnWidth(320, false, true)).toBe(320);
+    expect(sidebarColumnWidth(56, true, true)).toBe(56);
+  });
+});
+
+describe("sidebar resize handle", () => {
+  it("stays above Ask AI contents so the column can still be dragged", () => {
+    render(
+      <SuiteAppLayout
+        sidebarWidth={320}
+        onStartResize={() => {}}
+        sidebar={
+          <div data-suite-chat-open="" className="relative z-[999] h-full">
+            Chat
+          </div>
+        }
+      >
+        Page
+      </SuiteAppLayout>,
+    );
+
+    const handle = document.querySelector('[data-test="sidebar-resize-handle"]');
+    expect(handle).not.toBeNull();
+    expect(handle?.previousElementSibling).toHaveClass("isolate");
+    expect(handle).toHaveClass("z-20");
+  });
+});
+
 describe("suite scroll ownership", () => {
   it("keeps mobile chrome outside the main scrollport and locks only on request", () => {
     render(

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

@@ -1,10 +1,12 @@
 "use client";
 
 import Link from "next/link";
-import { type ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
+import { NavArrowLeft, Sparks } from "iconoir-react";
 
-import { cn } from "../lib/cn";
 import { Tooltip } from "../../components/ui/Tooltip";
+import { cn } from "../lib/cn";
+import { SUITE_OPEN_ASK_AI_EVENT } from "./ai-panel";
 import type { SuiteNavIcon } from "./suite-bottom-nav";
 
 type CollapsedNode = ReactNode | ((collapsed: boolean) => ReactNode);
@@ -38,6 +40,13 @@ export interface SuiteSidebarProps {
   className?: string;
   /** Use the richer surface background instead of canvas. */
   surface?: boolean;
+  /** When true, the nav body is replaced by `askAi`. */
+  askAiOpen?: boolean;
+  onAskAiOpenChange?: (open: boolean) => void;
+  /** Chat column shown while Ask AI mode is open. */
+  askAi?: ReactNode;
+  /** Expand a collapsed rail before opening Ask AI. */
+  onRequestExpand?: () => void;
 }
 
 function renderNode(
@@ -49,12 +58,12 @@ function renderNode(
 }
 
 /**
- * Standardised ShellStack sidebar. Matches the original TurtleTime layout
- * so the chrome feels familiar across all apps:
+ * Standardised ShellStack sidebar.
  * - app switcher + notification bell in a compact header
  * - workspace switcher at the top of the nav body
- * - primary nav items styled like the original NavLink
- * - avatar + optional logout in the footer
+ * - primary nav items, optional secondary tree
+ * - avatar + Ask AI in the footer (sign out lives on the avatar menu)
+ * - Ask AI mode replaces the whole column (back + thread + composer)
  */
 export function SuiteSidebar({
   appSwitcher,
@@ -67,122 +76,233 @@ export function SuiteSidebar({
   collapsed = false,
   className,
   surface = false,
+  askAiOpen = false,
+  onAskAiOpenChange,
+  askAi,
+  onRequestExpand,
 }: SuiteSidebarProps) {
-  return (
-    <div
+  const showAskAi = Boolean(onAskAiOpenChange && askAi);
+  const chatOpen = showAskAi && askAiOpen && !collapsed;
+
+  useEffect(() => {
+    if (!onAskAiOpenChange) return;
+    function onOpen() {
+      onRequestExpand?.();
+      onAskAiOpenChange?.(true);
+    }
+    window.addEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
+    return () => window.removeEventListener(SUITE_OPEN_ASK_AI_EVENT, onOpen);
+  }, [onAskAiOpenChange, onRequestExpand]);
+
+  useEffect(() => {
+    if (!chatOpen) return;
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") onAskAiOpenChange?.(false);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [chatOpen, onAskAiOpenChange]);
+
+  function toggleAskAi() {
+    if (askAiOpen) {
+      onAskAiOpenChange?.(false);
+      return;
+    }
+    if (collapsed) onRequestExpand?.();
+    onAskAiOpenChange?.(true);
+  }
+
+  const askAiButton = (
+    <button
+      type="button"
+      data-test="suite-ask-ai-toggle"
+      aria-pressed={askAiOpen}
+      aria-label={askAiOpen ? "Back to navigation" : "Shelly AI"}
+      onClick={toggleAskAi}
       className={cn(
-        "flex h-full w-full min-w-0 flex-col text-ph-ink",
-        surface ? "bg-ph-surface" : "bg-ph-canvas",
-        className,
+        "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
+        askAiOpen
+          ? "bg-ph-brand/10 text-ph-brand"
+          : "text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink",
       )}
     >
-      {/* Header */}
+      <Sparks className="h-4 w-4" aria-hidden />
+    </button>
+  );
+
+  if (chatOpen) {
+    return (
       <div
+        data-suite-chat-open=""
         className={cn(
-          "flex shrink-0 border-b border-ph-border",
+          "flex h-full w-full min-w-0 flex-col text-ph-ink",
           surface ? "bg-ph-surface" : "bg-ph-canvas",
-          collapsed
-            ? "flex-col items-center gap-1 px-1 py-2"
-            : "h-14 items-center justify-between gap-2 px-3",
+          className,
         )}
       >
-        <div className={cn("min-w-0", collapsed ? "shrink-0" : "flex-1")}>
-          {renderNode(appSwitcher, collapsed)}
+        <div
+          className={cn(
+            "flex h-14 shrink-0 items-center gap-1 border-b border-ph-border px-2",
+            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={() => onAskAiOpenChange?.(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>
+          <span className="min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink">
+            Shelly AI
+          </span>
         </div>
-        {collapsed ? null : (
-          <div className="shrink-0">
-            {renderNode(notificationBell, collapsed)}
-          </div>
-        )}
+        <div className="min-h-0 flex-1">{askAi}</div>
       </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full min-w-0 flex-col text-ph-ink",
+        surface ? "bg-ph-surface" : "bg-ph-canvas",
+        className,
+      )}
+    >
+      {appSwitcher || notificationBell ? (
+        <div
+          className={cn(
+            "flex shrink-0 border-b border-ph-border",
+            surface ? "bg-ph-surface" : "bg-ph-canvas",
+            collapsed
+              ? "flex-col items-center gap-1 px-1 py-2"
+              : "h-14 items-center justify-between gap-2 px-3",
+          )}
+        >
+          <div className={cn("min-w-0", collapsed ? "shrink-0" : "flex-1")}>
+            {renderNode(appSwitcher, collapsed)}
+          </div>
+          {collapsed ? null : (
+            <div className="shrink-0">
+              {renderNode(notificationBell, collapsed)}
+            </div>
+          )}
+        </div>
+      ) : null}
 
-      {/* Nav body */}
       <div
         className={cn(
-          "flex min-h-0 flex-1 flex-col overflow-y-auto",
+          "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",
         )}
       >
-        <nav aria-label="Pages" className="shrink-0 space-y-0.5">
-          <div className={cn("mb-3", collapsed && "flex justify-center")}>
-            {renderNode(contextSwitcher, collapsed)}
-          </div>
+        <div className={cn("mb-3 w-full shrink-0", collapsed && "flex justify-center")}>
+          {renderNode(contextSwitcher, collapsed)}
+        </div>
 
-          <div className="space-y-0.5">
-            {navItems.map((item) => {
-              const Icon = item.icon;
-              const active = Boolean(item.active);
-              const link = (
-                <Link
-                  key={item.label}
-                  href={item.href}
-                  id={item.id}
-                  data-test={item.dataTest ?? "nav-link"}
-                  aria-current={active ? "page" : undefined}
-                  onClick={item.onClick}
-                  className={cn(
-                    "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
-                    active
-                      ? "bg-ph-muted"
-                      : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
-                    collapsed
-                      ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0"
-                      : "w-full px-2.5 py-2",
-                  )}
-                >
-                  <span
-                    className={cn(
-                      "relative flex h-4 w-4 shrink-0 items-center justify-center",
-                      item.iconClassName,
-                    )}
-                    aria-hidden
-                  >
-                    <Icon
-                      className="h-full w-full"
-                      strokeWidth={active ? 2 : 1.75}
-                    />
-                  </span>
-                  <span
-                    className={cn(
-                      "relative truncate",
-                      active
-                        ? "text-ph-ink"
-                        : "text-ph-subtle group-hover:text-ph-ink",
-                      collapsed && "sr-only",
-                    )}
-                  >
-                    {item.label}
-                  </span>
-                  {!collapsed && item.badge ? (
-                    <span className="relative ml-auto shrink-0">
-                      {item.badge}
-                    </span>
-                  ) : null}
-                </Link>
-              );
-              return collapsed ? (
-                <Tooltip key={item.label} content={item.label} side="right">
-                  {link}
-                </Tooltip>
-              ) : (
-                link
-              );
-            })}
-          </div>
-        </nav>
-
-        {secondaryNav ? (
-          <div
-            className="min-h-0 flex-1"
-            data-test="suite-sidebar-secondary-nav"
-          >
-            {secondaryNav}
+        {chatOpen ? (
+          <div className="flex min-h-0 flex-1 flex-col">
+            <div className="mb-2 flex shrink-0 items-center gap-1">
+              <button
+                type="button"
+                data-test="suite-ask-ai-back"
+                onClick={() => onAskAiOpenChange?.(false)}
+                className="inline-flex h-9 items-center gap-1 rounded-lg px-2 text-sm font-medium 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 />
+                Nav
+              </button>
+              <span className="truncate text-sm font-semibold text-ph-ink">
+                Shelly AI
+              </span>
+            </div>
+            <div className="min-h-0 flex-1">{askAi}</div>
           </div>
-        ) : null}
+        ) : (
+          <>
+            <nav aria-label="Pages" className="shrink-0 space-y-0.5">
+              <div className="space-y-0.5">
+                {navItems.map((item) => {
+                  const Icon = item.icon;
+                  const active = Boolean(item.active);
+                  const link = (
+                    <Link
+                      key={item.label}
+                      href={item.href}
+                      id={item.id}
+                      data-test={item.dataTest ?? "nav-link"}
+                      aria-current={active ? "page" : undefined}
+                      onClick={item.onClick}
+                      className={cn(
+                        "group relative flex min-h-11 touch-manipulation items-center gap-2.5 rounded-[var(--ph-radius-app)] text-sm font-medium transition-colors",
+                        active
+                          ? "bg-ph-muted"
+                          : "text-ph-subtle hover:bg-ph-muted hover:text-ph-ink",
+                        collapsed
+                          ? "mx-auto size-11 shrink-0 justify-center gap-0 px-0 py-0"
+                          : "w-full px-2.5 py-2",
+                      )}
+                    >
+                      <span
+                        className={cn(
+                          "relative flex h-4 w-4 shrink-0 items-center justify-center",
+                          item.iconClassName,
+                        )}
+                        aria-hidden
+                      >
+                        <Icon
+                          className="h-full w-full"
+                          strokeWidth={active ? 2 : 1.75}
+                        />
+                      </span>
+                      <span
+                        className={cn(
+                          "relative truncate",
+                          active
+                            ? "text-ph-ink"
+                            : "text-ph-subtle group-hover:text-ph-ink",
+                          collapsed && "sr-only",
+                        )}
+                      >
+                        {item.label}
+                      </span>
+                      {!collapsed && item.badge ? (
+                        <span className="relative ml-auto shrink-0">
+                          {item.badge}
+                        </span>
+                      ) : null}
+                    </Link>
+                  );
+                  return collapsed ? (
+                    <Tooltip key={item.label} content={item.label} side="right">
+                      {link}
+                    </Tooltip>
+                  ) : (
+                    link
+                  );
+                })}
+              </div>
+            </nav>
+
+            {secondaryNav ? (
+              <div
+                className="min-h-0 flex-1"
+                data-test="suite-sidebar-secondary-nav"
+              >
+                {secondaryNav}
+              </div>
+            ) : null}
+          </>
+        )}
       </div>
 
-      {/* Footer */}
       <div
         className={cn(
           "shrink-0 border-t border-ph-border",
@@ -194,16 +314,29 @@ export function SuiteSidebar({
           className={cn(
             "flex items-center gap-2",
             collapsed
-              ? "flex-col items-center justify-center [&_[data-test$='-visible-sign-out']]:hidden [&>div]:w-auto"
+              ? "flex-col items-center justify-center [&>div]:w-auto"
               : "w-full min-w-0",
           )}
         >
           {renderNode(userMenu, collapsed)}
-          {footerExtras ? (
+          {showAskAi ? (
+            <div
+              className={cn("shrink-0", collapsed ? "mt-2" : "ml-auto")}
+            >
+              <Tooltip content="Shelly AI" side={collapsed ? "right" : "top"}>
+                {askAiButton}
+              </Tooltip>
+            </div>
+          ) : footerExtras ? (
             <div className={cn("shrink-0", collapsed ? "mt-2" : "ml-auto")}>
               {renderNode(footerExtras, collapsed)}
             </div>
           ) : null}
+          {showAskAi && footerExtras ? (
+            <div className={cn("shrink-0", collapsed && "mt-2")}>
+              {renderNode(footerExtras, collapsed)}
+            </div>
+          ) : null}
         </div>
       </div>
     </div>

package/src/suite/components/today-ui.tsx

@@ -473,7 +473,7 @@ export function TodayLayout({
  * Prefer onClick → openSuiteAskAi(); href is a fallback only.
  */
 export function TodayAskAiCard({
-  title = 'Ask AI',
+  title = 'Shelly AI',
   description = 'Ask about your workspace, draft something, or look a fact up online.',
   cta = 'Ask',
   className,

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

@@ -0,0 +1,162 @@
+"use client";
+
+import { useState, type ReactNode } from "react";
+import { Building, Check, NavArrowDown } from "iconoir-react";
+
+import { cn } from "../lib/cn";
+import type {
+  SuiteDropdownItemComponent,
+  SuiteDropdownMenuComponent,
+} from "../lib/injected";
+import { appSwitcherMenuItemClass } from "./app-switcher";
+
+export interface SuiteWorkspaceEntry {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+export interface SuiteWorkspaceGroup {
+  id: string;
+  label: string;
+  workspaces: SuiteWorkspaceEntry[];
+}
+
+/**
+ * Suite workspace switcher. Full-width bordered trigger; dropdown menu.
+ * Apps inject workspace rows (or labelled groups) and the theme dropdown.
+ */
+export function SuiteWorkspaceSwitcher({
+  workspaces = [],
+  groups,
+  currentId,
+  onSelect,
+  name,
+  collapsed = false,
+  emptyLabel = "No workspaces yet.",
+  dropdownMenu: DropdownMenu,
+  dropdownItem: DropdownItem,
+  triggerId,
+  triggerDataTest,
+  footer,
+}: {
+  workspaces?: SuiteWorkspaceEntry[];
+  groups?: SuiteWorkspaceGroup[];
+  currentId?: string | null;
+  onSelect: (workspace: SuiteWorkspaceEntry) => void;
+  name: string;
+  collapsed?: boolean;
+  emptyLabel?: string;
+  dropdownMenu: SuiteDropdownMenuComponent;
+  dropdownItem: SuiteDropdownItemComponent;
+  triggerId?: string;
+  triggerDataTest?: string;
+  footer?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  const sections =
+    groups?.filter((group) => group.workspaces.length > 0) ??
+    (workspaces.length > 0
+      ? [{ id: "workspaces", label: "Switch workspace", workspaces }]
+      : []);
+
+  return (
+    <DropdownMenu
+      aria-label="Switch workspace"
+      triggerId={triggerId ?? "workspace-switcher-trigger"}
+      triggerDataTest={triggerDataTest ?? "workspace-switcher-trigger"}
+      className={
+        collapsed
+          ? "w-11 shrink-0"
+          : "w-full min-w-0 max-w-full [&_.ph-dropdown-trigger]:w-full"
+      }
+      panelClassName="w-64 max-w-full"
+      align="start"
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <span
+          className={cn(
+            "flex min-w-0 max-w-full items-center gap-2 rounded-lg border border-ph-border bg-ph-muted text-left transition-colors hover:bg-ph-muted",
+            collapsed ? "h-10 w-10 justify-center p-0" : "w-full px-3 py-2",
+            open && "border-ph-brand/40",
+          )}
+          data-test="workspace-switcher-trigger"
+          aria-expanded={open}
+        >
+          <Building className="h-4 w-4 shrink-0 text-ph-ink" aria-hidden />
+          {!collapsed ? (
+            <>
+              <span className="min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink">
+                {name}
+              </span>
+              <NavArrowDown
+                className={cn(
+                  "h-3.5 w-3.5 shrink-0 text-ph-mutedtext transition-transform",
+                  open && "rotate-180",
+                )}
+                aria-hidden
+              />
+            </>
+          ) : null}
+        </span>
+      }
+    >
+      <div
+        id="workspace-switcher-menu"
+        className="p-1"
+        data-test="workspace-switcher-menu"
+      >
+        {sections.length === 0 ? (
+          <p className="px-3 py-2 text-sm text-ph-mutedtext">{emptyLabel}</p>
+        ) : (
+          sections.map((section) => (
+            <div key={section.id}>
+              <p className="px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-ph-mutedtext">
+                {section.label}
+              </p>
+              {section.workspaces.map((workspace) => (
+                <DropdownItem
+                  key={workspace.id}
+                  id={`workspace-option-${workspace.id}`}
+                  role="option"
+                  aria-selected={workspace.id === currentId}
+                  data-test="workspace-option"
+                  data-workspace-id={workspace.id}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => {
+                    setOpen(false);
+                    onSelect(workspace);
+                  }}
+                  className={appSwitcherMenuItemClass()}
+                >
+                  <span className="flex min-w-0 w-full items-center gap-3">
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-medium text-ph-ink">
+                        {workspace.name}
+                      </span>
+                      {workspace.description ? (
+                        <span className="block truncate text-xs text-ph-mutedtext">
+                          {workspace.description}
+                        </span>
+                      ) : null}
+                    </span>
+                    {workspace.id === currentId ? (
+                      <Check
+                        className="h-4 w-4 shrink-0 text-ph-brand"
+                        aria-hidden="true"
+                      />
+                    ) : null}
+                  </span>
+                </DropdownItem>
+              ))}
+            </div>
+          ))
+        )}
+        {footer ? (
+          <div className="mt-1 border-t border-ph-border pt-1">{footer}</div>
+        ) : null}
+      </div>
+    </DropdownMenu>
+  );
+}

package/src/suite/index.ts

@@ -35,8 +35,10 @@ export {
   SUITE_APP_MAP,
   suiteAppBaseUrl,
   resolveSuiteNotificationHref,
+  classifySuiteHref,
   type SuiteAppDefinition,
   type SuiteAppSlug,
+  type SuiteHrefTarget,
 } from "./lib/apps";
 export { TodayCalibrating } from "./components/today-calibrating";
 export {
@@ -50,11 +52,17 @@ export {
 export {
   SuiteAiPanel,
   openSuiteAskAi,
+  consumePendingAskAiPrompt,
   SUITE_OPEN_ASK_AI_EVENT,
   type SuiteAiPreset,
   type SuiteAiChatMessage,
   type SuiteAskAiOpenDetail,
 } from "./components/ai-panel";
+export {
+  SuiteWorkspaceSwitcher,
+  type SuiteWorkspaceEntry,
+  type SuiteWorkspaceGroup,
+} from "./components/workspace-switcher";
 export {
   APP_ACCENTS,
   APP_GLYPHS,
@@ -85,6 +93,7 @@ export {
   SIDEBAR_MAX_WIDTH,
   SIDEBAR_MIN_EXPANDED_WIDTH,
   SIDEBAR_RAIL_WIDTH,
+  sidebarColumnWidth,
   useSidebarWidth,
 } from "./lib/use-sidebar-width";
 export { cn } from "./lib/cn";