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