@nextclaw/ui 0.12.11 → 0.12.13

package/src/app/configs/app-navigation.config.ts

@@ -0,0 +1,246 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  AlarmClock,
+  Bot,
+  BrainCircuit,
+  Cpu,
+  Download,
+  History,
+  KeyRound,
+  Languages,
+  MessageCircle,
+  MessageSquare,
+  Plug,
+  Search,
+  Settings,
+  Shield,
+  Sparkles,
+  Wifi,
+  Wrench,
+} from "lucide-react";
+
+type Translate = (key: string) => string;
+
+export type AppNavigationItem = {
+  target: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+function matchesRouteTarget(pathname: string, target: string): boolean {
+  const normalizedPath = pathname.toLowerCase();
+  const normalizedTarget = target.toLowerCase();
+  return (
+    normalizedPath === normalizedTarget ||
+    normalizedPath.startsWith(`${normalizedTarget}/`)
+  );
+}
+
+export function isMainWorkspaceRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  return (
+    normalized === "/chat" ||
+    normalized.startsWith("/chat/") ||
+    normalized === "/skills" ||
+    normalized.startsWith("/skills/") ||
+    normalized === "/cron" ||
+    normalized.startsWith("/cron/") ||
+    normalized === "/agents" ||
+    normalized.startsWith("/agents/")
+  );
+}
+
+export function isChatSessionDetailRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  return normalized.startsWith("/chat/") && normalized !== "/chat";
+}
+
+export function getMobileBottomNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/chat",
+      label: translate("chat"),
+      icon: MessageCircle,
+    },
+    {
+      target: "/skills",
+      label: translate("marketplaceFilterSkills"),
+      icon: BrainCircuit,
+    },
+    {
+      target: "/agents",
+      label: translate("agentsPageTitle"),
+      icon: Bot,
+    },
+    {
+      target: "/settings",
+      label: translate("settings"),
+      icon: Settings,
+    },
+  ];
+}
+
+export function getSettingsNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/model",
+      label: translate("model"),
+      icon: Cpu,
+    },
+    {
+      target: "/providers",
+      label: translate("providers"),
+      icon: Sparkles,
+    },
+    {
+      target: "/channels",
+      label: translate("channels"),
+      icon: MessageSquare,
+    },
+    {
+      target: "/search",
+      label: translate("searchChannels"),
+      icon: Search,
+    },
+    {
+      target: "/runtime",
+      label: translate("runtime"),
+      icon: Cpu,
+    },
+    {
+      target: "/updates",
+      label: translate("updates"),
+      icon: Download,
+    },
+    {
+      target: "/remote",
+      label: translate("remote"),
+      icon: Wifi,
+    },
+    {
+      target: "/security",
+      label: translate("security"),
+      icon: Shield,
+    },
+    {
+      target: "/sessions",
+      label: translate("sessions"),
+      icon: History,
+    },
+    {
+      target: "/secrets",
+      label: translate("secrets"),
+      icon: KeyRound,
+    },
+    {
+      target: "/cron",
+      label: translate("cron"),
+      icon: AlarmClock,
+    },
+    {
+      target: "/marketplace/plugins",
+      label: translate("marketplaceFilterPlugins"),
+      icon: Plug,
+    },
+    {
+      target: "/marketplace/mcp",
+      label: translate("marketplaceFilterMcp"),
+      icon: Wrench,
+    },
+  ];
+}
+
+export function getMobileSettingsNavItems(
+  translate: Translate,
+): AppNavigationItem[] {
+  return [
+    {
+      target: "/language",
+      label: translate("language"),
+      icon: Languages,
+    },
+    ...getSettingsNavItems(translate),
+  ];
+}
+
+export function isSettingsRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  if (normalized === "/settings") {
+    return true;
+  }
+  return getMobileSettingsNavItems((key) => key).some((item) =>
+    matchesRouteTarget(normalized, item.target),
+  );
+}
+
+export function resolveMobileRouteMeta(
+  pathname: string,
+  translate: Translate,
+): {
+  title: string;
+  backTarget: string | null;
+  backLabel: string | null;
+} {
+  const normalized = pathname.toLowerCase();
+  const settingsItems = getMobileSettingsNavItems(translate);
+
+  if (isChatSessionDetailRoute(normalized)) {
+    return {
+      title: translate("chat"),
+      backTarget: "/chat",
+      backLabel: translate("chat"),
+    };
+  }
+
+  if (normalized === "/chat") {
+    return {
+      title: translate("chat"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  if (normalized === "/skills" || normalized.startsWith("/skills/")) {
+    return {
+      title: translate("marketplaceFilterSkills"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  if (normalized === "/agents" || normalized.startsWith("/agents/")) {
+    return {
+      title: translate("agentsPageTitle"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  if (normalized === "/settings") {
+    return {
+      title: translate("settings"),
+      backTarget: null,
+      backLabel: null,
+    };
+  }
+
+  for (const item of settingsItems) {
+    if (matchesRouteTarget(normalized, item.target)) {
+      return {
+        title: item.label,
+        backTarget: "/settings",
+        backLabel: translate("settings"),
+      };
+    }
+  }
+
+  return {
+    title: translate("settings"),
+    backTarget: null,
+    backLabel: null,
+  };
+}

package/src/{hooks → app/hooks}/use-realtime-query-bridge.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
-import { applyNcpSessionRealtimeEvent } from '@/api/ncp-session-query-cache';
+import { applyNcpSessionRealtimeEvent } from '@/shared/lib/api';
 import { systemStatusManager } from '@/features/system-status';
-import { appClient } from '@/transport';
+import { appClient } from '@/shared/lib/transport';
 import type { QueryClient } from '@tanstack/react-query';
 
 function shouldInvalidateConfigQuery(configPath: string) {

package/src/app/hooks/use-viewport-layout.ts

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
+
+export function useViewportLayout() {
+  useEffect(() => viewportLayoutManager.attach(), []);
+
+  const mode = useViewportLayoutStore((state) => state.mode);
+
+  return {
+    mode,
+    isMobile: mode === "mobile",
+    isDesktop: mode === "desktop",
+  };
+}

package/src/{app.tsx → app/index.tsx}

@@ -1,9 +1,14 @@
 import { lazy, Suspense, useEffect } from "react";
+import type { ReactElement } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { Toaster } from "sonner";
 import { appQueryClient } from "@/app-query-client";
 import { AppManagerProvider } from "@/app/components/app-manager-provider";
+import { AppLayout } from "@/app/components/layout/app-layout";
+import { LanguageSettingsPage } from "@/features/settings";
+import { SettingsEntryPage } from "@/app/components/layout/settings-entry-page";
 import { LoginPage } from "@/components/auth/login-page";
-import { AppLayout } from "@/components/layout/AppLayout";
 import { AccountPanel } from "@/features/account";
 import { useSystemStatusSources } from "@/features/system-status";
 import {
@@ -16,8 +21,6 @@ import {
   PwaUpdateBanner,
 } from "@/pwa/components/pwa-install-entry";
 import { startNextClawPwa } from "@/pwa/register-pwa";
-import { Toaster } from "sonner";
-import { Routes, Route, Navigate } from "react-router-dom";
 
 const ModelConfigPage = lazy(async () => ({
   default: (await import("@/components/config/ModelConfig")).ModelConfig,
@@ -62,165 +65,152 @@ const McpMarketplacePage = lazy(async () => ({
     .McpMarketplacePage,
 }));
 
+type RedirectRouteDefinition = {
+  path: string;
+  redirectTo: string;
+};
+
+type ElementRouteDefinition = {
+  path: string;
+  element: ReactElement;
+};
+
+type ProtectedRouteDefinition =
+  | RedirectRouteDefinition
+  | ElementRouteDefinition;
+
 function RouteFallback() {
   return (
     <div className="h-full w-full animate-pulse rounded-2xl border border-border/40 bg-card/40" />
   );
 }
 
-function LazyRoute({ children }: { children: JSX.Element }) {
+function LazyRoute({ children }: { children: ReactElement }) {
   return <Suspense fallback={<RouteFallback />}>{children}</Suspense>;
 }
 
-function ProtectedRoutes() {
-  return (
-    <Routes>
-      <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
-      <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
-      <Route path="/chat/agents" element={<Navigate to="/agents" replace />} />
-      <Route
-        path="/chat/:sessionId?"
-        element={
-          <LazyRoute>
-            <ChatPage view="chat" />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/agents"
-        element={
-          <LazyRoute>
-            <ChatPage view="agents" />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/skills"
-        element={
-          <LazyRoute>
-            <ChatPage view="skills" />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/cron"
-        element={
-          <LazyRoute>
-            <ChatPage view="cron" />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/model"
-        element={
-          <LazyRoute>
-            <ModelConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/search"
-        element={
-          <LazyRoute>
-            <SearchConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/providers"
-        element={
-          <LazyRoute>
-            <ProvidersListPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/channels"
-        element={
-          <LazyRoute>
-            <ChannelsListPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/runtime"
-        element={
-          <LazyRoute>
-            <RuntimeConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/updates"
-        element={
-          <LazyRoute>
-            <DesktopUpdateConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/remote"
-        element={
-          <LazyRoute>
-            <RemoteAccessPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/security"
-        element={
-          <LazyRoute>
-            <SecurityConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/sessions"
-        element={
-          <LazyRoute>
-            <SessionsConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route
-        path="/secrets"
-        element={
-          <LazyRoute>
-            <SecretsConfigPage />
-          </LazyRoute>
-        }
-      />
-      <Route path="/settings" element={<Navigate to="/model" replace />} />
-      <Route
-        path="/marketplace/skills"
-        element={<Navigate to="/skills" replace />}
-      />
-      <Route
-        path="/marketplace"
-        element={<Navigate to="/marketplace/plugins" replace />}
-      />
-      <Route
-        path="/marketplace/mcp"
-        element={
-          <LazyRoute>
-            <McpMarketplacePage />
-          </LazyRoute>
-        }
-      />
+function createLazyElement(element: ReactElement): ReactElement {
+  return <LazyRoute>{element}</LazyRoute>;
+}
+
+const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
+  { path: "/chat/skills", redirectTo: "/skills" },
+  { path: "/chat/cron", redirectTo: "/cron" },
+  { path: "/chat/agents", redirectTo: "/agents" },
+  {
+    path: "/chat/:sessionId?",
+    element: createLazyElement(<ChatPage view="chat" />),
+  },
+  {
+    path: "/agents",
+    element: createLazyElement(<ChatPage view="agents" />),
+  },
+  {
+    path: "/skills",
+    element: createLazyElement(<ChatPage view="skills" />),
+  },
+  {
+    path: "/cron",
+    element: createLazyElement(<ChatPage view="cron" />),
+  },
+  {
+    path: "/model",
+    element: createLazyElement(<ModelConfigPage />),
+  },
+  {
+    path: "/search",
+    element: createLazyElement(<SearchConfigPage />),
+  },
+  {
+    path: "/providers",
+    element: createLazyElement(<ProvidersListPage />),
+  },
+  {
+    path: "/channels",
+    element: createLazyElement(<ChannelsListPage />),
+  },
+  {
+    path: "/runtime",
+    element: createLazyElement(<RuntimeConfigPage />),
+  },
+  {
+    path: "/updates",
+    element: createLazyElement(<DesktopUpdateConfigPage />),
+  },
+  {
+    path: "/remote",
+    element: createLazyElement(<RemoteAccessPage />),
+  },
+  {
+    path: "/security",
+    element: createLazyElement(<SecurityConfigPage />),
+  },
+  {
+    path: "/sessions",
+    element: createLazyElement(<SessionsConfigPage />),
+  },
+  {
+    path: "/secrets",
+    element: createLazyElement(<SecretsConfigPage />),
+  },
+  {
+    path: "/language",
+    element: <LanguageSettingsPage />,
+  },
+  {
+    path: "/settings",
+    element: <SettingsEntryPage />,
+  },
+  {
+    path: "/marketplace/skills",
+    redirectTo: "/skills",
+  },
+  {
+    path: "/marketplace",
+    redirectTo: "/marketplace/plugins",
+  },
+  {
+    path: "/marketplace/mcp",
+    element: createLazyElement(<McpMarketplacePage />),
+  },
+  {
+    path: "/marketplace/:type",
+    element: createLazyElement(<MarketplacePage />),
+  },
+  {
+    path: "/",
+    redirectTo: "/chat",
+  },
+  {
+    path: "*",
+    redirectTo: "/chat",
+  },
+];
+
+function renderProtectedRoute(definition: ProtectedRouteDefinition) {
+  if ("redirectTo" in definition) {
+    return (
       <Route
-        path="/marketplace/:type"
-        element={
-          <LazyRoute>
-            <MarketplacePage />
-          </LazyRoute>
-        }
+        key={definition.path}
+        path={definition.path}
+        element={<Navigate to={definition.redirectTo} replace />}
       />
-      <Route path="/" element={<Navigate to="/chat" replace />} />
-      <Route path="*" element={<Navigate to="/chat" replace />} />
-    </Routes>
+    );
+  }
+
+  return (
+    <Route
+      key={definition.path}
+      path={definition.path}
+      element={definition.element}
+    />
   );
 }
 
+function ProtectedRoutes() {
+  return <Routes>{protectedRouteDefinitions.map(renderProtectedRoute)}</Routes>;
+}
+
 function ProtectedApp() {
   useRealtimeQueryBridge(appQueryClient);
   useSystemStatusSources();

package/src/app/managers/viewport-layout.manager.ts

@@ -0,0 +1,73 @@
+import {
+  createInitialViewportLayoutSnapshot,
+  resolveViewportLayoutMode,
+  useViewportLayoutStore,
+  type ViewportLayoutSnapshot,
+} from "@/app/stores/viewport-layout.store";
+
+export class ViewportLayoutManager {
+  private consumerCount = 0;
+
+  private started = false;
+
+  attach = (): (() => void) => {
+    this.consumerCount += 1;
+    if (this.consumerCount === 1) {
+      this.start();
+    }
+
+    return () => {
+      this.consumerCount = Math.max(0, this.consumerCount - 1);
+      if (this.consumerCount === 0) {
+        this.stop();
+      }
+    };
+  };
+
+  start = () => {
+    if (this.started || typeof window === "undefined") {
+      return;
+    }
+
+    this.started = true;
+    window.addEventListener("resize", this.handleViewportChange);
+    window.addEventListener("orientationchange", this.handleViewportChange);
+    this.syncFromWindow();
+  };
+
+  stop = () => {
+    if (!this.started || typeof window === "undefined") {
+      return;
+    }
+
+    window.removeEventListener("resize", this.handleViewportChange);
+    window.removeEventListener("orientationchange", this.handleViewportChange);
+    this.started = false;
+  };
+
+  getSnapshot = (): ViewportLayoutSnapshot => useViewportLayoutStore.getState();
+
+  resetForTests = () => {
+    this.consumerCount = 0;
+    this.stop();
+    useViewportLayoutStore.setState(createInitialViewportLayoutSnapshot());
+  };
+
+  private handleViewportChange = () => {
+    this.syncFromWindow();
+  };
+
+  private syncFromWindow = () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const width = window.innerWidth ?? null;
+    useViewportLayoutStore.setState({
+      width,
+      mode: resolveViewportLayoutMode(width),
+    });
+  };
+}
+
+export const viewportLayoutManager = new ViewportLayoutManager();