Feature: Accordion navigation for tab organization #2530
Conversation
Problem: The decompiler was eagerly decompiling both operandA and operandB for all action operations, even when operandB was unused. This caused incorrect type-specific validation warnings for operations like SET_PROFILE (operation 42) which only uses operandA. Example: SET_PROFILE with operandB type=6 (PID), value=1700 (garbage data) would trigger: "Invalid PID operand value 1700. Valid range is 0-3." Solution: Added operation-specific operand handling with two categories: - operandAOnlyOperations: Operations that only use operandA (skip operandB decompilation) - noOperandOperations: Operations that use no operands (skip both) Additionally, added version detection warnings for unexpected operands: - Warns when unused operands have non-zero type or value - Helps detect firmware/configurator version mismatches - Shows operation name, type, and value for debugging Example warning: "Unexpected operand B to Set Profile operation (type=6, value=1700). This may indicate a firmware version mismatch." Benefits: - Prevents type-specific validation errors on garbage data in unused operands - Preserves validation for operations that legitimately use PID/other operands - Provides version detection when firmware adds new operand usage
Organizes the 24 configuration tabs into 8 collapsible accordion groups for improved navigation and reduced visual clutter. Groups: - Setup & Configuration (5 tabs) - Flight Control (5 tabs) - Tuning (3 tabs) - Navigation & Mission (2 tabs) - Sensors & Peripherals (3 tabs) - Data Logging (2 tabs) - Programming (2 tabs) - Tools (2 tabs) Implementation: - Added accordion group structure to index.html - Added accordion styling to main.css (preserves INAV cyan theme) - Added expand/collapse JavaScript to configurator_main.js - Added English translation keys for navigation groups - First group (Setup & Configuration) expands by default No new dependencies required - uses existing jQuery and CSS transitions.
Branch Targeting SuggestionYou've targeted the
If This is an automated suggestion to help route contributions to the appropriate branch. |
PR Compliance Guide 🔍All compliance sections have been disabled in the configurations. |
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
|
Would there be a configuration option (gear icon) to allow them all to be expanded by default? I'd prefer that to having everything collapsed in menus. |
Adds an icon-only toggle button at the bottom of the navigation menu to expand or collapse all accordion groups. Features: - SVG icon button that swaps between expand (double chevron down) and collapse (double chevron up) states - Clicking expands all 8 navigation groups or collapses to first group only - Preference persists across configurator restarts via electron-store - When all groups expanded, headers become minimal cyan divider lines to maximize vertical space - Icon-only design saves space - all 24 tabs fit without scrolling - Smooth CSS transitions for icon swap and header state changes Implementation: - Toggle button in index.html with both expand/collapse SVG icons - JavaScript in configurator_main.js handles toggle logic and persistence - CSS in main.css for compact headers when expanded and icon styling - Translation keys in locale/en/messages.json for accessibility Addresses need for quick access to all tabs while maintaining visual organization of accordion groups.
I like that idea! Instead of hiding it away, I put it right there: 
It automatically saves your preference, so you only have to click it once. At first that gave this beautiful menu: But the section headings made it too tall and would require a scrollbar at 1080p. 
Just a subtle hint of that tuning stuff is with tuning stuff, for more quickly finding what you need. |
|
I like that. Nice work my friend 👍🏻 |
Adds WCAG-compliant accessibility features to accordion navigation: HTML changes: - Added role="button" to all group headers for screen reader compatibility - Added tabindex="0" to make headers keyboard-navigable - Added aria-expanded="false" initial state to indicate collapsed groups JavaScript changes: - Updates aria-expanded dynamically when groups expand/collapse - Added keyboard event handler for Enter and Space keys - Ensures aria-expanded is set correctly on initialization - Updates aria-expanded when using expand/collapse all button - Fixed localization attribute on JavaScript Programming tab (i18n → data-i18n) Benefits: - Screen readers announce group headers as interactive buttons - Keyboard users can Tab to headers and activate with Enter/Space - Assistive technology correctly reports expanded/collapsed state - Meets WCAG 2.1 Level AA compliance for keyboard navigation Addresses qodo-merge code review suggestions for accessibility.
2 participants
See poll at
#2531
User description
Summary
Reorganizes the 24 configuration tabs into 8 collapsible accordion groups to reduce visual clutter and improve navigation.
Groups:
Implementation
index.htmlsrc/css/main.css(preserves INAV cyan theme #37a8db)js/configurator_main.jslocale/en/messages.jsonTesting
Screenshots
User can provide screenshots of the accordion navigation in action.