fix(ui): pin sidebar Settings entry to the fixed footer instead of the scrollable nav

steipete · steipete · commit 7e32d8495e76 · 2026-07-05T12:23:57.000-07:00
diff --git a/ui/src/app-navigation-groups.test.ts b/ui/src/app-navigation-groups.test.ts
@@ -4,17 +4,16 @@ import {
   SETTINGS_NAVIGATION_ROUTES,
   SIDEBAR_SECTIONS,
   isSettingsNavigationRoute,
-  isRouteInSidebarSection,
 } from "./app-navigation.ts";
 import { routeIdFromPath } from "./app-routes.ts";
 
 describe("SIDEBAR_SECTIONS", () => {
-  it("collapses detailed settings slices into one sidebar entry", () => {
-    const settings = SIDEBAR_SECTIONS.find((group) => group.label === "settings");
-    expect(settings?.routes).toEqual(["config"]);
+  it("keeps settings out of the scrollable sections; the footer pins it", () => {
+    expect(SIDEBAR_SECTIONS.flatMap((group) => group.routes)).not.toContain("config");
     expect(SETTINGS_NAVIGATION_ROUTES.every((routeId) => isSettingsNavigationRoute(routeId))).toBe(
       true,
     );
+    expect(isSettingsNavigationRoute("chat")).toBe(false);
   });
 
   it("keeps channel management out of the primary control sidebar", () => {
@@ -31,18 +30,6 @@ describe("SIDEBAR_SECTIONS", () => {
     expect(SETTINGS_NAVIGATION_ROUTES).toContain("channels");
   });
 
-  it("keeps the settings group active for nested settings routes", () => {
-    const settings = SIDEBAR_SECTIONS.find((group) => group.label === "settings");
-    if (!settings) {
-      throw new Error("Expected settings group");
-    }
-
-    expect(isRouteInSidebarSection(settings, "appearance")).toBe(true);
-    expect(isRouteInSidebarSection(settings, "channels")).toBe(true);
-    expect(isRouteInSidebarSection(settings, "debug")).toBe(true);
-    expect(isRouteInSidebarSection(settings, "chat")).toBe(false);
-  });
-
   it("routes every published settings slice", () => {
     expect(routeIdFromPath("/communications")).toBe("communications");
     expect(routeIdFromPath("/appearance")).toBe("appearance");
diff --git a/ui/src/app-navigation.test.ts b/ui/src/app-navigation.test.ts
@@ -268,7 +268,7 @@ describe("plugin tabs route", () => {
 
 describe("SIDEBAR_SECTIONS", () => {
   it("contains all expected groups", () => {
-    expect(SIDEBAR_SECTIONS.map((g) => g.label)).toEqual(["chat", "control", "agent", "settings"]);
+    expect(SIDEBAR_SECTIONS.map((g) => g.label)).toEqual(["chat", "control", "agent"]);
   });
 
   it("all routes are unique", () => {
@@ -278,8 +278,7 @@ describe("SIDEBAR_SECTIONS", () => {
   });
 
   it("keeps detailed settings slices routed but out of the root sidebar", () => {
-    const settings = SIDEBAR_SECTIONS.find((group) => group.label === "settings");
-    expect(settings?.routes).toEqual(["config"]);
+    expect(SIDEBAR_SECTIONS.flatMap((g) => g.routes)).not.toContain("config");
     expect(SETTINGS_NAVIGATION_ROUTES).toEqual([
       "config",
       "channels",
diff --git a/ui/src/app-navigation.ts b/ui/src/app-navigation.ts
@@ -14,14 +14,14 @@ type NavigationItem = {
   [TRouteId in NavigationRouteId]: IconName;
 };
 
+// Settings ("config") is not a scrollable section; the sidebar footer pins it.
 export const SIDEBAR_SECTIONS = [
   { label: "chat", routes: ["chat"] },
   {
     label: "control",
     routes: ["overview", "activity", "workboard", "instances", "sessions", "usage", "cron"],
   },
   { label: "agent", routes: ["agents", "skills", "skill-workshop", "nodes", "dreams"] },
-  { label: "settings", routes: ["config"] },
 ] as const satisfies readonly SidebarSection[];
 
 export const SETTINGS_NAVIGATION_ROUTES = [
@@ -68,16 +68,6 @@ export function isSettingsNavigationRoute(routeId: NavigationRouteId): boolean {
   return (SETTINGS_NAVIGATION_ROUTES as readonly NavigationRouteId[]).includes(routeId);
 }
 
-export function isRouteInSidebarSection(
-  section: SidebarSection,
-  routeId: NavigationRouteId,
-): boolean {
-  if (section.label === "settings") {
-    return isSettingsNavigationRoute(routeId);
-  }
-  return section.routes.includes(routeId);
-}
-
 export function navigationIconForRoute(routeId: NavigationRouteId): IconName {
   return NAVIGATION_ICONS[routeId] ?? "folder";
 }
diff --git a/ui/src/components/app-sidebar.ts b/ui/src/components/app-sidebar.ts
@@ -759,6 +759,7 @@ export class AppSidebar extends LitElement {
           </div>
           <div class="sidebar-shell__footer">
             <div class="sidebar-utility-group">
+              ${this.renderRoute("config")}
               ${this.collapsed
                 ? html`
                     <openclaw-tooltip
