From 0c94699e5e349d0fbcc772284db9c3b04ac2d200 Mon Sep 17 00:00:00 2001
From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com>
Date: Tue, 23 Jun 2026 19:30:33 +0530
Subject: [PATCH] fix(shell): restore Settings access in the collapsed sidebar
 rail (#3998)

---
 .../layout/shell/CollapsedNavRail.test.tsx    | 27 +++++++++++++++++++
 .../layout/shell/CollapsedNavRail.tsx         | 22 +++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/app/src/components/layout/shell/CollapsedNavRail.test.tsx b/app/src/components/layout/shell/CollapsedNavRail.test.tsx
index dd33aac00..cfea2e01e 100644
--- a/app/src/components/layout/shell/CollapsedNavRail.test.tsx
+++ b/app/src/components/layout/shell/CollapsedNavRail.test.tsx
@@ -83,4 +83,31 @@ describe('CollapsedNavRail', () => {
       'page'
     );
   });
+
+  it('renders a Settings icon that navigates to /settings', () => {
+    renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/home'] });
+    const settings = screen.getByRole('button', { name: 'nav.settings' });
+    expect(settings).toBeInTheDocument();
+    fireEvent.click(settings);
+    expect(mockNavigate).toHaveBeenCalledWith('/settings');
+  });
+
+  it('marks Settings active on /settings routes', () => {
+    renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/settings/general'] });
+    expect(screen.getByRole('button', { name: 'nav.settings' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+  });
+
+  it('defers to Wallet on the wallet sub-page — only one icon stays active', () => {
+    renderWithProviders(<CollapsedNavRail />, { initialEntries: ['/settings/wallet-balances'] });
+    expect(screen.getByRole('button', { name: 'nav.settings' })).not.toHaveAttribute(
+      'aria-current'
+    );
+    expect(screen.getByRole('button', { name: 'nav.wallet' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
+  });
 });
diff --git a/app/src/components/layout/shell/CollapsedNavRail.tsx b/app/src/components/layout/shell/CollapsedNavRail.tsx
index a828f4f04..c9c71fa1f 100644
--- a/app/src/components/layout/shell/CollapsedNavRail.tsx
+++ b/app/src/components/layout/shell/CollapsedNavRail.tsx
@@ -49,6 +49,11 @@ export default function CollapsedNavRail() {
   };
 
   const homeActive = location.pathname === '/chat' || location.pathname.startsWith('/chat/');
+  // Settings defers to the more-specific Wallet rail item so the wallet sub-page
+  // doesn't light up both icons at once.
+  const settingsActive =
+    matchActive('/settings', location.pathname) &&
+    !matchActive('/settings/wallet-balances', location.pathname);
 
   return (
     <nav className="flex flex-col items-center gap-0.5" aria-label={t('nav.home')}>
@@ -112,6 +117,23 @@ export default function CollapsedNavRail() {
           </button>
         );
       })}
+
+      {/* Settings — reached via the header gear when expanded, which is hidden
+          in the collapsed rail, so it gets its own icon here. */}
+      <button
+        type="button"
+        onClick={() => navigate('/settings')}
+        title={t('nav.settings')}
+        aria-label={t('nav.settings')}
+        aria-current={settingsActive ? 'page' : undefined}
+        data-analytics-id="collapsed-rail-settings"
+        className={`${RAIL_BTN} ${
+          settingsActive
+            ? 'bg-white text-stone-900 shadow-sm dark:bg-neutral-800 dark:text-neutral-100'
+            : 'text-stone-500 hover:bg-stone-100 hover:text-stone-700 dark:text-neutral-400 dark:hover:bg-neutral-800/60 dark:hover:text-neutral-200'
+        }`}>
+        <NavIcon id="settings" className="h-4 w-4" />
+      </button>
     </nav>
   );
 }