Mode Tab have Modes grouped in category and selections depend on Cloud build options

[HThuren]

This PR categorize Modes in groups to be controlled by Build Options or all modes if local build (ie. Build Option are empty).
Your selection are saved between sessions.

Categorys give more easy view of functionality when configure modes, ie. select Flightmode only to check setup in one list without need to schroll.

Categorys are Cloud build (fx USE_SERVO are not defined in firmware) or local build:
(SERVO are shown as example, will be hided in final design)

Examples of selections, where also unused mode still works:

[blckmn]

AUTOMERGE: (FAIL)

• github identifies PR as mergeable -> FAIL
• assigned to a milestone -> FAIL
• cooling off period lapsed -> PASS
• commit count less or equal to three -> FAIL
• Don't merge label NOT found -> PASS
• at least one RN: label found -> PASS
• Tested label found -> FAIL
• assigned to an approver -> FAIL
• approver count at least three -> FAIL

[HThuren]

personally i don't see a need for this, but mine is just an opinion.

On the other side, it won't harm and help new users (like me :-)) to identify and understand flightmodes and give the overview for excatly them.

[HThuren]

something wrong with "hide unused modes" -- expecting it to hide everything not set. https://youtu.be/mc_8-tA_eS4

I havn't tried with everything empty, will do
See it, good catch !

[HThuren]

... took long time to catch, just to discover start at index 1 solved the issue found by @nerdCopter

[github-actions]

This pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within a week.

[HThuren]

Found any bugs here ?

[nerdCopter]

Found any bugs here ?

yes :( https://youtu.be/yybuWCdXYfc

[HThuren]

Damn :-(

[haslinghuis]

Have no idea yet. But think we should decide on how it's going to look and work as I have already suggested using groups for certain modes we intent adding after release. But that's a bit hard now if they don't exist yet 😃

[sonarcloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[atomgomba]

I think it'd be better to put them on the same row, why waste vertical space if there's a lot horizontally

[atomgomba]

Maintenance are not that bad, you update this with new defines

const categoryTable = [
    { name: 'BEEP',           buildKey: ['all'],       modes: ['BEEPERON', 'BEEPER', 'BEEPER MUTE', 'GPS BEEP SATELLITE COUNT']},
    { name: 'BLACKBOX',       buildKey: ['all'],       modes: ['BLACKBOX', 'BLACKBOX ERASE']},
    { name: 'CAM',            buildKey: ['cam'],       modes: ['CAMERA CONTROL 1', 'CAMERA CONTROL 2', 'CAMERA CONTROL 3']},
    { name: 'DSHOT / 3D',     buildKey: ['dshot'],     modes: ['3D', '3D DISABLE / SWITCH', 'FLIP OVER AFTER CRASH']},
    { name: 'FLIGHT CONTROL', buildKey: ['all'],       modes: flightControl},
    { name: 'GPS / MAG',      buildKey: ['gps_mag'],   modes: ['GPS BEEP SATELLITE COUNT', 'GPS RESCUE', 'MAG']},
    { name: 'LED',            buildKey: ['led_strip'], modes: ['LEDLOW']},
    { name: 'OSD',            buildKey: ['osd'],       modes: ['OSD DISABLE']},
    { name: 'OTHER',          buildKey: ['all'],       modes: ['CALIB', 'MSP OVERRIDE', 'LAP TIMER RESET', 'PASSTHRU', 'PARALYZE', 'PID AUDIO', 'PREARM', 'READY']},
    { name: 'SERVO',          buildKey: ['servos'],    modes: ['SERVO1', 'SERVO2', 'SERVO3']},
    { name: 'TELEMETRY',      buildKey: ['telemetry'], modes: ['TELEMETRY']},
    { name: 'USER',           buildKey: ['all'],       modes: ['USER1', 'USER2', 'USER3', 'USER4']},
    { name: 'VTX',            buildKey: ['vtx'],       modes: ['STICK COMMANDS DISABLE', 'VTX CONTROL DISABLE', 'VTX PIT MODE']},
];

Would it be possible to generate this and then just import? Having to remember to update this manually imposes mental overhead on the long run

[HThuren]

Maintenance are not that bad, you update this with new defines

const categoryTable = [
    { name: 'BEEP',           buildKey: ['all'],       modes: ['BEEPERON', 'BEEPER', 'BEEPER MUTE', 'GPS BEEP SATELLITE COUNT']},
    { name: 'BLACKBOX',       buildKey: ['all'],       modes: ['BLACKBOX', 'BLACKBOX ERASE']},
    { name: 'CAM',            buildKey: ['cam'],       modes: ['CAMERA CONTROL 1', 'CAMERA CONTROL 2', 'CAMERA CONTROL 3']},
    { name: 'DSHOT / 3D',     buildKey: ['dshot'],     modes: ['3D', '3D DISABLE / SWITCH', 'FLIP OVER AFTER CRASH']},
    { name: 'FLIGHT CONTROL', buildKey: ['all'],       modes: flightControl},
    { name: 'GPS / MAG',      buildKey: ['gps_mag'],   modes: ['GPS BEEP SATELLITE COUNT', 'GPS RESCUE', 'MAG']},
    { name: 'LED',            buildKey: ['led_strip'], modes: ['LEDLOW']},
    { name: 'OSD',            buildKey: ['osd'],       modes: ['OSD DISABLE']},
    { name: 'OTHER',          buildKey: ['all'],       modes: ['CALIB', 'MSP OVERRIDE', 'LAP TIMER RESET', 'PASSTHRU', 'PARALYZE', 'PID AUDIO', 'PREARM', 'READY']},
    { name: 'SERVO',          buildKey: ['servos'],    modes: ['SERVO1', 'SERVO2', 'SERVO3']},
    { name: 'TELEMETRY',      buildKey: ['telemetry'], modes: ['TELEMETRY']},
    { name: 'USER',           buildKey: ['all'],       modes: ['USER1', 'USER2', 'USER3', 'USER4']},
    { name: 'VTX',            buildKey: ['vtx'],       modes: ['STICK COMMANDS DISABLE', 'VTX CONTROL DISABLE', 'VTX PIT MODE']},
];

Would it be possible to generate this and then just import? Having to remember to update this manually imposes mental overhead on the long run

That will be a great idea, really good, I will look into this, also where to find the source for the defines (believe to find in cloud build)

[HThuren]

I think it'd be better to put them on the same row, why waste vertical space if there's a lot horizontally

A former version had a title, but a good suggestion was to it out.
I give it a try. :-)