Skip to content

Feature: Accordion navigation for tab organization #2530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sensei-hacker wants to merge 4 commits into
base: maintenance-9.x
Choose a base branch
from
Open

Feature: Accordion navigation for tab organization #2530

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c75975a
Fix JS Programming decompiler incorrect operand validation warnings
sensei-hacker Jan 21, 2026
1129e30
Feature: Add accordion navigation for improved tab organization
sensei-hacker Jan 21, 2026
e2ff657
Add expand/collapse all toggle for accordion navigation
sensei-hacker Jan 21, 2026
f4667c8
Improve accordion navigation accessibility
sensei-hacker Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 145 additions & 69 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,83 +244,159 @@ <h2 class="groundstation-telemetry__header" data-i18n="gsTelemetry"></h2>
</li>
</ul>
<ul class="mode-connected">
<li class="tab_setup">
<a href="#" data-i18n="tabSetup" class="tabicon ic_setup" data-i18n_title="tabSetup"></a>
</li>
<li class="tab_calibration">
<a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a>
</li>
<li class="tab_mixer">
<a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a>
</li>
<li class="tab_outputs">
<a href="#" data-i18n="tabOutputs" class="tabicon ic_motor" title="Outputs"></a>
</li>
<li class="tab_ports">
<a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a>
</li>
<li class="tab_configuration">
<a href="#" data-i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a>
</li>
<li class="tab_failsafe">
<a href="#" data-i18n="tabFailsafe" class="tabicon ic_failsafe" title="Failsafe"></a>
</li>
<li class="tab_pid_tuning">
<a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" data-i18n_title="tabPidTuning"></a>
</li>
<li class="tab_advanced_tuning">
<a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
title="Advanced Tuning"></a>
</li>
<li class="tab_programming">
<a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
</li>
<li class="tab_javascript_programming">
<a href="#" i18n="tabJavaScriptProgramming" class="tabicon ic_javascript_programming" title="Javascript Programming">></a>
</li>
<li class="tab_receiver">
<a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
</li>
<li class="tab_auxiliary">
<a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a>
</li>
<li class="tab_adjustments">
<a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a>
</li>
<li class="tab_gps">
<a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a>
</li>
<li class="tab_magnetometer">
<a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
</li>
<li class="tab_mission_control">
<a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
title="Mission Control"></a>
</li>
<li class="tab_osd">
<a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
</li>
<li class="tab_led_strip">
<a href="#" data-i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a>
<!-- Setup & Configuration -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupSetup">Setup & Configuration</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_setup">
<a href="#" data-i18n="tabSetup" class="tabicon ic_setup" data-i18n_title="tabSetup"></a>
</li>
<li class="tab_calibration">
<a href="#" data-i18n="tabCalibration" class="tabicon ic_calibration" title="Calibration"></a>
</li>
<li class="tab_magnetometer">
<a href="#" data-i18n="tabMAGNETOMETER" class="tabicon ic_mag" title="MAGNETOMETER"></a>
</li>
<li class="tab_configuration">
<a href="#" data-i18n="tabConfiguration" class="tabicon ic_config" title="Configuration"></a>
</li>
<li class="tab_ports">
<a href="#" data-i18n="tabPorts" class="tabicon ic_ports" title="Ports"></a>
</li>
</ul>
</li>
<li class="tab_sensors">
<a href="#" data-i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a>

<!-- Flight Control -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupFlight">Flight Control</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_mixer">
<a href="#" data-i18n="tabMixer" class="tabicon ic_mixer" title="Mixer"></a>
</li>
<li class="tab_outputs">
<a href="#" data-i18n="tabOutputs" class="tabicon ic_motor" title="Outputs"></a>
</li>
<li class="tab_receiver">
<a href="#" data-i18n="tabReceiver" class="tabicon ic_rx" title="Receiver"></a>
</li>
<li class="tab_auxiliary">
<a href="#" data-i18n="tabAuxiliary" class="tabicon ic_modes" title="Modes"></a>
</li>
<li class="tab_failsafe">
<a href="#" data-i18n="tabFailsafe" class="tabicon ic_failsafe" title="Failsafe"></a>
</li>
</ul>
</li>
<li class="tab_logging">
<a href="#" data-i18n="tabLogging" class="tabicon ic_log" title="Tethered Logging"></a>

<!-- Tuning -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupTuning">Tuning</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_pid_tuning">
<a href="#" data-i18n="tabPidTuning" class="tabicon ic_pid" data-i18n_title="tabPidTuning"></a>
</li>
<li class="tab_advanced_tuning">
<a href="#" data-i18n="tabAdvancedTuning" class="tabicon ic_advanced"
title="Advanced Tuning"></a>
</li>
<li class="tab_adjustments">
<a href="#" data-i18n="tabAdjustments" class="tabicon ic_adjust" title="Adjustments"></a>
</li>
</ul>
</li>
<li class="tab_onboard_logging">
<a href="#" data-i18n="tabOnboardLogging" class="tabicon ic_data" title="Onboard Logging"></a>

<!-- Navigation & Mission -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupNavigation">Navigation & Mission</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_gps">
<a href="#" data-i18n="tabGPS" class="tabicon ic_gps" title="GPS"></a>
</li>
<li class="tab_mission_control">
<a href="#" data-i18n="tabMissionControl" class="tabicon ic_mission"
title="Mission Control"></a>
</li>
</ul>
</li>
<li class="tab_cli">
<a href="#" data-i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a>

<!-- Sensors & Peripherals -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupSensors">Sensors & Peripherals</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_sensors">
<a href="#" data-i18n="tabRawSensorData" class="tabicon ic_sensors" title="Sensors"></a>
</li>
<li class="tab_osd">
<a href="#" data-i18n="tabOSD" class="tabicon ic_osd" title="OSD"></a>
</li>
<li class="tab_led_strip">
<a href="#" data-i18n="tabLedStrip" class="tabicon ic_led" title="LED Strip"></a>
</li>
</ul>
</li>
<li class="tab_search">
<a href="#" data-i18n="search" class="tabicon ic_search" title="Search"></a>

<!-- Data Logging -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupLogging">Data Logging</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_onboard_logging">
<a href="#" data-i18n="tabOnboardLogging" class="tabicon ic_data" title="Onboard Logging"></a>
</li>
<li class="tab_logging">
<a href="#" data-i18n="tabLogging" class="tabicon ic_log" title="Tethered Logging"></a>
</li>
</ul>
</li>

<!-- Programming -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupProgramming">Programming</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_programming">
<a href="#" data-i18n="tabProgramming" class="tabicon ic_config" title="Programming"></a>
</li>
<li class="tab_javascript_programming">
<a href="#" i18n="tabJavaScriptProgramming" class="tabicon ic_javascript_programming" title="Javascript Programming">></a>
</li>
</ul>
</li>

<!-- <li class=""><a href="#" class="tabicon ic_advanced">Advanced (spare icon)</a></li> -->
<!-- Tools -->
<li class="nav-group">
<div class="group-header">
<span class="group-title" data-i18n="navGroupTools">Tools</span>
<span class="chevron">▸</span>
</div>
<ul class="group-items">
<li class="tab_cli">
<a href="#" data-i18n="tabCLI" class="tabicon ic_cli" title="CLI"></a>
</li>
<li class="tab_search">
<a href="#" data-i18n="search" class="tabicon ic_search" title="Search"></a>
</li>
</ul>
</li>
</ul>
</div>
<div class="clear-both"></div>
Expand Down
16 changes: 15 additions & 1 deletion js/configurator_main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,21 @@ $(function() {

$('#tabs ul.mode-disconnected li a:first').trigger( "click" );


// Accordion Navigation Groups
$('.group-header').on('click', function(e) {
e.stopPropagation(); // Prevent triggering tab click
const header = $(this);
const items = header.next('.group-items');

// Toggle this group
header.toggleClass('active');
items.toggleClass('expanded');
});

// Initialize: expand first group by default
$('#tabs ul.mode-connected .nav-group:first-child .group-header').addClass('active');
$('#tabs ul.mode-connected .nav-group:first-child .group-items').addClass('expanded');


// options
$('#options').on('click', function() {
Expand Down
52 changes: 49 additions & 3 deletions js/transpiler/transpiler/action_decompiler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,60 @@ class ActionDecompiler {
return this.handleOverrideThrottle(lc, allConditions);
}

// Operations that only use operandA (operandB is unused/ignored)
// These should not decompile operandB to avoid incorrect validation warnings
const operandAOnlyOperations = [
OPERATION.SET_VTX_POWER_LEVEL,
OPERATION.SET_VTX_BAND,
OPERATION.SET_VTX_CHANNEL,
OPERATION.SET_OSD_LAYOUT,
OPERATION.LOITER_OVERRIDE,
OPERATION.OVERRIDE_MIN_GROUND_SPEED,
OPERATION.SET_HEADING_TARGET,
OPERATION.SET_PROFILE,
OPERATION.SET_GIMBAL_SENSITIVITY
];

// Operations that use no operands (boolean flags only)
const noOperandOperations = [
OPERATION.OVERRIDE_ARMING_SAFETY,
OPERATION.SWAP_ROLL_YAW,
OPERATION.INVERT_ROLL,
OPERATION.INVERT_PITCH,
OPERATION.INVERT_YAW,
OPERATION.DISABLE_GPS_FIX,
OPERATION.RESET_MAG_CALIBRATION
];

// INAV operand pattern (confirmed by logic_condition.c):
// - Most overrides: operandA = value, operandB = 0
// - Most overrides: operandA = value, operandB = 0 (unused)
// - GVAR_INC/DEC: operandA = gvar index, operandB = increment/decrement
// - FLIGHT_AXIS: operandA = axis index, operandB = angle/rate
// - RC_CHANNEL: operandA = channel, operandB = value
// - PORT_SET: operandA = pin, operandB = value
const valueA = this.decompileOperand(lc.operandAType, lc.operandAValue, allConditions);
const valueB = this.decompileOperand(lc.operandBType, lc.operandBValue, allConditions);

// Warn about unexpected operands (version detection for new firmware features)
if (noOperandOperations.includes(lc.operation)) {
if (lc.operandAType !== 0 || lc.operandAValue !== 0) {
this.addWarning(`Unexpected operand A to ${getOperationName(lc.operation)} operation (type=${lc.operandAType}, value=${lc.operandAValue}). This may indicate a firmware version mismatch.`);
}
if (lc.operandBType !== 0 || lc.operandBValue !== 0) {
this.addWarning(`Unexpected operand B to ${getOperationName(lc.operation)} operation (type=${lc.operandBType}, value=${lc.operandBValue}). This may indicate a firmware version mismatch.`);
}
} else if (operandAOnlyOperations.includes(lc.operation)) {
if (lc.operandBType !== 0 || lc.operandBValue !== 0) {
this.addWarning(`Unexpected operand B to ${getOperationName(lc.operation)} operation (type=${lc.operandBType}, value=${lc.operandBValue}). This may indicate a firmware version mismatch.`);
}
}

// Only decompile operands that are actually used by the operation
// This prevents incorrect validation warnings (e.g., PID range check on unused operands)
const valueA = noOperandOperations.includes(lc.operation)
? null
: this.decompileOperand(lc.operandAType, lc.operandAValue, allConditions);
const valueB = (operandAOnlyOperations.includes(lc.operation) || noOperandOperations.includes(lc.operation))
? null
: this.decompileOperand(lc.operandBType, lc.operandBValue, allConditions);

switch (lc.operation) {
// GVAR operations: operandA = index, operandB = value
Expand Down
24 changes: 24 additions & 0 deletions locale/en/messages.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,30 @@
"tabHelp": {
"message": "Documentation & Support"
},
"navGroupSetup": {
"message": "Setup & Configuration"
},
"navGroupFlight": {
"message": "Flight Control"
},
"navGroupTuning": {
"message": "Tuning"
},
"navGroupNavigation": {
"message": "Navigation & Mission"
},
"navGroupSensors": {
"message": "Sensors & Peripherals"
},
"navGroupLogging": {
"message": "Data Logging"
},
"navGroupProgramming": {
"message": "Programming"
},
"navGroupTools": {
"message": "Tools"
},
"tabSetup": {
"message": "Status"
},
Expand Down
Loading