@nextclaw/ui 0.12.11 → 0.12.13

package/src/{components → app/components}/layout/app-layout.test.tsx

@@ -1,10 +1,22 @@
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { describe, expect, it, vi } from "vitest";
-import { AppLayout } from "@/components/layout/AppLayout";
-import { I18nProvider } from "@/components/providers/I18nProvider";
+import { AppLayout } from "@/app/components/layout/app-layout";
+import { I18nProvider } from "@/app/components/i18n-provider";
 
-vi.mock("@/components/layout/Sidebar", () => ({
+const { useViewportLayoutMock } = vi.hoisted(() => ({
+  useViewportLayoutMock: vi.fn(() => ({
+    mode: "desktop" as "mobile" | "desktop",
+    isMobile: false,
+    isDesktop: true,
+  })),
+}));
+
+vi.mock("@/app/hooks/use-viewport-layout", () => ({
+  useViewportLayout: useViewportLayoutMock,
+}));
+
+vi.mock("@/app/components/layout/sidebar", () => ({
   Sidebar: () => (
     <aside data-testid="settings-sidebar-header">Settings Sidebar</aside>
   ),
@@ -59,4 +71,39 @@ describe("AppLayout", () => {
     expect(main?.className).toContain("overflow-auto");
     expect(main?.className).not.toContain("xl:overflow-hidden");
   });
+
+  it("switches to the mobile shell when the viewport layout is mobile", () => {
+    useViewportLayoutMock.mockReturnValue({
+      mode: "mobile",
+      isMobile: true,
+      isDesktop: false,
+    });
+
+    const { container } = render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/chat"]}>
+          <Routes>
+            <Route
+              path="*"
+              element={
+                <AppLayout>
+                  <div data-testid="chat-content">Chat Content</div>
+                </AppLayout>
+              }
+            />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("chat-content")).toBeTruthy();
+    expect(screen.queryByTestId("settings-sidebar-header")).toBeNull();
+    expect(container.querySelector("aside")).toBeNull();
+
+    useViewportLayoutMock.mockReturnValue({
+      mode: "desktop",
+      isMobile: false,
+      isDesktop: true,
+    });
+  });
 });

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

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import {
+  DocBrowserProvider,
+  useDocBrowser,
+} from "@/shared/components/doc-browser/doc-browser-context";
+import { useDocLinkInterceptor } from "@/shared/components/doc-browser/use-doc-link-interceptor";
+import { useI18n } from "@/app/components/i18n-provider";
+import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
+import { DesktopAppShell } from "@/platforms/desktop";
+import { MobileAppShell } from "@/platforms/mobile";
+import { resolveUiDocumentTitle } from "@/shared/lib/ui-document-title";
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+}
+
+function AppLayoutInner({ children }: AppLayoutProps) {
+  const { isOpen, mode } = useDocBrowser();
+  useDocLinkInterceptor();
+  const { pathname } = useLocation();
+  const { language } = useI18n();
+  const { isMobile } = useViewportLayout();
+
+  useEffect(() => {
+    document.title = resolveUiDocumentTitle(pathname);
+  }, [pathname, language]);
+
+  if (isMobile) {
+    return (
+      <MobileAppShell pathname={pathname} isDocBrowserOpen={isOpen}>
+        {children}
+      </MobileAppShell>
+    );
+  }
+
+  return (
+    <DesktopAppShell
+      pathname={pathname}
+      isDocBrowserOpen={isOpen}
+      docBrowserMode={mode}
+    >
+      {children}
+    </DesktopAppShell>
+  );
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <DocBrowserProvider>
+      <AppLayoutInner>{children}</AppLayoutInner>
+    </DocBrowserProvider>
+  );
+}

package/src/{components → app/components}/layout/page-layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn } from '@/lib/utils';
+import { cn } from '@/shared/lib/utils';
 
 /* ============================================================================
    PageLayout — Unified page container

package/src/{components → app/components}/layout/runtime-status-entry.test.tsx

@@ -2,8 +2,8 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
-import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
-import { setLanguage } from '@/lib/i18n';
+import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
+import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   useRuntimeStatusBadgeView: vi.fn(),

package/src/{components → app/components}/layout/runtime-status-entry.tsx

@@ -1,10 +1,10 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import {
   systemStatusManager,
   useRuntimeStatusBadgeView,
 } from '@/features/system-status';
-import { t } from '@/lib/i18n';
-import { cn } from '@/lib/utils';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 import { toast } from 'sonner';
 
 type RuntimeStatusTone = 'healthy' | 'attention' | 'inactive';

package/src/app/components/layout/settings-entry-page.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+import { I18nProvider } from "@/app/components/i18n-provider";
+import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
+
+const { useViewportLayoutMock } = vi.hoisted(() => ({
+  useViewportLayoutMock: vi.fn(() => ({
+    mode: "desktop" as "mobile" | "desktop",
+    isMobile: false,
+    isDesktop: true,
+  })),
+}));
+
+vi.mock("@/app/hooks/use-viewport-layout", () => ({
+  useViewportLayout: useViewportLayoutMock,
+}));
+
+describe("SettingsEntryPage", () => {
+  it("redirects desktop users to the model settings page", () => {
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/settings"]}>
+          <Routes>
+            <Route path="/settings" element={<SettingsEntryPage />} />
+            <Route
+              path="/model"
+              element={<div data-testid="model-settings-page">Model</div>}
+            />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("model-settings-page")).toBeTruthy();
+  });
+
+  it("renders the mobile settings shell on mobile devices", () => {
+    useViewportLayoutMock.mockReturnValue({
+      mode: "mobile",
+      isMobile: true,
+      isDesktop: false,
+    });
+
+    render(
+      <I18nProvider>
+        <MemoryRouter initialEntries={["/settings"]}>
+          <Routes>
+            <Route path="/settings" element={<SettingsEntryPage />} />
+          </Routes>
+        </MemoryRouter>
+      </I18nProvider>,
+    );
+
+    expect(screen.getByTestId("mobile-settings-shell")).toBeTruthy();
+    const links = screen.getAllByRole("link");
+    expect(links[0]?.textContent?.trim()).toBe("Language");
+
+    useViewportLayoutMock.mockReturnValue({
+      mode: "desktop",
+      isMobile: false,
+      isDesktop: true,
+    });
+  });
+});

package/src/app/components/layout/settings-entry-page.tsx

@@ -0,0 +1,13 @@
+import { Navigate } from "react-router-dom";
+import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
+import { MobileSettingsShell } from "@/platforms/mobile";
+
+export function SettingsEntryPage() {
+  const { isMobile } = useViewportLayout();
+
+  if (!isMobile) {
+    return <Navigate to="/model" replace />;
+  }
+
+  return <MobileSettingsShell />;
+}

package/src/{components → app/components}/layout/sidebar-items.tsx

@@ -1,7 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
-import { Select, SelectContent, SelectTrigger } from '@/components/ui/select';
-import { cn } from '@/lib/utils';
+import { Select, SelectContent, SelectTrigger } from '@/shared/components/ui/select';
+import { cn } from '@/shared/lib/utils';
 
 type SidebarIcon = ComponentType<{ className?: string }>;
 type SidebarItemDensity = 'default' | 'compact';

package/src/{components → app/components}/layout/sidebar.layout.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
-import { Sidebar } from '@/components/layout/Sidebar';
+import { Sidebar } from '@/app/components/layout/sidebar';
 
 const mocks = vi.hoisted(() => ({
   openAccountPanel: vi.fn(),
@@ -16,7 +16,7 @@ const mocks = vi.hoisted(() => ({
   }
 }));
 
-vi.mock('@/components/doc-browser', () => ({
+vi.mock('@/shared/components/doc-browser', () => ({
   useDocBrowser: () => ({
     open: mocks.docOpen
   })
@@ -40,14 +40,14 @@ vi.mock('@/features/remote', async () => {
   };
 });
 
-vi.mock('@/components/providers/I18nProvider', () => ({
+vi.mock('@/app/components/i18n-provider', () => ({
   useI18n: () => ({
     language: 'en',
     setLanguage: vi.fn()
   })
 }));
 
-vi.mock('@/components/providers/ThemeProvider', () => ({
+vi.mock('@/app/components/theme-provider', () => ({
   useTheme: () => ({
     theme: 'warm',
     setTheme: vi.fn()
@@ -112,14 +112,15 @@ describe('Sidebar', () => {
       'Providers',
       'Channels',
       'Search Channels',
-      'Plugins',
-      'MCP',
       'Routing & Runtime',
       'Updates',
       'Remote Access',
       'Security',
       'Sessions',
-      'Secrets'
+      'Secrets',
+      'Cron Jobs',
+      'Plugins',
+      'MCP'
     ]);
   });
 

package/src/{components/layout/Sidebar.tsx → app/components/layout/sidebar.tsx}

@@ -1,16 +1,17 @@
-import { cn } from '@/lib/utils';
-import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
-import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi, Bot, Download } from 'lucide-react';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
+import { THEME_OPTIONS, type UiTheme } from '@/shared/lib/theme';
+import { MessageCircle, BookOpen, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Bot } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
-import { useDocBrowser } from '@/components/doc-browser';
-import { BrandHeader } from '@/components/common/BrandHeader';
-import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
-import { useI18n } from '@/components/providers/I18nProvider';
-import { useTheme } from '@/components/providers/ThemeProvider';
-import { SelectItem } from '@/components/ui/select';
+import { useDocBrowser } from '@/shared/components/doc-browser';
+import { BrandHeader } from '@/shared/components/common/brand-header';
+import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/app/components/layout/sidebar-items';
+import { useTheme } from '@/app/components/theme-provider';
+import { SelectItem } from '@/shared/components/ui/select';
 import { useAppManager } from '@/app/components/app-manager-provider';
 import { useRemoteStatus } from '@/features/remote';
+import { getSettingsNavItems } from '@/app/configs/app-navigation.config';
+import { useLanguagePreference } from '@/features/settings';
 
 type SidebarMode = 'main' | 'settings';
 
@@ -22,22 +23,18 @@ export function Sidebar({ mode }: SidebarProps) {
   const manager = useAppManager();
   const docBrowser = useDocBrowser();
   const remoteStatus = useRemoteStatus();
-  const { language, setLanguage } = useI18n();
+  const {
+    currentLanguage,
+    currentLanguageLabel,
+    languageOptions,
+    selectLanguage,
+  } = useLanguagePreference();
   const { theme, setTheme } = useTheme();
   const isSettingsMode = mode === 'settings';
-  const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
   const currentThemeLabel = t(THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ?? 'themeWarm');
   const accountEmail = remoteStatus.data?.account.email?.trim();
   const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
 
-  const handleLanguageSwitch = (nextLanguage: I18nLanguage) => {
-    if (language === nextLanguage) {
-      return;
-    }
-    setLanguage(nextLanguage);
-    window.location.reload();
-  };
-
   const handleThemeSwitch = (nextTheme: UiTheme) => {
     if (theme === nextTheme) {
       return;
@@ -69,68 +66,7 @@ export function Sidebar({ mode }: SidebarProps) {
     }
   ];
 
-  const settingsNavItems = [
-    {
-      target: '/model',
-      label: t('model'),
-      icon: Cpu,
-    },
-    {
-      target: '/providers',
-      label: t('providers'),
-      icon: Sparkles,
-    },
-    {
-      target: '/channels',
-      label: t('channels'),
-      icon: MessageSquare,
-    },
-    {
-      target: '/search',
-      label: t('searchChannels'),
-      icon: Search,
-    },
-    {
-      target: '/marketplace/plugins',
-      label: t('marketplaceFilterPlugins'),
-      icon: Plug,
-    },
-    {
-      target: '/marketplace/mcp',
-      label: t('marketplaceFilterMcp'),
-      icon: Wrench,
-    },
-    {
-      target: '/runtime',
-      label: t('runtime'),
-      icon: GitBranch,
-    },
-    {
-      target: '/updates',
-      label: t('updates'),
-      icon: Download,
-    },
-    {
-      target: '/remote',
-      label: t('remote'),
-      icon: Wifi,
-    },
-    {
-      target: '/security',
-      label: t('security'),
-      icon: Shield,
-    },
-    {
-      target: '/sessions',
-      label: t('sessions'),
-      icon: History,
-    },
-    {
-      target: '/secrets',
-      label: t('secrets'),
-      icon: KeyRound,
-    }
-  ];
+  const settingsNavItems = getSettingsNavItems(t);
   const navItems = isSettingsMode ? settingsNavItems : mainNavItems;
   const sidebarDensity = isSettingsMode ? 'compact' : 'default';
 
@@ -220,14 +156,14 @@ export function Sidebar({ mode }: SidebarProps) {
           </div>
           <div className="mb-2">
             <SidebarSelectItem
-              value={language}
-              onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
+              value={currentLanguage}
+              onValueChange={(value) => selectLanguage(value as typeof currentLanguage)}
               icon={Languages}
               label={t('language')}
               valueLabel={currentLanguageLabel}
               density={sidebarDensity}
             >
-              {LANGUAGE_OPTIONS.map((option) => (
+              {languageOptions.map((option) => (
                 <SelectItem key={option.value} value={option.value} className="text-xs">
                   {option.label}
                 </SelectItem>

package/src/{components/providers/ThemeProvider.tsx → app/components/theme-provider.tsx}

@@ -13,8 +13,8 @@ import {
   setTheme as applyTheme,
   subscribeThemeChange,
   type UiTheme,
-} from '@/lib/theme';
-import { pwaShellThemeManager } from '@/pwa/managers/pwa-shell-theme.manager';
+} from '@/shared/lib/theme';
+import { pwaShellThemeManager } from '@/features/pwa';
 
 type ThemeContextValue = {
   theme: UiTheme;