@nextclaw/ui 0.15.10 → 0.15.12

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

@@ -65,7 +65,7 @@ describe("Sidebar", () => {
   it("keeps the settings sidebar bounded and lets the navigation scroll independently", () => {
     const { container } = render(
       <MemoryRouter initialEntries={["/model"]}>
-        <Sidebar mode="settings" />
+        <Sidebar />
       </MemoryRouter>,
     );
 
@@ -90,7 +90,7 @@ describe("Sidebar", () => {
   it("keeps the original compact single-row header in settings mode", () => {
     render(
       <MemoryRouter initialEntries={["/model"]}>
-        <Sidebar mode="settings" />
+        <Sidebar />
       </MemoryRouter>,
     );
 
@@ -108,7 +108,7 @@ describe("Sidebar", () => {
   it("keeps the settings navigation in the expected product order", () => {
     const { container } = render(
       <MemoryRouter initialEntries={["/model"]}>
-        <Sidebar mode="settings" />
+        <Sidebar />
       </MemoryRouter>,
     );
 
@@ -140,12 +140,12 @@ describe("Sidebar", () => {
         .getAllByRole("link")
         .map((link) => link.textContent?.trim() || ""),
     ).toEqual([
-      "Search Channels",
       "Appearance",
-      "Security",
-      "Routing & Runtime",
+      "Sign-in Management",
+      "Search Channels",
       "Updates",
       "Remote Access",
+      "Routing & Runtime",
       "Secrets",
       "MCP",
     ]);
@@ -153,12 +153,12 @@ describe("Sidebar", () => {
       "Model",
       "Providers",
       "Channels",
-      "Search Channels",
       "Appearance",
-      "Security",
-      "Routing & Runtime",
+      "Sign-in Management",
+      "Search Channels",
       "Updates",
       "Remote Access",
+      "Routing & Runtime",
       "Secrets",
       "MCP",
     ]);
@@ -167,27 +167,39 @@ describe("Sidebar", () => {
   it("keeps the footer utilities compact without changing the top header structure", () => {
     render(
       <MemoryRouter initialEntries={["/model"]}>
-        <Sidebar mode="settings" />
+        <Sidebar />
       </MemoryRouter>,
     );
 
     const accountEntry = screen.getByTestId("settings-sidebar-account-entry");
     const accountStatus = screen.getByTestId("settings-sidebar-account-status");
+    const footer = accountEntry.parentElement;
+    const navigationList = accountEntry.closest("aside")?.querySelector("nav ul");
 
     expect(accountEntry).toBeTruthy();
     expect(accountEntry.textContent).toContain("Account");
     expect(screen.getByText("user@example.com")).toBeTruthy();
+    expect(screen.queryByRole("combobox", { name: "Theme" })).toBeNull();
+    expect(screen.queryByRole("combobox", { name: "Language" })).toBeNull();
     expect(accountEntry.className).toContain("py-2");
     expect(accountEntry.className).toContain("text-muted-foreground");
     expect(accountEntry.className).toContain("hover:bg-gray-200/60");
-    expect(accountEntry.parentElement?.className).not.toContain("border-t");
+    expect(navigationList?.className).toContain("space-y-0.5");
+    expect(footer?.className).toContain("space-y-0.5");
+    expect(footer?.firstElementChild?.textContent).toContain("Help Docs");
+    expect(footer?.lastElementChild).toBe(accountEntry);
+    expect(
+      Array.from(footer?.children ?? []).every(
+        (item) => !item.className.match(/(?:^|\s)mb-/),
+      ),
+    ).toBe(true);
     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" />
+        <Sidebar />
       </MemoryRouter>,
     );
 

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

@@ -33,6 +33,7 @@ type SidebarItemTone = {
   icon: string;
   value: string;
   gap: string;
+  stack: string;
 };
 
 const SIDEBAR_ITEM_TONES: Record<SidebarItemDensity, SidebarItemTone> = {
@@ -41,12 +42,14 @@ const SIDEBAR_ITEM_TONES: Record<SidebarItemDensity, SidebarItemTone> = {
     icon: "h-[17px] w-[17px]",
     value: "text-xs",
     gap: "gap-3",
+    stack: "space-y-1",
   },
   compact: {
     row: "gap-2.5 px-3 py-2 text-[13px]",
     icon: "h-4 w-4",
     value: "text-[11px]",
     gap: "gap-2.5",
+    stack: "space-y-0.5",
   },
 };
 
@@ -54,6 +57,12 @@ function getSidebarItemTone(density: SidebarItemDensity): SidebarItemTone {
   return SIDEBAR_ITEM_TONES[density];
 }
 
+export function getSidebarItemStackClass(
+  density: SidebarItemDensity,
+): string {
+  return getSidebarItemTone(density).stack;
+}
+
 function isSidebarRouteActive(pathname: string, target: string): boolean {
   const normalizedPathname = pathname.toLowerCase();
   const normalizedTarget = target.toLowerCase();
@@ -150,7 +159,7 @@ type SidebarNavigationListProps = {
   isCollapsed: boolean;
   items: SidebarNavListItem[];
   density: SidebarItemDensity;
-  className: string;
+  className?: string;
 };
 
 export function SidebarNavigationList({
@@ -160,7 +169,7 @@ export function SidebarNavigationList({
   className,
 }: SidebarNavigationListProps) {
   return (
-    <ul className={className}>
+    <ul className={cn(getSidebarItemStackClass(density), className)}>
       {items.map((item) => (
         <li
           key={item.target}

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

@@ -1,37 +1,24 @@
 import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
-import { THEME_OPTIONS, type UiTheme } from "@/shared/lib/theme";
 import {
   BookOpen,
-  Languages,
-  Palette,
   KeyRound,
-  Settings,
   ArrowLeft,
   PanelLeftClose,
   PanelLeftOpen,
 } from "lucide-react";
 import { NavLink } from "react-router-dom";
 import { useDocBrowser } from "@/shared/components/doc-browser";
-import { BrandHeader } from "@/shared/components/common/brand-header";
 import {
+  getSidebarItemStackClass,
   SidebarActionItem,
   SidebarNavigationList,
-  SidebarNavLinkItem,
-  SidebarSelectItem,
-  type SidebarItemDensity,
   type SidebarNavListItem,
 } from "@/app/components/layout/sidebar-items";
-import { useTheme } from "@/app/components/theme-provider";
-import { SelectItem } from "@/shared/components/ui/select";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { useRemoteStatus } from "@/features/remote";
-import {
-  getMainSidebarNavItems,
-  getSettingsNavSections,
-} from "@/app/configs/app-navigation.config";
-import { useLanguagePreference } from "@/features/settings";
+import { getSettingsNavSections } from "@/app/configs/app-navigation.config";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
 import { useViewportLayoutStore } from "@/app/stores/viewport-layout.store";
 import {
@@ -45,44 +32,11 @@ import {
   SIDEBAR_SCROLL_EDGE_FADE_CLASS,
 } from "@/app/components/layout/sidebar-rail.styles";
 
-type SidebarMode = "main" | "settings";
-
-type SidebarProps = {
-  mode: SidebarMode;
-};
-
 type SidebarNavSection = {
   label: string;
   items: SidebarNavListItem[];
 };
 
-type SidebarNavigationModel = {
-  items: SidebarNavListItem[];
-  sections?: SidebarNavSection[];
-  density: SidebarItemDensity;
-};
-
-type SidebarTranslate = (key: string) => string;
-
-function resolveSidebarNavigation(
-  isSettingsMode: boolean,
-  translate: SidebarTranslate,
-): SidebarNavigationModel {
-  if (!isSettingsMode) {
-    return {
-      items: getMainSidebarNavItems(translate),
-      density: "default",
-    };
-  }
-
-  const sections = getSettingsNavSections(translate);
-  return {
-    items: sections.flatMap((section) => section.items),
-    sections,
-    density: "compact",
-  };
-}
-
 function SidebarCollapseToggle({
   isCollapsed,
   onToggle,
@@ -175,72 +129,13 @@ function SettingsSidebarHeader({
   );
 }
 
-function MainSidebarHeader({
-  isCollapsed,
-  onToggle,
-}: {
-  isCollapsed: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "shrink-0",
-        isCollapsed ? "flex justify-center px-0 py-1.5" : "px-2 py-2",
-      )}
-    >
-      {isCollapsed ? (
-        <SidebarCollapseToggle isCollapsed={isCollapsed} onToggle={onToggle} />
-      ) : (
-        <div className="flex items-center gap-2">
-          <BrandHeader className="flex min-w-0 flex-1 items-center gap-2.5 cursor-pointer" />
-          <SidebarCollapseToggle
-            isCollapsed={isCollapsed}
-            onToggle={onToggle}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function SidebarHeader({
-  isSettingsMode,
-  isCollapsed,
-  onToggle,
-}: {
-  isSettingsMode: boolean;
-  isCollapsed: boolean;
-  onToggle: () => void;
-}) {
-  return isSettingsMode ? (
-    <SettingsSidebarHeader isCollapsed={isCollapsed} onToggle={onToggle} />
-  ) : (
-    <MainSidebarHeader isCollapsed={isCollapsed} onToggle={onToggle} />
-  );
-}
-
 function SidebarNavigation({
-  isSettingsMode,
   isCollapsed,
-  items,
   sections,
-  density,
 }: {
-  isSettingsMode: boolean;
   isCollapsed: boolean;
-  items: SidebarNavListItem[];
-  sections?: SidebarNavSection[];
-  density: SidebarItemDensity;
+  sections: SidebarNavSection[];
 }) {
-  const listClassName = cn(
-    isCollapsed
-      ? cn(SIDEBAR_RAIL_STACK_CLASS, "pb-3")
-      : isSettingsMode
-        ? "space-y-0.5 pb-3"
-        : "space-y-1 pb-4",
-  );
-
   return (
     <nav
       className={cn(
@@ -249,7 +144,7 @@ function SidebarNavigation({
         SIDEBAR_SCROLL_EDGE_FADE_CLASS,
       )}
     >
-      {sections && !isCollapsed ? (
+      {!isCollapsed ? (
         <div className="space-y-3 pb-3">
           {sections.map((section) => (
             <section
@@ -263,8 +158,7 @@ function SidebarNavigation({
               <SidebarNavigationList
                 isCollapsed={isCollapsed}
                 items={section.items}
-                density={density}
-                className="space-y-0.5"
+                density="compact"
               />
             </section>
           ))}
@@ -272,16 +166,16 @@ function SidebarNavigation({
       ) : (
         <SidebarNavigationList
           isCollapsed={isCollapsed}
-          items={items}
-          density={density}
-          className={listClassName}
+          items={sections.flatMap((section) => section.items)}
+          density="compact"
+          className={cn(SIDEBAR_RAIL_STACK_CLASS, "pb-3")}
         />
       )}
     </nav>
   );
 }
 
-export function Sidebar({ mode }: SidebarProps) {
+export function Sidebar() {
   const presenter = useAppPresenter();
   const docBrowser = useDocBrowser();
   const remoteStatus = useRemoteStatus();
@@ -289,30 +183,12 @@ export function Sidebar({ mode }: SidebarProps) {
     (state) => state.isSidebarCollapsed,
   );
   const toggleCollapsed = viewportLayoutManager.toggleSidebarCollapsed;
-  const {
-    currentLanguage,
-    currentLanguageLabel,
-    languageOptions,
-    selectLanguage,
-  } = useLanguagePreference();
-  const { theme, setTheme } = useTheme();
-  const isSettingsMode = mode === "settings";
-  const currentThemeLabel = t(
-    THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ??
-      "themeWork",
-  );
   const accountEmail = remoteStatus.data?.account.email?.trim();
   const accountConnected = Boolean(remoteStatus.data?.account.loggedIn);
-
-  const handleThemeSwitch = (nextTheme: UiTheme) => {
-    if (theme !== nextTheme) setTheme(nextTheme);
-  };
-
-  const {
-    items: navItems,
-    sections: settingsNavSections,
-    density: sidebarDensity,
-  } = resolveSidebarNavigation(isSettingsMode, t);
+  const settingsNavSections = getSettingsNavSections(t);
+  const sidebarStackClass = isCollapsed
+    ? SIDEBAR_RAIL_STACK_CLASS
+    : getSidebarItemStackClass("compact");
 
   return (
     <aside
@@ -324,118 +200,26 @@ export function Sidebar({ mode }: SidebarProps) {
       )}
       data-sidebar-collapsed={isCollapsed ? "true" : "false"}
     >
-      <SidebarHeader
-        isSettingsMode={isSettingsMode}
+      <SettingsSidebarHeader
         isCollapsed={isCollapsed}
         onToggle={toggleCollapsed}
       />
 
       <div className="flex min-h-0 flex-1 flex-col">
         <SidebarNavigation
-          isSettingsMode={isSettingsMode}
           isCollapsed={isCollapsed}
-          items={navItems}
           sections={settingsNavSections}
-          density={sidebarDensity}
         />
 
         <div
           className={cn(
             "shrink-0 bg-secondary",
             isCollapsed
-              ? "mt-2 pt-2"
-              : isSettingsMode
-                ? "mt-2 pt-3"
-                : "mt-3 pt-3",
+              ? "mt-2 flex flex-col items-center pt-2"
+              : "mt-2 pt-3",
+            sidebarStackClass,
           )}
         >
-          {isSettingsMode ? (
-            <SidebarActionItem
-              onClick={() => presenter.accountManager.openAccountPanel()}
-              icon={KeyRound}
-              label={t("remoteAccountEntryManage")}
-              density="compact"
-              className={isCollapsed ? "mb-1" : "mb-1.5"}
-              trailing={
-                accountConnected
-                  ? accountEmail || t("remoteAccountEntryConnected")
-                  : t("remoteAccountEntryDisconnected")
-              }
-              trailingClassName="max-w-[92px] truncate text-right"
-              testId="settings-sidebar-account-entry"
-              trailingTestId="settings-sidebar-account-status"
-              collapsed={isCollapsed}
-            />
-          ) : null}
-          {mode === "main" && (
-            <div
-              className={cn(
-                isCollapsed ? "mb-1" : "mb-2",
-                isCollapsed ? "flex justify-center" : undefined,
-              )}
-            >
-              <SidebarNavLinkItem
-                to="/settings"
-                label={t("settings")}
-                icon={Settings}
-                collapsed={isCollapsed}
-              />
-            </div>
-          )}
-          <div
-            className={cn(
-              isCollapsed ? "mb-1" : "mb-2",
-              isCollapsed ? "flex justify-center" : undefined,
-            )}
-          >
-            <SidebarSelectItem
-              value={theme}
-              onValueChange={(value) => handleThemeSwitch(value as UiTheme)}
-              icon={Palette}
-              label={t("theme")}
-              valueLabel={currentThemeLabel}
-              density={sidebarDensity}
-              collapsed={isCollapsed}
-            >
-              {THEME_OPTIONS.map((option) => (
-                <SelectItem
-                  key={option.value}
-                  value={option.value}
-                  className="text-xs"
-                >
-                  {t(option.labelKey)}
-                </SelectItem>
-              ))}
-            </SidebarSelectItem>
-          </div>
-          <div
-            className={cn(
-              isCollapsed ? "mb-1" : "mb-2",
-              isCollapsed ? "flex justify-center" : undefined,
-            )}
-          >
-            <SidebarSelectItem
-              value={currentLanguage}
-              onValueChange={(value) =>
-                selectLanguage(value as typeof currentLanguage)
-              }
-              icon={Languages}
-              label={t("language")}
-              valueLabel={currentLanguageLabel}
-              density={sidebarDensity}
-              collapsed={isCollapsed}
-            >
-              {languageOptions.map((option) => (
-                <SelectItem
-                  key={option.value}
-                  value={option.value}
-                  className="text-xs"
-                >
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SidebarSelectItem>
-          </div>
           <SidebarActionItem
             onClick={() =>
               docBrowser.open(undefined, {
@@ -445,7 +229,22 @@ export function Sidebar({ mode }: SidebarProps) {
             }
             icon={BookOpen}
             label={t("docBrowserHelp")}
-            density={sidebarDensity}
+            density="compact"
+            collapsed={isCollapsed}
+          />
+          <SidebarActionItem
+            onClick={() => presenter.accountManager.openAccountPanel()}
+            icon={KeyRound}
+            label={t("remoteAccountEntryManage")}
+            density="compact"
+            trailing={
+              accountConnected
+                ? accountEmail || t("remoteAccountEntryConnected")
+                : t("remoteAccountEntryDisconnected")
+            }
+            trailingClassName="max-w-[92px] truncate text-right"
+            testId="settings-sidebar-account-entry"
+            trailingTestId="settings-sidebar-account-status"
             collapsed={isCollapsed}
           />
         </div>

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

@@ -6,7 +6,6 @@ import {
   Cpu,
   Download,
   KeyRound,
-  Languages,
   MessageCircle,
   MessageSquare,
   Palette,
@@ -132,11 +131,6 @@ export function getSettingsNavItems(
       label: translate("channels"),
       icon: MessageSquare,
     },
-    {
-      target: "/search",
-      label: translate("searchChannels"),
-      icon: Search,
-    },
     {
       target: "/appearance",
       label: translate("appearance"),
@@ -148,9 +142,9 @@ export function getSettingsNavItems(
       icon: Shield,
     },
     {
-      target: "/runtime",
-      label: translate("runtime"),
-      icon: Cpu,
+      target: "/search",
+      label: translate("searchChannels"),
+      icon: Search,
     },
     {
       target: "/updates",
@@ -162,6 +156,11 @@ export function getSettingsNavItems(
       label: translate("remote"),
       icon: Wifi,
     },
+    {
+      target: "/runtime",
+      label: translate("runtime"),
+      icon: Cpu,
+    },
     {
       target: "/secrets",
       label: translate("secrets"),
@@ -191,25 +190,12 @@ export function getSettingsNavSections(
   ];
 }
 
-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) =>
+  return getSettingsNavItems((key) => key).some((item) =>
     matchesRouteTarget(normalized, item.target),
   );
 }
@@ -223,7 +209,7 @@ export function resolveMobileRouteMeta(
   backLabel: string | null;
 } {
   const normalized = pathname.toLowerCase();
-  const settingsItems = getMobileSettingsNavItems(translate);
+  const settingsItems = getSettingsNavItems(translate);
 
   if (isChatSessionDetailRoute(normalized)) {
     return {

package/src/app/index.tsx

@@ -6,7 +6,6 @@ import { Toaster } from "sonner";
 import { appQueryClient } from "@/app-query-client";
 import { AppPresenterProvider } from "@/app/components/app-presenter-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 { AccountPanel } from "@/features/account";
@@ -158,10 +157,6 @@ const protectedRouteDefinitions: ProtectedRouteDefinition[] = [
     path: "/secrets",
     element: createLazyElement(<SecretsConfigPage />),
   },
-  {
-    path: "/language",
-    element: <LanguageSettingsPage />,
-  },
   {
     path: "/settings",
     element: <SettingsEntryPage />,