@nextclaw/ui 0.14.1 → 0.14.2

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -1,8 +1,10 @@
-import { render, screen, within } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-import { describe, expect, it, vi } from 'vitest';
-import { Sidebar } from '@/app/components/layout/sidebar';
-import type * as RemoteFeature from '@/features/remote';
+import { render, screen, within } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { Sidebar } from "@/app/components/layout/sidebar";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import type * as RemoteFeature from "@/features/remote";
 
 const mocks = vi.hoisted(() => ({
   openAccountPanel: vi.fn(),
@@ -11,133 +13,162 @@ const mocks = vi.hoisted(() => ({
     data: {
       account: {
         loggedIn: true,
-        email: 'user@example.com'
-      }
-    }
-  }
+        email: "user@example.com",
+      },
+    },
+  },
 }));
 
-vi.mock('@/shared/components/doc-browser', () => ({
+vi.mock("@/shared/components/doc-browser", () => ({
   useDocBrowser: () => ({
-    open: mocks.docOpen
-  })
+    open: mocks.docOpen,
+  }),
 }));
 
-vi.mock('@/app/components/app-presenter-provider', () => ({
+vi.mock("@/app/components/app-presenter-provider", () => ({
   useAppPresenter: () => ({
     accountManager: {
-      openAccountPanel: mocks.openAccountPanel
-    }
-  })
+      openAccountPanel: mocks.openAccountPanel,
+    },
+  }),
 }));
 
-vi.mock('@/features/remote', async () => {
-  const actual = await vi.importActual<typeof RemoteFeature>('@/features/remote');
+vi.mock("@/features/remote", async () => {
+  const actual =
+    await vi.importActual<typeof RemoteFeature>("@/features/remote");
   return {
     ...actual,
-    useRemoteStatus: () => mocks.remoteStatus
+    useRemoteStatus: () => mocks.remoteStatus,
   };
 });
 
-vi.mock('@/app/components/i18n-provider', () => ({
+vi.mock("@/app/components/i18n-provider", () => ({
   useI18n: () => ({
-    language: 'en',
-    setLanguage: vi.fn()
-  })
+    language: "en",
+    setLanguage: vi.fn(),
+  }),
 }));
 
-vi.mock('@/app/components/theme-provider', () => ({
+vi.mock("@/app/components/theme-provider", () => ({
   useTheme: () => ({
-    theme: 'warm',
-    setTheme: vi.fn()
-  })
+    theme: "warm",
+    setTheme: vi.fn(),
+  }),
 }));
 
-describe('Sidebar', () => {
-  it('keeps the settings sidebar bounded and lets the navigation scroll independently', () => {
+describe("Sidebar", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    viewportLayoutManager.resetForTests();
+  });
+
+  it("keeps the settings sidebar bounded and lets the navigation scroll independently", () => {
     const { container } = render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const aside = container.querySelector('aside');
-    const nav = container.querySelector('nav');
-
-    expect(aside?.className).toContain('min-h-0');
-    expect(aside?.className).toContain('overflow-hidden');
-    expect(screen.getByTestId('settings-sidebar-header').parentElement?.className).toContain('py-2.5');
-    expect(aside?.className).not.toContain('py-6');
-    expect(nav?.className).toContain('flex-1');
-    expect(nav?.className).toContain('min-h-0');
-    expect(nav?.className).toContain('overflow-y-auto');
-    expect(screen.getByRole('link', { current: 'page' }).className).not.toContain('font-semibold');
+    const aside = container.querySelector("aside");
+    const nav = container.querySelector("nav");
+
+    expect(aside?.className).toContain("min-h-0");
+    expect(aside?.className).toContain("overflow-hidden");
+    expect(
+      screen.getByTestId("settings-sidebar-header").parentElement?.className,
+    ).toMatch(/(?:^|\s)py-2(?:\s|$)/);
+    expect(aside?.className).not.toContain("py-6");
+    expect(nav?.className).toContain("flex-1");
+    expect(nav?.className).toContain("min-h-0");
+    expect(nav?.className).toContain("overflow-y-auto");
+    expect(
+      screen.getByRole("link", { current: "page" }).className,
+    ).not.toContain("font-semibold");
   });
 
-  it('keeps the original compact single-row header in settings mode', () => {
+  it("keeps the original compact single-row header in settings mode", () => {
     render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const header = screen.getByTestId('settings-sidebar-header');
-    const backLink = screen.getByRole('link', { name: 'Back to Main' });
+    const header = screen.getByTestId("settings-sidebar-header");
+    const backLink = screen.getByRole("link", { name: "Back to Main" });
 
     expect(header).toBeTruthy();
-    expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Settings" })).toBeTruthy();
     expect(backLink).toBeTruthy();
-    expect(header.className).not.toContain('bg-white');
-    expect(header.className).not.toContain('rounded-2xl');
-    expect(backLink.className).toContain('hover:bg-gray-200/60');
+    expect(header.className).not.toContain("bg-white");
+    expect(header.className).not.toContain("rounded-2xl");
+    expect(backLink.className).toContain("hover:bg-gray-200/60");
   });
 
-  it('keeps the settings navigation in the expected product order', () => {
+  it("keeps the settings navigation in the expected product order", () => {
     const { container } = render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const nav = container.querySelector('nav');
+    const nav = container.querySelector("nav");
     if (!(nav instanceof HTMLElement)) {
-      throw new Error('settings nav not found');
+      throw new Error("settings nav not found");
     }
 
     const linkTexts = within(nav)
-      .getAllByRole('link')
-      .map((link) => link.textContent?.trim() || '');
+      .getAllByRole("link")
+      .map((link) => link.textContent?.trim() || "");
 
     expect(linkTexts).toEqual([
-      'Model',
-      'Providers',
-      'Channels',
-      'Search Channels',
-      'Routing & Runtime',
-      'Updates',
-      'Remote Access',
-      'Security',
-      'Secrets',
-      'MCP'
+      "Model",
+      "Providers",
+      "Channels",
+      "Search Channels",
+      "Routing & Runtime",
+      "Updates",
+      "Remote Access",
+      "Security",
+      "Secrets",
+      "MCP",
     ]);
   });
 
-  it('keeps the footer utilities compact without changing the top header structure', () => {
+  it("keeps the footer utilities compact without changing the top header structure", () => {
     render(
-      <MemoryRouter initialEntries={['/model']}>
+      <MemoryRouter initialEntries={["/model"]}>
         <Sidebar mode="settings" />
-      </MemoryRouter>
+      </MemoryRouter>,
     );
 
-    const accountEntry = screen.getByTestId('settings-sidebar-account-entry');
-    const accountStatus = screen.getByTestId('settings-sidebar-account-status');
+    const accountEntry = screen.getByTestId("settings-sidebar-account-entry");
+    const accountStatus = screen.getByTestId("settings-sidebar-account-status");
 
     expect(accountEntry).toBeTruthy();
-    expect(accountEntry.textContent).toContain('Account');
-    expect(screen.getByText('user@example.com')).toBeTruthy();
-    expect(accountEntry.className).toContain('py-2');
-    expect(accountEntry.className).toContain('text-gray-600');
-    expect(accountEntry.className).toContain('hover:bg-gray-200/60');
-    expect(accountStatus.className).toContain('text-[11px]');
+    expect(accountEntry.textContent).toContain("Account");
+    expect(screen.getByText("user@example.com")).toBeTruthy();
+    expect(accountEntry.className).toContain("py-2");
+    expect(accountEntry.className).toContain("text-gray-600");
+    expect(accountEntry.className).toContain("hover:bg-gray-200/60");
+    expect(accountStatus.className).toContain("text-[11px]");
+  });
+
+  it("persists the shared sidebar collapsed state through the viewport layout store", () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={["/model"]}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Collapse sidebar" }));
+
+    const aside = container.querySelector("aside");
+    const persistedState = JSON.parse(
+      window.localStorage.getItem("nextclaw.app.viewport-layout") ?? "{}",
+    ) as { state?: { isSidebarCollapsed?: boolean } };
+
+    expect(aside?.getAttribute("data-sidebar-collapsed")).toBe("true");
+    expect(persistedState.state?.isSidebarCollapsed).toBe(true);
+    expect(screen.getByRole("button", { name: "Expand sidebar" })).toBeTruthy();
   });
 });

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

@@ -10,7 +10,11 @@ import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { DesktopAppShell, getDesktopHostPlatform } from "@/platforms/desktop";
 import { MobileAppShell } from "@/platforms/mobile";
 import { PANEL_APPS_DOC_BROWSER_RENDERERS } from "@/features/panel-apps";
-import { SideDock, type SideDockManager, useSideDockStore } from "@/features/side-dock";
+import {
+  SideDock,
+  type SideDockManager,
+  useSideDockStore,
+} from "@/features/side-dock";
 import { getPresenter } from "@/app/presenters/app.presenter";
 import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
 import type { DocBrowserDockControls } from "@/shared/components/doc-browser/doc-browser-context";
@@ -37,12 +41,20 @@ function AppLayoutInner({
   };
 
   useEffect(() => {
-    document.title = resolveUiDocumentTitle(pathname);
+    document.title = resolveUiDocumentTitle(pathname, window.location);
   }, [pathname, language]);
 
   if (isMobile && desktopHostPlatform !== "win32") {
     return (
-      <MobileAppShell pathname={pathname} isDocBrowserOpen={isOpen} docBrowserDockControls={docBrowserDockControls} docBrowserRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS} topbarLeadingInset={desktopHostPlatform === "darwin" ? "4.75rem" : undefined}>
+      <MobileAppShell
+        pathname={pathname}
+        isDocBrowserOpen={isOpen}
+        docBrowserDockControls={docBrowserDockControls}
+        docBrowserRenderers={PANEL_APPS_DOC_BROWSER_RENDERERS}
+        topbarLeadingInset={
+          desktopHostPlatform === "darwin" ? "4.75rem" : undefined
+        }
+      >
         {children}
       </MobileAppShell>
     );
@@ -68,7 +80,9 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <DocBrowserProvider manager={presenter.docBrowserManager}>
-      <AppLayoutInner sideDockManager={presenter.sideDockManager}>{children}</AppLayoutInner>
+      <AppLayoutInner sideDockManager={presenter.sideDockManager}>
+        {children}
+      </AppLayoutInner>
     </DocBrowserProvider>
   );
 }

package/src/app/components/layout/sidebar-items.tsx

@@ -1,10 +1,26 @@
-import type { ComponentType, ReactNode } from 'react';
-import { NavLink } from 'react-router-dom';
-import { Select, SelectContent, SelectTrigger } from '@/shared/components/ui/select';
-import { cn } from '@/shared/lib/utils';
+import type { ComponentType, ReactNode } from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  Select,
+  SelectContent,
+  SelectTrigger,
+} from "@/shared/components/ui/select";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { cn } from "@/shared/lib/utils";
+import {
+  SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS,
+  SIDEBAR_RAIL_CONTROL_CLASS,
+  SIDEBAR_RAIL_ICON_CLASS,
+  SIDEBAR_RAIL_SURFACE_CLASS,
+} from "@/app/components/layout/sidebar-rail.styles";
 
 type SidebarIcon = ComponentType<{ className?: string }>;
-type SidebarItemDensity = 'default' | 'compact';
+type SidebarItemDensity = "default" | "compact";
 
 type SidebarItemTone = {
   row: string;
@@ -15,72 +31,117 @@ type SidebarItemTone = {
 
 const SIDEBAR_ITEM_TONES: Record<SidebarItemDensity, SidebarItemTone> = {
   default: {
-    row: 'gap-3 px-3 py-2.5 text-[14px]',
-    icon: 'h-[17px] w-[17px]',
-    value: 'text-xs',
-    gap: 'gap-3'
+    row: "gap-3 px-3 py-2.5 text-[14px]",
+    icon: "h-[17px] w-[17px]",
+    value: "text-xs",
+    gap: "gap-3",
   },
   compact: {
-    row: 'gap-2.5 px-3 py-2 text-[13px]',
-    icon: 'h-4 w-4',
-    value: 'text-[11px]',
-    gap: 'gap-2.5'
-  }
+    row: "gap-2.5 px-3 py-2 text-[13px]",
+    icon: "h-4 w-4",
+    value: "text-[11px]",
+    gap: "gap-2.5",
+  },
 };
 
 function getSidebarItemTone(density: SidebarItemDensity): SidebarItemTone {
   return SIDEBAR_ITEM_TONES[density];
 }
 
+function isSidebarRouteActive(pathname: string, target: string): boolean {
+  const normalizedPathname = pathname.toLowerCase();
+  const normalizedTarget = target.toLowerCase();
+  return (
+    normalizedPathname === normalizedTarget ||
+    normalizedPathname.startsWith(`${normalizedTarget}/`)
+  );
+}
+
+function SidebarItemTooltip({
+  children,
+  label,
+  side = "right",
+}: {
+  children: ReactNode;
+  label: ReactNode;
+  side?: "right" | "bottom";
+}) {
+  return (
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side={side} className="text-xs">
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 type SidebarNavLinkItemProps = {
   to: string;
-  label: ReactNode;
+  label: string;
   icon: SidebarIcon;
   density?: SidebarItemDensity;
   className?: string;
+  collapsed?: boolean;
 };
 
 export function SidebarNavLinkItem({
   to,
   label,
   icon: Icon,
-  density = 'default',
-  className
+  density = "default",
+  className,
+  collapsed = false,
 }: SidebarNavLinkItemProps) {
   const tone = getSidebarItemTone(density);
-
-  return (
-    <NavLink
+  const { pathname } = useLocation();
+  const isActive = isSidebarRouteActive(pathname, to);
+  const link = (
+    <Link
       to={to}
-      className={({ isActive }) =>
-        cn(
-          'group flex w-full items-center rounded-xl font-medium transition-colors duration-base',
-          tone.row,
-          isActive
-            ? 'bg-gray-200 text-gray-900 shadow-sm'
-            : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900',
-          className
-        )
-      }
-    >
-      {({ isActive }) => (
-        <>
-          <Icon
-            className={cn(
-              tone.icon,
-              'transition-colors',
-              isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-            )}
-          />
-          <span className="min-w-0 flex-1 text-left">{label}</span>
-        </>
+      aria-label={label}
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        "group flex w-full items-center rounded-xl font-medium transition-colors duration-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        collapsed
+          ? cn(SIDEBAR_RAIL_CONTROL_CLASS, "justify-center px-0 py-0")
+          : tone.row,
+        isActive
+          ? collapsed
+            ? SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS
+            : "bg-gray-200 text-gray-900 shadow-sm"
+          : collapsed
+            ? SIDEBAR_RAIL_SURFACE_CLASS
+            : "text-gray-600 hover:bg-gray-200/60 hover:text-gray-900",
+        className,
       )}
-    </NavLink>
+    >
+      <Icon
+        className={cn(
+          collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
+          "shrink-0 transition-colors",
+          isActive
+            ? "text-gray-900"
+            : "text-gray-500 group-hover:text-gray-800",
+        )}
+      />
+      <span className={collapsed ? "sr-only" : "min-w-0 flex-1 text-left"}>
+        {label}
+      </span>
+    </Link>
+  );
+
+  return collapsed ? (
+    <SidebarItemTooltip label={label}>{link}</SidebarItemTooltip>
+  ) : (
+    link
   );
 }
 
 type SidebarActionItemProps = {
-  label: ReactNode;
+  label: string;
   icon: SidebarIcon;
   onClick: () => void;
   density?: SidebarItemDensity;
@@ -90,38 +151,62 @@ type SidebarActionItemProps = {
   trailingClassName?: string;
   testId?: string;
   trailingTestId?: string;
+  collapsed?: boolean;
 };
 
 export function SidebarActionItem({
   label,
   icon: Icon,
   onClick,
-  density = 'default',
+  density = "default",
   className,
   labelClassName,
   trailing,
   trailingClassName,
   testId,
-  trailingTestId
+  trailingTestId,
+  collapsed = false,
 }: SidebarActionItemProps) {
   const tone = getSidebarItemTone(density);
-
-  return (
+  const button = (
     <button
       type="button"
       onClick={onClick}
+      aria-label={label}
       className={cn(
-        'flex w-full items-center rounded-xl font-medium text-gray-600 transition-all duration-base hover:bg-gray-200/60 hover:text-gray-800',
-        tone.row,
-        className
+        "group flex w-full items-center rounded-xl font-medium text-gray-600 transition-all duration-base hover:bg-gray-200/60 hover:text-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35",
+        collapsed
+          ? cn(
+              SIDEBAR_RAIL_CONTROL_CLASS,
+              "justify-center px-0 py-0",
+              SIDEBAR_RAIL_SURFACE_CLASS,
+            )
+          : tone.row,
+        className,
       )}
       data-testid={testId}
     >
-      <Icon className={cn(tone.icon, 'shrink-0 text-gray-400')} />
-      <span className={cn('min-w-0 flex-1 text-left', labelClassName)}>{label}</span>
-      {trailing ? (
+      <Icon
+        className={cn(
+          collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
+          "shrink-0 text-gray-500 transition-colors group-hover:text-gray-800",
+        )}
+      />
+      <span
+        className={cn(
+          collapsed ? "sr-only" : "min-w-0 flex-1 text-left",
+          labelClassName,
+        )}
+      >
+        {label}
+      </span>
+      {!collapsed && trailing ? (
         <span
-          className={cn('shrink-0 text-gray-500', tone.value, trailingClassName)}
+          className={cn(
+            "shrink-0 text-gray-500",
+            tone.value,
+            trailingClassName,
+          )}
           data-testid={trailingTestId}
         >
           {trailing}
@@ -129,16 +214,23 @@ export function SidebarActionItem({
       ) : null}
     </button>
   );
+
+  return collapsed ? (
+    <SidebarItemTooltip label={label}>{button}</SidebarItemTooltip>
+  ) : (
+    button
+  );
 }
 
 type SidebarSelectItemProps = {
-  label: ReactNode;
+  label: string;
   icon: SidebarIcon;
   value: string;
-  valueLabel: ReactNode;
+  valueLabel: string;
   onValueChange: (value: string) => void;
   density?: SidebarItemDensity;
   children: ReactNode;
+  collapsed?: boolean;
 };
 
 export function SidebarSelectItem({
@@ -147,25 +239,56 @@ export function SidebarSelectItem({
   value,
   valueLabel,
   onValueChange,
-  density = 'default',
-  children
+  density = "default",
+  children,
+  collapsed = false,
 }: SidebarSelectItemProps) {
   const tone = getSidebarItemTone(density);
-
-  return (
-    <Select value={value} onValueChange={onValueChange}>
-      <SelectTrigger
+  const trigger = (
+    <SelectTrigger
+      aria-label={label}
+      className={cn(
+        "group h-auto w-full rounded-xl border-0 bg-transparent font-medium text-gray-600 shadow-none hover:bg-gray-200/60 focus:ring-0 focus-visible:ring-2 focus-visible:ring-primary/35",
+        collapsed
+          ? cn(
+              SIDEBAR_RAIL_CONTROL_CLASS,
+              "justify-center px-0 py-0",
+              SIDEBAR_RAIL_SURFACE_CLASS,
+            )
+          : tone.row,
+      )}
+    >
+      <div
         className={cn(
-          'h-auto w-full rounded-xl border-0 bg-transparent font-medium text-gray-600 shadow-none hover:bg-gray-200/60 focus:ring-0',
-          tone.row
+          "flex min-w-0 items-center",
+          collapsed ? "justify-center" : tone.gap,
         )}
       >
-        <div className={cn('flex min-w-0 items-center', tone.gap)}>
-          <Icon className={cn(tone.icon, 'text-gray-400')} />
-          <span className="text-left">{label}</span>
-        </div>
-        <span className={cn('ml-auto text-gray-500', tone.value)}>{valueLabel}</span>
-      </SelectTrigger>
+        <Icon
+          className={cn(
+            collapsed ? SIDEBAR_RAIL_ICON_CLASS : tone.icon,
+            "shrink-0 text-gray-500 transition-colors group-hover:text-gray-800",
+          )}
+        />
+        <span className={collapsed ? "sr-only" : "text-left"}>{label}</span>
+      </div>
+      {!collapsed ? (
+        <span className={cn("ml-auto text-gray-500", tone.value)}>
+          {valueLabel}
+        </span>
+      ) : null}
+    </SelectTrigger>
+  );
+
+  return (
+    <Select value={value} onValueChange={onValueChange}>
+      {collapsed ? (
+        <SidebarItemTooltip label={`${label}: ${valueLabel}`}>
+          {trigger}
+        </SidebarItemTooltip>
+      ) : (
+        trigger
+      )}
       <SelectContent>{children}</SelectContent>
     </Select>
   );