From c40d62642410fceb2732f221bbddcdab4eb5c50c Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Fri, 22 Nov 2024 23:13:30 +0100
Subject: [PATCH 1/2] Update Vue

---
 package.json                                  |   7 +-
 src/components/data-flash/DataFlash.vue       |  76 +++---
 src/components/eventBus.js                    |  10 +-
 src/components/init.js                        |  43 ++--
 .../port-picker/FirmwareVirtualOption.vue     |  40 ++--
 .../port-picker/PortOverrideOption.vue        |  47 ++--
 src/components/port-picker/PortPicker.vue     | 147 +++++++-----
 src/components/port-picker/PortsInput.vue     | 217 ++++++++++++++----
 src/components/quad-status/BatteryIcon.vue    |  84 +++++--
 src/components/quad-status/BatteryLegend.vue  |  30 ++-
 .../quad-status/BottomStatusIcons.vue         |  49 ++--
 src/components/sensor-status/SensorStatus.vue | 103 +++++----
 src/components/status-bar/PortUtilization.vue |  47 ++--
 src/components/status-bar/ReadingStat.vue     |  47 ++--
 src/components/status-bar/StatusBar.vue       | 140 +++++++----
 .../status-bar/StatusBarVersion.vue           |  40 ++--
 src/components/vueI18n.js                     |   9 -
 src/js/port_handler.js                        |   5 +
 vite.config.js                                |  22 +-
 yarn.lock                                     | 102 +++++---
 20 files changed, 799 insertions(+), 466 deletions(-)
 delete mode 100644 src/components/vueI18n.js

diff --git a/package.json b/package.json
index 2cb77b35ca..1cd99b4a9b 100644
--- a/package.json
+++ b/package.json
@@ -41,13 +41,13 @@
     "@capacitor/android": "^6.0.0",
     "@capacitor/core": "^6.0.0",
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "@panter/vue-i18next": "^0.15.2",
-    "@vitejs/plugin-vue2": "^2.3.1",
+    "@vitejs/plugin-vue": "^5.1.4",
     "crypto-es": "^2.1.0",
     "d3": "^7.9.0",
     "djv": "^2.1.4",
     "dompurify": "^2.5.5",
     "i18next": "^19.9.2",
+    "i18next-vue": "^5.0.0",
     "i18next-xhr-backend": "^3.2.2",
     "inflection": "^1.13.4",
     "jbox": "^1.3.3",
@@ -66,8 +66,9 @@
     "short-unique-id": "^4.4.4",
     "switchery-latest": "^0.8.2",
     "three": "~0.97.0",
+    "tiny-emitter": "^2.1.0",
     "vite-plugin-pwa": "^0.17.5",
-    "vue": "^2.7.16"
+    "vue": "^3.5.12"
   },
   "devDependencies": {
     "@babel/core": "^7.24.4",
diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index 259de55343..c6fbf3b277 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -18,43 +18,61 @@
         </div>
     </div>
 </template>
+
 <script>
-export default {
-    props: {
-        fcTotalSize: { type: Number, default: 100000 },
-        fcUsedSize: { type: Number, default: 82000 },
+import { defineComponent } from 'vue';
+export default defineComponent({
+  props: {
+    fcTotalSize: { type: Number, default: 100000 },
+    fcUsedSize: { type: Number, default: 82000 },
+  },
+  computed: {
+    supportDataflash() {
+      if (this.fcTotalSize > 0) return true;
+      else return false;
     },
     computed: {
-        supportDataflash() {
-            if (this.fcTotalSize > 0) return true;
-            else return false;
+      supportDataflash() {
+        if (this.fcTotalSize > 0) return true;
+          else return false;
         },
         freeSpace() {
-            if (!this.supportDataflash) return;
-            const bytes = this.fcTotalSize - this.fcUsedSize;
-            if (this.fcUsedSize >= this.fcTotalSize) {
-                return "0B";
-            }
-            if (bytes < 1024) {
-                return `${bytes}B`;
-            }
-            const kilobytes = bytes / 1024;
-            if (kilobytes < 1024) {
-                return `${Math.round(kilobytes)}KB`;
-            }
-            const megabytes = kilobytes / 1024;
-            if (megabytes < 1024) {
-                return `${megabytes.toFixed(1)}MB`;
-            }
-            const gigabytes = megabytes / 1024;
-            return `${gigabytes.toFixed(1)}GB`;
+          if (!this.supportDataflash) return;
+          const bytes = this.fcTotalSize - this.fcUsedSize;
+          if (this.fcUsedSize >= this.fcTotalSize) {
+              return "0B";
+          }
+          if (bytes < 1024) {
+              return `${bytes}B`;
+          }
+          const kilobytes = bytes / 1024;
+          if (kilobytes < 1024) {
+              return `${Math.round(kilobytes)}KB`;
+          }
+          const megabytes = kilobytes / 1024;
+          if (megabytes < 1024) {
+              return `${megabytes.toFixed(1)}MB`;
+          }
+          const gigabytes = megabytes / 1024;
+          return `${gigabytes.toFixed(1)}GB`;
         },
         indicatorWidth() {
-            if (!this.supportDataflash) return;
-            return `${Math.min((this.fcUsedSize / this.fcTotalSize) * 100, 100)}%`;
-        },
+          if (!this.supportDataflash) return;
+          return `${Math.min(
+            (this.fcUsedSize / this.fcTotalSize) * 100,
+            100,
+          )}%`;
+      },
+    },
+    indicatorWidth() {
+      if (!this.supportDataflash) return;
+      return `${Math.min(
+        (this.fcUsedSize / this.fcTotalSize) * 100,
+        100,
+      )}%`;
     },
-};
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/eventBus.js b/src/components/eventBus.js
index 4b7292718a..4c6c5e568d 100644
--- a/src/components/eventBus.js
+++ b/src/components/eventBus.js
@@ -1,2 +1,8 @@
-import Vue from "vue";
-export const EventBus = new Vue();
+import emitter from 'tiny-emitter/instance';
+
+export const EventBus = {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args),
+};
diff --git a/src/components/init.js b/src/components/init.js
index 6df009f150..69ec962c2c 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -2,11 +2,11 @@
 // `i18n` helper to window and setting up `i18next`
 // in the future it should be pure. This means it should
 // explicitly export things used by other parts of the app.
-import "../js/localization.js";
-import "../js/injected_methods";
-import i18next from "i18next";
-import Vue from "vue";
-import vueI18n from "./vueI18n.js";
+import '../js/localization.js';
+import '../js/injected_methods';
+import i18next from 'i18next';
+import { createApp } from "vue";
+import I18NextVue from "i18next-vue";
 import BatteryLegend from "./quad-status/BatteryLegend.vue";
 import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
 import StatusBar from "./status-bar/StatusBar.vue";
@@ -30,26 +30,27 @@ const betaflightModel = {
     PortHandler,
 };
 
-i18next.on("initialized", function () {
+i18next.on('initialized', function() {
     console.log("i18n initialized, starting Vue framework");
 
-    if (process.env.NODE_ENV === "development") {
+    const app = createApp({
+        data() { return betaflightModel; },
+    });
+
+    app
+    .use(I18NextVue, { i18next })
+    .component('BetaflightLogo', BetaflightLogo)
+    .component('BatteryLegend', BatteryLegend)
+    .component('StatusBar', StatusBar)
+    .component('BatteryIcon', BatteryIcon)
+    .component('PortPicker', PortPicker)
+    .mount('#main-wrapper');
+
+    if (process.env.NODE_ENV === 'development') {
         console.log("Development mode enabled, installing Vue tools");
-        Vue.config.devtools = true;
+        // Vue.config.devtools = true;
+        app.config.performance = true;
     }
-
-    const app = new Vue({
-        i18n: vueI18n,
-        el: "#main-wrapper",
-        components: {
-            BatteryLegend,
-            BetaflightLogo,
-            StatusBar,
-            BatteryIcon,
-            PortPicker,
-        },
-        data: betaflightModel,
-    });
 });
 
 // Not strictly necessary here, but if needed
diff --git a/src/components/port-picker/FirmwareVirtualOption.vue b/src/components/port-picker/FirmwareVirtualOption.vue
index bd2d45a497..f8aacb3226 100644
--- a/src/components/port-picker/FirmwareVirtualOption.vue
+++ b/src/components/port-picker/FirmwareVirtualOption.vue
@@ -11,24 +11,26 @@
 </template>
 
 <script>
-export default {
-    props: {
-        isVirtual: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            firmwareVersions: [
-                { value: "1.46.0", label: "MSP: 1.46 | Firmware: 4.5.*" },
-                { value: "1.45.0", label: "MSP: 1.45 | Firmware: 4.4.*" },
-                { value: "1.44.0", label: "MSP: 1.44 | Firmware: 4.3.*" },
-                { value: "1.43.0", label: "MSP: 1.43 | Firmware: 4.2.*" },
-                { value: "1.42.0", label: "MSP: 1.42 | Firmware: 4.1.*" },
-                { value: "1.41.0", label: "MSP: 1.41 | Firmware: 4.0.*" },
-            ],
-        };
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    isVirtual: {
+      type: Boolean,
+      default: true,
     },
-};
+  },
+  data() {
+    return {
+      firmwareVersions: [
+        { value: '1.46.0', label: 'MSP: 1.46 | Firmware: 4.5.*' },
+        { value: '1.45.0', label: 'MSP: 1.45 | Firmware: 4.4.*' },
+        { value: '1.44.0', label: 'MSP: 1.44 | Firmware: 4.3.*' },
+        { value: '1.43.0', label: 'MSP: 1.43 | Firmware: 4.2.*' },
+        { value: '1.42.0', label: 'MSP: 1.42 | Firmware: 4.1.*' },
+        { value: '1.41.0', label: 'MSP: 1.41 | Firmware: 4.0.*' },
+      ],
+    };
+  },
+});
 </script>
diff --git a/src/components/port-picker/PortOverrideOption.vue b/src/components/port-picker/PortOverrideOption.vue
index f17b5ee776..ce7974deee 100644
--- a/src/components/port-picker/PortOverrideOption.vue
+++ b/src/components/port-picker/PortOverrideOption.vue
@@ -1,24 +1,30 @@
 <template>
-    <div v-if="isManual" id="port-override-option">
-        <label for="port-override"
-            ><span>{{ $t("portOverrideText") }}</span>
-            <input id="port-override" type="text" :value="value" @change="inputValueChanged($event)"
-        /></label>
-    </div>
+  <div
+    v-if="isManual"
+    id="port-override-option"
+  >
+    <label
+      for="port-override"
+    ><span>{{ $t("portOverrideText") }}</span>
+      <input
+        id="port-override"
+        type="text"
+        :value="value"
+        @change="inputValueChanged($event)"
+      >
+    </label>
+  </div>
 </template>
 
 <script>
 import { set as setConfig } from "../../js/ConfigStorage";
-export default {
-    props: {
-        value: {
-            type: String,
-            default: "/dev/rfcomm0",
-        },
-        isManual: {
-            type: Boolean,
-            default: true,
-        },
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: '/dev/rfcomm0',
     },
     methods: {
         inputValueChanged(event) {
@@ -26,7 +32,14 @@ export default {
             this.$emit("input", event.target.value);
         },
     },
-};
+  },
+  methods: {
+    inputValueChanged(event) {
+      setConfig({'portOverride': event.target.value});
+      this.$emit('input', event.target.value);
+    },
+  },
+});
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index df19ba7b0b..30fc08a053 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
     <div class="web-port-picker">
         <PortOverrideOption
             v-if="value.selectedPort === 'manual'"
@@ -21,71 +22,103 @@
             @input="updateValue(null, $event)"
         />
     </div>
+=======
+  <div class="web-port-picker">
+    <PortOverrideOption
+      v-if="modelValue.selectedPort === 'manual'"
+      :model-value="modelValue.portOverride"
+      @update:modelValue="updateValue('portOverride', $event)"
+    />
+    <FirmwareVirtualOption
+      v-if="modelValue.selectedPort === 'virtual' && !isConnected"
+      :model-value="modelValue.virtualMspVersion"
+      @update:modelValue="updateValue('virtualMspVersion', $event)"
+    />
+    <PortsInput
+      :model-value="modelValue.selectedPort"
+      :connected-bluetooth-devices="connectedBluetoothDevices"
+      :connected-serial-devices="connectedSerialDevices"
+      :connected-usb-devices="connectedUsbDevices"
+      :disabled="disabled"
+      :show-virtual-option="showVirtualOption"
+      :show-manual-option="showManualOption"
+      @update:modelValue="updateValue(null, $event)"
+    />
+  </div>
+>>>>>>> c85044e6 (Update Vue)
 </template>
 
 <script>
-import PortOverrideOption from "./PortOverrideOption.vue";
-import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
-import PortsInput from "./PortsInput.vue";
-import CONFIGURATOR from "../../js/data_storage";
+import { defineComponent } from 'vue';
+import PortOverrideOption from './PortOverrideOption.vue';
+import FirmwareVirtualOption from './FirmwareVirtualOption.vue';
+import PortsInput from './PortsInput.vue';
+import CONFIGURATOR from '../../js/data_storage';
 
-export default {
-    components: {
-        PortOverrideOption,
-        FirmwareVirtualOption,
-        PortsInput,
+export default defineComponent({
+  components: {
+    PortOverrideOption,
+    FirmwareVirtualOption,
+    PortsInput,
+  },
+
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({
+        selectedPort: 'noselection',
+        selectedBaud: 115200,
+        portOverride: '/dev/rfcomm0',
+        virtualMspVersion: '1.46.0',
+        autoConnect: true,
+      }),
+    },
+    connectedBluetoothDevices: {
+      type: Array,
+      default: () => [],
+    },
+    connectedSerialDevices: {
+      type: Array,
+      default: () => [],
+    },
+    connectedUsbDevices: {
+      type: Array,
+      default: () => [],
+    },
+    showVirtualOption: {
+      type: Boolean,
+      default: true,
     },
-    props: {
-        value: {
-            type: Object,
-            default: () => ({
-                selectedPort: "noselection",
-                selectedBaud: 115200,
-                portOverride: "/dev/rfcomm0",
-                virtualMspVersion: "1.46.0",
-                autoConnect: true,
-            }),
-        },
-        connectedBluetoothDevices: {
-            type: Array,
-            default: () => [],
-        },
-        connectedSerialDevices: {
-            type: Array,
-            default: () => [],
-        },
-        connectedUsbDevices: {
-            type: Array,
-            default: () => [],
-        },
-        showVirtualOption: {
-            type: Boolean,
-            default: true,
-        },
-        showManualOption: {
-            type: Boolean,
-            default: true,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
+    showManualOption: {
+      type: Boolean,
+      default: true,
     },
-    computed: {
-        isConnected() {
-            return CONFIGURATOR.connectionValid;
-        },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    methods: {
-        updateValue(key, value) {
-            if (key != null) {
-                this.$emit("input", { ...this.value, [key]: value });
-            } else {
-                this.$emit("input", { ...this.value, ...value });
-            }
-        },
+  },
+
+  emits: [
+    'update:modelValue',
+  ],
+
+  computed: {
+    isConnected() {
+      return CONFIGURATOR.connectionValid;
+    },
+  },
+
+  methods: {
+    updateValue(key, value) {
+      if (key != null) {
+        this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
+      } else {
+        this.$emit('update:modelValue', { ...this.modelValue, ...value});
+      }
     },
-};
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index ffccc8d553..9899a75456 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -1,14 +1,95 @@
 <template>
-    <div id="portsinput">
+  <div id="portsinput">
+    <div class="dropdown dropdown-dark">
+      <select
+        id="port"
+        :key="modelValue.selectedPort"
+        :model-value="modelValue.selectedPort"
+        :title="$t('firmwareFlasherManualPort')"
+        :disabled="disabled"
+        class="dropdown-select"
+        @change="onChangePort"
+      >
+        <option
+          value="noselection"
+          disabled
+        >
+          {{ $t("portsSelectNoSelection") }}
+        </option>
+        <option
+          v-show="showManualOption"
+          value="manual"
+        >
+          {{ $t("portsSelectManual") }}
+        </option>
+        <option
+          v-show="showVirtualOption"
+          value="virtual"
+        >
+          {{ $t("portsSelectVirtual") }}
+        </option>
+        <option
+          v-for="connectedBluetoothDevice in connectedBluetoothDevices"
+          :key="connectedBluetoothDevice.path"
+          :value="connectedBluetoothDevice.path"
+        >
+          {{ connectedBluetoothDevice.displayName }}
+        </option>
+        <option
+          v-for="connectedSerialDevice in connectedSerialDevices"
+          :key="connectedSerialDevice.path"
+          :value="connectedSerialDevice.path"
+        >
+          {{ connectedSerialDevice.displayName }}
+        </option>
+        <option
+          v-for="connectedUsbDevice in connectedUsbDevices"
+          :key="connectedUsbDevice.path"
+          :value="connectedUsbDevice.path"
+        >
+          {{ connectedUsbDevice.displayName }}
+        </option>
+        <option value="requestpermission">
+          {{ $t("portsSelectPermission") }}
+        </option>
+        <option value="requestpermissionbluetooth">
+          {{ $t("portsSelectPermissionBluetooth") }}
+        </option>
+      </select>
+    </div>
+    <div id="auto-connect-and-baud">
+      <div
+        id="auto-connect-switch"
+        :title="modelValue.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
+      >
+        <input
+          id="auto-connect"
+          class="auto_connect togglesmall"
+          type="checkbox"
+          :checked="modelValue.autoConnect"
+          @change="onChangeAutoConnect"
+        >
+        <span class="auto_connect">
+          {{ $t("autoConnect") }}
+        </span>
+      </div>
+      <div
+        v-if="modelValue.selectedPort !== 'virtual' && modelValue.selectedPort !== 'noselection'"
+        id="baudselect"
+      >
         <div class="dropdown dropdown-dark">
-            <select
-                id="port"
-                :key="value.selectedPort"
-                :value="value.selectedPort"
-                class="dropdown-select"
-                :title="$t('firmwareFlasherManualPort')"
-                :disabled="disabled"
-                @change="onChangePort"
+          <select
+            id="baud"
+            class="dropdown-select"
+            :model-value="modelValue.selectedBauds"
+            :title="$t('firmwareFlasherBaudRate')"
+            :disabled="disabled"
+            @update:modelValue="updateValue('selectedBauds', $event.target.value)"
+          >
+            <option
+              v-for="baudRate in baudRates"
+              :key="baudRate.value"
+              :value="baudRate.value"
             >
                 <option value="noselection" disabled>
                     {{ $t("portsSelectNoSelection") }}
@@ -82,46 +163,23 @@
             </div>
         </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { set as setConfig } from "../../js/ConfigStorage";
-import { EventBus } from "../eventBus";
+import { defineComponent } from 'vue';
+import { set as setConfig } from '../../js/ConfigStorage';
+import { EventBus } from '../eventBus';
 
-export default {
-    props: {
-        value: {
-            type: Object,
-            default: () => ({
-                selectedPort: "noselection",
-                selectedBauds: 115200,
-                autoConnect: true,
-            }),
-        },
-        connectedSerialDevices: {
-            type: Array,
-            default: () => [],
-        },
-        connectedUsbDevices: {
-            type: Array,
-            default: () => [],
-        },
-        connectedBluetoothDevices: {
-            type: Array,
-            default: () => [],
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-        showVirtualOption: {
-            type: Boolean,
-            default: true,
-        },
-        showManualOption: {
-            type: Boolean,
-            default: true,
-        },
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({
+        selectedPort: 'noselection',
+        selectedBauds: 115200,
+        autoConnect: true,
+      }),
     },
     data() {
         return {
@@ -163,5 +221,72 @@ export default {
             return event;
         },
     },
-};
+    connectedBluetoothDevices: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    showVirtualOption: {
+      type: Boolean,
+      default: true,
+    },
+    showManualOption: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  emits: [
+    'update:modelValue',
+    'ports-input:request-permission',
+    'ports-input:request-permission-bluetooth',
+    'ports-input:change',
+  ],
+
+  data() {
+    return {
+      showVirtual: false,
+      baudRates: [
+        { value: '1000000', label: '1000000' },
+        { value: '500000', label: '500000' },
+        { value: '250000', label: '250000' },
+        { value: '115200', label: '115200' },
+        { value: '57600', label: '57600' },
+        { value: '38400', label: '38400' },
+        { value: '28800', label: '28800' },
+        { value: '19200', label: '19200' },
+        { value: '14400', label: '14400' },
+        { value: '9600', label: '9600' },
+        { value: '4800', label: '4800' },
+        { value: '2400', label: '2400' },
+        { value: '1200', label: '1200' },
+      ],
+    };
+  },
+
+  methods: {
+    updateValue(key, value) {
+      this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
+    },
+    onChangePort(event) {
+      if (event.target.value === 'requestpermission') {
+        EventBus.$emit('ports-input:request-permission');
+      } else if (event.target.value === 'requestpermissionbluetooth') {
+        EventBus.$emit('ports-input:request-permission-bluetooth');
+      } else {
+        EventBus.$emit('ports-input:change', event.target.value);
+      }
+      this.updateValue('selectedPort', event.target.value);
+    },
+    onChangeAutoConnect(event) {
+      setConfig({'autoConnect': event.target.checked});
+      this.updateValue('autoConnect', event.target.checked);
+      return event;
+    },
+  },
+});
+
 </script>
diff --git a/src/components/quad-status/BatteryIcon.vue b/src/components/quad-status/BatteryIcon.vue
index 04154890fb..d80338e3cf 100644
--- a/src/components/quad-status/BatteryIcon.vue
+++ b/src/components/quad-status/BatteryIcon.vue
@@ -7,24 +7,17 @@
 </template>
 <script>
 const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8;
-export default {
-    props: {
-        voltage: {
-            type: Number,
-            default: 0,
-        },
-        vbatmincellvoltage: {
-            type: Number,
-            default: 1,
-        },
-        vbatmaxcellvoltage: {
-            type: Number,
-            default: 1,
-        },
-        vbatwarningcellvoltage: {
-            type: Number,
-            default: 1,
-        },
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    batteryState: {
+      type: String,
+      default: '',
+    },
+    voltage: {
+      type: Number,
+      default: 0,
     },
     computed: {
         nbCells() {
@@ -67,7 +60,60 @@ export default {
             return this.isEmpty ? 100 : ((this.voltage - this.min) / (this.max - this.min)) * 100;
         },
     },
-};
+    vbatmaxcellvoltage: {
+      type: Number,
+      default: 1,
+    },
+    vbatwarningcellvoltage: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  computed: {
+    nbCells() {
+      let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
+      if (this.voltage === 0) {
+        nbCells = 1;
+      }
+      return nbCells;
+    },
+    min() {
+      return this.vbatmincellvoltage * this.nbCells;
+    },
+    max() {
+      return this.vbatmaxcellvoltage * this.nbCells;
+    },
+    warn() {
+      return this.vbatwarningcellvoltage * this.nbCells;
+    },
+    isEmpty() {
+      return this.voltage < this.min && this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM;
+    },
+    classes() {
+      if (this.batteryState) {
+        return {
+          "state-ok": this.batteryState === 0,
+          "state-warning": this.batteryState === 1,
+          "state-empty": this.batteryState === 2,
+          // TODO: BATTERY_NOT_PRESENT
+          // TODO: BATTERY_INIT
+        };
+      }
+      const isWarning = this.voltage < this.warn;
+      return {
+        "state-empty": this.isEmpty,
+        "state-warning": isWarning,
+        "state-ok": !this.isEmpty && !isWarning,
+      };
+    },
+    batteryWidth() {
+      return this.isEmpty
+        ? 100
+        : ((this.voltage - this.min) / (this.max - this.min)) * 100;
+    },
+  },
+});
 </script>
 
 <style>
diff --git a/src/components/quad-status/BatteryLegend.vue b/src/components/quad-status/BatteryLegend.vue
index 06f7c8bb7b..ce50978984 100644
--- a/src/components/quad-status/BatteryLegend.vue
+++ b/src/components/quad-status/BatteryLegend.vue
@@ -5,16 +5,13 @@
 </template>
 <script>
 const NO_BATTERY_VOLTAGE_MAXIMUM = 1.8;
-export default {
-    props: {
-        voltage: {
-            type: Number,
-            default: 0,
-        },
-        vbatmaxcellvoltage: {
-            type: Number,
-            default: 1,
-        },
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    voltage: {
+      type: Number,
+      default: 0,
     },
     computed: {
         reading() {
@@ -26,7 +23,18 @@ export default {
             return `${this.voltage.toFixed(2)}V (${cellsText})`;
         },
     },
-};
+  },
+  computed: {
+    reading() {
+      let nbCells = Math.floor(this.voltage / this.vbatmaxcellvoltage) + 1;
+      if (this.voltage === 0) {
+        nbCells = 1;
+      }
+      const cellsText = this.voltage > NO_BATTERY_VOLTAGE_MAXIMUM ? `${nbCells}S` : 'USB';
+      return `${this.voltage.toFixed(2)}V (${cellsText})`;
+    },
+  },
+});
 </script>
 
 <style>
diff --git a/src/components/quad-status/BottomStatusIcons.vue b/src/components/quad-status/BottomStatusIcons.vue
index d2aa80afd4..e73d6dd345 100644
--- a/src/components/quad-status/BottomStatusIcons.vue
+++ b/src/components/quad-status/BottomStatusIcons.vue
@@ -7,34 +7,29 @@
 </template>
 
 <script>
-import { bit_check } from "../../js/bit";
+import { defineComponent } from 'vue';
+import { bit_check } from '../../js/bit';
 
-export default {
-    props: {
-        lastReceivedTimestamp: { type: Number, default: 0 },
-        mode: { type: Number, default: 0 },
-        auxConfig: { type: Array, default: null },
-    },
-    computed: {
-        setActiveArmed() {
-            return (
-                this.auxConfig?.length &&
-                this.auxConfig?.includes("ARM") &&
-                bit_check(this.mode, this.auxConfig?.indexOf("ARM"))
-            );
-        },
-        setFailsafeActive() {
-            return (
-                this.auxConfig?.length &&
-                this.auxConfig?.includes("FAILSAFE") &&
-                bit_check(this.mode, this.auxConfig?.indexOf("FAILSAFE"))
-            );
-        },
-        setActiveLink() {
-            return performance.now() - this.lastReceivedTimestamp < 300;
-        },
-    },
-};
+export default defineComponent({
+  props: {
+      lastReceivedTimestamp: { type: Number, default: 0 },
+      mode: { type: Number, default: 0 },
+      auxConfig: { type: Array, default: null },
+  },
+  computed: {
+      setActiveArmed() {
+          return (this.auxConfig?.length &&
+          this.auxConfig?.includes('ARM') && bit_check(this.mode, this.auxConfig?.indexOf('ARM')));
+      },
+      setFailsafeActive() {
+          return (this.auxConfig?.length &&
+          this.auxConfig?.includes('FAILSAFE') && bit_check(this.mode, this.auxConfig?.indexOf('FAILSAFE')));
+      },
+      setActiveLink() {
+          return (performance.now() - this.lastReceivedTimestamp < 300);
+      },
+  },
+});
 </script>
 
 <style scoped>
diff --git a/src/components/sensor-status/SensorStatus.vue b/src/components/sensor-status/SensorStatus.vue
index f4152d8841..06f858c62a 100644
--- a/src/components/sensor-status/SensorStatus.vue
+++ b/src/components/sensor-status/SensorStatus.vue
@@ -42,62 +42,63 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { bit_check } from "../../js/bit";
 
-export default {
-    props: {
-        sensorsDetected: {
-            type: Number,
-            default: 0,
-        },
-        gpsFixState: {
-            type: Number,
-            default: 0,
-        },
+export default defineComponent({
+  props: {
+    sensorsDetected: {
+      type: Number,
+      default: 0,
     },
-    computed: {
-        setAccActive() {
-            return this.haveSensor(this.sensorsDetected, "acc");
-        },
-        setGyroActive() {
-            return this.haveSensor(this.sensorsDetected, "gyro");
-        },
-        setBaroActive() {
-            return this.haveSensor(this.sensorsDetected, "baro");
-        },
-        setMagActive() {
-            return this.haveSensor(this.sensorsDetected, "mag");
-        },
-        setGpsActive() {
-            return this.haveSensor(this.sensorsDetected, "gps");
-        },
-        setGpsFixState() {
-            return this.gpsFixState !== 0;
-        },
-        setSonarActive() {
-            return this.haveSensor(this.sensorsDetected, "sonar");
-        },
+    gpsFixState: {
+      type: Number,
+      default: 0,
     },
-    methods: {
-        haveSensor(sensorsDetected, sensorCode) {
-            switch (sensorCode) {
-                case "acc":
-                    return bit_check(sensorsDetected, 0);
-                case "baro":
-                    return bit_check(sensorsDetected, 1);
-                case "mag":
-                    return bit_check(sensorsDetected, 2);
-                case "gps":
-                    return bit_check(sensorsDetected, 3);
-                case "sonar":
-                    return bit_check(sensorsDetected, 4);
-                case "gyro":
-                    return bit_check(sensorsDetected, 5);
-            }
-            return false;
-        },
+  },
+  computed: {
+    setAccActive() {
+      return this.haveSensor(this.sensorsDetected, 'acc');
     },
-};
+    setGyroActive() {
+      return this.haveSensor(this.sensorsDetected, 'gyro');
+    },
+    setBaroActive() {
+      return this.haveSensor(this.sensorsDetected, 'baro');
+    },
+    setMagActive() {
+      return this.haveSensor(this.sensorsDetected, 'mag');
+    },
+    setGpsActive() {
+      return this.haveSensor(this.sensorsDetected, 'gps');
+    },
+    setGpsFixState() {
+      return this.gpsFixState !== 0;
+    },
+    setSonarActive() {
+      return this.haveSensor(this.sensorsDetected, 'sonar');
+    },
+  },
+  methods: {
+    haveSensor(sensorsDetected, sensorCode) {
+      switch (sensorCode) {
+        case 'acc':
+          return bit_check(sensorsDetected, 0);
+        case 'baro':
+          return bit_check(sensorsDetected, 1);
+        case 'mag':
+          return bit_check(sensorsDetected, 2);
+        case 'gps':
+          return bit_check(sensorsDetected, 3);
+        case 'sonar':
+          return bit_check(sensorsDetected, 4);
+        case 'gyro':
+          return bit_check(sensorsDetected, 5);
+      }
+      return false;
+    },
+  },
+});
 </script>
 
 <style scoped lang="less">
diff --git a/src/components/status-bar/PortUtilization.vue b/src/components/status-bar/PortUtilization.vue
index 773d482b2b..2463b1ee31 100644
--- a/src/components/status-bar/PortUtilization.vue
+++ b/src/components/status-bar/PortUtilization.vue
@@ -1,27 +1,36 @@
 <template>
-    <div>
-        <span class="message">{{ $t("statusbar_port_utilization") }}</span>
-        <ReadingStat message="statusbar_usage_download" :value="usageDown" unit="%" />
-        <ReadingStat message="statusbar_usage_upload" :value="usageUp" unit="%" />
-    </div>
+  <div>
+    <span class="message">{{ $t("statusbar_port_utilization") }}</span>
+    <ReadingStat
+      message="statusbar_usage_download"
+      :model-value="usageDown"
+      unit="%"
+    />
+    <ReadingStat
+      message="statusbar_usage_upload"
+      :model-value="usageUp"
+      unit="%"
+    />
+  </div>
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import ReadingStat from "./ReadingStat.vue";
 
-export default {
-    components: {
-        ReadingStat,
+export default defineComponent({
+  components: {
+    ReadingStat,
+  },
+  props: {
+    usageDown: {
+      type: Number,
+      default: 0,
+    usageUp: {
+      type: Number,
+      default: 0,
+      },
     },
-    props: {
-        usageDown: {
-            type: Number,
-            default: 0,
-        },
-        usageUp: {
-            type: Number,
-            default: 0,
-        },
-    },
-};
+  },
+});
 </script>
diff --git a/src/components/status-bar/ReadingStat.vue b/src/components/status-bar/ReadingStat.vue
index aad0d084a4..adced52dcc 100644
--- a/src/components/status-bar/ReadingStat.vue
+++ b/src/components/status-bar/ReadingStat.vue
@@ -1,28 +1,33 @@
 <template>
-    <span>
-        <span class="message">{{ $t(message) }}</span>
-        <span class="value">{{ value }}</span>
-        <span v-if="unit" class="unit">
-            {{ unit }}
-        </span>
+  <span>
+    <span class="message">{{ $t(message) }}</span>
+    <span class="value">{{ modelValue }}</span>
+    <span
+      v-if="unit"
+      class="unit"
+    >
+      {{ unit }}
     </span>
+  </span>
 </template>
 
 <script>
-export default {
-    props: {
-        message: {
-            type: String,
-            default: "",
-        },
-        value: {
-            type: Number,
-            default: 0,
-        },
-        unit: {
-            type: String,
-            default: "",
-        },
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    message: {
+      type: String,
+      default: "",
+    },
+    modelValue: {
+      type: Number,
+      default: 0,
+    },
+    unit: {
+      type: String,
+      default: "",
     },
-};
+  },
+});
 </script>
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index f662da9f09..3943d6e893 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
     <div id="status-bar">
         <PortUtilization :usage-down="portUsageDown" :usage-up="portUsageUp" />
         <ReadingStat message="statusbar_packet_error" :value="packetError" />
@@ -12,63 +13,106 @@
             :hardware-id="hardwareId"
         />
     </div>
+=======
+  <div id="status-bar">
+    <PortUtilization
+      :usage-down="portUsageDown"
+      :usage-up="portUsageUp"
+    />
+    <ReadingStat
+      message="statusbar_packet_error"
+      :model-value="packetError"
+    />
+    <ReadingStat
+      message="statusbar_i2c_error"
+      :model-value="i2cError"
+    />
+    <ReadingStat
+      message="statusbar_cycle_time"
+      :model-value="cycleTime"
+    />
+    <ReadingStat
+      message="statusbar_cpu_load"
+      :model-value="cpuLoad"
+      unit="%"
+    />
+    <StatusBarVersion
+      :configurator-version="configuratorVersion"
+      :firmware-version="firmwareVersion"
+      :firmware-id="firmwareId"
+      :hardware-id="hardwareId"
+    />
+  </div>
+>>>>>>> c85044e6 (Update Vue)
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import StatusBarVersion from "./StatusBarVersion.vue";
 import ReadingStat from "./ReadingStat.vue";
 import PortUtilization from "./PortUtilization.vue";
 
-export default {
-    components: {
-        PortUtilization,
-        ReadingStat,
-        StatusBarVersion,
+export default defineComponent({
+  components: {
+    PortUtilization,
+    ReadingStat,
+    StatusBarVersion,
+  },
+  props: {
+    portUsageDown: {
+      type: Number,
+      default: 0,
     },
-    props: {
-        portUsageDown: {
-            type: Number,
-            default: 0,
-        },
-        portUsageUp: {
-            type: Number,
-            default: 0,
-        },
-        packetError: {
-            type: Number,
-            default: 0,
-        },
-        i2cError: {
-            type: Number,
-            default: 0,
-        },
-        cycleTime: {
-            type: Number,
-            default: 0,
-        },
-        cpuLoad: {
-            type: Number,
-            default: 0,
-        },
-
-        configuratorVersion: {
-            type: String,
-            default: "",
-        },
-        firmwareVersion: {
-            type: String,
-            default: "",
-        },
-        firmwareId: {
-            type: String,
-            default: "",
-        },
-        hardwareId: {
-            type: String,
-            default: "",
-        },
+    portUsageUp: {
+      type: Number,
+      default: 0,
+    },
+    packetError: {
+      type: Number,
+      default: 0,
+    },
+    i2cError: {
+      type: Number,
+      default: 0,
+    },
+    cycleTime: {
+      type: Number,
+      default: 0,
+    },
+    cpuLoad: {
+      type: Number,
+      default: 0,
+    },
+    configuratorVersion: {
+        type: String,
+        default: "",
+    },
+    firmwareVersion: {
+        type: String,
+        default: "",
+    },
+    firmwareId: {
+        type: String,
+        default: "",
+    },
+    hardwareId: {
+        type: String,
+        default: "",
+    },
+    firmwareVersion: {
+      type: String,
+      default: "",
+    },
+    firmwareId: {
+      type: String,
+      default: "",
+    },
+    hardwareId: {
+      type: String,
+      default: "",
     },
-};
+  },
+});
 </script>
 
 <style lang="less">
diff --git a/src/components/status-bar/StatusBarVersion.vue b/src/components/status-bar/StatusBarVersion.vue
index 23f3c711a6..edda9cd88a 100644
--- a/src/components/status-bar/StatusBarVersion.vue
+++ b/src/components/status-bar/StatusBarVersion.vue
@@ -10,26 +10,28 @@
 </template>
 
 <script>
-export default {
-    props: {
-        configuratorVersion: {
-            type: String,
-            default: "",
-        },
-        firmwareVersion: {
-            type: String,
-            default: "",
-        },
-        firmwareId: {
-            type: String,
-            default: "",
-        },
-        hardwareId: {
-            type: String,
-            default: "",
-        },
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    configuratorVersion: {
+      type: String,
+      default: "",
+    },
+    firmwareVersion: {
+      type: String,
+      default: "",
+    },
+    firmwareId: {
+      type: String,
+      default: "",
+    },
+    hardwareId: {
+      type: String,
+      default: "",
     },
-};
+  },
+});
 </script>
 
 <style>
diff --git a/src/components/vueI18n.js b/src/components/vueI18n.js
deleted file mode 100644
index fdfef9f0e4..0000000000
--- a/src/components/vueI18n.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Vue from "vue";
-import VueI18Next from "@panter/vue-i18next";
-import i18next from "i18next";
-
-Vue.use(VueI18Next);
-
-const vueI18n = new VueI18Next(i18next);
-
-export default vueI18n;
diff --git a/src/js/port_handler.js b/src/js/port_handler.js
index 5ef9c1b0f4..502c67e771 100644
--- a/src/js/port_handler.js
+++ b/src/js/port_handler.js
@@ -233,6 +233,11 @@ PortHandler.selectActivePort = function (suggestedDevice) {
     this.portPicker.selectedPort = selectedPort || DEFAULT_PORT;
 
     console.log(`[PORTHANDLER] automatically selected device is '${this.portPicker.selectedPort}'`);
+
+    // hack to update Vue component
+    const p = document.getElementById('port');
+    p.value = this.portPicker.selectedPort;
+
     return selectedPort;
 };
 
diff --git a/vite.config.js b/vite.config.js
index 2e517faafa..f3f3c17364 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,15 +1,15 @@
 /// <reference types="vitest" />
 import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue2";
+import vue from "@vitejs/plugin-vue";
 import path from "node:path";
 import { readFileSync } from "node:fs";
 import copy from "rollup-plugin-copy";
-import pkg from './package.json';
-import * as child from 'child_process';
+import pkg from "./package.json";
+import * as child from "child_process";
 import { VitePWA } from "vite-plugin-pwa";
-import { resolve } from 'path';
+import { resolve } from "path";
 
-const commitHash = child.execSync('git rev-parse --short HEAD').toString();
+const commitHash = child.execSync("git rev-parse --short HEAD").toString();
 
 function serveFileFromDirectory(directory) {
     return (req, res, next) => {
@@ -53,15 +53,15 @@ function serveLocalesPlugin() {
 
 export default defineConfig({
     define: {
-        '__APP_VERSION__': JSON.stringify(pkg.version),
-        '__APP_PRODUCTNAME__': JSON.stringify(pkg.productName),
-        '__APP_REVISION__': JSON.stringify(commitHash),
+        __APP_VERSION__: JSON.stringify(pkg.version),
+        __APP_PRODUCTNAME__: JSON.stringify(pkg.productName),
+        __APP_REVISION__: JSON.stringify(commitHash),
     },
     build: {
         rollupOptions: {
             input: {
-                main: resolve(__dirname, 'src/index.html'),
-                receiver_msp: resolve(__dirname, 'src/receiver_msp/receiver_msp.html'),
+                main: resolve(__dirname, "src/index.html"),
+                receiver_msp: resolve(__dirname, "src/receiver_msp/receiver_msp.html"),
             },
         },
     },
@@ -115,7 +115,7 @@ export default defineConfig({
     resolve: {
         alias: {
             "/src": path.resolve(process.cwd(), "src"),
-            "vue": path.resolve(__dirname, "node_modules/vue/dist/vue.esm.js"),
+            "vue": path.resolve(__dirname, "node_modules/vue/dist/vue.esm-bundler.js"),
         },
     },
     server: {
diff --git a/yarn.lock b/yarn.lock
index a289b2a629..0c6ccdee52 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -252,7 +252,7 @@
     "@babel/template" "^7.25.9"
     "@babel/types" "^7.26.0"
 
-"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.23.5", "@babel/parser@^7.24.7", "@babel/parser@^7.25.3", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
+"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.14.7", "@babel/parser@^7.24.7", "@babel/parser@^7.25.3", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3", "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.26.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
   integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
@@ -1856,13 +1856,6 @@
   resolved "https://registry.yarnpkg.com/@one-ini/wasm/-/wasm-0.1.1.tgz#6013659736c9dbfccc96e8a9c2b3de317df39323"
   integrity sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==
 
-"@panter/vue-i18next@^0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@panter/vue-i18next/-/vue-i18next-0.15.2.tgz#814f6774237e444eb9b69156e9c507d41b7fbd32"
-  integrity sha512-7VX9GyxHJNEJKa2CRzC294Oz5EEbzVDZ1o3O/P8gL/PWBmcFOFsuivRbP/1a9ga2ihv/NBzoCWMCNIEEeCcONQ==
-  dependencies:
-    deepmerge "^2.0.0"
-
 "@parcel/watcher-android-arm64@2.5.0":
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz#e32d3dda6647791ee930556aee206fcd5ea0fb7a"
@@ -3146,10 +3139,10 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.1.tgz#28fa185f67daaf7b7a1a8c1d445132c5d979f8bd"
   integrity sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==
 
-"@vitejs/plugin-vue2@^2.3.1":
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue2/-/plugin-vue2-2.3.3.tgz#6e1772caeb66914bfcc49bea21d08949d43b3fde"
-  integrity sha512-qexY6+bbwY8h0AZerzUuGywNTi0cLOkbiSbggr0R3WEW95iB2hblQFyv4MAkkc2vm4gZN1cO5kzT1Kp6xlVzZw==
+"@vitejs/plugin-vue@^5.1.4":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz#d1491f678ee3af899f7ae57d9c21dc52a65c7133"
+  integrity sha512-cxh314tzaWwOLqVes2gnnCtvBDcM1UMdn+iFR+UjAn411dPT3tOmqrJjbMd7koZpMAmBM/GqeV4n9ge7JSiJJQ==
 
 "@vue/compiler-core@3.5.13":
   version "3.5.13"
@@ -3170,18 +3163,7 @@
     "@vue/compiler-core" "3.5.13"
     "@vue/shared" "3.5.13"
 
-"@vue/compiler-sfc@2.7.16":
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz#ff81711a0fac9c68683d8bb00b63f857de77dc83"
-  integrity sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==
-  dependencies:
-    "@babel/parser" "^7.23.5"
-    postcss "^8.4.14"
-    source-map "^0.6.1"
-  optionalDependencies:
-    prettier "^1.18.2 || ^2.0.0"
-
-"@vue/compiler-sfc@^3.2.0":
+"@vue/compiler-sfc@3.5.13", "@vue/compiler-sfc@^3.2.0":
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz#461f8bd343b5c06fac4189c4fef8af32dea82b46"
   integrity sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==
@@ -3236,6 +3218,39 @@
     sass "^1.18.0"
     stylus "^0.54.5"
 
+"@vue/reactivity@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.13.tgz#b41ff2bb865e093899a22219f5b25f97b6fe155f"
+  integrity sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==
+  dependencies:
+    "@vue/shared" "3.5.13"
+
+"@vue/runtime-core@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.13.tgz#1fafa4bf0b97af0ebdd9dbfe98cd630da363a455"
+  integrity sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==
+  dependencies:
+    "@vue/reactivity" "3.5.13"
+    "@vue/shared" "3.5.13"
+
+"@vue/runtime-dom@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz#610fc795de9246300e8ae8865930d534e1246215"
+  integrity sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==
+  dependencies:
+    "@vue/reactivity" "3.5.13"
+    "@vue/runtime-core" "3.5.13"
+    "@vue/shared" "3.5.13"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.5.13":
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.13.tgz#429ead62ee51de789646c22efe908e489aad46f7"
+  integrity sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==
+  dependencies:
+    "@vue/compiler-ssr" "3.5.13"
+    "@vue/shared" "3.5.13"
+
 "@vue/shared@3.5.13":
   version "3.5.13"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.13.tgz#87b309a6379c22b926e696893237826f64339b6f"
@@ -5887,7 +5902,7 @@ cssstyle@^3.0.0:
   dependencies:
     rrweb-cssom "^0.6.0"
 
-csstype@^3.1.0:
+csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -6285,11 +6300,6 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -9053,6 +9063,11 @@ husky@^8.0.2:
   resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
   integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
 
+i18next-vue@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/i18next-vue/-/i18next-vue-5.0.0.tgz#466bf834671a9a93525679f6203042ce5152cc41"
+  integrity sha512-8jlctdGSKws9fcFlGlFOQRKCQQdUTKSs4D9pbZ6iitpzHQzQSVTdeDPvrjxLomsTjLK65W+MUGW6cwavAMGo9w==
+
 i18next-xhr-backend@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz#769124441461b085291f539d91864e3691199178"
@@ -12801,7 +12816,7 @@ postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.4.14, postcss@^8.4.17, postcss@^8.4.27, postcss@^8.4.48:
+postcss@^8.4.17, postcss@^8.4.27, postcss@^8.4.48:
   version "8.4.49"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
   integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
@@ -15423,6 +15438,11 @@ timers-ext@^0.1.7:
     es5-ext "^0.10.64"
     next-tick "^1.1.0"
 
+tiny-emitter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-invariant@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
@@ -16415,13 +16435,16 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.7.16:
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"
-  integrity sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==
+vue@^3.5.12:
+  version "3.5.13"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.13.tgz#9f760a1a982b09c0c04a867903fc339c9f29ec0a"
+  integrity sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==
   dependencies:
-    "@vue/compiler-sfc" "2.7.16"
-    csstype "^3.1.0"
+    "@vue/compiler-dom" "3.5.13"
+    "@vue/compiler-sfc" "3.5.13"
+    "@vue/runtime-dom" "3.5.13"
+    "@vue/server-renderer" "3.5.13"
+    "@vue/shared" "3.5.13"
 
 w3c-xmlserializer@^4.0.0:
   version "4.0.0"
@@ -17162,6 +17185,11 @@ yargs@^7.1.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.1"
 
+yarn.lock@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.yarnpkg.com/yarn.lock/-/yarn.lock-0.0.1-security.tgz#8e7117924bfe916671b21f14212ba1bb49dfe0c7"
+  integrity sha512-ZRX6v5zGCJMI1T2aO+BQxJggy1vvorXEwonQhWXIC+brO7lkDB3zWelVNAti183ddH6FmJP8z4UDCJnJlioK4Q==
+
 yarn@^1.22.22:
   version "1.22.22"
   resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"

From 878857a5eb9597bc0db92bf749b514ebfddcb405 Mon Sep 17 00:00:00 2001
From: Mark Haslinghuis <mark@numloq.nl>
Date: Sat, 7 Dec 2024 00:45:34 +0100
Subject: [PATCH 2/2] Fix sonar

---
 src/components/data-flash/DataFlash.vue   |  60 ++---
 src/components/init.js                    |   2 +-
 src/components/port-picker/PortPicker.vue | 159 +++++------
 src/components/port-picker/PortsInput.vue | 306 +++++++++-------------
 src/components/status-bar/StatusBar.vue   | 144 ++++------
 yarn.lock                                 |  45 ++--
 6 files changed, 289 insertions(+), 427 deletions(-)

diff --git a/src/components/data-flash/DataFlash.vue b/src/components/data-flash/DataFlash.vue
index c6fbf3b277..bd504ff621 100644
--- a/src/components/data-flash/DataFlash.vue
+++ b/src/components/data-flash/DataFlash.vue
@@ -28,48 +28,30 @@ export default defineComponent({
   },
   computed: {
     supportDataflash() {
-      if (this.fcTotalSize > 0) return true;
-      else return false;
+      return this.fcTotalSize > 0;
     },
-    computed: {
-      supportDataflash() {
-        if (this.fcTotalSize > 0) return true;
-          else return false;
-        },
-        freeSpace() {
-          if (!this.supportDataflash) return;
-          const bytes = this.fcTotalSize - this.fcUsedSize;
-          if (this.fcUsedSize >= this.fcTotalSize) {
-              return "0B";
-          }
-          if (bytes < 1024) {
-              return `${bytes}B`;
-          }
-          const kilobytes = bytes / 1024;
-          if (kilobytes < 1024) {
-              return `${Math.round(kilobytes)}KB`;
-          }
-          const megabytes = kilobytes / 1024;
-          if (megabytes < 1024) {
-              return `${megabytes.toFixed(1)}MB`;
-          }
-          const gigabytes = megabytes / 1024;
-          return `${gigabytes.toFixed(1)}GB`;
-        },
-        indicatorWidth() {
-          if (!this.supportDataflash) return;
-          return `${Math.min(
-            (this.fcUsedSize / this.fcTotalSize) * 100,
-            100,
-          )}%`;
-      },
+    freeSpace() {
+      if (!this.supportDataflash) { return; }
+      const bytes = this.fcTotalSize - this.fcUsedSize;
+      if (this.fcUsedSize >= this.fcTotalSize) {
+        return "0B";
+      }
+      if (bytes < 1024) {
+        return `${bytes}B`;
+      }
+      const kilobytes = bytes / 1024;
+      if (kilobytes < 1024) {
+        return `${Math.round(kilobytes)}KB`;
+      }
+      const megabytes = kilobytes / 1024;
+      if (megabytes < 1024) {
+        return `${megabytes.toFixed(1)}MB`;
+      }
+      const gigabytes = megabytes / 1024;
+        return `${gigabytes.toFixed(1)}GB`;
     },
     indicatorWidth() {
-      if (!this.supportDataflash) return;
-      return `${Math.min(
-        (this.fcUsedSize / this.fcTotalSize) * 100,
-        100,
-      )}%`;
+      return this.supportDataflash ? `${Math.min((this.fcUsedSize / this.fcTotalSize) * 100, 100)}%` : "0%";
     },
   },
 });
diff --git a/src/components/init.js b/src/components/init.js
index 69ec962c2c..062ec8841d 100644
--- a/src/components/init.js
+++ b/src/components/init.js
@@ -48,7 +48,7 @@ i18next.on('initialized', function() {
 
     if (process.env.NODE_ENV === 'development') {
         console.log("Development mode enabled, installing Vue tools");
-        // Vue.config.devtools = true;
+        // TODO Vue.config.devtools = true;
         app.config.performance = true;
     }
 });
diff --git a/src/components/port-picker/PortPicker.vue b/src/components/port-picker/PortPicker.vue
index 30fc08a053..f973d5cd67 100644
--- a/src/components/port-picker/PortPicker.vue
+++ b/src/components/port-picker/PortPicker.vue
@@ -1,123 +1,96 @@
 <template>
-<<<<<<< HEAD
     <div class="web-port-picker">
         <PortOverrideOption
-            v-if="value.selectedPort === 'manual'"
-            :value="value.portOverride"
-            @input="updateValue('portOverride', $event)"
+            v-if="modelValue.selectedPort === 'manual'"
+            :model-value="modelValue.portOverride"
+            @update:modelValue="updateValue('portOverride', $event)"
         />
         <FirmwareVirtualOption
-            v-if="value.selectedPort === 'virtual' && !isConnected"
-            :value="value.virtualMspVersion"
-            @input="updateValue('virtualMspVersion', $event)"
+            v-if="modelValue.selectedPort === 'virtual' && !isConnected"
+            :model-value="modelValue.virtualMspVersion"
+            @update:modelValue="updateValue('virtualMspVersion', $event)"
         />
         <PortsInput
-            :value="value"
+            :model-value="modelValue.selectedPort"
             :connected-bluetooth-devices="connectedBluetoothDevices"
             :connected-serial-devices="connectedSerialDevices"
             :connected-usb-devices="connectedUsbDevices"
             :disabled="disabled"
             :show-virtual-option="showVirtualOption"
             :show-manual-option="showManualOption"
-            @input="updateValue(null, $event)"
+            @update:modelValue="updateValue(null, $event)"
         />
     </div>
-=======
-  <div class="web-port-picker">
-    <PortOverrideOption
-      v-if="modelValue.selectedPort === 'manual'"
-      :model-value="modelValue.portOverride"
-      @update:modelValue="updateValue('portOverride', $event)"
-    />
-    <FirmwareVirtualOption
-      v-if="modelValue.selectedPort === 'virtual' && !isConnected"
-      :model-value="modelValue.virtualMspVersion"
-      @update:modelValue="updateValue('virtualMspVersion', $event)"
-    />
-    <PortsInput
-      :model-value="modelValue.selectedPort"
-      :connected-bluetooth-devices="connectedBluetoothDevices"
-      :connected-serial-devices="connectedSerialDevices"
-      :connected-usb-devices="connectedUsbDevices"
-      :disabled="disabled"
-      :show-virtual-option="showVirtualOption"
-      :show-manual-option="showManualOption"
-      @update:modelValue="updateValue(null, $event)"
-    />
-  </div>
->>>>>>> c85044e6 (Update Vue)
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import PortOverrideOption from './PortOverrideOption.vue';
-import FirmwareVirtualOption from './FirmwareVirtualOption.vue';
-import PortsInput from './PortsInput.vue';
-import CONFIGURATOR from '../../js/data_storage';
+import { defineComponent } from "vue";
+import PortOverrideOption from "./PortOverrideOption.vue";
+import FirmwareVirtualOption from "./FirmwareVirtualOption.vue";
+import PortsInput from "./PortsInput.vue";
+import CONFIGURATOR from "../../js/data_storage";
 
 export default defineComponent({
-  components: {
-    PortOverrideOption,
-    FirmwareVirtualOption,
-    PortsInput,
-  },
-
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({
-        selectedPort: 'noselection',
-        selectedBaud: 115200,
-        portOverride: '/dev/rfcomm0',
-        virtualMspVersion: '1.46.0',
-        autoConnect: true,
-      }),
-    },
-    connectedBluetoothDevices: {
-      type: Array,
-      default: () => [],
-    },
-    connectedSerialDevices: {
-      type: Array,
-      default: () => [],
-    },
-    connectedUsbDevices: {
-      type: Array,
-      default: () => [],
+    components: {
+        PortOverrideOption,
+        FirmwareVirtualOption,
+        PortsInput,
     },
-    showVirtualOption: {
-      type: Boolean,
-      default: true,
-    },
-    showManualOption: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
+
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                selectedPort: "noselection",
+                selectedBaud: 115200,
+                portOverride: "/dev/rfcomm0",
+                virtualMspVersion: "1.46.0",
+                autoConnect: true,
+            }),
+        },
+        connectedBluetoothDevices: {
+            type: Array,
+            default: () => [],
+        },
+        connectedSerialDevices: {
+            type: Array,
+            default: () => [],
+        },
+        connectedUsbDevices: {
+            type: Array,
+            default: () => [],
+        },
+        showVirtualOption: {
+            type: Boolean,
+            default: true,
+        },
+        showManualOption: {
+            type: Boolean,
+            default: true,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
     },
-  },
 
-  emits: [
-    'update:modelValue',
-  ],
+    emits: ["update:modelValue"],
 
-  computed: {
-    isConnected() {
-      return CONFIGURATOR.connectionValid;
+    computed: {
+        isConnected() {
+            return CONFIGURATOR.connectionValid;
+        },
     },
-  },
 
-  methods: {
-    updateValue(key, value) {
-      if (key != null) {
-        this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
-      } else {
-        this.$emit('update:modelValue', { ...this.modelValue, ...value});
-      }
+    methods: {
+        updateValue(key, value) {
+            if (key != null) {
+                this.$emit("update:modelValue", { ...this.modelValue, [key]: value });
+            } else {
+                this.$emit("update:modelValue", { ...this.modelValue, ...value });
+            }
+        },
     },
-  },
 });
 </script>
 
diff --git a/src/components/port-picker/PortsInput.vue b/src/components/port-picker/PortsInput.vue
index 9899a75456..190b3e83c9 100644
--- a/src/components/port-picker/PortsInput.vue
+++ b/src/components/port-picker/PortsInput.vue
@@ -1,95 +1,14 @@
 <template>
-  <div id="portsinput">
-    <div class="dropdown dropdown-dark">
-      <select
-        id="port"
-        :key="modelValue.selectedPort"
-        :model-value="modelValue.selectedPort"
-        :title="$t('firmwareFlasherManualPort')"
-        :disabled="disabled"
-        class="dropdown-select"
-        @change="onChangePort"
-      >
-        <option
-          value="noselection"
-          disabled
-        >
-          {{ $t("portsSelectNoSelection") }}
-        </option>
-        <option
-          v-show="showManualOption"
-          value="manual"
-        >
-          {{ $t("portsSelectManual") }}
-        </option>
-        <option
-          v-show="showVirtualOption"
-          value="virtual"
-        >
-          {{ $t("portsSelectVirtual") }}
-        </option>
-        <option
-          v-for="connectedBluetoothDevice in connectedBluetoothDevices"
-          :key="connectedBluetoothDevice.path"
-          :value="connectedBluetoothDevice.path"
-        >
-          {{ connectedBluetoothDevice.displayName }}
-        </option>
-        <option
-          v-for="connectedSerialDevice in connectedSerialDevices"
-          :key="connectedSerialDevice.path"
-          :value="connectedSerialDevice.path"
-        >
-          {{ connectedSerialDevice.displayName }}
-        </option>
-        <option
-          v-for="connectedUsbDevice in connectedUsbDevices"
-          :key="connectedUsbDevice.path"
-          :value="connectedUsbDevice.path"
-        >
-          {{ connectedUsbDevice.displayName }}
-        </option>
-        <option value="requestpermission">
-          {{ $t("portsSelectPermission") }}
-        </option>
-        <option value="requestpermissionbluetooth">
-          {{ $t("portsSelectPermissionBluetooth") }}
-        </option>
-      </select>
-    </div>
-    <div id="auto-connect-and-baud">
-      <div
-        id="auto-connect-switch"
-        :title="modelValue.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
-      >
-        <input
-          id="auto-connect"
-          class="auto_connect togglesmall"
-          type="checkbox"
-          :checked="modelValue.autoConnect"
-          @change="onChangeAutoConnect"
-        >
-        <span class="auto_connect">
-          {{ $t("autoConnect") }}
-        </span>
-      </div>
-      <div
-        v-if="modelValue.selectedPort !== 'virtual' && modelValue.selectedPort !== 'noselection'"
-        id="baudselect"
-      >
+    <div id="portsinput">
         <div class="dropdown dropdown-dark">
-          <select
-            id="baud"
-            class="dropdown-select"
-            :model-value="modelValue.selectedBauds"
-            :title="$t('firmwareFlasherBaudRate')"
-            :disabled="disabled"
-            @update:modelValue="updateValue('selectedBauds', $event.target.value)"
-          >
-            <option
-              v-for="baudRate in baudRates"
-              :key="baudRate.value"
-              :value="baudRate.value"
+            <select
+                id="port"
+                :key="modelValue.selectedPort"
+                :model-value="modelValue.selectedPort"
+                :title="$t('firmwareFlasherManualPort')"
+                :disabled="disabled"
+                class="dropdown-select"
+                @change="onChangePort"
             >
                 <option value="noselection" disabled>
                     {{ $t("portsSelectNoSelection") }}
@@ -132,55 +51,158 @@
         <div id="auto-connect-and-baud">
             <div
                 id="auto-connect-switch"
-                :title="value.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
+                :title="modelValue.autoConnect ? $t('autoConnectEnabled') : $t('autoConnectDisabled')"
             >
                 <input
                     id="auto-connect"
                     class="auto_connect togglesmall"
                     type="checkbox"
-                    :checked="value.autoConnect"
+                    :checked="modelValue.autoConnect"
                     @change="onChangeAutoConnect"
                 />
                 <span class="auto_connect">
                     {{ $t("autoConnect") }}
                 </span>
             </div>
-            <div v-if="value.selectedPort !== 'virtual' && value.selectedPort !== 'noselection'" id="baudselect">
+            <div
+                v-if="modelValue.selectedPort !== 'virtual' && modelValue.selectedPort !== 'noselection'"
+                id="baudselect"
+            >
                 <div class="dropdown dropdown-dark">
                     <select
                         id="baud"
-                        :value="value.selectedBauds"
                         class="dropdown-select"
+                        :model-value="modelValue.selectedBauds"
                         :title="$t('firmwareFlasherBaudRate')"
                         :disabled="disabled"
-                        @input="updateValue('selectedBauds', $event.target.value)"
+                        @change="updateValue('selectedBauds', $event.target.value)"
                     >
                         <option v-for="baudRate in baudRates" :key="baudRate.value" :value="baudRate.value">
                             {{ baudRate.label }}
                         </option>
+                        <option value="noselection" disabled>
+                            {{ $t("portsSelectNoSelection") }}
+                        </option>
+                        <option v-show="showManualOption" value="manual">
+                            {{ $t("portsSelectManual") }}
+                        </option>
+                        <option v-show="showVirtualOption" value="virtual">
+                            {{ $t("portsSelectVirtual") }}
+                        </option>
+                        <option
+                            v-for="connectedBluetoothDevice in connectedBluetoothDevices"
+                            :key="connectedBluetoothDevice.path"
+                            :value="connectedBluetoothDevice.path"
+                        >
+                            {{ connectedBluetoothDevice.displayName }}
+                        </option>
+                        <option
+                            v-for="connectedSerialDevice in connectedSerialDevices"
+                            :key="connectedSerialDevice.path"
+                            :value="connectedSerialDevice.path"
+                        >
+                            {{ connectedSerialDevice.displayName }}
+                        </option>
+                        <option
+                            v-for="connectedUsbDevice in connectedUsbDevices"
+                            :key="connectedUsbDevice.path"
+                            :value="connectedUsbDevice.path"
+                        >
+                            {{ connectedUsbDevice.displayName }}
+                        </option>
+                        <option value="requestpermission">
+                            {{ $t("portsSelectPermission") }}
+                        </option>
+                        <option value="requestpermissionbluetooth">
+                            {{ $t("portsSelectPermissionBluetooth") }}
+                        </option>
                     </select>
                 </div>
             </div>
         </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import { set as setConfig } from '../../js/ConfigStorage';
-import { EventBus } from '../eventBus';
+import { defineComponent } from "vue";
+import { set as setConfig } from "../../js/ConfigStorage";
+import { EventBus } from "../eventBus";
 
 export default defineComponent({
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => ({
-        selectedPort: 'noselection',
-        selectedBauds: 115200,
-        autoConnect: true,
-      }),
+    props: {
+        modelValue: {
+            type: Object,
+            default: () => ({
+                selectedPort: "noselection",
+                selectedBauds: 115200,
+                autoConnect: true,
+            }),
+        },
+        data() {
+            return {
+                showVirtual: false,
+                baudRates: [
+                    { value: "1000000", label: "1000000" },
+                    { value: "500000", label: "500000" },
+                    { value: "250000", label: "250000" },
+                    { value: "115200", label: "115200" },
+                    { value: "57600", label: "57600" },
+                    { value: "38400", label: "38400" },
+                    { value: "28800", label: "28800" },
+                    { value: "19200", label: "19200" },
+                    { value: "14400", label: "14400" },
+                    { value: "9600", label: "9600" },
+                    { value: "4800", label: "4800" },
+                    { value: "2400", label: "2400" },
+                    { value: "1200", label: "1200" },
+                ],
+            };
+        },
+        methods: {
+            updateValue(key, value) {
+                this.$emit("input", { ...this.value, [key]: value });
+            },
+            onChangePort(event) {
+                if (event.target.value === "requestpermission") {
+                    EventBus.$emit("ports-input:request-permission");
+                } else if (event.target.value === "requestpermissionbluetooth") {
+                    EventBus.$emit("ports-input:request-permission-bluetooth");
+                } else {
+                    EventBus.$emit("ports-input:change", event.target.value);
+                }
+                this.updateValue("selectedPort", event.target.value);
+            },
+            onChangeAutoConnect(event) {
+                setConfig({ autoConnect: event.target.checked });
+                this.updateValue("autoConnect", event.target.checked);
+                return event;
+            },
+        },
+        connectedBluetoothDevices: {
+            type: Array,
+            default: () => [],
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        showVirtualOption: {
+            type: Boolean,
+            default: true,
+        },
+        showManualOption: {
+            type: Boolean,
+            default: true,
+        },
     },
+
+    emits: [
+        "update:modelValue",
+        "ports-input:request-permission",
+        "ports-input:request-permission-bluetooth",
+        "ports-input:change",
+    ],
+
     data() {
         return {
             showVirtual: false,
@@ -201,9 +223,10 @@ export default defineComponent({
             ],
         };
     },
+
     methods: {
         updateValue(key, value) {
-            this.$emit("input", { ...this.value, [key]: value });
+            this.$emit("update:modelValue", { ...this.modelValue, [key]: value });
         },
         onChangePort(event) {
             if (event.target.value === "requestpermission") {
@@ -221,72 +244,5 @@ export default defineComponent({
             return event;
         },
     },
-    connectedBluetoothDevices: {
-      type: Array,
-      default: () => [],
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    showVirtualOption: {
-      type: Boolean,
-      default: true,
-    },
-    showManualOption: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-    'ports-input:request-permission',
-    'ports-input:request-permission-bluetooth',
-    'ports-input:change',
-  ],
-
-  data() {
-    return {
-      showVirtual: false,
-      baudRates: [
-        { value: '1000000', label: '1000000' },
-        { value: '500000', label: '500000' },
-        { value: '250000', label: '250000' },
-        { value: '115200', label: '115200' },
-        { value: '57600', label: '57600' },
-        { value: '38400', label: '38400' },
-        { value: '28800', label: '28800' },
-        { value: '19200', label: '19200' },
-        { value: '14400', label: '14400' },
-        { value: '9600', label: '9600' },
-        { value: '4800', label: '4800' },
-        { value: '2400', label: '2400' },
-        { value: '1200', label: '1200' },
-      ],
-    };
-  },
-
-  methods: {
-    updateValue(key, value) {
-      this.$emit('update:modelValue', { ...this.modelValue, [key]: value });
-    },
-    onChangePort(event) {
-      if (event.target.value === 'requestpermission') {
-        EventBus.$emit('ports-input:request-permission');
-      } else if (event.target.value === 'requestpermissionbluetooth') {
-        EventBus.$emit('ports-input:request-permission-bluetooth');
-      } else {
-        EventBus.$emit('ports-input:change', event.target.value);
-      }
-      this.updateValue('selectedPort', event.target.value);
-    },
-    onChangeAutoConnect(event) {
-      setConfig({'autoConnect': event.target.checked});
-      this.updateValue('autoConnect', event.target.checked);
-      return event;
-    },
-  },
 });
-
 </script>
diff --git a/src/components/status-bar/StatusBar.vue b/src/components/status-bar/StatusBar.vue
index 3943d6e893..a5a202591c 100644
--- a/src/components/status-bar/StatusBar.vue
+++ b/src/components/status-bar/StatusBar.vue
@@ -1,11 +1,10 @@
 <template>
-<<<<<<< HEAD
     <div id="status-bar">
         <PortUtilization :usage-down="portUsageDown" :usage-up="portUsageUp" />
-        <ReadingStat message="statusbar_packet_error" :value="packetError" />
-        <ReadingStat message="statusbar_i2c_error" :value="i2cError" />
-        <ReadingStat message="statusbar_cycle_time" :value="cycleTime" />
-        <ReadingStat message="statusbar_cpu_load" :value="cpuLoad" unit="%" />
+        <ReadingStat message="statusbar_packet_error" :model-value="packetError" />
+        <ReadingStat message="statusbar_i2c_error" :model-value="i2cError" />
+        <ReadingStat message="statusbar_cycle_time" :model-value="cycleTime" />
+        <ReadingStat message="statusbar_cpu_load" :model-value="cpuLoad" unit="%" />
         <StatusBarVersion
             :configurator-version="configuratorVersion"
             :firmware-version="firmwareVersion"
@@ -13,105 +12,62 @@
             :hardware-id="hardwareId"
         />
     </div>
-=======
-  <div id="status-bar">
-    <PortUtilization
-      :usage-down="portUsageDown"
-      :usage-up="portUsageUp"
-    />
-    <ReadingStat
-      message="statusbar_packet_error"
-      :model-value="packetError"
-    />
-    <ReadingStat
-      message="statusbar_i2c_error"
-      :model-value="i2cError"
-    />
-    <ReadingStat
-      message="statusbar_cycle_time"
-      :model-value="cycleTime"
-    />
-    <ReadingStat
-      message="statusbar_cpu_load"
-      :model-value="cpuLoad"
-      unit="%"
-    />
-    <StatusBarVersion
-      :configurator-version="configuratorVersion"
-      :firmware-version="firmwareVersion"
-      :firmware-id="firmwareId"
-      :hardware-id="hardwareId"
-    />
-  </div>
->>>>>>> c85044e6 (Update Vue)
 </template>
 
 <script>
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 import StatusBarVersion from "./StatusBarVersion.vue";
 import ReadingStat from "./ReadingStat.vue";
 import PortUtilization from "./PortUtilization.vue";
 
 export default defineComponent({
-  components: {
-    PortUtilization,
-    ReadingStat,
-    StatusBarVersion,
-  },
-  props: {
-    portUsageDown: {
-      type: Number,
-      default: 0,
+    components: {
+        PortUtilization,
+        ReadingStat,
+        StatusBarVersion,
     },
-    portUsageUp: {
-      type: Number,
-      default: 0,
+    props: {
+        portUsageDown: {
+            type: Number,
+            default: 0,
+        },
+        portUsageUp: {
+            type: Number,
+            default: 0,
+        },
+        packetError: {
+            type: Number,
+            default: 0,
+        },
+        i2cError: {
+            type: Number,
+            default: 0,
+        },
+        cycleTime: {
+            type: Number,
+            default: 0,
+        },
+        cpuLoad: {
+            type: Number,
+            default: 0,
+        },
+        configuratorVersion: {
+            type: String,
+            default: "",
+        },
+        firmwareVersion: {
+            type: String,
+            default: "",
+        },
+        firmwareId: {
+            type: String,
+            default: "",
+        },
+        hardwareId: {
+            type: String,
+            default: "",
+        },
     },
-    packetError: {
-      type: Number,
-      default: 0,
-    },
-    i2cError: {
-      type: Number,
-      default: 0,
-    },
-    cycleTime: {
-      type: Number,
-      default: 0,
-    },
-    cpuLoad: {
-      type: Number,
-      default: 0,
-    },
-    configuratorVersion: {
-        type: String,
-        default: "",
-    },
-    firmwareVersion: {
-        type: String,
-        default: "",
-    },
-    firmwareId: {
-        type: String,
-        default: "",
-    },
-    hardwareId: {
-        type: String,
-        default: "",
-    },
-    firmwareVersion: {
-      type: String,
-      default: "",
-    },
-    firmwareId: {
-      type: String,
-      default: "",
-    },
-    hardwareId: {
-      type: String,
-      default: "",
-    },
-  },
 });
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index 0c6ccdee52..3e726a77f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4370,9 +4370,9 @@ balanced-match@^1.0.0:
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 bare-events@^2.2.0:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.5.1.tgz#052a96e3fc0e87cd9f226199d7f8a80cd87b6d21"
-  integrity sha512-Bw2PgKSrZ3uCuSV9WQ998c/GTJTd+9bWj97n7aDQMP8dP/exAZQlJeswPty0ISy+HZD+9Ex+C7CCnc9Q5QJFmQ==
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.5.3.tgz#899d7e4b2598a7978ef7ca315ce67eff0a16a727"
+  integrity sha512-pCO3aoRJ0MBiRMu8B7vUga0qL3L7gO1+SW7ku6qlSsMLwuhaawnuvZDyzJY/kyC63Un0XAB0OPUcfF1eTO/V+Q==
 
 base64-js@^1.0.2, base64-js@^1.3.1, base64-js@^1.5.1:
   version "1.5.1"
@@ -6692,9 +6692,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.5.73:
-  version "1.5.76"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz#db20295c5061b68f07c8ea4dfcbd701485d94a3d"
-  integrity sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==
+  version "1.5.78"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.78.tgz#223cdc76a5d15ac731136e68430e92cb8d612d13"
+  integrity sha512-UmwIt7HRKN1rsJfddG5UG7rCTCTAKoS9JeOy/R0zSenAyaZ8SU3RuXlwcratxhdxGRNpk03iq8O7BA3W7ibLVw==
 
 elementtree@^0.1.7:
   version "0.1.7"
@@ -7525,15 +7525,15 @@ fast-glob@^2.2.6:
     micromatch "^3.1.10"
 
 fast-glob@^3.0.3, fast-glob@^3.2.2, fast-glob@^3.2.9, fast-glob@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
     glob-parent "^5.1.2"
     merge2 "^1.3.0"
-    micromatch "^4.0.4"
+    micromatch "^4.0.8"
 
 fast-json-parse@^1.0.3:
   version "1.0.3"
@@ -7556,9 +7556,9 @@ fast-levenshtein@^2.0.6:
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fast-uri@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.3.tgz#892a1c91802d5d7860de728f18608a0573142241"
-  integrity sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.5.tgz#19f5f9691d0dab9b85861a7bb5d98fca961da9cd"
+  integrity sha512-5JnBCWpFlMo0a3ciDy/JckMzzv1U9coZrIhedq+HXxxUfDTAiS0LA8OKVao4G9BxmCVck/jtA5r3KAtRWEyD8Q==
 
 fastparse@^1.1.2:
   version "1.1.2"
@@ -11162,7 +11162,7 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.5, micromatch@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -13392,9 +13392,9 @@ read@1, read@~1.0.1:
     util-deprecate "^1.0.1"
 
 readable-stream@^4.0.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.6.0.tgz#ce412dfb19c04efde1c5936d99c27f37a1ff94c9"
-  integrity sha512-cbAdYt0VcnpN2Bekq7PU+k363ZRsPwJoEEJOEtSJQlJXzwaxt3FIo/uL+KeDSGIjJqtkwyge4KQgD2S2kd+CQw==
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.7.0.tgz#cedbd8a1146c13dfff8dab14068028d58c15ac91"
+  integrity sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==
   dependencies:
     abort-controller "^3.0.0"
     buffer "^6.0.3"
@@ -14099,9 +14099,9 @@ sane@^4.0.3:
     walker "~1.0.5"
 
 sass@^1.18.0:
-  version "1.83.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.83.0.tgz#e36842c0b88a94ed336fd16249b878a0541d536f"
-  integrity sha512-qsSxlayzoOjdvXMVLkzF84DJFc2HZEL/rFyGIKbbilYtAvlCxyuzUeff9LawTn4btVnLKg75Z8MMr1lxU1lfGw==
+  version "1.83.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.83.1.tgz#dee1ab94b47a6f9993d3195d36f556bcbda64846"
+  integrity sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==
   dependencies:
     chokidar "^4.0.0"
     immutable "^5.0.2"
@@ -17185,11 +17185,6 @@ yargs@^7.1.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.1"
 
-yarn.lock@^0.0.1-security:
-  version "0.0.1-security"
-  resolved "https://registry.yarnpkg.com/yarn.lock/-/yarn.lock-0.0.1-security.tgz#8e7117924bfe916671b21f14212ba1bb49dfe0c7"
-  integrity sha512-ZRX6v5zGCJMI1T2aO+BQxJggy1vvorXEwonQhWXIC+brO7lkDB3zWelVNAti183ddH6FmJP8z4UDCJnJlioK4Q==
-
 yarn@^1.22.22:
   version "1.22.22"
   resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"