From 823a734224fcfd8f99ac160e3b2534eb2543b839 Mon Sep 17 00:00:00 2001
From: Eric <erics1337@gmail.com>
Date: Mon, 10 Nov 2025 11:13:12 -0700
Subject: [PATCH] refactor: migrate tab visibility logic from jQuery to Vue

- Moved expert mode state to reactive Vue model for declarative UI updates
- Replaced imperative jQuery .toggle() calls with Vue v-show directives in template
- Simplified updateTabList to only sync checkbox state with Vue model
---
 src/components/init.js        |  2 ++
 src/index.html                | 25 ++++++++++---------------
 src/js/utils/updateTabList.js | 27 +++++++++++----------------
 3 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/src/components/init.js b/src/components/init.js
index d751f8a0c9..d4bcf2d236 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -38,6 +38,8 @@ const betaflightModel = reactive({
     PortUsage,
     PortHandler,
     CONNECTION,
+    // Reactive expert mode flag to drive tab visibility via Vue
+    expertMode: false,
 });
 
 tippy.setDefaultProps({
diff --git a/src/index.html b/src/index.html
index f68454799c..27bc3020ed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -88,7 +88,7 @@
                 </ul>
                 <div id="expertMode">
                     <label>
-                        <input name="expertModeCheckbox" class="togglesmall" type="checkbox"/>
+                        <input name="expertModeCheckbox" class="togglesmall" type="checkbox" v-model="expertMode"/>
                         <span i18n="expertMode" class="expertModeText"></span>
                     </label>
                 </div>
@@ -137,27 +137,22 @@
                     <li class="tab_ports"><a href="#" i18n="tabPorts" class="tabicon ic_ports" i18n_title="tabPorts"></a></li>
                     <li class="tab_configuration"><a href="#" i18n="tabConfiguration" class="tabicon ic_config" i18n_title="tabConfiguration"></a></li>
                     <li class="tab_power"><a href="#" i18n="tabPower" class="tabicon ic_power" i18n_title="tabPower"></a></li>
-                    <li class="tab_failsafe"><a href="#" i18n="tabFailsafe" class="tabicon ic_failsafe" i18n_title="tabFailsafe"></a></li>
+                    <li class="tab_failsafe" v-show="expertMode"><a href="#" i18n="tabFailsafe" class="tabicon ic_failsafe" i18n_title="tabFailsafe"></a></li>
                     <li class="tab_presets"><a href="#" i18n="tabPresets" class="tabicon ic_wizzard" i18n_title="tabPresets"></a></li>
                     <li class="tab_pid_tuning"><a href="#" i18n="tabPidTuning" class="tabicon ic_pid" i18n_title="tabPidTuning"></a></li>
                     <li class="tab_receiver"><a href="#" i18n="tabReceiver" class="tabicon ic_rx" i18n_title="tabReceiver"></a></li>
                     <li class="tab_auxiliary"><a href="#" i18n="tabAuxiliary" class="tabicon ic_modes" i18n_title="tabAuxiliary"></a></li>
-                    <li class="tab_adjustments"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust" i18n_title="tabAdjustments"></a></li>
-                    <li class="tab_servos"><a href="#" i18n="tabServos" class="tabicon ic_servo" i18n_title="tabServos"></a></li>
-                    <li class="tab_gps"><a href="#" i18n="tabGPS" class="tabicon ic_gps" i18n_title="tabGPS"></a></li>
+                    <li class="tab_adjustments" v-show="expertMode"><a href="#" i18n="tabAdjustments" class="tabicon ic_adjust" i18n_title="tabAdjustments"></a></li>
+                    <li class="tab_servos" v-show="['USE_SERVOS','USE_WING'].some(opt => FC.CONFIG?.buildOptions?.includes(opt))"><a href="#" i18n="tabServos" class="tabicon ic_servo" i18n_title="tabServos"></a></li>
+                    <li class="tab_gps" v-show="FC.CONFIG?.buildOptions?.includes('USE_GPS')"><a href="#" i18n="tabGPS" class="tabicon ic_gps" i18n_title="tabGPS"></a></li>
                     <li class="tab_motors"><a href="#" i18n="tabMotorTesting" class="tabicon ic_motor" i18n_title="tabMotorTesting"></a></li>
-                    <li class="tab_osd"><a href="#" i18n="tabOsd" class="tabicon ic_osd" i18n_title="tabOsd"></a></li>
+                    <li class="tab_osd" v-show="FC.FEATURE_CONFIG?.features?.isEnabled && FC.FEATURE_CONFIG.features.isEnabled('OSD')"><a href="#" i18n="tabOsd" class="tabicon ic_osd" i18n_title="tabOsd"></a></li>
                     <li class="tab_vtx"><a href="#" i18n="tabVtx" class="tabicon ic_vtx" i18n_title="tabVtx"></a></li>
-                    <li class="tab_transponder"><a href="#" i18n="tabTransponder" class="tabicon ic_transponder" i18n_title="tabTransponder"></a></li>
-                    <li class="tab_led_strip"><a href="#" i18n="tabLedStrip" class="tabicon ic_led" i18n_title="tabLedStrip"></a></li>
-                    <li class="tab_sensors"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors" i18n_title="tabRawSensorData"></a></li>
-                    <li class="tab_logging"><a href="#" i18n="tabLogging" class="tabicon ic_log" i18n_title="tabLogging"></a></li>
+                    <li class="tab_transponder" v-show="FC.FEATURE_CONFIG?.features?.isEnabled && FC.FEATURE_CONFIG.features.isEnabled('TRANSPONDER')"><a href="#" i18n="tabTransponder" class="tabicon ic_transponder" i18n_title="tabTransponder"></a></li>
+                    <li class="tab_led_strip" v-show="FC.FEATURE_CONFIG?.features?.isEnabled && FC.FEATURE_CONFIG.features.isEnabled('LED_STRIP')"><a href="#" i18n="tabLedStrip" class="tabicon ic_led" i18n_title="tabLedStrip"></a></li>
+                    <li class="tab_sensors" v-show="expertMode"><a href="#" i18n="tabRawSensorData" class="tabicon ic_sensors" i18n_title="tabRawSensorData"></a></li>
+                    <li class="tab_logging" v-show="expertMode"><a href="#" i18n="tabLogging" class="tabicon ic_log" i18n_title="tabLogging"></a></li>
                     <li class="tab_onboard_logging"><a href="#" i18n="tabOnboardLogging" class="tabicon ic_data" i18n_title="tabOnboardLogging"></a></li>
-                    <!-- spare icons
-                    <li class=""><a href="#"class="tabicon ic_mission">Mission (spare icon)</a></li>
-                    <li class=""><a href="#"class="tabicon ic_advanced">Advanced (spare icon)</a></li>
-                    <li class=""><a href="#"class="tabicon ic_wizzard">Wizzard (spare icon)</a></li>
-                    -->
                 </ul>
                 <ul class="mode-connected mode-connected-cli">
                     <li class="tab_cli"><a href="#" i18n="tabCLI" class="tabicon ic_cli" i18n_title="tabCLI"></a></li>
diff --git a/src/js/utils/updateTabList.js b/src/js/utils/updateTabList.js
index 20efa18fb9..2337ac08cd 100644
--- a/src/js/utils/updateTabList.js
+++ b/src/js/utils/updateTabList.js
@@ -1,19 +1,14 @@
 import $ from "jquery";
-import FC from "../fc";
 
-export function updateTabList(features) {
-    const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(":checked");
-
-    $("#tabs ul.mode-connected li.tab_failsafe").toggle(isExpertModeEnabled);
-    $("#tabs ul.mode-connected li.tab_adjustments").toggle(isExpertModeEnabled);
-    $("#tabs ul.mode-connected li.tab_sensors").toggle(isExpertModeEnabled);
-    $("#tabs ul.mode-connected li.tab_logging").toggle(isExpertModeEnabled);
-    $("#tabs ul.mode-connected li.tab_servos").toggle(
-        ["USE_SERVOS", "USE_WING"].some((option) => FC.CONFIG?.buildOptions?.includes(option)),
-    );
-
-    $("#tabs ul.mode-connected li.tab_gps").toggle(FC.CONFIG?.buildOptions?.includes("USE_GPS"));
-    $("#tabs ul.mode-connected li.tab_led_strip").toggle(features.isEnabled("LED_STRIP"));
-    $("#tabs ul.mode-connected li.tab_transponder").toggle(features.isEnabled("TRANSPONDER"));
-    $("#tabs ul.mode-connected li.tab_osd").toggle(features.isEnabled("OSD"));
+// Delegate tab visibility to Vue via template v-show bindings. This function now
+// only syncs the expert mode checkbox state to the global Vue model if present.
+export function updateTabList(_features) {
+    try {
+        const isExpertModeEnabled = $('input[name="expertModeCheckbox"]').is(":checked");
+        if (window.vm && typeof window.vm.expertMode !== "undefined") {
+            window.vm.expertMode = isExpertModeEnabled;
+        }
+    } catch {
+        // noop: if Vue model not available, do nothing
+    }
 }