← Back to PRs

#22863: fix: disable nav group collapse toggle when active tab is in group

by NewdlDewdl open 2026-02-21 19:18 View on GitHub →
app: web-ui size: XL
## 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