feat: convert configuration tab to vue and fix connection issues

- Convert Configuration tab to Vue component
- Fix 'Save and Reboot' modal race condition and connection handling
- Fix localization key mismatches and restore legacy keys
- Code cleanup and import fixes

Author: Erics1337

src/components/tabs/ConfigurationTab.vue

@@ -13,7 +13,7 @@ import CliAutoComplete from "./CliAutoComplete.js";
 import DarkTheme, { setDarkTheme } from "./DarkTheme.js";
 import { isExpertModeEnabled } from "./utils/isExpertModeEnabled.js";
 import { updateTabList } from "./utils/updateTabList.js";
-import { mountVueTab } from "./vue_tab_mounter.js";
+import { mountVueTab, unmountVueTab } from "./vue_tab_mounter.js";
 import * as THREE from "three";
 import NotificationManager from "./utils/notifications.js";
 
@@ -27,12 +27,6 @@ import("./msp/debug/msp_debug_tools.js")
         console.warn("Failed to load MSP debug tools:", err);
     });
 
-if (typeof String.prototype.replaceAll === "undefined") {
-    String.prototype.replaceAll = function (match, replace) {
-        return this.replace(new RegExp(match, "g"), () => replace);
-    };
-}
-
 $(document).ready(function () {
     appReady();
 });
@@ -216,6 +210,7 @@ function startProcess() {
 
                 // detach listeners and remove element data
                 const content = $("#content");
+                unmountVueTab();
                 content.empty();
 
                 // display loading screen
@@ -291,9 +286,7 @@ function startProcess() {
                         import("./tabs/setup_osd").then(({ setup_osd }) => setup_osd.initialize(content_ready));
                         break;
                     case "configuration":
-                        import("./tabs/configuration").then(({ configuration }) =>
-                            configuration.initialize(content_ready),
-                        );
+                        mountVueTab("configuration", content_ready);
                         break;
                     case "pid_tuning":
                         import("./tabs/pid_tuning").then(({ pid_tuning }) => pid_tuning.initialize(content_ready));

src/js/main.js

@@ -14,9 +14,8 @@ import huffmanDecodeBuf from "../huffman";
 import { defaultHuffmanTree, defaultHuffmanLenIndex } from "../default_huffman_tree";
 import { updateTabList } from "../utils/updateTabList";
 import { showErrorDialog } from "../utils/showErrorDialog";
-import GUI, { TABS } from "../gui";
+import GUI from "../gui";
 import { OSD } from "../tabs/osd";
-import { reinitializeConnection } from "../serial_backend";
 
 // Used for LED_STRIP
 const ledDirectionLetters = ["n", "e", "s", "w", "u", "d"]; // in LSB bit order
@@ -2944,7 +2943,7 @@ MspHelper.prototype.writeConfiguration = function (reboot, callback) {
             console.log("Configuration saved to EEPROM");
             if (reboot) {
                 GUI.tab_switch_cleanup(function () {
-                    return reinitializeConnection();
+                    return GUI.reinitializeConnection();
                 });
             }
             if (callback) {

src/js/msp/MSPHelper.js

@@ -61,13 +61,13 @@ export function initializeSerialBackend() {
 
     EventBus.$on("port-handler:auto-select-serial-device", function () {
         if (
-            !GUI.connected_to &&
-            !GUI.connecting_to &&
-            !["cli", "firmware_flasher"].includes(GUI.active_tab) &&
-            PortHandler.portPicker.autoConnect &&
-            !isCliOnlyMode() &&
-            (connectionTimestamp === null || connectionTimestamp > 0) ||
-            (Date.now() - rebootTimestamp <= REBOOT_CONNECT_MAX_TIME_MS)
+            (!GUI.connected_to &&
+                !GUI.connecting_to &&
+                !["cli", "firmware_flasher"].includes(GUI.active_tab) &&
+                PortHandler.portPicker.autoConnect &&
+                !isCliOnlyMode() &&
+                (connectionTimestamp === null || connectionTimestamp > 0)) ||
+            Date.now() - rebootTimestamp <= REBOOT_CONNECT_MAX_TIME_MS
         ) {
             connectDisconnect();
         }
@@ -128,12 +128,6 @@ function connectDisconnect() {
                 return;
             }
 
-            // When rebooting, adhere to the auto-connect setting
-            if (!PortHandler.portPicker.autoConnect && Date.now() - rebootTimestamp < REBOOT_GRACE_PERIOD_MS) {
-                console.log(`${logHead} Rebooting, not connecting`);
-                return;
-            }
-
             const portName = selectedPort === "manual" ? PortHandler.portPicker.portOverride : selectedPort;
 
             console.log(`${logHead} Connecting to: ${portName}`);
@@ -608,6 +602,7 @@ function finishOpen() {
     onConnect();
 
     GUI.selectDefaultTabWhenConnected();
+    rebootTimestamp = 0;
 }
 
 function connectCli() {
@@ -808,6 +803,9 @@ export function reinitializeConnection() {
     // Send reboot command to the flight controller
     MSP.send_message(MSPCodes.MSP_SET_REBOOT, false, false);
 
+    // Force connection invalid to ensure reboot dialog waits for reconnection
+    CONFIGURATOR.connectionValid = false;
+
     if (currentPort.startsWith("bluetooth")) {
         if (!PortHandler.portPicker.autoConnect) {
             return setTimeout(function () {
@@ -816,14 +814,6 @@ export function reinitializeConnection() {
         }
     }
 
-    // Show reboot progress modal except for cli and presets tab
-    if (["cli", "presets"].includes(GUI.active_tab)) {
-        console.log(`${logHead} Rebooting in ${GUI.active_tab} tab, skipping reboot dialog`);
-        gui_log(i18n.getMessage("deviceRebooting"));
-        gui_log(i18n.getMessage("deviceReady"));
-
-        return;
-    }
     // Show reboot progress modal
     showRebootDialog();
 }
@@ -926,3 +916,5 @@ function showRebootDialog() {
         return dialog;
     }
 }
+
+GUI.reinitializeConnection = reinitializeConnection;

src/js/serial_backend.js

@@ -7,12 +7,14 @@ import PortPicker from "../components/port-picker/PortPicker.vue";
 import HelpTab from "../components/tabs/HelpTab.vue";
 import LandingTab from "../components/tabs/LandingTab.vue";
 import OptionsTab from "../components/tabs/OptionsTab.vue";
+import ConfigurationTab from "../components/tabs/ConfigurationTab.vue";
 
 // Registry of Vue tab components - used by main.js for dynamic mounting
 export const VueTabComponents = {
     help: HelpTab,
     landing: LandingTab,
     options: OptionsTab,
+    configuration: ConfigurationTab,
 };
 
 // Create a Vue plugin that registers all components globally
@@ -28,5 +30,6 @@ export const BetaflightComponents = {
         app.component("HelpTab", HelpTab);
         app.component("LandingTab", LandingTab);
         app.component("OptionsTab", OptionsTab);
+        app.component("ConfigurationTab", ConfigurationTab);
     },
 };

src/js/vue_components.js

@@ -63,6 +63,9 @@ export function mountVueTab(tabName, contentReadyCallback) {
         currentTabApp.provide("betaflightModel", window.vm);
     }
 
+    // Set active tab for legacy compatibility
+    GUI.active_tab = tabName;
+
     // Mount to content
     currentTabApp.mount(contentEl);