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(, { 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(, { 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(, { 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 (
);
}