#22863: fix: disable nav group collapse toggle when active tab is in group
app: web-ui
size: XL
Cluster:
Web UI Enhancements and Fixes
## Problem
Fixes #22831
When viewing a page within a navigation group section (e.g., viewing the "Agents" page which is in the "Agent" section), clicking the section toggle appears to do nothing. The user clicks the collapse/expand button, but the section stays visible because the current page is within it.
This creates a confusing UX where the button seems broken or unresponsive.
## Solution
The navigation group toggle button is now **disabled** when the active tab belongs to that group. This makes it clear that the section cannot be collapsed while viewing a page within it.
### Implementation details:
1. **Added `resolveNavGroupCollapseState` helper** in `navigation.ts`:
- Determines if the active tab is in the group
- Calculates whether the group can be collapsed
- Returns the effective collapse state
2. **Updated navigation rendering** in `app-render.ts`:
- Button is disabled via `?disabled` attribute when active tab is in group
- Click handler returns early when `canCollapse` is false
- Added `aria-current="page"` for better accessibility
3. **Added CSS for disabled state** in `layout.css`:
- Disabled buttons show reduced opacity (0.6)
- Cursor changes to `not-allowed`
- Hover effects are suppressed when disabled
4. **Added comprehensive tests** in `navigation.test.ts`:
- Tests for active tab preventing collapse
- Tests for collapse/expand when tab not in group
- Edge cases (first tab, last tab, single-tab groups)
## Testing
### Test Evidence
All tests pass:
```
✓ Test Files 124 passed (124)
✓ Tests 1172 passed | 1 skipped (1173)
```
New tests for `resolveNavGroupCollapseState`:
- ✅ Prevents collapse when active tab is in group
- ✅ Allows collapse when active tab is not in group
- ✅ Preserves stored collapse state correctly
- ✅ Handles edge cases (first/last tab, single-tab groups)
### Manual Testing
Browser testing confirmed:
1. Navigate to "Agents" page (in "Agent" section)
2. Section toggle button is now disabled (cursor shows not-allowed)
3. Navigate to "Chat" page (different section)
4. "Agent" section toggle is now enabled and works correctly
## Quality Gate
- ✅ `pnpm build` - passed
- ✅ `pnpm tsgo` - passed
- ✅ `pnpm lint` - passed
- ✅ `pnpm test` - 1172 tests passed
---
**AI-assisted:** Implementation, testing, and PR description generated with AI assistance.
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
This PR fixes a UX issue where clicking the navigation group collapse toggle appeared unresponsive when viewing a page within that group. The solution disables the toggle button when the active tab belongs to the group, making it clear the section cannot be collapsed while viewing a page within it. The implementation adds a `resolveNavGroupCollapseState` helper function, updates the rendering logic to handle disabled states, adds CSS for visual feedback, and includes comprehensive test coverage.
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk
- The implementation is well-designed with clear separation of concerns, comprehensive test coverage (6 new test cases covering all edge cases), and follows existing code patterns. The logic is straightforward and defensive (early return + disabled attribute), CSS changes are minimal and scoped, and all quality gates passed (1172 tests). No breaking changes or security concerns.
- No files require special attention
<sub>Last reviewed commit: ce6cd8a</sub>
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#18685: fix(ui): prevent tabnabbing in chat images
by Mariana-Codebase · 2026-02-16
70.6%
#18662: feat(ui): 3-state mode system
by jasonkneen · 2026-02-16
68.7%
#22808: test(ui): split baseline browser-test fixes from webchat feature
by opnsec · 2026-02-21
68.0%
#13356: ui: align Thinking button active state in light theme with dark theme
by yamoroc · 2026-02-10
67.3%
#20317: feat(webchat): add toggle to hide tool calls and thinking blocks
by nmccready · 2026-02-18
67.3%
#15999: fix: handle null/undefined in activity feed filters
by pamnlambert · 2026-02-14
67.0%
#21642: fix(ui): disable dashboard session delete for webchat clients
by graysurf · 2026-02-20
66.5%
#14201: UI: fix exec approval dialog scrolling with long commands
by jhs129 · 2026-02-11
66.5%
#21679: fix: Mission Control dashboard issues for agent status, stale sessi...
by thejawdoc · 2026-02-20
66.4%
#12175: ui: fix sessions table collapse on narrow widths
by benjipeng · 2026-02-08
66.4%