From 41e64c6bcf884971027530e18234059b6484034a Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 24 Apr 2024 15:38:22 -0300
Subject: [PATCH 01/48] widget-hugger: Make widget attributes reactive

---
 src/components/WidgetHugger.vue | 46 ++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index 58f9f9f11..f7667d2e6 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -66,7 +66,7 @@ const props = withDefaults(defineProps<Props>(), {
   hideOverflow: false,
 })
 
-const widget = toRefs(props).widget
+const { size, position, managerVars } = toRefs(props.widget)
 const allowMoving = toRefs(props).allowMoving
 const allowResizing = toRefs(props).allowResizing
 const outerWidgetRef = ref<HTMLElement | undefined>()
@@ -85,7 +85,7 @@ const hoveringWidgetOrOverlay = computed(() => hoveringOverlay.value || hovering
 
 // Put the widget into highlighted state when in edit-mode and hovering over it
 watch([hoveringWidgetOrOverlay, allowMoving], () => {
-  widget.value.managerVars.highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
+  managerVars.value.highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
 })
 
 const draggingWidget = ref(false)
@@ -103,7 +103,7 @@ const handleDragStart = (event: MouseEvent): void => {
   if (!allowMoving.value || isResizing.value || !outerWidgetRef.value) return
   draggingWidget.value = true
   initialMousePos.value = { x: event.clientX, y: event.clientY }
-  initialWidgetPos.value = widget.value.position
+  initialWidgetPos.value = position.value
   outerWidgetRef.value.style.cursor = 'grabbing'
   event.stopPropagation()
   event.preventDefault()
@@ -114,8 +114,8 @@ const handleResizeStart = (event: MouseEvent): void => {
   isResizing.value = true
   resizeHandle.value = event.target
   initialMousePos.value = { x: event.clientX, y: event.clientY }
-  initialWidgetPos.value = widget.value.position
-  initialWidgetSize.value = widget.value.size
+  initialWidgetPos.value = position.value
+  initialWidgetSize.value = size.value
   event.stopPropagation()
   event.preventDefault()
 }
@@ -126,9 +126,9 @@ const handleDrag = (event: MouseEvent): void => {
   const dx = (event.clientX - initialMousePos.value.x) / viewSize.value.width
   const dy = (event.clientY - initialMousePos.value.y) / viewSize.value.height
 
-  widget.value.position = {
-    x: constrain(initialWidgetPos.value.x + dx, 0, 1 - widget.value.size.width),
-    y: constrain(initialWidgetPos.value.y + dy, 0, 1 - widget.value.size.height),
+  position.value = {
+    x: constrain(initialWidgetPos.value.x + dx, 0, 1 - size.value.width),
+    y: constrain(initialWidgetPos.value.y + dy, 0, 1 - size.value.height),
   }
 }
 
@@ -171,11 +171,11 @@ const handleResize = (event: MouseEvent): void => {
     newHeight += dy
   }
 
-  widget.value.position = {
-    x: constrain(newLeft, 0, 1 - widget.value.size.width),
-    y: constrain(newTop, 0, 1 - widget.value.size.height),
+  position.value = {
+    x: constrain(newLeft, 0, 1 - size.value.width),
+    y: constrain(newTop, 0, 1 - size.value.height),
   }
-  widget.value.size = {
+  size.value = {
     width: constrain(newWidth, 0.01, 1),
     height: constrain(newHeight, 0.01, 1),
   }
@@ -197,11 +197,11 @@ const resizeWidgetToMinimalSize = (): void => {
   if (innerWidgetRef.value === undefined) return
   const { clientHeight, clientWidth, scrollWidth, scrollHeight } = innerWidgetRef.value
   if (scrollWidth > 1.05 * clientWidth) {
-    widget.value.size.width = (1.1 * scrollWidth) / windowWidth.value
+    size.value.width = (1.1 * scrollWidth) / windowWidth.value
     stillAutoResizing = true
   }
   if (scrollHeight > 1.05 * clientHeight) {
-    widget.value.size.height = (1.1 * scrollHeight) / windowHeight.value
+    size.value.height = (1.1 * scrollHeight) / windowHeight.value
     stillAutoResizing = true
   }
 
@@ -209,11 +209,11 @@ const resizeWidgetToMinimalSize = (): void => {
 }
 
 onMounted(async () => {
-  if (widget.value.managerVars.timesMounted === 0) {
+  if (managerVars.value.timesMounted === 0) {
     resizeWidgetToMinimalSize()
   }
   makeWidgetRespectWalls()
-  widget.value.managerVars.timesMounted += 1
+  managerVars.value.timesMounted += 1
 
   if (widgetResizeHandles.value) {
     for (let i = 0; i < widgetResizeHandles.value.length; i++) {
@@ -248,24 +248,24 @@ const outerBounds = useElementBounding(outerWidgetRef)
 const makeWidgetRespectWalls = (): void => {
   for (const bound of [outerBounds.left.value, outerBounds.right.value]) {
     if (bound < 0 || bound > windowWidth.value) {
-      widget.value.position.x = 1 - widget.value.size.width
+      position.value.x = 1 - size.value.width
     }
   }
   for (const bound of [outerBounds.top.value, outerBounds.bottom.value]) {
     if (bound < 0 || bound > windowHeight.value) {
-      widget.value.position.y = 1 - widget.value.size.height
+      position.value.y = 1 - size.value.height
     }
   }
 }
 
 const sizeStyle = computed(() => ({
-  width: `${100 * widget.value.size.width}%`,
-  height: `${100 * widget.value.size.height}%`,
+  width: `${100 * size.value.width}%`,
+  height: `${100 * size.value.height}%`,
 }))
 
 const positionStyle = computed(() => ({
-  left: `${100 * widget.value.position.x}%`,
-  top: `${100 * widget.value.position.y}%`,
+  left: `${100 * position.value.x}%`,
+  top: `${100 * position.value.y}%`,
 }))
 
 const overlayDisplayStyle = computed(() => {
@@ -288,7 +288,7 @@ const cursorStyle = computed(() => {
 
 const devInfoBlurLevel = computed(() => `${devStore.widgetDevInfoBlurLevel}px`)
 
-const highlighted = computed(() => widget.value.managerVars.highlighted)
+const highlighted = computed(() => managerVars.value.highlighted)
 </script>
 
 <style>

From 28053138a6eac38497dbe6962237447317afc29c Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 24 Apr 2024 15:38:22 -0300
Subject: [PATCH 02/48] widget-hugger: Remove `makeWidgetRespectWalls` function

It is not needed in the new context.
---
 src/components/WidgetHugger.vue | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index f7667d2e6..75ceb1503 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { useElementBounding, useElementHover, useWindowSize } from '@vueuse/core'
+import { useElementHover, useWindowSize } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 
 import { constrain, round } from '@/libs/utils'
@@ -212,7 +212,6 @@ onMounted(async () => {
   if (managerVars.value.timesMounted === 0) {
     resizeWidgetToMinimalSize()
   }
-  makeWidgetRespectWalls()
   managerVars.value.timesMounted += 1
 
   if (widgetResizeHandles.value) {
@@ -243,21 +242,6 @@ watch(allowMoving, (isAllowing, wasAllowing) => {
   }
 })
 
-const outerBounds = useElementBounding(outerWidgetRef)
-
-const makeWidgetRespectWalls = (): void => {
-  for (const bound of [outerBounds.left.value, outerBounds.right.value]) {
-    if (bound < 0 || bound > windowWidth.value) {
-      position.value.x = 1 - size.value.width
-    }
-  }
-  for (const bound of [outerBounds.top.value, outerBounds.bottom.value]) {
-    if (bound < 0 || bound > windowHeight.value) {
-      position.value.y = 1 - size.value.height
-    }
-  }
-}
-
 const sizeStyle = computed(() => ({
   width: `${100 * size.value.width}%`,
   height: `${100 * size.value.height}%`,

From fb293f1dd691e9fa261ae2c9a94cafe77ade6b09 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 24 Apr 2024 15:51:00 -0300
Subject: [PATCH 03/48] widget-manager: Expose widget clearance from both
 bottom and top bar

---
 src/components/widgets/Map.vue |  4 +++-
 src/stores/widgetManager.ts    | 22 ++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/widgets/Map.vue b/src/components/widgets/Map.vue
index ce970c4fa..c8d3cb221 100644
--- a/src/components/widgets/Map.vue
+++ b/src/components/widgets/Map.vue
@@ -503,7 +503,9 @@ const executeMissionOnVehicle = (): void => {
 
 // Set dynamic styles for correct displacement of the bottom buttons when the widget is below the bottom bar
 const widgetStore = useWidgetManagerStore()
-const bottomButtonsDisplacement = computed(() => `${widgetStore.widgetBottomClearanceForVisibleArea(widget.value)}px`)
+const bottomButtonsDisplacement = computed(() => {
+  return `${Math.max(-widgetStore.widgetClearanceForVisibleArea(widget.value).bottom, 0)}px`
+})
 </script>
 
 <style>
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index feb082fe2..963aaf41b 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -122,14 +122,24 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
 
   /**
    * Gets whether or not the widget is on the active view
-   * @returns { number } The bottom clearance, in pixels, a widget should add on it's content to ensure they are not under the bottom bar
+   * @returns { { top: number, bottom: number } } The top and bottom clearances, in pixels, a widget should add on it's content to ensure they are not under the top/bottom bar.
+   * Positive clearances mean the widget is already under the bar, while negative clearances mean the widget is that amount away from the bar.
    * @param { Widget } widget - Widget
    */
-  const widgetBottomClearanceForVisibleArea = (widget: Widget): number => {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const widgetClearanceForVisibleArea = (widget: Widget): { top: number; bottom: number } => {
+    const clearances = { top: 0, bottom: 0 }
     const { height: windowHeight } = useWindowSize()
-    const bottomEdgeHeightPixels = windowHeight.value * (1 - widget.position.y - widget.size.height)
-    if (bottomEdgeHeightPixels > currentBottomBarHeightPixels.value) return 0
-    return currentBottomBarHeightPixels.value - bottomEdgeHeightPixels
+
+    const widgetTopEdgePixels = windowHeight.value * widget.position.y
+    const topBarStartPixels = currentTopBarHeightPixels.value
+    clearances.top = widgetTopEdgePixels - topBarStartPixels
+
+    const widgetBottomEdgePixels = windowHeight.value * (widget.position.y + widget.size.height)
+    const bottomBarStartPixels = windowHeight.value - currentBottomBarHeightPixels.value
+    clearances.bottom = bottomBarStartPixels - widgetBottomEdgePixels
+
+    return clearances
   }
 
   /**
@@ -651,7 +661,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     exportProfilesToVehicle,
     loadDefaultProfileForVehicle,
     isWidgetVisible,
-    widgetBottomClearanceForVisibleArea,
+    widgetClearanceForVisibleArea,
     isRealMiniWidget,
     desiredTopBarHeightPixels,
     desiredBottomBarHeightPixels,

From 1b77c3d972814ced9d3366fa1107e966b36f6ab0 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 24 Apr 2024 19:58:24 -0300
Subject: [PATCH 04/48] widget-manager: Disallow widgets from getting too close
 or under the top and bottom bars

The widgets can still be maximized to full-screen as usual.
---
 src/components/WidgetHugger.vue | 27 +++++++++++++++++++++++++--
 src/stores/widgetManager.ts     |  2 ++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index 75ceb1503..1aefe1ff5 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -35,6 +35,7 @@ import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 
 import { constrain, round } from '@/libs/utils'
 import { useDevelopmentStore } from '@/stores/development'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Point2D } from '@/types/general'
 import type { Widget } from '@/types/widgets'
 
@@ -66,6 +67,7 @@ const props = withDefaults(defineProps<Props>(), {
   hideOverflow: false,
 })
 
+const widget = toRefs(props).widget
 const { size, position, managerVars } = toRefs(props.widget)
 const allowMoving = toRefs(props).allowMoving
 const allowResizing = toRefs(props).allowResizing
@@ -242,14 +244,35 @@ watch(allowMoving, (isAllowing, wasAllowing) => {
   }
 })
 
+const widgetStore = useWidgetManagerStore()
+const temporaryPosition = computed(() => {
+  let tempPos = { x: position.value.x, y: position.value.y }
+  const clearanceOffset = widgetStore.visibleAreaMinClearancePixels
+
+  const barClearances = widgetStore.widgetClearanceForVisibleArea(widget.value)
+
+  // If the widget is under both bars, dont touch it, as it could be full screened by purpose, and if we apply the rules below, it will keep jumping
+  if (barClearances.top < clearanceOffset && barClearances.bottom < clearanceOffset) return tempPos
+
+  // If the widget is partially under the top or bottom bar, move it so that it gets fully visible
+  if (barClearances.top < clearanceOffset) {
+    tempPos.y = (widgetStore.currentTopBarHeightPixels + clearanceOffset) / windowHeight.value
+  } else if (barClearances.bottom < clearanceOffset) {
+    const maxBottomEdgePosition = (widgetStore.currentBottomBarHeightPixels + clearanceOffset) / windowHeight.value
+    tempPos.y = 1 - maxBottomEdgePosition - size.value.height
+  }
+
+  return tempPos
+})
+
 const sizeStyle = computed(() => ({
   width: `${100 * size.value.width}%`,
   height: `${100 * size.value.height}%`,
 }))
 
 const positionStyle = computed(() => ({
-  left: `${100 * position.value.x}%`,
-  top: `${100 * position.value.y}%`,
+  left: `${100 * temporaryPosition.value.x}%`,
+  top: `${100 * temporaryPosition.value.y}%`,
 }))
 
 const overlayDisplayStyle = computed(() => {
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index 963aaf41b..f4f4048ca 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -38,6 +38,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const currentProfileIndex = useStorage('cockpit-current-profile-index', 0)
   const desiredTopBarHeightPixels = ref(48)
   const desiredBottomBarHeightPixels = ref(48)
+  const visibleAreaMinClearancePixels = ref(20)
   const vehicleTypeProfileCorrespondency = useStorage<typeof defaultProfileVehicleCorrespondency>(
     'cockpit-default-vehicle-type-profiles',
     defaultProfileVehicleCorrespondency
@@ -665,6 +666,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     isRealMiniWidget,
     desiredTopBarHeightPixels,
     desiredBottomBarHeightPixels,
+    visibleAreaMinClearancePixels,
     currentTopBarHeightPixels,
     currentBottomBarHeightPixels,
   }

From 76c4601ff069a6d956a1057f2c78c45277a6c788 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 6 Jun 2024 11:03:38 -0300
Subject: [PATCH 05/48] widgets: Get grid snapping back

---
 src/components/EditMenu.vue     | 20 +++++++++++++++++++-
 src/components/SnappingGrid.vue |  9 +++++----
 src/components/WidgetHugger.vue |  6 ++++++
 src/stores/widgetManager.ts     |  4 ++--
 src/views/WidgetsView.vue       |  8 ++------
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index 155a4670c..8320c586c 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -8,7 +8,13 @@
       class="absolute text-2xl transition-all cursor-pointer text-slate-500 aspect-square mdi mdi-close hover:text-slate-300 left-2 top-2"
       @click="emit('update:editMode', false)"
     />
-    <p class="flex items-center justify-center mt-10 text-xl font-semibold select-none">Edit interface</p>
+    <div class="flex items-center justify-center mt-10 text-xl font-semibold select-none">
+      <p>Edit interface</p>
+      <div
+        class="absolute !bg-slate-600 right-2 icon-btn mdi mdi-dots-vertical"
+        @click.stop="editMenuDialogRevealed = true"
+      />
+    </div>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
     <div class="flex flex-col items-center justify-center w-full px-2 shrink overflow-y-clip h-[35%]">
       <p class="mb-3 text-lg font-semibold select-none">Profiles</p>
@@ -282,6 +288,15 @@
       </v-card>
     </v-dialog>
   </teleport>
+  <teleport to="body">
+    <v-dialog v-model="editMenuDialogRevealed" width="20rem">
+      <v-card class="pa-2">
+        <v-card-text>
+          <v-switch v-model="store.snapToGrid" label="Snap to grid" class="m-2 text-slate-800" />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -339,6 +354,9 @@ const widgetAddMenuGroupOptions = {
 
 const editMode = toRefs(props).editMode
 
+const editMenuDialogRevealed = ref(false)
+useConfirmDialog(editMenuDialogRevealed)
+
 const viewBeingRenamed = ref(store.currentView)
 const newViewName = ref('')
 const viewRenameDialogRevealed = ref(false)
diff --git a/src/components/SnappingGrid.vue b/src/components/SnappingGrid.vue
index 71b14ccb0..952ba0a41 100644
--- a/src/components/SnappingGrid.vue
+++ b/src/components/SnappingGrid.vue
@@ -20,6 +20,7 @@ const gridIntervalStyleY = computed(() => `${windowHeight.value * props.gridInte
 
 <style scoped>
 .grid {
+  --grid-color: #b0b0b089;
   position: absolute;
   height: 100%;
   width: 100%;
@@ -27,15 +28,15 @@ const gridIntervalStyleY = computed(() => `${windowHeight.value * props.gridInte
       0deg,
       transparent,
       transparent calc(v-bind('gridIntervalStyleY') - 1px),
-      #88f calc(v-bind('gridIntervalStyleY') - 1px),
-      #88f v-bind('gridIntervalStyleY')
+      var(--grid-color) calc(v-bind('gridIntervalStyleY') - 1px),
+      var(--grid-color) v-bind('gridIntervalStyleY')
     ),
     repeating-linear-gradient(
       -90deg,
       transparent,
       transparent calc(v-bind('gridIntervalStyleX') - 1px),
-      #88f calc(v-bind('gridIntervalStyleX') - 1px),
-      #88f v-bind('gridIntervalStyleX')
+      var(--grid-color) calc(v-bind('gridIntervalStyleX') - 1px),
+      var(--grid-color) v-bind('gridIntervalStyleX')
     );
   background-size: v-bind('gridIntervalStyleX') v-bind('gridIntervalStyleY');
   background-repeat: repeat;
diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
index 1aefe1ff5..b75c1ae00 100644
--- a/src/components/WidgetHugger.vue
+++ b/src/components/WidgetHugger.vue
@@ -262,6 +262,12 @@ const temporaryPosition = computed(() => {
     tempPos.y = 1 - maxBottomEdgePosition - size.value.height
   }
 
+  // Use grid to snap to grid
+  if (widgetStore.snapToGrid) {
+    tempPos.x = Math.round(tempPos.x / widgetStore.gridInterval) * widgetStore.gridInterval
+    tempPos.y = Math.round(tempPos.y / widgetStore.gridInterval) * widgetStore.gridInterval
+  }
+
   return tempPos
 })
 
diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
index f4f4048ca..a4ab95979 100644
--- a/src/stores/widgetManager.ts
+++ b/src/stores/widgetManager.ts
@@ -30,7 +30,7 @@ const savedProfilesKey = 'cockpit-saved-profiles-v8'
 export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const vehicleStore = useMainVehicleStore()
   const editingMode = ref(false)
-  const showGrid = ref(true)
+  const snapToGrid = ref(true)
   const gridInterval = ref(0.01)
   const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v4', miniWidgetsProfile)
   const savedProfiles = useStorage<Profile[]>(savedProfilesKey, [])
@@ -628,7 +628,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
 
   return {
     editingMode,
-    showGrid,
+    snapToGrid,
     gridInterval,
     currentProfile,
     currentView,
diff --git a/src/views/WidgetsView.vue b/src/views/WidgetsView.vue
index 7824bb7fe..e03897c4a 100644
--- a/src/views/WidgetsView.vue
+++ b/src/views/WidgetsView.vue
@@ -1,7 +1,8 @@
 <template>
-  <SnappingGrid v-if="store.showGrid && store.editingMode" :grid-interval="store.gridInterval" class="snapping-grid" />
   <div class="widgets-view">
     <div v-for="view in store.viewsToShow" :key="view.hash" class="widget-view">
+      <div class="w-full h-full bg-slate-500" />
+      <SnappingGrid v-if="store.snapToGrid && store.editingMode" :grid-interval="store.gridInterval" />
       <template v-for="widget in view.widgets.slice().reverse()" :key="widget.hash">
         <WidgetHugger
           v-if="Object.values(WidgetType).includes(widget.component)"
@@ -12,7 +13,6 @@
           <component :is="componentFromType(widget.component)" :widget="widget" />
         </WidgetHugger>
       </template>
-      <div class="w-full h-full bg-slate-500" />
     </div>
   </div>
 </template>
@@ -49,9 +49,6 @@ const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
   justify-content: center;
   position: relative;
 }
-.snapping-grid {
-  z-index: 40;
-}
 .widget-view {
   position: absolute;
   width: 100%;
@@ -61,6 +58,5 @@ const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
   align-items: center;
   justify-content: center;
   background-color: rgb(122, 25, 25);
-  z-index: 50;
 }
 </style>

From 64e5084fc12ca47445959cb1c8f439591a227c48 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 4 Jun 2024 18:07:49 -0300
Subject: [PATCH 06/48] ardupilot: Populate array of available generic
 variables with the `NAMED_VALUE_FLOATs`

---
 src/libs/vehicle/ardupilot/ardupilot.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index fedd3d441..58acf793f 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -456,6 +456,9 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
       case MAVLinkType.NAMED_VALUE_FLOAT: {
         const namedValueFloatMessage = mavlink_message.message as Message.NamedValueFloat
         const messageName = namedValueFloatMessage.name.join('').replaceAll('\x00', '')
+        if (!this._availableGenericVariablesdMessagePaths.includes(messageName)) {
+          this._availableGenericVariablesdMessagePaths.push(messageName)
+        }
         this._genericVariables[messageName] = namedValueFloatMessage.value
         this.onGenericVariables.emit()
         break

From 240ba64ce302cde24d18cf989518c92fd5183cde Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 10 Jun 2024 13:59:04 -0300
Subject: [PATCH 07/48] video: Show proper error when failing to process video

---
 src/components/VideoLibraryModal.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 5e99ac9fd..b0b4280d7 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -630,11 +630,9 @@ const processVideos = async (): Promise<void> => {
     isMultipleSelectionMode.value = false
     await fetchVideosAndLogData()
   } catch (error) {
-    if (error instanceof Error) {
-      console.error('Video processing failed:', error.message)
-    } else {
-      console.error('Processing failed with non-Error type:', error)
-    }
+    const errorMsg = `Video processing failed: ${(error as Error).message ?? error!.toString()}`
+    console.error(errorMsg)
+    snackbarMessage.value = errorMsg
     openSnackbar.value = true
     errorProcessingVideos.value = true
   }
@@ -771,7 +769,7 @@ const openDownloadInfoDialog = (): void => {
       ? 'You are downloading both processed and unprocessed videos'
       : 'You are downloading unprocessed video chunks',
     message: hasProcessedVideos
-      ? `One of the .zip files contains unprocessed video chunks, which are not playable. 
+      ? `One of the .zip files contains unprocessed video chunks, which are not playable.
       For a playable video, you need to process it first.`
       : 'For a playable video, you need to process it first.',
     variant: 'info',

From 00b01616e87a66f426062919a3bd16544a543eb8 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 10 Jun 2024 14:10:32 -0300
Subject: [PATCH 08/48] video: Remove unused `v-on` directive

This raises an warning everytime the modal is open.
---
 src/components/VideoLibraryModal.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index b0b4280d7..6222ba564 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -325,11 +325,7 @@
                       transition="slide-x-reverse-transition"
                     >
                       <template #activator="{ props: buttonProps, isActive }">
-                        <div
-                          class="flex items-center justify-center w-full h-full"
-                          v-bind="buttonProps"
-                          v-on="isActive"
-                        >
+                        <div class="flex items-center justify-center w-full h-full" v-bind="buttonProps">
                           <v-icon
                             :size="button.size"
                             :class="{ 'rotate-[-45deg]': isActive, 'outline outline-6 outline-[#ffffff55]': isActive }"

From b7e9f1aaeabbb5e36a085dc72ea2a1b981ef2c63 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 10 Jun 2024 14:16:37 -0300
Subject: [PATCH 09/48] interaction-dialog: Fix default props definition

With the former implementation, Vue warns about "no value for" props that were not passed.
---
 src/components/InteractionDialog.vue | 39 ++++++++++++++--------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index 251028369..6f9513175 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -73,26 +73,25 @@ interface Action {
   action: () => void
 }
 
-const props = withDefaults(
-  defineProps<{
-    showDialog: boolean
-    title: string
-    contentComponent: string
-    maxWidth: number
-    actions: Action[]
-    variant: string
-    message: string
-  }>(),
-  {
-    showDialog: false,
-    title: '',
-    contentComponent: '',
-    maxWidth: 600,
-    actions: () => [],
-    variant: '',
-    message: '',
-  }
-)
+interface Props {
+  showDialog?: boolean
+  title?: string
+  contentComponent?: string
+  maxWidth?: number
+  actions?: Action[]
+  variant?: string
+  message?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showDialog: false,
+  title: '',
+  contentComponent: '',
+  maxWidth: 600,
+  actions: () => [],
+  variant: '',
+  message: '',
+})
 
 const emit = defineEmits(['update:showDialog'])
 

From c69cf59483c484a59d821c4169fa77785389203f Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 10 Jun 2024 15:41:36 -0300
Subject: [PATCH 10/48] video: Proceed with video processing when duration fix
 fails

Just warn the user in that case.
---
 src/stores/video.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 0418c4958..177d0d72b 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -469,12 +469,21 @@ export const useVideoStore = defineStore('video', () => {
 
       const chunkBlobs = chunks.map((chunk) => chunk.blob)
       debouncedUpdateFileProgress(info.fileName, 50, 'Processing video chunks.')
-      const durFixedBlob = await fixWebmDuration(new Blob([...chunkBlobs], { type: 'video/webm;codecs=vp9' }))
+
+      const mergedBlob = new Blob([...chunkBlobs], { type: 'video/webm;codecs=vp9' })
+
+      let durFixedBlob: Blob | undefined = undefined
+      try {
+        durFixedBlob = await fixWebmDuration(mergedBlob)
+      } catch {
+        const errorMsg = 'Failed to fix video duration. The processed video may present issues or be unplayable.'
+        showDialog({ title: 'Video Processing Issue', message: errorMsg, variant: 'error' })
+      }
 
       updateLastProcessingUpdate(hash)
 
       debouncedUpdateFileProgress(info.fileName, 75, `Saving video file.`)
-      await videoStoringDB.setItem(`${info.fileName}.webm`, durFixedBlob)
+      await videoStoringDB.setItem(`${info.fileName}.webm`, durFixedBlob ?? mergedBlob)
 
       updateLastProcessingUpdate(hash)
 

From c7ce14e756f94ad7de3a7e8ceeb73e5d33e22305 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 10 Jun 2024 16:32:36 -0300
Subject: [PATCH 11/48] video: Warn user when failling to save recorded chunk

---
 src/stores/video.ts | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 177d0d72b..c0866c5a2 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -10,6 +10,7 @@ import { computed, ref, watch } from 'vue'
 import fixWebmDuration from 'webm-duration-fix'
 import adapter from 'webrtc-adapter'
 
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import { WebRTCManager } from '@/composables/webRTC'
 import { getIpsInformationFromVehicle } from '@/libs/blueos'
 import { availableCockpitActions, registerActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
@@ -25,6 +26,7 @@ import { useAlertStore } from './alert'
 export const useVideoStore = defineStore('video', () => {
   const missionStore = useMissionStore()
   const alertStore = useAlertStore()
+  const { showDialog } = useInteractionDialog()
 
   const { globalAddress, rtcConfiguration, webRTCSignallingURI } = useMainVehicleStore()
   console.debug('[WebRTC] Using webrtc-adapter for', adapter.browserDetails)
@@ -252,6 +254,21 @@ export const useVideoStore = defineStore('video', () => {
     unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: videoInfo } }
 
     activeStreams.value[streamName]!.mediaRecorder!.start(1000)
+
+    let losingChunksWarningIssued = false
+
+    const warnAboutChunkLoss = (): void => {
+      const chunkLossWarningMsg = `A part of your video recording could not be saved.
+        This usually happens when the device's storage is full or the performance is low.
+        We recommend stopping the recording and trying again, as the video may be incomplete or corrupted
+        on several parts.`
+
+      console.error(chunkLossWarningMsg)
+      showDialog({ title: 'Video Recording Issue', message: chunkLossWarningMsg, variant: 'error' })
+
+      losingChunksWarningIssued = true
+    }
+
     let chunksCount = -1
     activeStreams.value[streamName]!.mediaRecorder!.ondataavailable = async (e) => {
       // Since this operation is async, at any given moment there might be more than one chunk processing promise started.
@@ -259,7 +276,14 @@ export const useVideoStore = defineStore('video', () => {
       // update the chunk count/name before anything else.
       chunksCount++
       const chunkName = `${recordingHash}_${chunksCount}`
-      await tempVideoChunksDB.setItem(chunkName, e.data)
+
+      try {
+        await tempVideoChunksDB.setItem(chunkName, e.data)
+      } catch {
+        if (!losingChunksWarningIssued) warnAboutChunkLoss()
+        return
+      }
+
       const updatedInfo = unprocessedVideos.value[recordingHash]
       updatedInfo.dateLastRecordingUpdate = new Date()
       unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: updatedInfo } }

From 80decb76d437ad036b1d733939b912ca23819413 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 10 Jun 2024 19:33:10 -0300
Subject: [PATCH 12/48] video: Warn user when chunk has not finished recording
 after 5 seconds

---
 src/stores/video.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index c0866c5a2..258515d55 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -256,6 +256,7 @@ export const useVideoStore = defineStore('video', () => {
     activeStreams.value[streamName]!.mediaRecorder!.start(1000)
 
     let losingChunksWarningIssued = false
+    const unsavedChunkAlerts: { [key in string]: ReturnType<typeof setTimeout> } = {}
 
     const warnAboutChunkLoss = (): void => {
       const chunkLossWarningMsg = `A part of your video recording could not be saved.
@@ -267,6 +268,10 @@ export const useVideoStore = defineStore('video', () => {
       showDialog({ title: 'Video Recording Issue', message: chunkLossWarningMsg, variant: 'error' })
 
       losingChunksWarningIssued = true
+      Object.keys(unsavedChunkAlerts).forEach((key) => {
+        clearTimeout(unsavedChunkAlerts[key])
+        delete unsavedChunkAlerts[key]
+      })
     }
 
     let chunksCount = -1
@@ -276,6 +281,9 @@ export const useVideoStore = defineStore('video', () => {
       // update the chunk count/name before anything else.
       chunksCount++
       const chunkName = `${recordingHash}_${chunksCount}`
+      if (!losingChunksWarningIssued) {
+        unsavedChunkAlerts[chunkName] = setTimeout(() => warnAboutChunkLoss(), 5000)
+      }
 
       try {
         await tempVideoChunksDB.setItem(chunkName, e.data)
@@ -302,6 +310,10 @@ export const useVideoStore = defineStore('video', () => {
           console.error('Failed to extract thumbnail:', error)
         }
       }
+
+      // If the chunk was saved, remove it from the unsaved list
+      clearTimeout(unsavedChunkAlerts[chunkName])
+      delete unsavedChunkAlerts[chunkName]
     }
 
     activeStreams.value[streamName]!.mediaRecorder!.onstop = async () => {

From 24df00be2be2df40d7116fa68d4821bb539e0038 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 12 Jun 2024 15:57:51 -0300
Subject: [PATCH 13/48] mini-video-recorder: Simplify code that calculates
 number of available videos

---
 src/components/mini-widgets/MiniVideoRecorder.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index b33043ee2..df6c1514b 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -147,12 +147,9 @@ const handleModalUpdate = (newVal: boolean): void => {
 
 // Fetch number of temporary videos on storage
 const fetchNumebrOfTempVideos = async (): Promise<void> => {
-  let numberOfVideos = 0
-  await videoStore.videoStoringDB.iterate((value, key) => {
-    key.endsWith('.webm') && numberOfVideos++
-  })
-  Object.values(videoStore.keysFailedUnprocessedVideos).forEach(() => numberOfVideos++)
-  numberOfVideosOnDB.value = numberOfVideos
+  const nProcessedVideos = (await videoStore.videoStoringDB.keys()).filter((k) => k.endsWith('.webm')).length
+  const nFailedUnprocessedVideos = Object.keys(videoStore.keysFailedUnprocessedVideos).length
+  numberOfVideosOnDB.value = nProcessedVideos + nFailedUnprocessedVideos
 }
 
 // eslint-disable-next-line jsdoc/require-jsdoc

From 45a133179858dabe8b0bd9576acb514de1687b84 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 12 Jun 2024 16:10:41 -0300
Subject: [PATCH 14/48] video-library-modal: Improve parts of the codebase

---
 src/components/VideoLibraryModal.vue | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 6222ba564..1c295f421 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -796,7 +796,7 @@ const discardVideosAndUpdateDB = async (): Promise<void> => {
   snackbarMessage.value = `${selectedVideoArraySize} video(s) discarded.`
   openSnackbar.value = true
   await fetchVideosAndLogData()
-  availableVideos.value.length > 0 ? (selectedVideos.value = [availableVideos.value[0]]) : (selectedVideos.value = [])
+  selectedVideos.value = availableVideos.value.length > 0 ? [availableVideos.value[0]] : []
   if (availableVideos.value.length === 1) isMultipleSelectionMode.value = false
   deleteButtonLoading.value = false
 }
@@ -847,18 +847,7 @@ const fetchVideosAndLogData = async (): Promise<void> => {
   // Fetch unprocessed videos
   const unprocessedVideos = await videoStore.unprocessedVideos
   const unprocessedVideoOperations = Object.entries(unprocessedVideos).map(async ([hash, videoInfo]) => {
-    return {
-      dateStart: videoInfo.dateStart,
-      dateLastRecordingUpdate: videoInfo.dateLastRecordingUpdate,
-      dateFinish: videoInfo.dateFinish,
-      fileName: videoInfo.fileName,
-      vWidth: videoInfo.vWidth,
-      vHeight: videoInfo.vHeight,
-      hash: hash,
-      thumbnail: videoInfo.thumbnail,
-      url: '',
-      isProcessed: false,
-    }
+    return { ...videoInfo, ...{ hash: hash, url: '', isProcessed: false } }
   })
 
   const videos = await Promise.all(videoFilesOperations)

From f279d6bdeaad048e1c296e5773c930cd8e2b9f37 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 12 Jun 2024 16:32:14 -0300
Subject: [PATCH 15/48] video-library-modal: Also show videos that failed to be
 stopped

For example, videos that were being recorded and the user refreshed Cockpit, or the computer shut down during the recording.
---
 src/components/VideoLibraryModal.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index 1c295f421..be708ae9a 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -853,8 +853,11 @@ const fetchVideosAndLogData = async (): Promise<void> => {
   const videos = await Promise.all(videoFilesOperations)
   const logFiles = await Promise.all(logFileOperations)
   const unprocessedVideosData = await Promise.all(unprocessedVideoOperations)
-  // Filter videos that are currently being recorded
-  const validUnprocessedVideos = unprocessedVideosData.filter((video) => video.dateFinish)
+
+  // Filter out videos that are currently being recorded
+  const validUnprocessedVideos = unprocessedVideosData.filter((video) => {
+    return video.dateFinish || videoStore.keysFailedUnprocessedVideos.includes(video.hash)
+  })
 
   availableVideos.value = [...videos, ...validUnprocessedVideos]
   availableLogFiles.value = logFiles

From 9057d5b2709d3f0c38918a8b94484d1620304d14 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 13 Jun 2024 09:22:47 -0300
Subject: [PATCH 16/48] video: Create the video zip file asynchronously

This makes a huge difference when downloading multiple videos.
---
 src/stores/video.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 258515d55..6373e375b 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -346,9 +346,8 @@ export const useVideoStore = defineStore('video', () => {
 
   const createZipAndDownload = async (files: FileDescriptor[], zipFilename: string): Promise<void> => {
     const zipWriter = new ZipWriter(new BlobWriter('application/zip'))
-    for (const { filename, blob } of files) {
-      await zipWriter.add(filename, new BlobReader(blob))
-    }
+    const zipAddingPromises = files.map(({ filename, blob }) => zipWriter.add(filename, new BlobReader(blob)))
+    Promise.all(zipAddingPromises)
     const blob = await zipWriter.close()
     saveAs(blob, zipFilename)
   }

From 0ad3a28eafe1377b51b20e0c1de5ea379ff04c42 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 13 Jun 2024 12:52:07 -0300
Subject: [PATCH 17/48] video: Set zip compression level to zero, so it just
 merge the files without compression

This reduces the compression time of a 22min/1.1GB video from 36s to 11s.

The final zip file size is basically the same, as the video is already compressed (WEBM).
---
 src/stores/video.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 6373e375b..2dbd444f8 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -345,7 +345,7 @@ export const useVideoStore = defineStore('video', () => {
   }
 
   const createZipAndDownload = async (files: FileDescriptor[], zipFilename: string): Promise<void> => {
-    const zipWriter = new ZipWriter(new BlobWriter('application/zip'))
+    const zipWriter = new ZipWriter(new BlobWriter('application/zip'), { level: 0 })
     const zipAddingPromises = files.map(({ filename, blob }) => zipWriter.add(filename, new BlobReader(blob)))
     Promise.all(zipAddingPromises)
     const blob = await zipWriter.close()

From f50b89f2b03920817c0dd01af53c8f632f99fbd2 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Thu, 13 Jun 2024 15:03:58 -0300
Subject: [PATCH 18/48] video: Give feedback to user about time for the
 download to be ready

---
 src/components/VideoLibraryModal.vue | 15 +++++++++--
 src/stores/video.ts                  | 40 +++++++++++++++++++++-------
 src/types/video.ts                   |  2 ++
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index be708ae9a..e1d807d32 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -736,7 +736,18 @@ const addLogDataToFileList = (fileNames: string[]): string[] => {
 }
 
 const downloadVideoAndTelemetryFiles = async (): Promise<void> => {
+  let initialMessageShown = false
+
+  const fillProgressData = async (progress: number, total: number): Promise<void> => {
+    const progressPercentage = ((100 * progress) / total).toFixed(1)
+    if (!initialMessageShown) return
+    snackbarMessage.value = `Preparing download: ${progressPercentage}%.`
+    openSnackbar.value = true
+  }
+
   snackbarMessage.value = 'Getting your download ready...'
+  setTimeout(() => (initialMessageShown = true), 1500)
+
   let tempProcessedVideos: string[] = []
   let tempUnprocessedVideos: string[] = []
 
@@ -748,11 +759,11 @@ const downloadVideoAndTelemetryFiles = async (): Promise<void> => {
   if (tempProcessedVideos.length > 0) {
     const dataLogFilesAdded = addLogDataToFileList(tempProcessedVideos)
 
-    await videoStore.downloadFilesFromVideoDB(dataLogFilesAdded)
+    await videoStore.downloadFilesFromVideoDB(dataLogFilesAdded, fillProgressData)
   }
   if (tempUnprocessedVideos.length > 0) {
     openDownloadInfoDialog()
-    await videoStore.downloadTempVideo(tempUnprocessedVideos)
+    await videoStore.downloadTempVideo(tempUnprocessedVideos, fillProgressData)
   }
 }
 
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 2dbd444f8..8daab84df 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -19,7 +19,14 @@ import { isEqual } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import { Alert, AlertLevel } from '@/types/alert'
-import type { FileDescriptor, StorageDB, StreamData, UnprocessedVideoInfo, VideoProcessingDetails } from '@/types/video'
+import type {
+  DownloadProgressCallback,
+  FileDescriptor,
+  StorageDB,
+  StreamData,
+  UnprocessedVideoInfo,
+  VideoProcessingDetails,
+} from '@/types/video'
 
 import { useAlertStore } from './alert'
 
@@ -344,15 +351,26 @@ export const useVideoStore = defineStore('video', () => {
     }
   }
 
-  const createZipAndDownload = async (files: FileDescriptor[], zipFilename: string): Promise<void> => {
+  const createZipAndDownload = async (
+    files: FileDescriptor[],
+    zipFilename: string,
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
     const zipWriter = new ZipWriter(new BlobWriter('application/zip'), { level: 0 })
-    const zipAddingPromises = files.map(({ filename, blob }) => zipWriter.add(filename, new BlobReader(blob)))
+    const zipAddingPromises = files.map(({ filename, blob }) => {
+      zipWriter.add(filename, new BlobReader(blob), { onprogress: progressCallback })
+    })
     Promise.all(zipAddingPromises)
     const blob = await zipWriter.close()
     saveAs(blob, zipFilename)
   }
 
-  const downloadFiles = async (db: StorageDB, keys: string[], zipFilenamePrefix: string): Promise<void> => {
+  const downloadFiles = async (
+    db: StorageDB,
+    keys: string[],
+    zipFilenamePrefix: string,
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
     const maybeFiles = await Promise.all(
       keys.map(async (key) => ({
         blob: await db.getItem(key),
@@ -370,25 +388,29 @@ export const useVideoStore = defineStore('video', () => {
     if (files.length === 1) {
       saveAs(files[0].blob, files[0].filename)
     } else {
-      await createZipAndDownload(files, `${zipFilenamePrefix}.zip`)
+      await createZipAndDownload(files, `${zipFilenamePrefix}.zip`, progressCallback)
     }
   }
 
-  const downloadFilesFromVideoDB = async (fileNames: string[]): Promise<void> => {
+  const downloadFilesFromVideoDB = async (
+    fileNames: string[],
+    progressCallback?: DownloadProgressCallback
+  ): Promise<void> => {
     console.debug(`Downloading files from the video recovery database: ${fileNames.join(', ')}`)
     await downloadFiles(
       videoStoringDB,
       fileNames,
-      fileNames.length > 1 ? 'Cockpit-Video-Recordings' : 'Cockpit-Video-Recording'
+      fileNames.length > 1 ? 'Cockpit-Video-Recordings' : 'Cockpit-Video-Recording',
+      progressCallback
     )
   }
 
-  const downloadTempVideo = async (hashes: string[]): Promise<void> => {
+  const downloadTempVideo = async (hashes: string[], progressCallback?: DownloadProgressCallback): Promise<void> => {
     console.debug(`Downloading ${hashes.length} video chunks from the temporary database.`)
 
     for (const hash of hashes) {
       const fileNames = (await tempVideoChunksDB.keys()).filter((filename) => filename.includes(hash))
-      await downloadFiles(tempVideoChunksDB, fileNames, `Cockpit-Unprocessed-Video-Chunks-${hash}`)
+      await downloadFiles(tempVideoChunksDB, fileNames, `Cockpit-Unprocessed-Video-Chunks-${hash}`, progressCallback)
     }
   }
 
diff --git a/src/types/video.ts b/src/types/video.ts
index 586376dbd..5fbdfb9ab 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -111,3 +111,5 @@ export interface FileDescriptor {
 export interface StorageDB {
   getItem: (key: string) => Promise<Blob | null | undefined>
 }
+
+export type DownloadProgressCallback = (progress: number, total: number) => Promise<void>

From c1a55cd46c2dd18ab8f7782e8c78401245fd5dc5 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 4 Jun 2024 13:46:53 -0300
Subject: [PATCH 19/48] Store: Interface: Add responsivity logic and interface
 control store

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/stores/appInterface.ts | 39 ++++++++++++++++++++++++++++++++++++++
 tailwind.config.js         | 12 ++++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 src/stores/appInterface.ts

diff --git a/src/stores/appInterface.ts b/src/stores/appInterface.ts
new file mode 100644
index 000000000..3fbf19803
--- /dev/null
+++ b/src/stores/appInterface.ts
@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+export const useAppInterfaceStore = defineStore('responsive', {
+  state: () => ({
+    width: window.innerWidth,
+  }),
+  actions: {
+    updateWidth() {
+      this.width = window.innerWidth
+    },
+  },
+  getters: {
+    isXs: (state) => state.width < 720, // Extra small devices (5-6" mobile screens in landscape)
+    isSm: (state) => state.width >= 720 && state.width < 980, // Small devices (6-7" mobile screens in landscape)
+    isMd: (state) => state.width >= 980 && state.width < 1280, // Medium devices (7-10" tablets in landscape)
+    isLg: (state) => state.width >= 1280 && state.width < 1600, // Large devices (HD in landscape)
+    isXl: (state) => state.width >= 1600 && state.width < 1920, // Extra large devices (HD+ desktop/laptop screens in landscape)
+    is2xl: (state) => state.width >= 1920, // FullHD and above - Extra extra large devices
+    currentWindowBreakpoint: (state) => {
+      if (state.width < 720) return 'xs'
+      if (state.width >= 720 && state.width < 980) return 'sm'
+      if (state.width >= 980 && state.width < 1280) return 'md'
+      if (state.width >= 1280 && state.width < 1600) return 'lg'
+      if (state.width >= 1600 && state.width < 1920) return 'xl'
+      if (state.width >= 1920) return '2xl'
+    },
+    currentWindowSize: (state) => `${state.width} x ${window.innerHeight}`,
+    isOnSmallScreen: (state) => state.width < 1280,
+    isOnPhoneScreen: () => window.innerHeight < 600,
+    mainMenuWidth: (state) => {
+      if (state.width < 720) return 78
+      if (state.width >= 720 && state.width < 980) return 78
+      if (state.width >= 980 && state.width < 1280) return 95
+      if (state.width >= 1280 && state.width < 1600) return 102
+      if (state.width >= 1600 && state.width < 1920) return 121
+      return 130
+    },
+  },
+})
diff --git a/tailwind.config.js b/tailwind.config.js
index 9fb84e8c5..1a565e2c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,18 @@ module.exports = {
       colors: {
         critical: '#7F34CF',
       },
+      transitionProperty: {
+        height: 'height',
+        spacing: 'margin, padding',
+      },
+      screens: {
+        'xs': { max: '719px' }, // Extra small devices (5-6" mobile screens in landscape)
+        'sm': { min: '720px', max: '979px' }, // Small devices (6-7" mobile screens in landscape)
+        'md': { min: '980px', max: '1279px' }, // Medium devices (7-10" tablets in landscape)
+        'lg': { min: '1280px', max: '1599px' }, // Large devices (HD in landscape)
+        'xl': { min: '1600px', max: '1919px' }, // Extra large devices (HD+ desktop/laptop screens in landscape)
+        '2xl': { min: '1920px' }, // FullHD and above - Extra extra large devices
+      },
     },
   },
   plugins: [require('tailwind-scrollbar-hide'), require('flowbite/plugin')],

From 890e96b8782d064a1481754edfd4f029e2473abc Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 4 Jun 2024 13:48:02 -0300
Subject: [PATCH 20/48] Components: Glass-button: Add main button component for
 glass UI

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/GlassButton.vue | 156 +++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 src/components/GlassButton.vue

diff --git a/src/components/GlassButton.vue b/src/components/GlassButton.vue
new file mode 100644
index 000000000..21affe074
--- /dev/null
+++ b/src/components/GlassButton.vue
@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="flex flex-col items-center 2xl:gap-y-1 xl: gap-y-1 cursor-pointer"
+    :class="isUncontained ? 'mark-on-hover py-2 ' : undefined"
+  >
+    <button
+      :disabled="disabled"
+      class="flex items-center justify-center"
+      :class="[
+        isUncontained ? 'no-glass' : 'frosted-button',
+        selected ? 'frosted-button-selected' : '',
+        { 'frosted-button-disabled': disabled, 'rounded-full': isRound },
+        buttonClass,
+      ]"
+      :style="{ width: buttonStyle.width!.toString() + 'px', height: buttonStyle.height!.toString() + 'px' }"
+    >
+      <template v-if="tooltip">
+        <v-tooltip open-delay="600" activator="parent" location="top">
+          {{ tooltip }}
+        </v-tooltip>
+      </template>
+      <v-icon v-if="isRound || isUncontained" :size="iconSize" :class="iconClass" class="ml-[4%] mt-[2%]">
+        {{ icon }}
+      </v-icon>
+      <div v-else class="flex items-center justify-center w-full h-full">
+        <v-icon :size="iconSize" class="mr-2" :class="iconClass">
+          {{ icon }}
+        </v-icon>
+        <div class="text-white ml-2" :class="labelClass">
+          {{ label }}
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isRound || isUncontained"
+      class="flex justify-center align-center text-center text-white px-4 font-semibold 2xl:mt-2 xl:mt-1 lg:mt-0 md:mt-0 sm:-mt-1 mt-1"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  /**
+   * The text label displayed on the button (rectangular variant) or under the button (round).
+   */
+  label?: string
+  /**
+   * Additional Tailwind classes for the label.
+   */
+  labelClass?: string
+  /**
+   * The icon to display in the button (prepend on rectangular, centered on round).
+   */
+  icon?: string
+  /**
+   * Additional Tailwind classes for the icon.
+   */
+  iconClass?: string
+  /**
+   * The size of the icon.
+   */
+  iconSize?: number
+  /**
+   * Additional Tailwind classes for the button.
+   */
+  buttonClass?: string
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean
+  /**
+   * The tooltip text displayed on hover.
+   */
+  tooltip?: string
+  /**
+   * Visual feedback for the button when toggled selected.
+   */
+  selected?: boolean
+  /**
+   * The shape of the button.
+   */
+  variant?: 'round' | 'rectangular' | 'uncontained'
+  /**
+   * The width of the button (when round, this is the only size nedded).
+   */
+  width?: number
+  /**
+   * The height of the button.
+   */
+  height?: number
+}>()
+
+const label = computed(() => props.label)
+const icon = computed(() => props.icon)
+const disabled = computed(() => props.disabled)
+const tooltip = computed(() => props.tooltip)
+const selected = computed(() => props.selected)
+const isRound = computed(() => props.variant === 'round')
+const isUncontained = computed(() => props.variant === 'uncontained')
+const iconSize = computed(() => (isRound.value ? (props.width || 26) * 0.6 : props.iconSize))
+
+const buttonStyle = computed(() => ({
+  width: props.width || 40,
+  height: isRound.value ? props.width : props.height || 40,
+}))
+</script>
+
+<style scoped>
+.frosted-button {
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  color: white;
+  transition: all 0.3s;
+}
+.frosted-button:hover {
+  background-color: rgba(255, 255, 255, 0.35);
+}
+.frosted-button-selected {
+  background-color: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
+}
+.frosted-button-disabled {
+  background-color: rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.no-glass {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  color: white;
+}
+.mark-on-hover:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.divider {
+  width: 1px;
+  height: 75%;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+</style>

From cc7df9f5484fe7ca14ed57ecc9e63808c89dcc77 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 4 Jun 2024 13:49:34 -0300
Subject: [PATCH 21/48] App: Implement main menu for new glass UI

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/App.vue | 411 ++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 331 insertions(+), 80 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6a7e549c9..e6c8a0bb5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,52 +1,179 @@
 <template>
   <v-app>
     <v-main>
-      <Dialog v-model:show="showMainMenu">
-        <div class="flex flex-col items-center justify-around">
-          <v-btn
-            v-if="route.name === 'widgets-view'"
-            prepend-icon="mdi-pencil"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="widgetStore.editingMode = !widgetStore.editingMode"
-          >
-            Edit mode
-          </v-btn>
-          <v-btn
-            v-if="route.name !== 'widgets-view'"
-            prepend-icon="mdi-send"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            to="/"
-          >
-            Flight
-          </v-btn>
-          <v-btn
-            v-if="route.name !== 'Mission planning'"
-            prepend-icon="mdi-map-marker-radius"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            to="/mission-planning"
-          >
-            Mission planning
-          </v-btn>
-          <v-btn
-            prepend-icon="mdi-cog"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="showConfigurationMenu = true"
-          >
-            Configuration
-          </v-btn>
-          <v-btn
-            :prepend-icon="fullScreenToggleIcon"
-            class="w-full m-1 text-white action-button bg-slate-500 hover:bg-slate-400"
-            @click="toggleFullscreen"
-          >
-            {{ isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
-          </v-btn>
+      <transition name="slide-in-left">
+        <div v-if="showMainMenu" ref="mainMenu" class="left-menu slide-in">
+          <v-window v-model="mainMenuStep" class="h-full w-full">
+            <v-window-item :value="1" class="h-full">
+              <div class="flex flex-col pt-5 pb-6 h-full justify-between align-center gap-y-10">
+                <GlassButton
+                  v-if="route.name === 'widgets-view'"
+                  label="Edit Mode"
+                  :selected="widgetStore.editingMode"
+                  :label-class="menuLabelSize"
+                  variant="round"
+                  :width="buttonSize"
+                  icon="mdi-pencil"
+                  :disabled="false"
+                  @click="
+                    () => {
+                      widgetStore.editingMode = !widgetStore.editingMode
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'widgets-view'"
+                  label="Flight"
+                  :label-class="menuLabelSize"
+                  variant="round"
+                  :width="buttonSize"
+                  icon="mdi-send"
+                  :disabled="false"
+                  :selected="$route.name === 'Flight'"
+                  @click="
+                    () => {
+                      $router.push('/')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'Mission planning'"
+                  label="Mission Planning"
+                  :label-class="menuLabelSize"
+                  variant="round"
+                  icon="mdi-map-marker-radius"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="$route.name === 'Mission planning'"
+                  @click="
+                    () => {
+                      $router.push('/mission-planning')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  label="Configuration"
+                  :label-class="menuLabelSize"
+                  icon="mdi-cog"
+                  variant="round"
+                  button-class="-mt-1"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="showConfigurationMenu"
+                  @click="mainMenuStep = 2"
+                />
+                <GlassButton
+                  :label="isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
+                  :label-class="menuLabelSize"
+                  :icon="fullScreenToggleIcon"
+                  variant="round"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="false"
+                  @click="
+                    () => {
+                      toggleFullscreen()
+                      closeMainMenu()
+                    }
+                  "
+                />
+              </div>
+            </v-window-item>
+            <v-window-item :value="2" class="h-full w-full">
+              <div class="flex flex-col pt-1 pb-2 w-full h-full justify-between gap-y-1">
+                <GlassButton
+                  label="General"
+                  :label-class="menuLabelSize"
+                  icon="mdi-view-dashboard-variant"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Joystick"
+                  :label-class="menuLabelSize"
+                  icon="mdi-controller"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Video"
+                  :label-class="menuLabelSize"
+                  icon="mdi-video"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Telemetry"
+                  :label-class="menuLabelSize"
+                  icon="mdi-subtitles-outline"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Alerts"
+                  :label-class="menuLabelSize"
+                  icon="mdi-alert-rhombus-outline"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Dev"
+                  :label-class="menuLabelSize"
+                  icon="mdi-dev-to"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <GlassButton
+                  label="Mission"
+                  :label-class="menuLabelSize"
+                  icon="mdi-map-marker-path"
+                  variant="uncontained"
+                  no-glass
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                />
+                <div class="flex flex-col justify-center align-center">
+                  <v-divider width="70%" class="mb-4" />
+                  <GlassButton
+                    :label-class="menuLabelSize"
+                    icon="mdi-arrow-left"
+                    variant="round"
+                    :width="buttonSize / 2.4"
+                    :disabled="false"
+                    :selected="false"
+                    @click="mainMenuStep = 1"
+                  />
+                </div>
+              </div>
+            </v-window-item>
+          </v-window>
         </div>
-      </Dialog>
+      </transition>
+
       <teleport to="body">
-        <v-dialog v-model="showConfigurationMenu" transition="dialog-bottom-transition" width="100%" height="100%">
-          <ConfigurationMenu />
-        </v-dialog>
+        <GlassModal :is-visible="showConfigurationMenu"><ConfigurationGeneralView /></GlassModal>
       </teleport>
 
       <teleport to="body">
@@ -72,7 +199,7 @@
           <div id="mainTopBar" class="bar top-bar">
             <button
               class="flex items-center justify-center h-full aspect-square top-bar-hamburger"
-              @click="openMainMenu()"
+              @click="toggleMainMenu"
             >
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
@@ -143,17 +270,10 @@
 import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp } from '@vueuse/core'
 import { format } from 'date-fns'
 import Swal from 'sweetalert2'
-import {
-  // type AsyncComponentLoader,
-  computed,
-  onBeforeUnmount,
-  // defineAsyncComponent,
-  ref,
-  watch,
-} from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import { coolMissionNames } from '@/libs/funny-name/words'
 import {
   availableCockpitActions,
@@ -163,54 +283,132 @@ import {
 import { useMissionStore } from '@/stores/mission'
 
 import AltitudeSlider from './components/AltitudeSlider.vue'
-import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
+import GlassButton from './components/GlassButton.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import SlideToConfirm from './components/SlideToConfirm.vue'
 import Alerter from './components/widgets/Alerter.vue'
 import { datalogger } from './libs/sensors-logging'
+import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
+const { showDialog, closeDialog } = useInteractionDialog()
 
 const widgetStore = useWidgetManagerStore()
 const vehicleStore = useMainVehicleStore()
+const responsiveStore = useAppInterfaceStore()
 
 const showConfigurationMenu = ref(false)
 
 // Main menu
 const showMainMenu = ref(false)
+const isMenuOpen = ref(false)
+const isSlidingOut = ref(false)
+const mainMenuStep = ref(1)
+
+let requestDisarmConfirmationPopup = false
+
+const toggleMainMenu = (): void => {
+  if (isMenuOpen.value === true) {
+    closeMainMenu()
+  } else {
+    openMainMenu()
+  }
+}
 
 // When a isVehicleArmed change its value a watcher call Swal.close, this flag is
 // used to avoid closing others Swal instances instead of the one intended
-let requestDisarmConfirmationPopup = false
 const openMainMenu = (): void => {
-  if (!vehicleStore.isArmed) {
+  if (vehicleStore.isArmed) {
+    showDialog({
+      title: 'Be careful',
+      maxWidth: 650,
+      message: 'The vehicle is currently armed and it is not recommended to open the main menu.',
+      actions: [
+        {
+          text: 'Continue anyway',
+          action: () => {
+            showMainMenu.value = true
+            isMenuOpen.value = true
+            closeDialog()
+          },
+        },
+        {
+          text: 'Disarm vehicle',
+          action: () => {
+            disarmVehicle()
+          },
+        },
+      ],
+      variant: 'warning',
+    }).then((result) => {
+      if (result.isConfirmed && vehicleStore.isArmed) {
+        vehicleStore.disarm().then(() => {
+          showMainMenu.value = true
+          isMenuOpen.value = true
+        })
+      } else {
+        showMainMenu.value = true
+        isMenuOpen.value = true
+      }
+      requestDisarmConfirmationPopup = false
+    })
+  } else {
     showMainMenu.value = true
-    return
+    isMenuOpen.value = true
   }
+}
 
-  requestDisarmConfirmationPopup = true
-  Swal.fire({
-    title: 'Be careful',
-    text: 'The vehicle is currently armed, it is not recommended to open the main menu.',
-    icon: 'warning',
-    showCancelButton: true,
-    showConfirmButton: true,
-    cancelButtonText: 'Continue anyway',
-    confirmButtonText: 'Disarm vehicle',
-  }).then((result) => {
-    // Opens the main menu only after disarming by the slider is confirmed
-    if (result.isConfirmed && vehicleStore.isArmed) {
-      vehicleStore.disarm().then(() => {
-        showMainMenu.value = true
-      })
-    } else if (result.dismiss === Swal.DismissReason.cancel) {
-      showMainMenu.value = true
-    }
-    requestDisarmConfirmationPopup = false
+// Close Main Menu Logic
+const closeMainMenu = (): void => {
+  isSlidingOut.value = true
+  setTimeout(() => {
+    showMainMenu.value = false
+    isSlidingOut.value = false
+    isMenuOpen.value = false
+    mainMenuStep.value = 1
+  }, 20)
+}
+
+const disarmVehicle = (): void => {
+  vehicleStore.disarm().then(() => {
+    showMainMenu.value = true
   })
+  closeDialog()
+}
+
+const handleEscKey = (event: KeyboardEvent): void => {
+  if (event.key === 'Escape' && showMainMenu.value) {
+    closeMainMenu()
+  }
 }
 
+onMounted(() => {
+  window.addEventListener('keydown', handleEscKey)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleEscKey)
+})
+
+const buttonSize = computed(() => {
+  if (responsiveStore.is2xl) return 60
+  if (responsiveStore.isXl) return 55
+  if (responsiveStore.isLg) return 50
+  if (responsiveStore.isMd) return 45
+  if (responsiveStore.isSm) return 30
+  return 25
+})
+
+const menuLabelSize = computed(() => {
+  if (responsiveStore.is2xl) return 'text-[16px]'
+  if (responsiveStore.isXl) return 'text-[15px]'
+  if (responsiveStore.isLg) return 'text-[13px]'
+  if (responsiveStore.isMd) return 'text-[12px]'
+  if (responsiveStore.isSm) return 'text-[10px]'
+  return 'text-[10px]'
+})
+
 const isVehicleArmed = computed(() => vehicleStore.isArmed)
 watch(isVehicleArmed, (isArmed) => {
   if (requestDisarmConfirmationPopup && !isArmed) {
@@ -219,7 +417,9 @@ watch(isVehicleArmed, (isArmed) => {
 })
 
 const mainMenu = ref()
-onClickOutside(mainMenu, () => (showMainMenu.value = false))
+onClickOutside(mainMenu, () => {
+  closeMainMenu()
+})
 
 const route = useRoute()
 const routerSection = ref()
@@ -276,7 +476,6 @@ onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
 datalogger.startLogging()
 
 // Dynamic styles
-
 const currentTopBarHeightPixels = computed(() => `${widgetStore.currentTopBarHeightPixels}px`)
 const currentBottomBarHeightPixels = computed(() => `${widgetStore.currentBottomBarHeightPixels}px`)
 </script>
@@ -287,14 +486,62 @@ body {
   /* Removes the scrollbar */
   overflow: hidden !important;
 }
+
 body.hide-cursor {
   cursor: none;
 }
+
+.left-menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @apply 2xl:w-[130px] 2xl:h-auto xl:w-[121px] xl:h-auto lg:w-[102px] lg:h-auto md:w-[95px] md:h-auto sm:w-[78px] sm:h-auto;
+  padding-top: 5px;
+  border-radius: 0 20px 20px 0;
+  border: 1px #cbcbcb33 solid;
+  border-left: none;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  background-color: #4f4f4f33;
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%) translateY(-50%);
+  }
+  to {
+    transform: translateX(0) translateY(-50%);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0) translateY(-50%);
+  }
+  to {
+    transform: translateX(-100%) translateY(-50%);
+  }
+}
+
+.slide-in-left-enter-active {
+  animation: slideInLeft 300ms ease forwards;
+}
+
+.slide-in-left-leave-active {
+  animation: slideOutLeft 300ms ease forwards;
+}
+
 .router-view {
   width: 100%;
   height: 100%;
   position: relative;
 }
+
 .main-view {
   transition: all 0.2s;
   width: 100%;
@@ -303,11 +550,13 @@ body.hide-cursor {
   right: 0%;
   top: 0%;
 }
+
 .main-view.edit-mode {
   transform: scale(0.8);
   right: -10%;
   top: -10%;
 }
+
 .swal2-container {
   z-index: 10000;
 }
@@ -316,11 +565,13 @@ body.hide-cursor {
 .fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
   transform: translate(0, 100px);
 }
+
 .bottom-container {
   position: absolute;
   bottom: v-bind('currentBottomBarHeightPixels');
@@ -328,7 +579,7 @@ body.hide-cursor {
   display: flex;
   flex-direction: column;
   align-items: center;
-  z-index: 60; /* Adjust z-index as needed */
+  z-index: 60;
 }
 
 .bar {

From 3eb3428a59e12c6934fd9fb4b20ec4bde134ec76 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 12:33:51 -0300
Subject: [PATCH 22/48] Components: Interaction-dialog: Update responsiveness

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/InteractionDialog.vue | 68 +++++++++++++++++---
 src/composables/interactionDialog.ts | 94 +++++++++++++++++++++-------
 2 files changed, 129 insertions(+), 33 deletions(-)

diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index 6f9513175..d8202d270 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -3,7 +3,7 @@
     <v-card :max-width="maxWidth || 600" class="main-dialog px-2 rounded-lg">
       <v-card-title>
         <div
-          class="flex justify-center test-center pt-2 mb-2 text-[20px] font-bold text-nowrap text-ellipsis overflow-x-hidden"
+          class="flex justify-center test-center pt-2 mb-1 text-[20px] font-bold text-nowrap text-ellipsis overflow-x-hidden"
           :class="`w-[${maxWidth}px]`"
         >
           {{ title }}
@@ -11,11 +11,11 @@
       </v-card-title>
       <v-card-text class="pb-5">
         <div class="flex justify-center align-center w-full mb-3">
-          <v-icon v-if="variant" size="38" color="white" class="mr-8">{{
+          <v-icon v-if="variant" size="46" :color="variant === 'success' ? 'green' : 'yellow'" class="mr-8 ml-2">{{
             variant === 'info'
               ? 'mdi-information'
               : variant === 'warning'
-              ? 'mdi-alert'
+              ? 'mdi-alert-rhombus'
               : variant === 'error'
               ? 'mdi-alert-circle'
               : 'mdi-check-circle'
@@ -43,13 +43,13 @@
             :color="button.color || undefined"
             :class="button.class || undefined"
             :disabled="button.disabled || false"
-            @click="button.action"
+            @click="handleAction(button.action)"
           >
             {{ button.text }}
           </v-btn>
         </div>
         <div v-else class="flex w-full px-1 py-2 justify-end">
-          <v-btn size="small" variant="text" @click="internalShowDialog = false">Close</v-btn>
+          <v-btn size="small" variant="text" @click="handleAction(() => (internalShowDialog = false))">Close</v-btn>
         </div>
       </v-card-actions>
     </v-card>
@@ -63,23 +63,67 @@ import { useInteractionDialog } from '@/composables/interactionDialog'
 
 const { closeDialog } = useInteractionDialog()
 
-/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Interface to an array of buttons for the Interaction Dialog's footer
+ */
 interface Action {
+  /**
+   * Button Text
+   */
   text: string
+  /**
+   * Button size
+   */
   size?: string
+  /**
+   * Button color
+   */
   color?: string
+  /**
+   * Tailwind class for the button element
+   */
   class?: string
+  /**
+   * Whether the button is disabled
+   */
   disabled?: boolean
+  /**
+   * Callback to button action
+   */
   action: () => void
 }
 
+/**
+ * Interface representing the properties for the dialog component.
+ */
 interface Props {
+  /**
+   * Whether the dialog should be shown.
+   */
   showDialog?: boolean
+  /**
+   * The title of the dialog.
+   */
   title?: string
+  /**
+   * The component to be rendered in the content slot of the dialog.
+   */
   contentComponent?: string
+  /**
+   * The maximum width of the dialog.
+   */
   maxWidth?: number
+  /**
+   * The actions to be displayed in the dialog's footer.
+   */
   actions?: Action[]
+  /**
+   * The variant of the dialog, determining the icon and color.
+   */
   variant?: string
+  /**
+   * The text message to be displayed in the dialog if there is no content on the slot.
+   */
   message?: string
 }
 
@@ -93,7 +137,7 @@ const props = withDefaults(defineProps<Props>(), {
   message: '',
 })
 
-const emit = defineEmits(['update:showDialog'])
+const emit = defineEmits(['update:showDialog', 'confirmed', 'dismissed'])
 
 const internalShowDialog = ref(props.showDialog)
 
@@ -108,15 +152,21 @@ watch(internalShowDialog, (newVal) => {
   if (!newVal) {
     closeDialog()
     emit('update:showDialog', newVal)
+    emit('dismissed')
   }
 })
+
+const handleAction = (action: () => void): void => {
+  action()
+  emit('confirmed')
+}
 </script>
 
 <style scoped>
 .main-dialog {
   color: white;
-  border: 1px solid #fafafa44;
-  background-color: #aaaaaa99;
+  border: 1px solid #fafafa33;
+  background-color: #aaaaaa44;
   backdrop-filter: blur(30px);
   box-shadow: 0px 4px 4px 0px #0000004c, 0px 8px 12px 6px #00000026;
 }
diff --git a/src/composables/interactionDialog.ts b/src/composables/interactionDialog.ts
index a10d5e6ea..5e79cb3db 100644
--- a/src/composables/interactionDialog.ts
+++ b/src/composables/interactionDialog.ts
@@ -5,26 +5,69 @@ import InteractionDialogComponent from '@/components/InteractionDialog.vue'
 import vuetify from '@/plugins/vuetify'
 import { DialogActions } from '@/types/general'
 
-/* eslint-disable jsdoc/require-jsdoc */
+/**
+ * Options to configure the interaction dialog.
+ */
 interface DialogOptions {
-  message: string
+  /**
+   * The message to display in the dialog.
+   * @type {string}
+   */
+  message: string | string[]
+
+  /**
+   * The variant type of the dialog (e.g., 'info', 'warning', 'error', 'success').
+   * @type {string}
+   */
   variant: string
+
+  /**
+   * The title of the dialog.
+   * @type {string}
+   */
   title?: string
+
+  /**
+   * The actions to display in the dialog.
+   * Each action should be an object containing text, size, color, class, disabled, and action properties.
+   * @type {DialogActions[]}
+   */
   actions?: DialogActions[]
-  maxWidth?: number
+
+  /**
+   * The maximum width of the dialog in pixels.
+   * @type {number}
+   */
+  maxWidth?: string | number
 }
 
+/**
+ *
+ */
+interface DialogResult {
+  /**
+   *
+   */
+  isConfirmed: boolean
+}
+
+let resolveFn: (value: DialogResult | PromiseLike<DialogResult>) => void
+let rejectFn: (reason?: DialogResult) => void
+
 /**
  * Provides methods to control the interaction dialog.
  * @returns {object} - An object containing the showDialog and closeDialog methods.
  */
 export function useInteractionDialog(): {
   /**
-   *
+   * Shows the dialog with the provided options.
+   * @param {DialogOptions} options - Options to configure the dialog.
+   * @returns {Promise<{ isConfirmed: boolean }>} - A promise that resolves or rejects based on user action.
    */
-  showDialog: (options: DialogOptions) => void
+  showDialog: (options: DialogOptions) => Promise<DialogResult>
   /**
-   *
+   * Closes the dialog.
+   * @returns {void}
    */
   closeDialog: () => void
 } {
@@ -41,40 +84,43 @@ export function useInteractionDialog(): {
     variant: '',
     title: '',
     actions: [],
-    maxWidth: 600,
+    maxWidth: '600px',
     showDialog: false,
   })
 
   let dialogApp: App<Element> | null = null
 
-  /**
-   * Mounts the dialog component to the DOM.
-   * @returns {void}
-   */
   const mountDialog = (): void => {
     const mountPoint = document.createElement('div')
     document.body.appendChild(mountPoint)
-    dialogApp = createApp(InteractionDialogComponent, dialogProps)
+    dialogApp = createApp(InteractionDialogComponent, {
+      ...dialogProps,
+      onConfirmed: () => {
+        if (resolveFn) resolveFn({ isConfirmed: true })
+      },
+      onDismissed: () => {
+        if (rejectFn) rejectFn({ isConfirmed: false })
+      },
+    })
     dialogApp.use(vuetify)
     dialogApp.mount(mountPoint)
   }
 
-  /**
-   * Shows the dialog with the provided options.
-   * @param {DialogOptions} options - Options to configure the dialog.
-   * @returns {void}
-   */
-  const showDialog = (options: DialogOptions): void => {
-    Object.assign(dialogProps, options, { showDialog: true })
-    mountDialog()
+  const showDialog = (options: DialogOptions): Promise<DialogResult> => {
+    return new Promise((resolve, reject) => {
+      Object.assign(dialogProps, options, { showDialog: true })
+      resolveFn = resolve
+      rejectFn = reject
+      mountDialog()
+    })
   }
 
-  /**
-   * Closes the dialog.
-   * @returns {void}
-   */
   const closeDialog = (): void => {
     dialogProps.showDialog = false
+    if (dialogApp) {
+      dialogApp.unmount()
+      dialogApp = null
+    }
   }
 
   onUnmounted(() => {

From 3de5180b892ac1efaa1c26882c7a649d5d3f50a0 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 12:34:29 -0300
Subject: [PATCH 23/48] package.json: Expose local IP on dev server

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fc2ee6586..56b66c0b7 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "deploy:electron:dir": "electron-builder --dir",
     "deploy:electron": "electron-builder --publish=never",
     "deploy:flatpak": "electron-builder --x64 --linux flatpak",
-    "dev": "vite",
+    "dev": "vite --host",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --max-warnings=0",
     "preview": "vite preview --port 5050",
     "serve": "vite preview",

From fe5c06429e4f80c73d23240b0a5b5b68774918d4 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 12:38:41 -0300
Subject: [PATCH 24/48] App: Replace main menu - updated UI version

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/App.vue | 343 ++++++++++++++++++++++++----------------------------
 1 file changed, 159 insertions(+), 184 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e6c8a0bb5..8ecf1372b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,178 +2,115 @@
   <v-app>
     <v-main>
       <transition name="slide-in-left">
-        <div v-if="showMainMenu" ref="mainMenu" class="left-menu slide-in">
+        <div
+          v-if="showMainMenu"
+          ref="mainMenu"
+          class="left-menu slide-in elevation-10"
+          :style="simplifiedMainMenu ? { width: '45px', borderRadius: '0 10px 10px 0' } : mainMenuWidth"
+        >
           <v-window v-model="mainMenuStep" class="h-full w-full">
-            <v-window-item :value="1" class="h-full">
-              <div class="flex flex-col pt-5 pb-6 h-full justify-between align-center gap-y-10">
-                <GlassButton
-                  v-if="route.name === 'widgets-view'"
-                  label="Edit Mode"
-                  :selected="widgetStore.editingMode"
-                  :label-class="menuLabelSize"
-                  variant="round"
-                  :width="buttonSize"
-                  icon="mdi-pencil"
-                  :disabled="false"
-                  @click="
-                    () => {
-                      widgetStore.editingMode = !widgetStore.editingMode
-                      closeMainMenu()
-                    }
-                  "
-                />
-                <GlassButton
-                  v-if="route.name !== 'widgets-view'"
-                  label="Flight"
-                  :label-class="menuLabelSize"
-                  variant="round"
-                  :width="buttonSize"
-                  icon="mdi-send"
-                  :disabled="false"
-                  :selected="$route.name === 'Flight'"
-                  @click="
-                    () => {
-                      $router.push('/')
-                      closeMainMenu()
-                    }
-                  "
-                />
-                <GlassButton
-                  v-if="route.name !== 'Mission planning'"
-                  label="Mission Planning"
-                  :label-class="menuLabelSize"
-                  variant="round"
-                  icon="mdi-map-marker-radius"
-                  :width="buttonSize"
-                  :disabled="false"
-                  :selected="$route.name === 'Mission planning'"
-                  @click="
-                    () => {
-                      $router.push('/mission-planning')
-                      closeMainMenu()
-                    }
-                  "
-                />
-                <GlassButton
-                  label="Configuration"
-                  :label-class="menuLabelSize"
-                  icon="mdi-cog"
-                  variant="round"
-                  button-class="-mt-1"
-                  :width="buttonSize"
-                  :disabled="false"
-                  :selected="showConfigurationMenu"
-                  @click="mainMenuStep = 2"
-                />
-                <GlassButton
-                  :label="isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
-                  :label-class="menuLabelSize"
-                  :icon="fullScreenToggleIcon"
-                  variant="round"
-                  :width="buttonSize"
-                  :disabled="false"
-                  :selected="false"
-                  @click="
-                    () => {
-                      toggleFullscreen()
-                      closeMainMenu()
-                    }
-                  "
-                />
-              </div>
-            </v-window-item>
-            <v-window-item :value="2" class="h-full w-full">
-              <div class="flex flex-col pt-1 pb-2 w-full h-full justify-between gap-y-1">
-                <GlassButton
-                  label="General"
-                  :label-class="menuLabelSize"
-                  icon="mdi-view-dashboard-variant"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <GlassButton
-                  label="Joystick"
-                  :label-class="menuLabelSize"
-                  icon="mdi-controller"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <GlassButton
-                  label="Video"
-                  :label-class="menuLabelSize"
-                  icon="mdi-video"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <GlassButton
-                  label="Telemetry"
-                  :label-class="menuLabelSize"
-                  icon="mdi-subtitles-outline"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <GlassButton
-                  label="Alerts"
-                  :label-class="menuLabelSize"
-                  icon="mdi-alert-rhombus-outline"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <GlassButton
-                  label="Dev"
-                  :label-class="menuLabelSize"
-                  icon="mdi-dev-to"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <GlassButton
-                  label="Mission"
-                  :label-class="menuLabelSize"
-                  icon="mdi-map-marker-path"
-                  variant="uncontained"
-                  no-glass
-                  :height="buttonSize * 0.5"
-                  :icon-size="buttonSize * 0.6"
-                  :disabled="false"
-                />
-                <div class="flex flex-col justify-center align-center">
-                  <v-divider width="70%" class="mb-4" />
-                  <GlassButton
-                    :label-class="menuLabelSize"
-                    icon="mdi-arrow-left"
-                    variant="round"
-                    :width="buttonSize / 2.4"
-                    :disabled="false"
-                    :selected="false"
-                    @click="mainMenuStep = 1"
-                  />
-                </div>
-              </div>
-            </v-window-item>
+            <div
+              class="flex flex-col h-full justify-between align-center items-center"
+              :class="
+                interfaceStore.isOnSmallScreen
+                  ? 'gap-y-2 pt-2 pb-3 sm:gap-y-1 sm:py-0 sm:-ml-[3px] xs:gap-y-1 xs:py-0 xs:-ml-[3px]'
+                  : 'lg:gap-y-4 xl:gap-y-5 gap-y-6 py-6'
+              "
+            >
+              <GlassButton
+                v-if="route.name === 'widgets-view'"
+                :label="simplifiedMainMenu ? '' : 'Edit Mode'"
+                :selected="widgetStore.editingMode"
+                :label-class="menuLabelSize"
+                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                :tooltip="simplifiedMainMenu ? 'Edit Mode' : undefined"
+                :width="buttonSize"
+                icon="mdi-pencil"
+                :icon-size="simplifiedMainMenu ? 25 : undefined"
+                :disabled="false"
+                @click="
+                  () => {
+                    widgetStore.editingMode = !widgetStore.editingMode
+                    closeMainMenu()
+                  }
+                "
+              />
+              <GlassButton
+                v-if="route.name !== 'widgets-view'"
+                :label="simplifiedMainMenu ? '' : 'Flight'"
+                :label-class="menuLabelSize"
+                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                :tooltip="simplifiedMainMenu ? 'Flight' : undefined"
+                :width="buttonSize"
+                icon="mdi-send"
+                :icon-size="simplifiedMainMenu ? 25 : undefined"
+                :disabled="false"
+                :selected="$route.name === 'Flight'"
+                @click="
+                  () => {
+                    $router.push('/')
+                    closeMainMenu()
+                  }
+                "
+              />
+              <GlassButton
+                v-if="route.name !== 'Mission planning'"
+                :label="simplifiedMainMenu ? '' : 'Mission Planning'"
+                :label-class="menuLabelSize"
+                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                :tooltip="simplifiedMainMenu ? 'Mission Planning' : undefined"
+                icon="mdi-map-marker-radius-outline"
+                :icon-size="simplifiedMainMenu ? 25 : undefined"
+                :width="buttonSize"
+                :disabled="false"
+                :selected="$route.name === 'Mission planning'"
+                @click="
+                  () => {
+                    $router.push('/mission-planning')
+                    closeMainMenu()
+                  }
+                "
+              />
+              <GlassButton
+                :label="simplifiedMainMenu ? '' : 'Settings'"
+                :label-class="menuLabelSize"
+                icon="mdi-cog-outline"
+                :icon-size="simplifiedMainMenu ? 25 : undefined"
+                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
+                :button-class="!simplifiedMainMenu ? '-mt-1' : undefined"
+                :width="buttonSize"
+                :disabled="false"
+                :selected="showConfigurationMenu"
+                @click="showConfigurationMenu = true"
+              />
+              <GlassButton
+                :label="simplifiedMainMenu ? '' : isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
+                :label-class="menuLabelSize"
+                :icon="fullScreenToggleIcon"
+                :icon-size="simplifiedMainMenu ? 25 : undefined"
+                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                :tooltip="simplifiedMainMenu ? (isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen') : undefined"
+                :button-class="simplifiedMainMenu ? '-mb-2' : ''"
+                :width="buttonSize"
+                :disabled="false"
+                :selected="false"
+                @click="
+                  () => {
+                    toggleFullscreen()
+                    closeMainMenu()
+                  }
+                "
+              />
+            </div>
           </v-window>
         </div>
       </transition>
 
       <teleport to="body">
-        <GlassModal :is-visible="showConfigurationMenu"><ConfigurationGeneralView /></GlassModal>
+        <v-dialog v-model="showConfigurationMenu" transition="dialog-bottom-transition" width="100%" height="100%">
+          <ConfigurationMenu />
+        </v-dialog>
       </teleport>
 
       <teleport to="body">
@@ -270,9 +207,10 @@
 import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp } from '@vueuse/core'
 import { format } from 'date-fns'
 import Swal from 'sweetalert2'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, DefineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
+import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { coolMissionNames } from '@/libs/funny-name/words'
 import {
@@ -292,19 +230,52 @@ import { datalogger } from './libs/sensors-logging'
 import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
+
 const { showDialog, closeDialog } = useInteractionDialog()
 
 const widgetStore = useWidgetManagerStore()
 const vehicleStore = useMainVehicleStore()
-const responsiveStore = useAppInterfaceStore()
+const interfaceStore = useAppInterfaceStore()
 
 const showConfigurationMenu = ref(false)
+type ConfigComponent = DefineComponent<Record<string, never>, Record<string, never>, unknown> | null
+const currentConfigMenuComponent = ref<ConfigComponent>(null)
 
 // Main menu
 const showMainMenu = ref(false)
 const isMenuOpen = ref(false)
 const isSlidingOut = ref(false)
 const mainMenuStep = ref(1)
+const simplifiedMainMenu = ref(false)
+const windowHeight = ref(window.innerHeight)
+
+watch(
+  () => windowHeight.value < 450,
+  (isSmall: boolean) => {
+    simplifiedMainMenu.value = isSmall
+  }
+)
+
+const updateWindowHeight = (): void => {
+  windowHeight.value = window.innerHeight
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateWindowHeight)
+  if (windowHeight.value < 450) {
+    simplifiedMainMenu.value = true
+  }
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateWindowHeight)
+})
+
+const mainMenuWidth = computed(() => {
+  const width =
+    interfaceStore.isOnSmallScreen && mainMenuStep.value === 2 ? '60px' : `${interfaceStore.mainMenuWidth}px`
+  return { width }
+})
 
 let requestDisarmConfirmationPopup = false
 
@@ -322,7 +293,7 @@ const openMainMenu = (): void => {
   if (vehicleStore.isArmed) {
     showDialog({
       title: 'Be careful',
-      maxWidth: 650,
+      maxWidth: '650px',
       message: 'The vehicle is currently armed and it is not recommended to open the main menu.',
       actions: [
         {
@@ -367,6 +338,7 @@ const closeMainMenu = (): void => {
     isSlidingOut.value = false
     isMenuOpen.value = false
     mainMenuStep.value = 1
+    currentConfigMenuComponent.value = null
   }, 20)
 }
 
@@ -392,20 +364,23 @@ onBeforeUnmount(() => {
 })
 
 const buttonSize = computed(() => {
-  if (responsiveStore.is2xl) return 60
-  if (responsiveStore.isXl) return 55
-  if (responsiveStore.isLg) return 50
-  if (responsiveStore.isMd) return 45
-  if (responsiveStore.isSm) return 30
-  return 25
+  if (interfaceStore.is2xl) return 60
+  if (interfaceStore.isXl) return 55
+  if (interfaceStore.isLg) return 50
+  if (interfaceStore.isMd) return 45
+  if (interfaceStore.isSm && windowHeight.value > 700) return 50
+  if (interfaceStore.isSm && windowHeight.value < 700) return 40
+  if (interfaceStore.isXs && windowHeight.value >= 700) return 50
+  return 40
 })
 
 const menuLabelSize = computed(() => {
-  if (responsiveStore.is2xl) return 'text-[16px]'
-  if (responsiveStore.isXl) return 'text-[15px]'
-  if (responsiveStore.isLg) return 'text-[13px]'
-  if (responsiveStore.isMd) return 'text-[12px]'
-  if (responsiveStore.isSm) return 'text-[10px]'
+  if (interfaceStore.is2xl) return 'text-[15px]'
+  if (interfaceStore.isXl) return 'text-[14px]'
+  if (interfaceStore.isLg) return 'text-[13px]'
+  if (interfaceStore.isMd) return 'text-[12px]'
+  if (interfaceStore.isSm) return 'text-[10px]'
+  if (interfaceStore.isXs && windowHeight.value >= 700) return 'text-[12px]'
   return 'text-[10px]'
 })
 
@@ -418,7 +393,9 @@ watch(isVehicleArmed, (isArmed) => {
 
 const mainMenu = ref()
 onClickOutside(mainMenu, () => {
-  closeMainMenu()
+  if (mainMenuStep.value === 1) {
+    closeMainMenu()
+  }
 })
 
 const route = useRoute()
@@ -496,8 +473,6 @@ body.hide-cursor {
   display: flex;
   flex-direction: column;
   align-items: center;
-  @apply 2xl:w-[130px] 2xl:h-auto xl:w-[121px] xl:h-auto lg:w-[102px] lg:h-auto md:w-[95px] md:h-auto sm:w-[78px] sm:h-auto;
-  padding-top: 5px;
   border-radius: 0 20px 20px 0;
   border: 1px #cbcbcb33 solid;
   border-left: none;
@@ -506,7 +481,7 @@ body.hide-cursor {
   transform: translateY(-50%);
   background-color: #4f4f4f33;
   backdrop-filter: blur(15px);
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
   z-index: 1000;
 }
 

From 2b9b0f19f0a8da58907526e3dad4abfded104c03 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 12:39:21 -0300
Subject: [PATCH 25/48] Components: Glass-button: Update icon alignment

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/GlassButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GlassButton.vue b/src/components/GlassButton.vue
index 21affe074..e9f98165d 100644
--- a/src/components/GlassButton.vue
+++ b/src/components/GlassButton.vue
@@ -19,7 +19,7 @@
           {{ tooltip }}
         </v-tooltip>
       </template>
-      <v-icon v-if="isRound || isUncontained" :size="iconSize" :class="iconClass" class="ml-[4%] mt-[2%]">
+      <v-icon v-if="isRound || isUncontained" :size="iconSize" :class="iconClass" class="ml-[4%] mt-[4%]">
         {{ icon }}
       </v-icon>
       <div v-else class="flex items-center justify-center w-full h-full">

From a97ca6d0238b63addd3b9dd3daf930b719e02b1c Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 10 Jun 2024 08:43:09 -0300
Subject: [PATCH 26/48] Libraries: Add icon library to prevent alignment issues

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 bun.lockb    | Bin 417441 -> 418181 bytes
 package.json |   1 +
 2 files changed, 1 insertion(+)

diff --git a/bun.lockb b/bun.lockb
index d4cedea3a1fc627ecd3478226a0494e9dd054aee..8c4ad81dae135290fdd07976dda919ac82bb1d57 100755
GIT binary patch
delta 74269
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
DmtmkM

delta 73779
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%0D(~
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
Ad;kCd

diff --git a/package.json b/package.json
index 56b66c0b7..7314d835c 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@iconify/vue": "^4.1.2",
     "@j2only/slide-unlock": "^0.5.5",
     "@mdi/font": "^7.0.96",
     "@mdi/js": "^7.2.96",

From 2539fd9aafed585099d581ebb1385236be8c9252 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 10 Jun 2024 08:44:24 -0300
Subject: [PATCH 27/48] Component: Glass-button: Modify icons library to
 prevent alignment issues

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/GlassButton.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/GlassButton.vue b/src/components/GlassButton.vue
index e9f98165d..3f4ad9a68 100644
--- a/src/components/GlassButton.vue
+++ b/src/components/GlassButton.vue
@@ -19,14 +19,10 @@
           {{ tooltip }}
         </v-tooltip>
       </template>
-      <v-icon v-if="isRound || isUncontained" :size="iconSize" :class="iconClass" class="ml-[4%] mt-[4%]">
-        {{ icon }}
-      </v-icon>
-      <div v-else class="flex items-center justify-center w-full h-full">
-        <v-icon :size="iconSize" class="mr-2" :class="iconClass">
-          {{ icon }}
-        </v-icon>
-        <div class="text-white ml-2" :class="labelClass">
+      <Icon v-if="isRound || isUncontained" :icon="icon || ''" :width="iconSize" :class="iconClass" class="-mr-[1px]" />
+      <div v-else class="flex items-center align-center justify-center w-full h-full">
+        <Icon :icon="icon || ''" :width="iconSize" :class="iconClass" />
+        <div class="text-white" :class="labelClass">
           {{ label }}
         </div>
       </div>
@@ -42,6 +38,7 @@
 </template>
 
 <script setup lang="ts">
+import { Icon, IconifyIcon } from '@iconify/vue'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -56,7 +53,7 @@ const props = defineProps<{
   /**
    * The icon to display in the button (prepend on rectangular, centered on round).
    */
-  icon?: string
+  icon?: string | IconifyIcon
   /**
    * Additional Tailwind classes for the icon.
    */
@@ -102,7 +99,8 @@ const tooltip = computed(() => props.tooltip)
 const selected = computed(() => props.selected)
 const isRound = computed(() => props.variant === 'round')
 const isUncontained = computed(() => props.variant === 'uncontained')
-const iconSize = computed(() => (isRound.value ? (props.width || 26) * 0.6 : props.iconSize))
+const iconSize = computed(() => (isRound.value ? (props.width || 26) * 0.666 : props.iconSize))
+const iconClass = computed(() => props.iconClass)
 
 const buttonStyle = computed(() => ({
   width: props.width || 40,

From e77797e4027573078781561f7fbfc80253ad730f Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 14 Jun 2024 14:06:29 -0300
Subject: [PATCH 28/48] video: Remove references to container and codec on
 recording pipeline

In reality, no transcoding is done in the browser.
---
 src/stores/video.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/video.ts b/src/stores/video.ts
index 8daab84df..9ace997ae 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -308,7 +308,7 @@ export const useVideoStore = defineStore('video', () => {
         try {
           const videoChunk = await tempVideoChunksDB.getItem(chunkName)
           if (videoChunk) {
-            const firstChunkBlob = new Blob([videoChunk as Blob], { type: 'video/webm;codecs=vp9' })
+            const firstChunkBlob = new Blob([videoChunk as Blob])
             const thumbnail = await extractThumbnailFromVideo(firstChunkBlob)
             updatedInfo.thumbnail = thumbnail
             unprocessedVideos.value = { ...unprocessedVideos.value, ...{ [recordingHash]: updatedInfo } }
@@ -527,7 +527,7 @@ export const useVideoStore = defineStore('video', () => {
       const chunkBlobs = chunks.map((chunk) => chunk.blob)
       debouncedUpdateFileProgress(info.fileName, 50, 'Processing video chunks.')
 
-      const mergedBlob = new Blob([...chunkBlobs], { type: 'video/webm;codecs=vp9' })
+      const mergedBlob = new Blob([...chunkBlobs])
 
       let durFixedBlob: Blob | undefined = undefined
       try {

From a18cb60addc1e55427313db71e8b255ac25ca5ac Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 14 Jun 2024 14:17:51 -0300
Subject: [PATCH 29/48] video: Use correct video container/extension, based on
 chunks type

---
 src/components/VideoLibraryModal.vue          | 11 ++++----
 src/components/VideoPlayer.vue                |  2 +-
 .../mini-widgets/MiniVideoRecorder.vue        |  2 +-
 src/stores/video.ts                           | 27 +++++++++++++------
 src/types/video.ts                            | 17 ++++++++++++
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/components/VideoLibraryModal.vue b/src/components/VideoLibraryModal.vue
index e1d807d32..7c5f13f35 100644
--- a/src/components/VideoLibraryModal.vue
+++ b/src/components/VideoLibraryModal.vue
@@ -99,7 +99,7 @@
                     preload="auto"
                     :poster="!video.isProcessed ? video.thumbnail : undefined"
                   >
-                    <source :src="video.url" type="video/webm" />
+                    <source :src="video.url" />
                   </video>
                   <div
                     v-if="selectedVideos.find((v) => v.fileName === video.fileName) && !isMultipleSelectionMode"
@@ -129,7 +129,7 @@
                   <v-tooltip open-delay="500" activator="parent" location="top">{{
                     video.isProcessed ? 'Processed video' : 'Unprocessed video'
                   }}</v-tooltip>
-                  {{ parseDateFromTitle(video.fileName) ?? 'Cockpit webm' }}
+                  {{ parseDateFromTitle(video.fileName) ?? 'Cockpit video' }}
                   <v-icon
                     size="10"
                     class="ml-1 mt-[3px]"
@@ -203,7 +203,7 @@
                 :poster="selectedVideos[0]?.thumbnail || undefined"
                 class="border-[14px] border-white border-opacity-10 rounded-lg min-h-[382px] aspect-video"
               >
-                <source :src="selectedVideos[0]?.url || undefined" type="video/webm" />
+                <source :src="selectedVideos[0]?.url || undefined" />
               </video>
               <v-btn
                 v-if="
@@ -728,7 +728,8 @@ const selectProcessedVideos = (): void => {
 // Add the log files to the list of files to be downloaded/discarded
 const addLogDataToFileList = (fileNames: string[]): string[] => {
   const filesWithLogData = fileNames.flatMap((fileName) => {
-    const subtitlefileName = fileName.replace('.webm', '.ass')
+    const filenameWithoutExtension = fileName.split('.').slice(0, -1).join('.')
+    const subtitlefileName = `${filenameWithoutExtension}.ass`
     const subtitleExists = availableLogFiles.value.some((video) => video.fileName === subtitlefileName)
     return subtitleExists ? [fileName, subtitlefileName] : [fileName]
   })
@@ -820,7 +821,7 @@ const fetchVideosAndLogData = async (): Promise<void> => {
 
   // Fetch processed videos and logs
   await videoStore.videoStoringDB.iterate((value, key) => {
-    if (key.endsWith('.webm')) {
+    if (videoStore.isVideoFilename(key)) {
       videoFilesOperations.push(
         (async () => {
           const videoBlob = await videoStore.videoStoringDB.getItem<Blob>(key)
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index bb335a2fe..ab710227e 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="modal-content">
       <video id="video-player" class="w-[100%]" controls autoplay preload="auto">
-        <source :src="videoFileUrl" type="video/webm" />
+        <source :src="videoFileUrl" />
       </video>
     </div>
   </div>
diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index df6c1514b..92317b242 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -147,7 +147,7 @@ const handleModalUpdate = (newVal: boolean): void => {
 
 // Fetch number of temporary videos on storage
 const fetchNumebrOfTempVideos = async (): Promise<void> => {
-  const nProcessedVideos = (await videoStore.videoStoringDB.keys()).filter((k) => k.endsWith('.webm')).length
+  const nProcessedVideos = (await videoStore.videoStoringDB.keys()).filter((k) => videoStore.isVideoFilename(k)).length
   const nFailedUnprocessedVideos = Object.keys(videoStore.keysFailedUnprocessedVideos).length
   numberOfVideosOnDB.value = nProcessedVideos + nFailedUnprocessedVideos
 }
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 9ace997ae..5ecbcdf37 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -19,13 +19,15 @@ import { isEqual } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import { Alert, AlertLevel } from '@/types/alert'
-import type {
-  DownloadProgressCallback,
-  FileDescriptor,
-  StorageDB,
-  StreamData,
-  UnprocessedVideoInfo,
-  VideoProcessingDetails,
+import {
+  type DownloadProgressCallback,
+  type FileDescriptor,
+  type StorageDB,
+  type StreamData,
+  type UnprocessedVideoInfo,
+  type VideoProcessingDetails,
+  getBlobExtensionContainer,
+  VideoExtensionContainer,
 } from '@/types/video'
 
 import { useAlertStore } from './alert'
@@ -525,6 +527,7 @@ export const useVideoStore = defineStore('video', () => {
       updateLastProcessingUpdate(hash)
 
       const chunkBlobs = chunks.map((chunk) => chunk.blob)
+      const extensionContainer = getBlobExtensionContainer(chunkBlobs[0])
       debouncedUpdateFileProgress(info.fileName, 50, 'Processing video chunks.')
 
       const mergedBlob = new Blob([...chunkBlobs])
@@ -540,7 +543,7 @@ export const useVideoStore = defineStore('video', () => {
       updateLastProcessingUpdate(hash)
 
       debouncedUpdateFileProgress(info.fileName, 75, `Saving video file.`)
-      await videoStoringDB.setItem(`${info.fileName}.webm`, durFixedBlob ?? mergedBlob)
+      await videoStoringDB.setItem(`${info.fileName}.${extensionContainer || '.webm'}`, durFixedBlob ?? mergedBlob)
 
       updateLastProcessingUpdate(hash)
 
@@ -644,6 +647,13 @@ export const useVideoStore = defineStore('video', () => {
     }
   }
 
+  const isVideoFilename = (filename: string): boolean => {
+    for (const ext of Object.values(VideoExtensionContainer)) {
+      if (filename.endsWith(ext)) return true
+    }
+    return false
+  }
+
   const issueSelectedIpNotAvailableWarning = (): void => {
     Swal.fire({
       html: `
@@ -808,5 +818,6 @@ export const useVideoStore = defineStore('video', () => {
     currentFileProgress,
     overallProgress,
     processVideoChunksAndTelemetry,
+    isVideoFilename,
   }
 })
diff --git a/src/types/video.ts b/src/types/video.ts
index 5fbdfb9ab..3077bf30d 100644
--- a/src/types/video.ts
+++ b/src/types/video.ts
@@ -113,3 +113,20 @@ export interface StorageDB {
 }
 
 export type DownloadProgressCallback = (progress: number, total: number) => Promise<void>
+
+export enum VideoExtensionContainer {
+  MKV = 'mkv',
+  MP4 = 'mp4',
+  WEBM = 'webm',
+}
+
+export const getBlobExtensionContainer = (blob: Blob): VideoExtensionContainer | undefined => {
+  if (blob.type.includes('matroska')) {
+    return VideoExtensionContainer.MKV
+  } else if (blob.type.includes('mp4')) {
+    return VideoExtensionContainer.MP4
+  } else if (blob.type.includes('webm')) {
+    return VideoExtensionContainer.WEBM
+  }
+  return undefined
+}

From fd581531f057606e772848127fa1d7c7e850f121 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 17 May 2024 15:20:00 -0300
Subject: [PATCH 30/48] utils: Create assinchronous sleep function

---
 src/components/mini-widgets/MiniVideoRecorder.vue |  4 ++--
 src/libs/utils.ts                                 |  9 +++++++++
 src/libs/vehicle/ardupilot/ardupilot.ts           | 12 ++++++------
 src/views/ConfigurationJoystickView.vue           |  5 +++--
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/mini-widgets/MiniVideoRecorder.vue b/src/components/mini-widgets/MiniVideoRecorder.vue
index 92317b242..a569d5917 100644
--- a/src/components/mini-widgets/MiniVideoRecorder.vue
+++ b/src/components/mini-widgets/MiniVideoRecorder.vue
@@ -92,7 +92,7 @@ import { storeToRefs } from 'pinia'
 import Swal from 'sweetalert2'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
 
-import { isEqual } from '@/libs/utils'
+import { isEqual, sleep } from '@/libs/utils'
 import { useVideoStore } from '@/stores/video'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { MiniWidget } from '@/types/miniWidgets'
@@ -227,7 +227,7 @@ const updateCurrentStream = async (streamName: string | undefined): Promise<void
   while (isLoadingStream.value && millisPassed < waitingTime) {
     // @ts-ignore: The media stream can (and probably will) get defined as we selected a stream
     isLoadingStream.value = mediaStream.value === undefined || !mediaStream.value.active
-    await new Promise((r) => setTimeout(r, timeStep))
+    await sleep(timeStep)
     millisPassed += timeStep
   }
 
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index 4399021ef..ea46db9a1 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -99,3 +99,12 @@ export const formatBytes = (bytes: number, decimals = 2): string => {
 export const isHorizontalScroll = (e: WheelEvent): boolean => {
   return e.shiftKey
 }
+
+/**
+ * Wait for a specified amount of time assincronously
+ * @param {number} delay The time to sleep in milliseconds
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ */
+export const sleep = (delay: number): Promise<void> => {
+  return new Promise((r) => setTimeout(r, delay))
+}
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 58acf793f..118cea7d5 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -19,7 +19,7 @@ import {
 import { MavFrame } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { type Message } from '@/libs/connection/m2r/messages/mavlink2rest-message'
 import { SignalTyped } from '@/libs/signal'
-import { round } from '@/libs/utils'
+import { round, sleep } from '@/libs/utils'
 import {
   type ArduPilotParameterSetData,
   alertLevelFromMavSeverity,
@@ -938,7 +938,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
         itemsCount = lastMissionCountMessage.count
         break
       }
-      await new Promise((r) => setTimeout(r, 100))
+      await sleep(100)
       timeoutReachedCount = new Date().getTime() - initTimeCount > 10000
     }
     if (itemsCount === undefined) {
@@ -952,7 +952,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     const initTimeDown = new Date().getTime()
     let timeoutReachedDownload = false
     while (!allItemsDownloaded && !timeoutReachedDownload) {
-      await new Promise((r) => setTimeout(r, 100))
+      await sleep(100)
       timeoutReachedDownload = new Date().getTime() - initTimeDown > 10000
       loadingCallback((100 * itemToDownload) / itemsCount)
 
@@ -1009,7 +1009,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     const initialTimeResetModeCheck = new Date().getTime()
     while (this.mode() !== resetMode && new Date().getTime() - initialTimeResetModeCheck < 10000) {
       this.setMode(resetMode as Modes)
-      await new Promise((r) => setTimeout(r, 100))
+      await sleep(100)
     }
     if (this.mode() !== resetMode) {
       throw Error(`Could not put vehicle in ${resetModeName} mode. Please do it manually.`)
@@ -1019,7 +1019,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     const initialTimeArmCheck = new Date().getTime()
     while (!this.isArmed() && new Date().getTime() - initialTimeArmCheck < 5000) {
       this.arm()
-      await new Promise((r) => setTimeout(r, 100))
+      await sleep(100)
     }
     if (!this.isArmed) {
       throw Error('Could not arm the vehicle. Please arm it manually.')
@@ -1054,7 +1054,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     let epochLastRequestAnswered = -1
     let lastSeqRequested = -1
     while (missionAck === undefined && !timeoutReachedUpload) {
-      await new Promise((r) => setTimeout(r, 10))
+      await sleep(10)
       timeoutReachedUpload = new Date().getTime() - initTimeUpload > 10000
       const lastMissionItemRequestMessage =
         this._messages.get(MAVLinkType.MISSION_REQUEST) || this._messages.get(MAVLinkType.MISSION_REQUEST_INT)
diff --git a/src/views/ConfigurationJoystickView.vue b/src/views/ConfigurationJoystickView.vue
index 024466ce6..b20fc8dbe 100644
--- a/src/views/ConfigurationJoystickView.vue
+++ b/src/views/ConfigurationJoystickView.vue
@@ -347,6 +347,7 @@ import { getArdupilotVersion, getMavlink2RestVersion } from '@/libs/blueos'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { CockpitActionsFunction } from '@/libs/joystick/protocols/cockpit-actions'
 import { modifierKeyActions } from '@/libs/joystick/protocols/other'
+import { sleep } from '@/libs/utils'
 import { useControllerStore } from '@/stores/controller'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import {
@@ -465,7 +466,7 @@ const remapInput = async (joystick: Joystick, input: JoystickInput): Promise<voi
   while ([undefined, -1].includes(pressedButtonIndex) && millisPassed < remappingTimeTotalMs) {
     // Check if any button on the joystick is pressed, and if so, get it's index
     pressedButtonIndex = joystick.gamepad.buttons.findIndex((button) => button.value === 1)
-    await new Promise((r) => setTimeout(r, 100))
+    await sleep(100)
     millisPassed += 100
     remapTimeProgress.value = 100 * (millisPassed / remappingTimeTotalMs)
   }
@@ -520,7 +521,7 @@ const remapAxisInput = async (joystick: Joystick, input: JoystickInput): Promise
     }
 
     // Await a short period before the next check
-    await new Promise((resolve) => setTimeout(resolve, 100))
+    await sleep(100)
     const timePassed = Date.now() - endTime + remappingTimeTotalMs
     remapAxisTimeProgress.value = (timePassed / remappingTimeTotalMs) * 100
   }

From 1415a3bf0a3eed85ace90eb98548ee72edd1d8b9 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 17 May 2024 15:20:00 -0300
Subject: [PATCH 31/48] ardupilot: Rework `sendCommandLong` method to be
 awaitable and throw on errors

---
 src/libs/vehicle/ardupilot/ardupilot.ts | 134 +++++++++++-------------
 src/libs/vehicle/types.ts               |  42 --------
 2 files changed, 61 insertions(+), 115 deletions(-)

diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 118cea7d5..9a5f2ba85 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -1,5 +1,4 @@
 import { differenceInMilliseconds } from 'date-fns'
-import Swal from 'sweetalert2'
 
 import { sendMavlinkMessage } from '@/libs/communication/mavlink'
 import type { MAVLinkMessageDictionary, Package, Type } from '@/libs/connection/m2r/messages/mavlink2rest'
@@ -125,85 +124,74 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * @param {number} param5
    * @param {number} param6
    * @param {number} param7
-   * @param {boolean} waitForAck If the command should wait for an acknowledgment
-   * @param {boolean} noAlert Controls if swal alerts should not be shown
    * @returns {Promise<CommandAck>} A promise that resolves with the command acknowledgment.
    */
-  sendCommandLong(
+  async sendCommandLong(
     mav_command: MavCmd,
-    param1?: number,
-    param2?: number,
-    param3?: number,
-    param4?: number,
-    param5?: number,
-    param6?: number,
-    param7?: number,
-    waitForAck = true,
-    noAlert = false
-  ): Promise<CommandAck> {
-    return new Promise((resolve, reject) => {
-      // Construct the command
-      const command: Message.CommandLong = {
-        type: MAVLinkType.COMMAND_LONG,
-        param1: param1 ?? 0,
-        param2: param2 ?? 0,
-        param3: param3 ?? 0,
-        param4: param4 ?? 0,
-        param5: param5 ?? 0,
-        param6: param6 ?? 0,
-        param7: param7 ?? 0,
-        command: {
-          type: mav_command,
-        },
-        target_system: this.currentSystemId,
-        target_component: 1,
-        confirmation: 0,
-      }
+    param1 = 0,
+    param2 = 0,
+    param3 = 0,
+    param4 = 0,
+    param5 = 0,
+    param6 = 0,
+    param7 = 0
+  ): Promise<void> {
+    const command: Message.CommandLong = {
+      type: MAVLinkType.COMMAND_LONG,
+      param1: param1,
+      param2: param2,
+      param3: param3,
+      param4: param4,
+      param5: param5,
+      param6: param6,
+      param7: param7,
+      command: {
+        type: mav_command,
+      },
+      target_system: this.currentSystemId,
+      target_component: 1,
+      confirmation: 0,
+    }
 
-      sendMavlinkMessage(command)
-      if (!waitForAck) {
-        resolve(new CommandAck())
-        return
-      }
+    sendMavlinkMessage(command)
 
-      let ackReceived = false
-      const ackHandler = (commandAck: CommandAck): void => {
-        console.log('Received command acknowledgment:', commandAck)
-        if (commandAck.command.type === mav_command) {
-          ackReceived = true
-          this.onCommandAck.remove(ackHandler)
+    // Monitor the acknowledgment of the command and throw an error if it fails or reaches a timeout
+    let incomingAckCommand: CommandAck | undefined = undefined
+    let receivedCommandAck = false
+    let timeoutReached = false
+    const timeout = 5000
 
-          if (![MavResult.MAV_RESULT_ACCEPTED, MavResult.MAV_RESULT_IN_PROGRESS].includes(commandAck.result.type)) {
-            if (!noAlert) {
-              commandAck.alertMessage()
-            }
-            reject(new Error(`Command failed with result: ${commandAck.result.type}`))
-          } else {
-            this.onCommandAck.remove(ackHandler)
-            resolve(commandAck)
-          }
-        }
-      }
+    const ackHandler = (commandAck: CommandAck): void => {
+      incomingAckCommand = commandAck
+    }
 
-      this.onCommandAck.add(ackHandler)
-
-      // Setup a timeout for the ACK
-      const timeout = 5000
-      setTimeout(() => {
-        if (!ackReceived) {
-          if (!noAlert) {
-            Swal.fire({
-              title: 'Command timeout',
-              text: 'No acknowledgment was received for the command: ' + mav_command + ' in ' + timeout / 1000 + 's',
-              icon: 'error',
-              confirmButtonText: 'OK',
-            })
-          }
-          this.onCommandAck.remove(ackHandler)
-          reject(new Error('Timeout waiting for command acknowledgment'))
-        }
-      }, timeout)
-    })
+    const dateCommand = new Date()
+    this.onCommandAck.add(ackHandler)
+
+    // Wait for the acknowledgment to be received
+    while (!timeoutReached && !receivedCommandAck) {
+      await sleep(100)
+      receivedCommandAck = (incomingAckCommand as unknown as CommandAck)?.command.type === mav_command
+      timeoutReached = differenceInMilliseconds(new Date(), dateCommand) > timeout
+    }
+
+    this.onCommandAck.remove(ackHandler)
+
+    if (!receivedCommandAck) {
+      throw Error(`No acknowledgment received for command '${mav_command}' before timeout (${timeout / 1000}s).`)
+    }
+
+    // We already tested the ack and know that it is of the correct type
+    const commandAck = incomingAckCommand as unknown as CommandAck
+
+    console.log('Received command acknowledgment:', commandAck)
+
+    const confirmationResults = [MavResult.MAV_RESULT_ACCEPTED, MavResult.MAV_RESULT_IN_PROGRESS]
+    if (confirmationResults.includes(commandAck.result.type)) {
+      return
+    }
+
+    throw new Error(`Command failed with result: ${commandAck.result.type}`)
   }
 
   registerUsageOfMessageType = (messagePath: string): void => {
diff --git a/src/libs/vehicle/types.ts b/src/libs/vehicle/types.ts
index dff23d7d3..4cee92534 100644
--- a/src/libs/vehicle/types.ts
+++ b/src/libs/vehicle/types.ts
@@ -1,5 +1,3 @@
-import Swal from 'sweetalert2'
-
 import type { Type } from '@/libs/connection/m2r/messages/mavlink2rest'
 import { MavCmd, MavResult } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { AlertLevel } from '@/types/alert'
@@ -122,46 +120,6 @@ export class CommandAck {
   constructor(init?: Partial<CommandAck>) {
     Object.assign(this, init)
   }
-
-  /**
-   * Alert message
-   */
-  public alertMessage(): void {
-    if (
-      this.result.type === MavResult.MAV_RESULT_TEMPORARILY_REJECTED ||
-      this.result.type === MavResult.MAV_RESULT_DENIED ||
-      this.result.type === MavResult.MAV_RESULT_UNSUPPORTED ||
-      this.result.type === MavResult.MAV_RESULT_FAILED
-    ) {
-      Swal.fire({
-        title: 'Command Failed',
-        text: 'Command: ' + this.command.type + ' failed with result: ' + this.result.type,
-        icon: 'error',
-        confirmButtonText: 'OK',
-      })
-    } else if (this.result.type === MavResult.MAV_RESULT_ACCEPTED) {
-      Swal.fire({
-        title: 'Command Accepted',
-        text: 'Command: ' + this.command.type + ' succeeded with: ' + this.result.type,
-        icon: 'success',
-        confirmButtonText: 'OK',
-      })
-    } else if (this.result.type === MavResult.MAV_RESULT_IN_PROGRESS) {
-      Swal.fire({
-        title: 'Command In Progress',
-        text: 'Command: ' + this.command.type + ' is in progress',
-        icon: 'info',
-        confirmButtonText: 'OK',
-      })
-    } else {
-      Swal.fire({
-        title: 'Result Unknown',
-        text: 'Command: ' + this.command.type + ' result is unknown',
-        icon: 'error',
-        confirmButtonText: 'OK',
-      })
-    }
-  }
 }
 
 /**

From e11601dfefa849b5390a75045a338aef70a4e1d6 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 17 May 2024 15:20:00 -0300
Subject: [PATCH 32/48] vehicle: commands: Adapt commands to new
 `sendCommandLong` structure

---
 src/components/mini-widgets/ArmerButton.vue   | 34 +++++++-----
 .../mini-widgets/TakeoffLandCommander.vue     | 38 +++++++------
 src/libs/vehicle/ardupilot/ardupilot.ts       | 55 +++++++++----------
 src/libs/vehicle/vehicle.ts                   |  6 +-
 src/stores/mainVehicle.ts                     | 12 ++--
 5 files changed, 77 insertions(+), 68 deletions(-)

diff --git a/src/components/mini-widgets/ArmerButton.vue b/src/components/mini-widgets/ArmerButton.vue
index 3484ba17c..e355ed372 100644
--- a/src/components/mini-widgets/ArmerButton.vue
+++ b/src/components/mini-widgets/ArmerButton.vue
@@ -21,28 +21,34 @@
 </template>
 
 <script setup lang="ts">
+import Swal from 'sweetalert2'
+
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const vehicleStore = useMainVehicleStore()
 
 const arm = (): void => {
-  slideToConfirm(
-    vehicleStore.arm,
-    {
-      command: 'Arm',
-    },
-    canByPassCategory(EventCategory.ARM)
-  )
+  const tryToArm = async (): Promise<void> => {
+    try {
+      await vehicleStore.arm()
+    } catch (error) {
+      Swal.fire({ text: error as string, icon: 'error' })
+    }
+  }
+
+  slideToConfirm(tryToArm, { command: 'Arm' }, canByPassCategory(EventCategory.ARM))
 }
 
 const disarm = (): void => {
-  slideToConfirm(
-    vehicleStore.disarm,
-    {
-      command: 'Disarm',
-    },
-    canByPassCategory(EventCategory.DISARM)
-  )
+  const tryToDisarm = async (): Promise<void> => {
+    try {
+      await vehicleStore.disarm()
+    } catch (error) {
+      Swal.fire({ text: error as string, icon: 'error' })
+    }
+  }
+
+  slideToConfirm(tryToDisarm, { command: 'Disarm' }, canByPassCategory(EventCategory.DISARM))
 }
 </script>
diff --git a/src/components/mini-widgets/TakeoffLandCommander.vue b/src/components/mini-widgets/TakeoffLandCommander.vue
index 67a500efb..c35405df4 100644
--- a/src/components/mini-widgets/TakeoffLandCommander.vue
+++ b/src/components/mini-widgets/TakeoffLandCommander.vue
@@ -10,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+import Swal from 'sweetalert2'
+
 import { showAltitudeSlider } from '@/libs/altitude-slider'
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
@@ -19,25 +21,27 @@ const vehicleStore = useMainVehicleStore()
 const takeoff = (): void => {
   showAltitudeSlider.value = true
 
-  slideToConfirm(
-    () => {
-      showAltitudeSlider.value = false
-      vehicleStore.takeoff()
-    },
-    {
-      command: 'Takeoff',
-    },
-    canByPassCategory(EventCategory.TAKEOFF)
-  )
+  const tryToTakeOff = async (): Promise<void> => {
+    showAltitudeSlider.value = false
+    try {
+      await vehicleStore.takeoff()
+    } catch (error) {
+      Swal.fire({ text: error as string, icon: 'error' })
+    }
+  }
+
+  slideToConfirm(tryToTakeOff, { command: 'Takeoff' }, canByPassCategory(EventCategory.TAKEOFF))
 }
 
 const land = (): void => {
-  slideToConfirm(
-    vehicleStore.land,
-    {
-      command: 'Land',
-    },
-    canByPassCategory(EventCategory.LAND)
-  )
+  const tryToLand = async (): Promise<void> => {
+    showAltitudeSlider.value = false
+    try {
+      await vehicleStore.takeoff()
+    } catch (error) {
+      Swal.fire({ text: error as string, icon: 'error' })
+    }
+  }
+  slideToConfirm(tryToLand, { command: 'Land' }, canByPassCategory(EventCategory.LAND))
 }
 </script>
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 9a5f2ba85..5e65cc594 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -472,8 +472,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * @param {boolean} arm
    * @param {boolean} force
    */
-  _arm(arm: boolean, force?: boolean): void {
-    this.sendCommandLong(
+  async _arm(arm: boolean, force?: boolean): Promise<void> {
+    await this.sendCommandLong(
       MavCmd.MAV_CMD_COMPONENT_ARM_DISARM,
       arm ? 1 : 0, // 0: Disarm, 1: ARM
       force ? 21196 : 0 // 21196: force arming/disarming (e.g. override preflight checks and disarming in flight)
@@ -482,11 +482,10 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Arm vehicle
-   * @returns {boolean}
+   * @returns {Promise<void>}
    */
-  arm(): boolean {
-    this._arm(true)
-    return true
+  async arm(): Promise<void> {
+    await this._arm(true)
   }
 
   /**
@@ -530,39 +529,40 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
   /**
    * Helper function for commanding takeoff
    * @param {number} altitude (in meters)
+   * @returns {Promise<void>} A promise that resolves if the takeoff command is accepted.
    */
-  _takeoff(altitude: number): void {
-    this.sendCommandLong(MavCmd.MAV_CMD_NAV_TAKEOFF, 0, 0, 0, 0, 0, 0, altitude)
+  async _takeoff(altitude: number): Promise<void> {
+    return await this.sendCommandLong(MavCmd.MAV_CMD_NAV_TAKEOFF, 0, 0, 0, 0, 0, 0, altitude)
   }
 
   /**
    * Takeoff
    * @param {number} altitudeSetpoint
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  takeoff(altitudeSetpoint: number): void {
+  async takeoff(altitudeSetpoint: number): Promise<void> {
     const guidedMode = this.modesAvailable().get('GUIDED')
     if (guidedMode === undefined) {
-      return
+      throw new Error("Vehicle doesn't support GUIDED mode.")
     }
 
-    this.setMode(guidedMode as Modes)
-    this.arm()
-    this._takeoff(altitudeSetpoint)
+    await this.setMode(guidedMode as Modes)
+    await this.arm()
+    await this._takeoff(altitudeSetpoint)
     this.onTakeoff.emit()
     return
   }
 
   /**
    * Land
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  land(): void {
+  async land(): Promise<void> {
     const landMode = this.modesAvailable().get('LAND')
     if (landMode === undefined) {
-      return
+      throw new Error("Vehicle doesn't support LAND mode.")
     }
-    this.setMode(landMode as Modes)
+    await this.setMode(landMode as Modes)
     return
   }
   /**
@@ -637,11 +637,10 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Disarm vehicle
-   * @returns {boolean}
+   * @returns {Promise<void>}
    */
-  disarm(): boolean {
-    this._arm(false)
-    return true
+  async disarm(): Promise<void> {
+    await this._arm(false)
   }
 
   /**
@@ -745,8 +744,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * Set vehicle flight mode
    * @param {'Modes'} mode Custom vehicle mode
    */
-  setMode(mode: Modes): void {
-    this.sendCommandLong(
+  async setMode(mode: Modes): Promise<void> {
+    await this.sendCommandLong(
       MavCmd.MAV_CMD_DO_SET_MODE,
       MavModeFlag.MAV_MODE_FLAG_CUSTOM_MODE_ENABLED,
       Number(mode) // Custom mode, please refer to the individual autopilot specifications for details
@@ -991,12 +990,12 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
         Please put the vehicle in ${resetModeName} mode manually so a new mission can be started.`
       )
     }
-    this.setMode(resetMode as Modes)
+    await this.setMode(resetMode as Modes)
 
     // Check if the vehicle got off of the AUTO mode
     const initialTimeResetModeCheck = new Date().getTime()
     while (this.mode() !== resetMode && new Date().getTime() - initialTimeResetModeCheck < 10000) {
-      this.setMode(resetMode as Modes)
+      await this.setMode(resetMode as Modes)
       await sleep(100)
     }
     if (this.mode() !== resetMode) {
@@ -1006,14 +1005,14 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     // Arming the vehicle is necessary to successfully start a mission
     const initialTimeArmCheck = new Date().getTime()
     while (!this.isArmed() && new Date().getTime() - initialTimeArmCheck < 5000) {
-      this.arm()
+      await this.arm()
       await sleep(100)
     }
     if (!this.isArmed) {
       throw Error('Could not arm the vehicle. Please arm it manually.')
     }
 
-    this.sendCommandLong(MavCmd.MAV_CMD_MISSION_START, 0, 0)
+    await this.sendCommandLong(MavCmd.MAV_CMD_MISSION_START, 0, 0)
   }
 
   /**
diff --git a/src/libs/vehicle/vehicle.ts b/src/libs/vehicle/vehicle.ts
index bc6322f5a..5ecf77585 100644
--- a/src/libs/vehicle/vehicle.ts
+++ b/src/libs/vehicle/vehicle.ts
@@ -171,13 +171,13 @@ export abstract class AbstractVehicle<Modes> {
 
   abstract onMessage(message: Uint8Array): void
 
-  abstract arm(): boolean
+  abstract arm(): Promise<void>
   abstract altitude(): Altitude
   abstract attitude(): Attitude
   abstract batteries(): Battery[]
   abstract configurationPages(): PageDescription[]
   abstract cpuLoad(): number // Percentage
-  abstract disarm(): boolean
+  abstract disarm(): Promise<void>
   abstract isArmed(): boolean
   abstract mode(): Modes
   abstract modesAvailable(): Map<string, Modes>
@@ -188,6 +188,6 @@ export abstract class AbstractVehicle<Modes> {
   abstract lastParameter(): Parameter
   abstract statusText(): StatusText
   abstract statusGPS(): StatusGPS
-  abstract setMode(mode: Modes): void
+  abstract setMode(mode: Modes): Promise<void>
   abstract flying(): boolean
 }
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 40e66d274..854f20687 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -146,7 +146,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available to arm.')
     }
 
-    mainVehicle.value.arm()
+    await mainVehicle.value.arm()
   }
 
   /**
@@ -159,7 +159,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available to disarm.')
     }
 
-    mainVehicle.value.disarm()
+    await mainVehicle.value.disarm()
   }
 
   /**
@@ -171,7 +171,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available for takeoff')
     }
 
-    mainVehicle.value.takeoff(altitude_setpoint.value)
+    await mainVehicle.value.takeoff(altitude_setpoint.value)
   }
   /**
    * Change the altitude of the vehicle.
@@ -194,7 +194,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('No vehicle available to land.')
     }
 
-    mainVehicle.value.land()
+    await mainVehicle.value.land()
   }
 
   /**
@@ -293,10 +293,10 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
    * Set vehicle flight mode
    * @param {string} modeName
    */
-  function setFlightMode(modeName: string): void {
+  async function setFlightMode(modeName: string): Promise<void> {
     const enumMode = modes.value?.get(modeName)
     if (enumMode !== undefined) {
-      mainVehicle.value?.setMode(enumMode)
+      await mainVehicle.value?.setMode(enumMode)
     }
   }
 

From dbd7c676cddd3d83b61a3ef22e6d4353d4b892fe Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 17 May 2024 15:20:00 -0300
Subject: [PATCH 33/48] utils: Create common method to try ro run function and
 alert on fail

---
 src/components/mini-widgets/ArmerButton.vue   | 21 ++-----------
 .../mini-widgets/TakeoffLandCommander.vue     | 31 +++++--------------
 src/libs/utils.ts                             | 15 +++++++++
 3 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/components/mini-widgets/ArmerButton.vue b/src/components/mini-widgets/ArmerButton.vue
index e355ed372..9de910457 100644
--- a/src/components/mini-widgets/ArmerButton.vue
+++ b/src/components/mini-widgets/ArmerButton.vue
@@ -21,34 +21,19 @@
 </template>
 
 <script setup lang="ts">
-import Swal from 'sweetalert2'
-
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
+import { tryOrAlert } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const vehicleStore = useMainVehicleStore()
 
 const arm = (): void => {
-  const tryToArm = async (): Promise<void> => {
-    try {
-      await vehicleStore.arm()
-    } catch (error) {
-      Swal.fire({ text: error as string, icon: 'error' })
-    }
-  }
-
+  const tryToArm = async (): Promise<void> => tryOrAlert(vehicleStore.arm)
   slideToConfirm(tryToArm, { command: 'Arm' }, canByPassCategory(EventCategory.ARM))
 }
 
 const disarm = (): void => {
-  const tryToDisarm = async (): Promise<void> => {
-    try {
-      await vehicleStore.disarm()
-    } catch (error) {
-      Swal.fire({ text: error as string, icon: 'error' })
-    }
-  }
-
+  const tryToDisarm = async (): Promise<void> => tryOrAlert(vehicleStore.disarm)
   slideToConfirm(tryToDisarm, { command: 'Disarm' }, canByPassCategory(EventCategory.DISARM))
 }
 </script>
diff --git a/src/components/mini-widgets/TakeoffLandCommander.vue b/src/components/mini-widgets/TakeoffLandCommander.vue
index c35405df4..2850da1f9 100644
--- a/src/components/mini-widgets/TakeoffLandCommander.vue
+++ b/src/components/mini-widgets/TakeoffLandCommander.vue
@@ -3,45 +3,30 @@
     class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60 hover:bg-slate-400/60"
     @click="vehicleStore.flying ? land() : takeoff()"
   >
-    <span class="inline-block font-extrabold align-middle text-white">
+    <span class="inline-block font-extrabold text-white align-middle">
       {{ vehicleStore.flying === undefined ? '...' : vehicleStore.flying ? 'Land' : 'Takeoff' }}
     </span>
   </button>
 </template>
 
 <script setup lang="ts">
-import Swal from 'sweetalert2'
-
 import { showAltitudeSlider } from '@/libs/altitude-slider'
 import { canByPassCategory, EventCategory, slideToConfirm } from '@/libs/slide-to-confirm'
+import { tryOrAlert } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const vehicleStore = useMainVehicleStore()
 
-const takeoff = (): void => {
+const takeoff = async (): Promise<void> => {
   showAltitudeSlider.value = true
-
-  const tryToTakeOff = async (): Promise<void> => {
-    showAltitudeSlider.value = false
-    try {
-      await vehicleStore.takeoff()
-    } catch (error) {
-      Swal.fire({ text: error as string, icon: 'error' })
-    }
-  }
-
-  slideToConfirm(tryToTakeOff, { command: 'Takeoff' }, canByPassCategory(EventCategory.TAKEOFF))
+  const tryToTakeOff = async (): Promise<void> => tryOrAlert(vehicleStore.takeoff)
+  await slideToConfirm(tryToTakeOff, { command: 'Takeoff' }, canByPassCategory(EventCategory.TAKEOFF))
+  showAltitudeSlider.value = false
 }
 
 const land = (): void => {
-  const tryToLand = async (): Promise<void> => {
-    showAltitudeSlider.value = false
-    try {
-      await vehicleStore.takeoff()
-    } catch (error) {
-      Swal.fire({ text: error as string, icon: 'error' })
-    }
-  }
+  const tryToLand = async (): Promise<void> => tryOrAlert(vehicleStore.land)
   slideToConfirm(tryToLand, { command: 'Land' }, canByPassCategory(EventCategory.LAND))
+  showAltitudeSlider.value = false
 }
 </script>
diff --git a/src/libs/utils.ts b/src/libs/utils.ts
index ea46db9a1..9d640a899 100644
--- a/src/libs/utils.ts
+++ b/src/libs/utils.ts
@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+import Swal from 'sweetalert2'
+
 export const constrain = (value: number, min: number, max: number): number => {
   return Math.max(Math.min(value, max), min)
 }
@@ -108,3 +110,16 @@ export const isHorizontalScroll = (e: WheelEvent): boolean => {
 export const sleep = (delay: number): Promise<void> => {
   return new Promise((r) => setTimeout(r, delay))
 }
+
+/**
+ * Try to run the given function and alert the user if an error occurs
+ * @param {() => Promise<void>} tryFunction The time to sleep in milliseconds
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ */
+export const tryOrAlert = async (tryFunction: () => Promise<void>): Promise<void> => {
+  try {
+    await tryFunction()
+  } catch (error) {
+    Swal.fire({ text: error as string, icon: 'error' })
+  }
+}

From c1e6edfdbb915b6eb6acc66fc7fa27a7418353b3 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 14 Jun 2024 10:47:44 -0300
Subject: [PATCH 34/48] vite: Force server on `0.0.0.0`

This prevents cases where the server is only accessible from the host IP.
---
 vite.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/vite.config.ts b/vite.config.ts
index ecfeb91c2..8957b4dd4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,4 +35,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
   },
+  server: {
+    host: '0.0.0.0',
+  },
 })

From 67fff8bcf708160737d5ac27dba52206404cc287 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Tue, 18 Jun 2024 10:39:21 -0300
Subject: [PATCH 35/48] store: mainVehicle: Change connections to storage

* Change MainVehicleConnetion and WebRTCConnection URIs to use storage
  and to be reactive
* Change video.ts to use new computed property
---
 src/stores/mainVehicle.ts | 93 +++++++++++++++++----------------------
 src/stores/video.ts       |  4 +-
 2 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 854f20687..369aaa8a6 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -38,51 +38,18 @@ import { useControllerStore } from './controller'
 import { useWidgetManagerStore } from './widgetManager'
 
 /**
- * This is an abstraction that holds a customizable parameter that can fallback to a default value
- * @template T The customizable parameter type
+ * Custom parameter data description interface
  */
-class CustomizableParameter<T> {
-  private _customValue: T
-  private _defaultValue: () => T
-  isCustom = false
-
-  /**
-   * @param {Ref<T>} defaultVal The default parameter value
-   */
-  constructor(defaultVal: () => T) {
-    this._defaultValue = defaultVal
-    this._customValue = this.defaultValue
-  }
-
-  /**
-   * Sets the URI to a given custom one
-   * @param {T} val
-   */
-  set val(val: T) {
-    this._customValue = val
-  }
-
-  /**
-   * @returns {T} The current configured parameter, whether default or custom
-   */
-  get val(): T {
-    return this.isCustom ? this._customValue : this.defaultValue
-  }
-
+interface CustomParameter<T> {
   /**
-   * @returns {T} The current configured parameter, whether default or custom
+   * Real data associated with the parameter
    */
-  get defaultValue(): T {
-    return this._defaultValue()
-  }
+  data: T
 
   /**
-   * Resets custom to the default value and disables custom
+   * Indicates if the custom parameter data is enabled
    */
-  public reset(): void {
-    this.isCustom = false
-    this._customValue = this.defaultValue
-  }
+  enabled: boolean
 }
 
 export const useMainVehicleStore = defineStore('main-vehicle', () => {
@@ -92,18 +59,18 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
 
   const cpuLoad = ref<number>()
   const globalAddress = useStorage('cockpit-vehicle-address', defaultGlobalAddress)
-  const _mainConnectionURI = new CustomizableParameter<Connection.URI>(() => {
-    const queryMainConnectionURI = new URLSearchParams(window.location.search).get('mainConnectionURI')
-    return new Connection.URI(
-      queryMainConnectionURI || `${ws_protocol}://${globalAddress.value}/mavlink2rest/ws/mavlink`
-    )
-  })
-  const mainConnectionURI = ref(_mainConnectionURI)
-  const _webRTCSignallingURI = new CustomizableParameter<Connection.URI>(() => {
-    const queryWebRTCSignallingURI = new URLSearchParams(window.location.search).get('webRTCSignallingURI')
-    return new Connection.URI(queryWebRTCSignallingURI || `${ws_protocol}://${globalAddress.value}:6021`)
-  })
-  const webRTCSignallingURI = ref(_webRTCSignallingURI)
+
+  const defaultMainConnectionURI = ref<string>(`${ws_protocol}://${globalAddress.value}:6040/ws/mavlink`)
+  const defaultWebRTCSignallingURI = ref<string>(`${ws_protocol}://${globalAddress.value}:6021/`)
+  const customMainConnectionURI = useStorage('cockpit-vehicle-custom-main-connection-uri', {
+    data: defaultMainConnectionURI.value,
+    enabled: false,
+  } as CustomParameter<string>)
+  const customWebRTCSignallingURI = useStorage('cockpit-vehicle-custom-webrtc-signalling-uri', {
+    data: defaultWebRTCSignallingURI.value,
+    enabled: false,
+  } as CustomParameter<string>)
+
   const lastHeartbeat = ref<Date>()
   const firmwareType = ref<MavAutopilot>()
   const vehicleType = ref<MavType>()
@@ -128,6 +95,22 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const modes = ref<Map<string, any>>()
 
+  const mainConnectionURI = computed(
+    () =>
+      new Connection.URI(
+        customMainConnectionURI.value.enabled ? customMainConnectionURI.value.data : defaultMainConnectionURI.value
+      )
+  )
+
+  const webRTCSignallingURI = computed(
+    () =>
+      new Connection.URI(
+        customWebRTCSignallingURI.value.enabled
+          ? customWebRTCSignallingURI.value.data
+          : defaultWebRTCSignallingURI.value
+      )
+  )
+
   /**
    * Check if vehicle is online (no more than 5 seconds passed since last heartbeat)
    * @returns { boolean } True if vehicle is online
@@ -320,11 +303,11 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   ConnectionManager.onMainConnection.add(() => {
     const newMainConnection = ConnectionManager.mainConnection()
     if (newMainConnection !== undefined) {
-      mainConnectionURI.value.val = newMainConnection.uri()
+      customMainConnectionURI.value.data = newMainConnection.uri().toString()
     }
   })
 
-  ConnectionManager.addConnection(mainConnectionURI.value.val, Protocol.Type.MAVLink)
+  ConnectionManager.addConnection(mainConnectionURI.value, Protocol.Type.MAVLink)
 
   const getAutoPilot = (vehicles: WeakRef<Vehicle.Abstract>[]): ArduPilot => {
     const vehicle = vehicles?.last()?.deref()
@@ -501,7 +484,11 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     startMission,
     globalAddress,
     mainConnectionURI,
+    customMainConnectionURI,
+    defaultMainConnectionURI,
     webRTCSignallingURI,
+    customWebRTCSignallingURI,
+    defaultWebRTCSignallingURI,
     cpuLoad,
     lastHeartbeat,
     firmwareType,
diff --git a/src/stores/video.ts b/src/stores/video.ts
index 5ecbcdf37..a1f733678 100644
--- a/src/stores/video.ts
+++ b/src/stores/video.ts
@@ -44,7 +44,7 @@ export const useVideoStore = defineStore('video', () => {
   const allowedIceProtocols = useStorage<string[]>('cockpit-allowed-stream-protocols', [])
   const jitterBufferTarget = useStorage<number | null>('cockpit-jitter-buffer-target', 0)
   const activeStreams = ref<{ [key in string]: StreamData | undefined }>({})
-  const mainWebRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
+  const mainWebRTCManager = new WebRTCManager(webRTCSignallingURI, rtcConfiguration)
   const availableIceIps = ref<string[]>([])
   const unprocessedVideos = useStorage<{ [key in string]: UnprocessedVideoInfo }>('cockpit-unprocessed-video-info', {})
   const timeNow = useTimestamp({ interval: 500 })
@@ -87,7 +87,7 @@ export const useVideoStore = defineStore('video', () => {
    */
   const activateStream = (streamName: string): void => {
     const stream = ref()
-    const webRtcManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
+    const webRtcManager = new WebRTCManager(webRTCSignallingURI, rtcConfiguration)
     const { mediaStream, connected } = webRtcManager.startStream(
       stream,
       allowedIceIps,

From a1111da5374038f17dedc951dd47f9b78fa93900 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Tue, 18 Jun 2024 10:41:51 -0300
Subject: [PATCH 36/48] views: ConfigGeneralView: Make URIs reactive

* Change the way as the URIs are configured to make sure they are
  reactive and stored properly on storage when using custom ones
---
 src/views/ConfigurationGeneralView.vue | 229 +++++++++++++++++--------
 1 file changed, 156 insertions(+), 73 deletions(-)

diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index 3627eb757..f9eeb657d 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -38,13 +38,13 @@
         <v-icon v-else :icon="vehicleConnected ? 'mdi-lan-connect' : 'mdi-lan-disconnect'" class="mr-3" />
         <span class="text-h6">Mavlink2Rest connection</span>
         <v-form
-          ref="connectionForm"
-          v-model="connectionFormValid"
+          ref="mainConnectionForm"
+          v-model="mainConnectionFormValid"
           class="justify-center d-flex align-center"
-          @submit.prevent="addNewVehicleConnection"
+          @submit.prevent="setMainVehicleConnectionURI"
         >
           <v-checkbox
-            v-model="connectionURI.isCustom"
+            v-model="mainVehicleStore.customMainConnectionURI.enabled"
             v-tooltip.bottom="'Enable custom'"
             class="mx-1 mb-5 pa-0"
             rounded="lg"
@@ -52,8 +52,8 @@
           />
 
           <v-text-field
-            v-model="connectionURI.val"
-            :disabled="!connectionURI.isCustom"
+            v-model="mainConnectionURI"
+            :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
             label="Mavlink2Rest URI"
             variant="underlined"
             type="input"
@@ -62,15 +62,23 @@
             :rules="[isValidSocketConnectionURI]"
           />
 
-          <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5 pa-0" rounded="lg" flat type="submit" />
+          <v-btn
+            v-tooltip.bottom="'Set'"
+            :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+            icon="mdi-check"
+            class="mx-1 mb-5 pa-0"
+            rounded="lg"
+            flat
+            type="submit"
+          />
           <v-btn
             v-tooltip.bottom="'Reset to default'"
-            :disabled="connectionURI.toString() === connectionURI.defaultValue.toString()"
+            :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
             icon="mdi-refresh"
             class="mx-1 mb-5 pa-0"
             rounded="lg"
             flat
-            @click="resetVehicleConnection"
+            @click="resetMainVehicleConnectionURI"
           />
         </v-form>
         <span>Current address: {{ ConnectionManager.mainConnection()?.uri().toString() ?? 'none' }} </span><br />
@@ -91,7 +99,7 @@
           @submit.prevent="setWebRTCSignallingURI"
         >
           <v-checkbox
-            v-model="webRTCSignallingURI.isCustom"
+            v-model="mainVehicleStore.customWebRTCSignallingURI.enabled"
             v-tooltip.bottom="'Enable custom'"
             class="mx-1 mb-5 pa-0"
             rounded="lg"
@@ -99,8 +107,8 @@
           />
 
           <v-text-field
-            v-model="webRTCSignallingURI.val"
-            :disabled="!webRTCSignallingURI.isCustom"
+            v-model="webRTCSignallingURI"
+            :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
             label="WebRTC Signalling Server URI"
             variant="underlined"
             type="input"
@@ -109,10 +117,18 @@
             :rules="[isValidSocketConnectionURI]"
           />
 
-          <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5 pa-0" rounded="lg" flat type="submit" />
+          <v-btn
+            v-tooltip.bottom="'Set'"
+            :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+            icon="mdi-check"
+            class="mx-1 mb-5 pa-0"
+            rounded="lg"
+            flat
+            type="submit"
+          />
           <v-btn
             v-tooltip.bottom="'Reset to default'"
-            :disabled="webRTCSignallingURI.val.toString() === webRTCSignallingURI.defaultValue.toString()"
+            :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
             icon="mdi-refresh"
             class="mx-1 mb-5 pa-0"
             rounded="lg"
@@ -120,7 +136,7 @@
             @click="resetWebRTCSignallingURI"
           />
         </v-form>
-        <span>Current address: {{ mainVehicleStore.webRTCSignallingURI.val.toString() }} </span><br />
+        <span>Current address: {{ mainVehicleStore.webRTCSignallingURI.toString() }} </span><br />
       </v-card>
     </template>
   </BaseConfigurationView>
@@ -144,13 +160,29 @@ const globalAddressForm = ref()
 const globalAddressFormValid = ref(false)
 const newGlobalAddress = ref(mainVehicleStore.globalAddress)
 
-const webRTCSignallingForm = ref()
-const webRTCSignallingFormValid = ref(false)
-const webRTCSignallingURI = ref(mainVehicleStore.webRTCSignallingURI)
+const setGlobalAddress = async (): Promise<void> => {
+  await globalAddressForm.value.validate()
 
-const connectionForm = ref()
-const connectionFormValid = ref(false)
-const connectionURI = ref(mainVehicleStore.mainConnectionURI)
+  const validation = isValidConnectionURI(newGlobalAddress.value)
+  if (validation !== true) {
+    alert(validation)
+    return
+  }
+
+  mainVehicleStore.globalAddress = newGlobalAddress.value
+
+  // Temporary solution to actually set the address and connect the vehicle, since this is non-reactive today.
+  // TODO: Modify the store variables to be reactive.
+  location.reload()
+}
+
+const resetGlobalAddress = async (): Promise<void> => {
+  newGlobalAddress.value = defaultGlobalAddress
+
+  await setGlobalAddress()
+}
+
+/** Main vehicle connection */
 
 const vehicleConnected = ref<boolean | undefined>(mainVehicleStore.isVehicleOnline)
 watch(
@@ -158,6 +190,109 @@ watch(
   () => (vehicleConnected.value = mainVehicleStore.isVehicleOnline)
 )
 
+const mainConnectionForm = ref()
+const mainConnectionFormValid = ref(false)
+const mainConnectionURI = ref(mainVehicleStore.mainConnectionURI)
+
+const addNewVehicleConnection = async (conn: Connection.URI): Promise<void> => {
+  mainConnectionURI.value = conn
+  vehicleConnected.value = undefined
+  setTimeout(() => (vehicleConnected.value ??= false), 5000)
+  try {
+    ConnectionManager.addConnection(new Connection.URI(conn), Protocol.Type.MAVLink)
+  } catch (error) {
+    console.error(error)
+    alert(`Could not update main connection. ${error}.`)
+    return
+  }
+  console.debug(`New connection successfully configured to ${conn.toString()}.`)
+}
+
+watch(
+  () => mainVehicleStore.mainConnectionURI,
+  (val: Connection.URI) => {
+    if (val.toString() === mainConnectionURI.value.toString()) {
+      return
+    }
+
+    addNewVehicleConnection(val)
+  }
+)
+
+const setMainVehicleConnectionURI = async (): Promise<void> => {
+  const res = await mainConnectionForm.value.validate()
+
+  if (!res.valid) {
+    return
+  }
+
+  mainVehicleStore.customMainConnectionURI = {
+    data: mainConnectionURI.value.toString(),
+    enabled: true,
+  }
+
+  addNewVehicleConnection(mainConnectionURI.value)
+}
+
+const resetMainVehicleConnectionURI = async (): Promise<void> => {
+  mainVehicleStore.customMainConnectionURI = {
+    enabled: false,
+    data: mainVehicleStore.defaultMainConnectionURI.toString(),
+  }
+}
+
+const webRTCSignallingForm = ref()
+const webRTCSignallingFormValid = ref(false)
+const webRTCSignallingURI = ref(mainVehicleStore.webRTCSignallingURI)
+
+const addWebRTCConnection = async (conn: Connection.URI): Promise<void> => {
+  webRTCSignallingURI.value = conn
+
+  // This works as a reset for the custom URI, and its not needed in mainConnectionURI since on Add from
+  // ConnectionManager it will be set.
+  if (!mainVehicleStore.customWebRTCSignallingURI.enabled) {
+    mainVehicleStore.customWebRTCSignallingURI.data = conn.toString()
+  }
+
+  // Temporary solution to actually set WebRTC URI, since right now we cannot just make reactive because streams will
+  // be kept open.
+  // TODO: handle video stream re connection
+  location.reload()
+}
+
+watch(
+  () => mainVehicleStore.webRTCSignallingURI,
+  (val: Connection.URI) => {
+    if (val.toString() === webRTCSignallingURI.value.toString()) {
+      return
+    }
+
+    addWebRTCConnection(val)
+  }
+)
+
+const setWebRTCSignallingURI = async (): Promise<void> => {
+  const res = await webRTCSignallingForm.value.validate()
+
+  if (!res.valid) {
+    return
+  }
+
+  mainVehicleStore.customWebRTCSignallingURI = {
+    data: webRTCSignallingURI.value.toString(),
+    enabled: true,
+  }
+
+  addWebRTCConnection(webRTCSignallingURI.value)
+}
+
+const resetWebRTCSignallingURI = (): void => {
+  mainVehicleStore.customWebRTCSignallingURI = {
+    enabled: false,
+    data: mainVehicleStore.defaultWebRTCSignallingURI.toString(),
+  }
+}
+
 const isValidHostAddress = (value: string): boolean | string => {
   return isValidNetworkAddress(value) ?? 'Invalid host address. Should be an IP address or a hostname'
 }
@@ -187,58 +322,6 @@ const isValidSocketConnectionURI = (value: string): boolean | string => {
   }
   return true
 }
-
-const resetGlobalAddress = async (): Promise<void> => {
-  newGlobalAddress.value = defaultGlobalAddress
-
-  await setGlobalAddress()
-}
-
-const resetVehicleConnection = async (): Promise<void> => {
-  connectionURI.value.reset()
-
-  await addNewVehicleConnection()
-}
-
-const resetWebRTCSignallingURI = (): void => {
-  webRTCSignallingURI.value.reset()
-}
-
-// Adds a new connection, which right now is the same as changing the main one
-const addNewVehicleConnection = async (): Promise<void> => {
-  await connectionForm.value.validate()
-  vehicleConnected.value = undefined
-  setTimeout(() => (vehicleConnected.value ??= false), 5000)
-  try {
-    ConnectionManager.addConnection(new Connection.URI(connectionURI.value.val), Protocol.Type.MAVLink)
-  } catch (error) {
-    console.error(error)
-    alert(`Could not update main connection. ${error}.`)
-    return
-  }
-  console.debug(`New connection successfully configured to ${connectionURI.value.val}.`)
-}
-
-const setGlobalAddress = async (): Promise<void> => {
-  await globalAddressForm.value.validate()
-
-  const validation = isValidConnectionURI(newGlobalAddress.value)
-  if (validation !== true) {
-    alert(validation)
-    return
-  }
-
-  mainVehicleStore.globalAddress = newGlobalAddress.value
-
-  // Temporary solution to actually set the address and connect the vehicle, since this is non-reactive today.
-  // TODO: Modify the store variables to be reactive.
-  location.reload()
-}
-
-const setWebRTCSignallingURI = async (): Promise<void> => {
-  await webRTCSignallingForm.value.validate()
-  mainVehicleStore.webRTCSignallingURI.val = webRTCSignallingURI.value.val
-}
 </script>
 
 <style scoped>

From fa31299f561ddc75213f0d2e3e7e181121e10776 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 17 Jun 2024 21:46:53 -0300
Subject: [PATCH 37/48] webrtc: Allow setting custom configuration

---
 src/stores/mainVehicle.ts              | 11 ++---
 src/views/ConfigurationGeneralView.vue | 57 +++++++++++++++++++++++++-
 2 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 369aaa8a6..25aa4ebaa 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -52,6 +52,11 @@ interface CustomParameter<T> {
   enabled: boolean
 }
 
+const defaultRtcConfiguration = {
+  bundlePolicy: 'max-bundle',
+  iceServers: [],
+} as RTCConfiguration
+
 export const useMainVehicleStore = defineStore('main-vehicle', () => {
   const controllerStore = useControllerStore()
   const widgetStore = useWidgetManagerStore()
@@ -70,6 +75,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     data: defaultWebRTCSignallingURI.value,
     enabled: false,
   } as CustomParameter<string>)
+  const rtcConfiguration = useStorage('cockpit-rtc-config', defaultRtcConfiguration)
 
   const lastHeartbeat = ref<Date>()
   const firmwareType = ref<MavAutopilot>()
@@ -462,11 +468,6 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     }
   }, 10)
 
-  const rtcConfiguration = {
-    bundlePolicy: 'max-bundle',
-    iceServers: [],
-  } as RTCConfiguration
-
   return {
     arm,
     takeoff,
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index f9eeb657d..4cff04718 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -137,13 +137,38 @@
           />
         </v-form>
         <span>Current address: {{ mainVehicleStore.webRTCSignallingURI.toString() }} </span><br />
+        <div class="my-4 ml-2">
+          <span class="text-lg">Custom RTC configuration:</span>
+          <div class="mx-2">
+            <div class="flex">
+              <v-textarea
+                id="rtcConfigTextInput"
+                v-model="customRtcConfiguration"
+                variant="underlined"
+                label="Custom WebRTC Configuration"
+                clearable
+                :rows="8"
+                hint="e.g.: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }"
+                class="uri-input"
+              />
+              <v-btn
+                v-tooltip.bottom="'Save'"
+                icon="mdi-check"
+                class="mx-1 mb-5 pa-0"
+                rounded="lg"
+                flat
+                @click="updateWebRtcConfiguration"
+              />
+            </div>
+          </div>
+        </div>
       </v-card>
     </template>
   </BaseConfigurationView>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
 import * as Connection from '@/libs/connection/connection'
@@ -322,6 +347,36 @@ const isValidSocketConnectionURI = (value: string): boolean | string => {
   }
   return true
 }
+
+const customRtcConfiguration = ref<string>(JSON.stringify(mainVehicleStore.rtcConfiguration, null, 4))
+const updateWebRtcConfiguration = (): void => {
+  try {
+    const newConfig = JSON.parse(customRtcConfiguration.value)
+    mainVehicleStore.rtcConfiguration = newConfig
+    location.reload()
+  } catch (error) {
+    alert(`Could not update WebRTC configuration. ${error}.`)
+  }
+}
+
+const tryToPrettifyRtcConfig = (): void => {
+  try {
+    const ugly = customRtcConfiguration.value
+    const obj = JSON.parse(ugly)
+    const pretty = JSON.stringify(obj, null, 4)
+    if (ugly !== pretty) {
+      customRtcConfiguration.value = pretty
+    }
+  } catch (error) {
+    // Do nothing if the JSON is invalid
+  }
+}
+
+watch(customRtcConfiguration, () => tryToPrettifyRtcConfig())
+
+onMounted(() => {
+  tryToPrettifyRtcConfig()
+})
 </script>
 
 <style scoped>

From 0a26bd5b054fd2adb4b649de11543a94429511aa Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Mon, 17 Jun 2024 23:24:23 -0300
Subject: [PATCH 38/48] webrtc: Allow setting configuration from query
 parameters

---
 src/stores/mainVehicle.ts              | 18 +++++++++++++++++-
 src/views/ConfigurationGeneralView.vue |  4 ++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 25aa4ebaa..eebe8f14a 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -75,7 +75,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     data: defaultWebRTCSignallingURI.value,
     enabled: false,
   } as CustomParameter<string>)
-  const rtcConfiguration = useStorage('cockpit-rtc-config', defaultRtcConfiguration)
+  const customWebRTCConfiguration = useStorage('cockpit-rtc-config', defaultRtcConfiguration)
 
   const lastHeartbeat = ref<Date>()
   const firmwareType = ref<MavAutopilot>()
@@ -125,6 +125,21 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     return lastHeartbeat.value !== undefined && new Date(timeNow.value).getTime() - lastHeartbeat.value.getTime() < 5000
   })
 
+  const rtcConfiguration = computed(() => {
+    const queryWebRtcConfiguration = new URLSearchParams(window.location.search).get('webRTCConfiguration')
+    if (queryWebRtcConfiguration) {
+      console.log('Using WebRTC configuration from query parameter')
+      console.log(queryWebRtcConfiguration)
+      try {
+        return JSON.parse(queryWebRtcConfiguration)
+      } catch (error) {
+        console.error('Failed to parse WebRTC configuration from query parameter.', error)
+      }
+    }
+    console.log('Using WebRTC configuration from storage.')
+    return customWebRTCConfiguration.value
+  })
+
   /**
    * Arm the vehicle.
    * Awaits user confirmation before arming the vehicle. Resolves when arming is successful or rejects if the action is cancelled.
@@ -509,6 +524,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     icon,
     configurationPages,
     rtcConfiguration,
+    customWebRTCConfiguration,
     genericVariables,
     availableGenericVariables,
     registerUsageOfGenericVariable,
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index 4cff04718..b548de7d4 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -348,11 +348,11 @@ const isValidSocketConnectionURI = (value: string): boolean | string => {
   return true
 }
 
-const customRtcConfiguration = ref<string>(JSON.stringify(mainVehicleStore.rtcConfiguration, null, 4))
+const customRtcConfiguration = ref<string>(JSON.stringify(mainVehicleStore.customWebRTCConfiguration, null, 4))
 const updateWebRtcConfiguration = (): void => {
   try {
     const newConfig = JSON.parse(customRtcConfiguration.value)
-    mainVehicleStore.rtcConfiguration = newConfig
+    mainVehicleStore.customWebRTCConfiguration = newConfig
     location.reload()
   } catch (error) {
     alert(`Could not update WebRTC configuration. ${error}.`)

From ef51ee8a97ee2db42728ab7d19324e762ec2c8cb Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 18 Jun 2024 14:40:38 -0300
Subject: [PATCH 39/48] main-vehicle: Get query parameter settings back

It was mistakenly removed on a recent commit.
---
 src/stores/mainVehicle.ts | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index eebe8f14a..64e5ec3ec 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -101,21 +101,17 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const modes = ref<Map<string, any>>()
 
-  const mainConnectionURI = computed(
-    () =>
-      new Connection.URI(
-        customMainConnectionURI.value.enabled ? customMainConnectionURI.value.data : defaultMainConnectionURI.value
-      )
-  )
-
-  const webRTCSignallingURI = computed(
-    () =>
-      new Connection.URI(
-        customWebRTCSignallingURI.value.enabled
-          ? customWebRTCSignallingURI.value.data
-          : defaultWebRTCSignallingURI.value
-      )
-  )
+  const mainConnectionURI = computed(() => {
+    const queryURI = new URLSearchParams(window.location.search).get('mainConnectionURI')
+    const customURI = customMainConnectionURI.value.enabled ? customMainConnectionURI.value.data : undefined
+    return new Connection.URI(queryURI ?? customURI ?? defaultMainConnectionURI.value)
+  })
+
+  const webRTCSignallingURI = computed(() => {
+    const queryWebRTCSignallingURI = new URLSearchParams(window.location.search).get('webRTCSignallingURI')
+    const customURI = customWebRTCSignallingURI.value.enabled ? customWebRTCSignallingURI.value.data : undefined
+    return new Connection.URI(queryWebRTCSignallingURI ?? customURI ?? defaultWebRTCSignallingURI.value)
+  })
 
   /**
    * Check if vehicle is online (no more than 5 seconds passed since last heartbeat)

From e1fefa325b580d39505fd7456f09fb79c4541dff Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 18 Jun 2024 15:36:59 -0300
Subject: [PATCH 40/48] main-vehicle: Get the main connection default path back
 to `/mavlink2rest`

The `:6040` path does not work with BlueSim, for example.
---
 src/stores/mainVehicle.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 64e5ec3ec..c0f061f24 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -65,7 +65,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   const cpuLoad = ref<number>()
   const globalAddress = useStorage('cockpit-vehicle-address', defaultGlobalAddress)
 
-  const defaultMainConnectionURI = ref<string>(`${ws_protocol}://${globalAddress.value}:6040/ws/mavlink`)
+  const defaultMainConnectionURI = ref<string>(`${ws_protocol}://${globalAddress.value}/mavlink2rest/ws/mavlink`)
   const defaultWebRTCSignallingURI = ref<string>(`${ws_protocol}://${globalAddress.value}:6021/`)
   const customMainConnectionURI = useStorage('cockpit-vehicle-custom-main-connection-uri', {
     data: defaultMainConnectionURI.value,
@@ -319,6 +319,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
 
   ConnectionManager.onMainConnection.add(() => {
     const newMainConnection = ConnectionManager.mainConnection()
+    console.log('Main connection changed:', newMainConnection?.uri().toString())
     if (newMainConnection !== undefined) {
       customMainConnectionURI.value.data = newMainConnection.uri().toString()
     }

From b00750cd238918d328d7e119465e4556a9d67add Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Tue, 18 Jun 2024 17:18:04 -0300
Subject: [PATCH 41/48] web-rtc: Add possibility of enabling/disabling custom
 configuration

---
 src/stores/mainVehicle.ts              |  7 +++++--
 src/views/ConfigurationGeneralView.vue | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index c0f061f24..cf8b72b43 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -75,7 +75,10 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     data: defaultWebRTCSignallingURI.value,
     enabled: false,
   } as CustomParameter<string>)
-  const customWebRTCConfiguration = useStorage('cockpit-rtc-config', defaultRtcConfiguration)
+  const customWebRTCConfiguration = useStorage('cockpit-custom-rtc-config', {
+    data: defaultRtcConfiguration,
+    enabled: false,
+  })
 
   const lastHeartbeat = ref<Date>()
   const firmwareType = ref<MavAutopilot>()
@@ -133,7 +136,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       }
     }
     console.log('Using WebRTC configuration from storage.')
-    return customWebRTCConfiguration.value
+    return customWebRTCConfiguration.value.enabled ? customWebRTCConfiguration.value.data : defaultRtcConfiguration
   })
 
   /**
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index b548de7d4..bb2a32880 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -137,13 +137,21 @@
           />
         </v-form>
         <span>Current address: {{ mainVehicleStore.webRTCSignallingURI.toString() }} </span><br />
-        <div class="my-4 ml-2">
+        <div class="my-4">
           <span class="text-lg">Custom RTC configuration:</span>
-          <div class="mx-2">
+          <div class="mt-2">
             <div class="flex">
+              <v-checkbox
+                v-model="mainVehicleStore.customWebRTCConfiguration.enabled"
+                v-tooltip.bottom="'Enable custom'"
+                class="mx-1 mb-5 pa-0"
+                rounded="lg"
+                hide-details
+              />
               <v-textarea
                 id="rtcConfigTextInput"
                 v-model="customRtcConfiguration"
+                :disabled="!mainVehicleStore.customWebRTCConfiguration.enabled"
                 variant="underlined"
                 label="Custom WebRTC Configuration"
                 clearable
@@ -348,11 +356,11 @@ const isValidSocketConnectionURI = (value: string): boolean | string => {
   return true
 }
 
-const customRtcConfiguration = ref<string>(JSON.stringify(mainVehicleStore.customWebRTCConfiguration, null, 4))
+const customRtcConfiguration = ref<string>(JSON.stringify(mainVehicleStore.customWebRTCConfiguration.data, null, 4))
 const updateWebRtcConfiguration = (): void => {
   try {
     const newConfig = JSON.parse(customRtcConfiguration.value)
-    mainVehicleStore.customWebRTCConfiguration = newConfig
+    mainVehicleStore.customWebRTCConfiguration.data = newConfig
     location.reload()
   } catch (error) {
     alert(`Could not update WebRTC configuration. ${error}.`)

From fdbc012ddfbbee72c9078e9414102d22c9ff9d0d Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 07:31:21 -0300
Subject: [PATCH 42/48] Components: Expansible-panel: Add main vue component

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/ExpansiblePanel.vue | 92 ++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 src/components/ExpansiblePanel.vue

diff --git a/src/components/ExpansiblePanel.vue b/src/components/ExpansiblePanel.vue
new file mode 100644
index 000000000..44ecb5752
--- /dev/null
+++ b/src/components/ExpansiblePanel.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="bg-transparent text-white w-full">
+    <div class="flex flex-col align-start">
+      <v-divider v-if="!noTopDivider" centered class="opacity-10 border-[#fafafa] w-full" />
+      <div
+        class="flex flex-row align-center gap-x-[3vw] py-[1.5vh] cursor-pointer"
+        :class="isPanelExpanded ? 'pt-[2.5vh]' : undefined"
+        @click="togglePanel"
+      >
+        <v-icon :size="24" :icon="isPanelExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+        <div class="flex flex-col">
+          <div class="font-semibold" :class="interfaceStore.isOnSmallScreen ? 'text-[14px]' : 'text-[18px]'">
+            <slot name="title" />
+          </div>
+          <div class="font-normal" :class="interfaceStore.isOnSmallScreen ? 'text-[10px]' : 'text-[14px]'">
+            <slot name="subtitle" />
+          </div>
+        </div>
+      </div>
+      <v-divider v-if="!isPanelExpanded && !noBottomDivider" class="opacity-10 border-[#fafafa] w-full" />
+    </div>
+    <transition name="expand" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+      <div v-show="isPanelExpanded" ref="content" class="overflow-hidden">
+        <slot name="content"></slot>
+        <v-divider v-if="!noBottomDivider" centered class="opacity-10 border-[#fafafa] w-full" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+const props = defineProps<{
+  /**
+   *
+   */
+  noTopDivider?: boolean
+  /**
+   *
+   */
+  noBottomDivider?: boolean
+  /**
+   *
+   */
+  isExpanded?: boolean
+}>()
+
+const isPanelExpanded = ref(props.isExpanded ?? false)
+const noTopDivider = ref(props.noTopDivider ?? false)
+const noBottomDivider = ref(props.noBottomDivider ?? false)
+
+const togglePanel = (): void => {
+  isPanelExpanded.value = !isPanelExpanded.value
+}
+
+const beforeEnter = (el: Element): void => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+}
+
+const enter = (el: Element): void => {
+  const element = el as HTMLElement
+  nextTick(() => {
+    element.style.height = element.scrollHeight + 'px'
+  })
+}
+
+const leave = (el: Element): void => {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+  nextTick(() => {
+    element.style.height = '0'
+  })
+}
+</script>
+
+<style scoped>
+.expand-enter-active,
+.expand-leave-active {
+  transition: height 0.3s ease;
+}
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+  overflow: hidden;
+}
+</style>

From cedaad89c10150db6f3e5ebf3cc1db623d109167 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 07:35:02 -0300
Subject: [PATCH 43/48] Components: Glass-button: Update icon alignment

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/GlassButton.vue | 55 +++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/GlassButton.vue b/src/components/GlassButton.vue
index 3f4ad9a68..32f4954a9 100644
--- a/src/components/GlassButton.vue
+++ b/src/components/GlassButton.vue
@@ -1,46 +1,58 @@
 <template>
   <div
-    class="flex flex-col items-center 2xl:gap-y-1 xl: gap-y-1 cursor-pointer"
-    :class="isUncontained ? 'mark-on-hover py-2 ' : undefined"
+    class="flex flex-col items-center 2xl:gap-y-1 xl: gap-y-1 py-2"
+    :class="[
+      isUncontained && !isSelected ? (isNoEffects ? '' : 'mark-on-hover') : '',
+      isSelected === true ? 'frosted-button-selected' : '',
+      isDisabled ? 'opacity-[0.4] cursor-default' : 'opacity-100 cursor-pointer',
+    ]"
   >
     <button
-      :disabled="disabled"
+      :disabled="isDisabled"
       class="flex items-center justify-center"
       :class="[
         isUncontained ? 'no-glass' : 'frosted-button',
-        selected ? 'frosted-button-selected' : '',
-        { 'frosted-button-disabled': disabled, 'rounded-full': isRound },
+        { 'frosted-button-disabled': isDisabled, 'rounded-full': isRound },
         buttonClass,
       ]"
-      :style="{ width: buttonStyle.width!.toString() + 'px', height: buttonStyle.height!.toString() + 'px' }"
+      :style="{ width: buttonStyle.width.toString() + 'px', height: buttonStyle.height.toString() + 'px' }"
     >
       <template v-if="tooltip">
         <v-tooltip open-delay="600" activator="parent" location="top">
           {{ tooltip }}
         </v-tooltip>
       </template>
-      <Icon v-if="isRound || isUncontained" :icon="icon || ''" :width="iconSize" :class="iconClass" class="-mr-[1px]" />
+      <Icon
+        v-if="isRound || isUncontained"
+        :icon="icon || ''"
+        :width="props.iconSize || calculatedIconSize"
+        :class="[iconClass, interfaceStore.isOnSmallScreen ? '-mr-[2px] -mb-[1px]' : '-mr-[1px]']"
+        class="lg:-mr-[2px]"
+      />
       <div v-else class="flex items-center align-center justify-center w-full h-full">
-        <Icon :icon="icon || ''" :width="iconSize" :class="iconClass" />
-        <div class="text-white" :class="labelClass">
+        <Icon :icon="icon || ''" :width="props.iconSize || calculatedIconSize" :class="iconClass" />
+        <div class="text-white select-none" :class="labelClass">
           {{ label }}
         </div>
       </div>
     </button>
     <div
       v-if="isRound || isUncontained"
-      class="flex justify-center align-center text-center text-white px-4 font-semibold 2xl:mt-2 xl:mt-1 lg:mt-0 md:mt-0 sm:-mt-1 mt-1"
+      class="flex justify-center align-center text-center select-none text-white px-4 font-semibold 2xl:mt-2 xl:mt-1 lg:mt-0 md:mt-0 sm:-mt-1 mt-1"
       :class="labelClass"
     >
       {{ label }}
     </div>
   </div>
 </template>
-
 <script setup lang="ts">
 import { Icon, IconifyIcon } from '@iconify/vue'
 import { computed } from 'vue'
 
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
 const props = defineProps<{
   /**
    * The text label displayed on the button (rectangular variant) or under the button (round).
@@ -90,21 +102,26 @@ const props = defineProps<{
    * The height of the button.
    */
   height?: number
+  /**
+   * No effects on hover.
+   */
+  noEffects?: boolean
 }>()
 
 const label = computed(() => props.label)
 const icon = computed(() => props.icon)
-const disabled = computed(() => props.disabled)
+const isDisabled = computed(() => props.disabled)
 const tooltip = computed(() => props.tooltip)
-const selected = computed(() => props.selected)
+const isSelected = computed(() => props.selected)
 const isRound = computed(() => props.variant === 'round')
 const isUncontained = computed(() => props.variant === 'uncontained')
-const iconSize = computed(() => (isRound.value ? (props.width || 26) * 0.666 : props.iconSize))
+const calculatedIconSize = computed(() => (isRound.value ? (props.width || 26) * 0.666 : props.iconSize))
 const iconClass = computed(() => props.iconClass)
+const isNoEffects = computed(() => props.noEffects)
 
 const buttonStyle = computed(() => ({
-  width: props.width || 40,
-  height: isRound.value ? props.width : props.height || 40,
+  width: props.width || (props.iconSize || 24) * 1.1,
+  height: (isRound.value ? props.width : props.height) || (props.iconSize || 24) * 1.1,
 }))
 </script>
 
@@ -120,9 +137,7 @@ const buttonStyle = computed(() => ({
   background-color: rgba(255, 255, 255, 0.35);
 }
 .frosted-button-selected {
-  background-color: rgba(255, 255, 255, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .frosted-button-disabled {
   background-color: rgba(255, 255, 255, 0.3);
@@ -137,7 +152,7 @@ const buttonStyle = computed(() => ({
   color: white;
 }
 .mark-on-hover:hover {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.05);
 }
 .icon-container {
   display: flex;

From 8cc6b490d65aa31c63277c05fe7343878ad8caec Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 08:01:31 -0300
Subject: [PATCH 44/48] Components: Interaction-dialog: Add support for items
 list

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/InteractionDialog.vue | 63 ++++++++++++++++++++--------
 src/composables/interactionDialog.ts |  4 +-
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index d8202d270..30d8db456 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -1,26 +1,29 @@
 <template>
-  <v-dialog v-model="internalShowDialog" persistent :max-width="maxWidth || 600">
-    <v-card :max-width="maxWidth || 600" class="main-dialog px-2 rounded-lg">
+  <v-dialog v-model="internalShowDialog" persistent :max-width="maxWidth || '600px'">
+    <v-card :max-width="maxWidth || '600px'" class="main-dialog px-2 rounded-lg">
       <v-card-title>
         <div
-          class="flex justify-center test-center pt-2 mb-1 text-[20px] font-bold text-nowrap text-ellipsis overflow-x-hidden"
-          :class="`w-[${maxWidth}px]`"
+          class="flex justify-center align-center text-center pt-2 mb-1 font-bold text-nowrap text-ellipsis overflow-x-hidden"
+          :class="interfaceStore.isOnPhoneScreen ? 'text-[18px]' : 'text-[20px]'"
         >
           {{ title }}
         </div>
       </v-card-title>
-      <v-card-text class="pb-5">
+      <v-card-text class="pb-2">
         <div class="flex justify-center align-center w-full mb-3">
-          <v-icon v-if="variant" size="46" :color="variant === 'success' ? 'green' : 'yellow'" class="mr-8 ml-2">{{
-            variant === 'info'
-              ? 'mdi-information'
-              : variant === 'warning'
-              ? 'mdi-alert-rhombus'
-              : variant === 'error'
-              ? 'mdi-alert-circle'
-              : 'mdi-check-circle'
-          }}</v-icon>
-          <div class="text-lg">{{ message }}</div>
+          <v-icon v-if="variant !== 'text-only'" size="46" :color="iconColor" class="mr-8 ml-2">{{ iconType }}</v-icon>
+          <div
+            v-if="isArrayMessage"
+            class="flex flex-col mb-3 gap-y-2 w-[90%] text-start"
+            :class="interfaceStore.isOnPhoneScreen ? 'text-[13px] px-2' : 'text-lg px-5'"
+          >
+            <li v-for="messageUnit in message" :key="messageUnit">
+              {{ messageUnit }}
+            </li>
+          </div>
+          <div v-else class="text-center" :class="interfaceStore.isOnPhoneScreen ? 'text-xs' : 'text-lg'">
+            {{ message }}
+          </div>
         </div>
         <slot name="content"></slot>
         <template v-if="contentComponent">
@@ -33,8 +36,11 @@
       <v-card-actions>
         <div
           v-if="actions && actions.length > 0"
-          class="flex w-full px-1 py-2"
-          :class="actions.length === 1 ? 'justify-end' : 'justify-between'"
+          class="flex w-full"
+          :class="[
+            actions.length === 1 ? 'justify-end' : 'justify-between',
+            interfaceStore.isOnPhoneScreen ? 'px-0 py-1' : 'px-1 py-2',
+          ]"
         >
           <v-btn
             v-for="(button, index) in actions"
@@ -57,11 +63,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useInteractionDialog } from '@/composables/interactionDialog'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 
 const { closeDialog } = useInteractionDialog()
+const interfaceStore = useAppInterfaceStore()
 
 /**
  * Interface to an array of buttons for the Interaction Dialog's footer
@@ -141,6 +149,25 @@ const emit = defineEmits(['update:showDialog', 'confirmed', 'dismissed'])
 
 const internalShowDialog = ref(props.showDialog)
 
+const isArrayMessage = computed(() => Array.isArray(props.message))
+
+const iconType = computed(() => {
+  switch (props.variant) {
+    case 'info':
+      return 'mdi-information'
+    case 'warning':
+      return 'mdi-alert-rhombus'
+    case 'error':
+      return 'mdi-alert-circle'
+    default:
+      return 'mdi-check-circle'
+  }
+})
+
+const iconColor = computed(() => {
+  return props.variant === 'success' ? 'green' : 'yellow'
+})
+
 watch(
   () => props.showDialog,
   (newVal) => {
diff --git a/src/composables/interactionDialog.ts b/src/composables/interactionDialog.ts
index 5e79cb3db..d1c641c27 100644
--- a/src/composables/interactionDialog.ts
+++ b/src/composables/interactionDialog.ts
@@ -10,7 +10,7 @@ import { DialogActions } from '@/types/general'
  */
 interface DialogOptions {
   /**
-   * The message to display in the dialog.
+   * Message to display in the dialog. If an array, elements will be displayed as an item list.
    * @type {string}
    */
   message: string | string[]
@@ -36,7 +36,7 @@ interface DialogOptions {
 
   /**
    * The maximum width of the dialog in pixels.
-   * @type {number}
+   * @type {string | number}
    */
   maxWidth?: string | number
 }

From e440bdc450e0ec343d8f3a55c20f1752502da8a1 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 08:04:35 -0300
Subject: [PATCH 45/48] Components: Glass-modal: Add main vue component

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/GlassModal.vue | 81 +++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/components/GlassModal.vue

diff --git a/src/components/GlassModal.vue b/src/components/GlassModal.vue
new file mode 100644
index 000000000..c54e9ec39
--- /dev/null
+++ b/src/components/GlassModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="glass-modal"
+    :class="interfaceStore.isOnPhoneScreen ? 'rounded-[10px]' : 'rounded-[20px]'"
+    :style="modalPositionStyle"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
+
+type ModalPosition = 'left' | 'center' | 'menuitem'
+
+const props = defineProps<{
+  /**
+   *
+   */
+  isVisible: boolean
+  /**
+   *
+   */
+  position?: ModalPosition
+}>()
+
+const isVisible = ref(props.isVisible)
+const modalPosition = ref(props.position || 'center')
+
+const modalPositionStyle = computed(() => {
+  switch (modalPosition.value) {
+    case 'left':
+      return {
+        top: '50%',
+        left: '0%',
+        transform: 'translateY(-50%)',
+      }
+    case 'menuitem':
+      return {
+        top: '50%',
+        left: interfaceStore.isOnSmallScreen
+          ? `${interfaceStore.mainMenuWidth - 6}px`
+          : `${interfaceStore.mainMenuWidth + 30}px`,
+        transform: 'translateY(-50%)',
+      }
+    case 'center':
+    default:
+      return {
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+      }
+  }
+})
+
+watch(
+  () => props.isVisible,
+  (newVal) => {
+    isVisible.value = newVal
+  }
+)
+</script>
+
+<style scoped>
+.glass-modal {
+  position: absolute;
+  width: auto;
+  max-height: 85vh;
+  overflow: auto;
+  border: 1px solid #cbcbcb33;
+  background-color: #4f4f4f33;
+  backdrop-filter: blur(15px);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+  z-index: 100;
+}
+</style>

From 918212838ecf1424cb25f8a267b6fe905428ec4e Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 08:06:24 -0300
Subject: [PATCH 46/48] Views: Base-configuration: Add small screen breakpoints
 and styles

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/views/BaseConfigurationView.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/views/BaseConfigurationView.vue b/src/views/BaseConfigurationView.vue
index 51a803e8a..6c5176d86 100644
--- a/src/views/BaseConfigurationView.vue
+++ b/src/views/BaseConfigurationView.vue
@@ -1,11 +1,20 @@
 <template>
-  <v-card class="elevation-0">
-    <v-card-title class="flex-centered mt-2">
+  <div class="bg-transparent text-white px-[1vw] pb-[2vh]">
+    <div class="absolute top-0 right-0 py-2 pr-3">
+      <slot name="help-icon"></slot>
+    </div>
+    <div
+      class="font-semibold flex-centered mt-3"
+      :style="{ fontSize: interfaceStore.isOnSmallScreen ? '16px' : '20px' }"
+    >
       <slot name="title"></slot>
-    </v-card-title>
-    <v-divider />
-    <v-card-text class="flex-centered flex-column">
+    </div>
+    <div class="flex-center flex-column">
       <slot name="content"></slot>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
+<script setup lang="ts">
+import { useAppInterfaceStore } from '@/stores/appInterface'
+const interfaceStore = useAppInterfaceStore()
+</script>

From 61c2ba8b10244722578cb2156ef56cf8d3aa2f04 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Fri, 14 Jun 2024 08:07:52 -0300
Subject: [PATCH 47/48] Views: Configuration-general: Refactor component to new
 UI

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/styles/global.css                  |   7 +-
 src/views/ConfigurationGeneralView.vue | 409 +++++++++++++++----------
 2 files changed, 253 insertions(+), 163 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 33e873d2c..40f19d470 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -52,7 +52,12 @@
 ::-webkit-scrollbar-thumb:hover {
     background-color: hsla(0, 0%, 0%, 0.411);
 }
-
+.v-text-field input { 
+    background-color: transparent;  
+}
+.v-field__input {
+    background-color: transparent;
+}
 select:focus {
     outline: none;
 }
\ No newline at end of file
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index bb2a32880..c453561b1 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -1,176 +1,232 @@
 <template>
   <BaseConfigurationView>
+    <template #help-icon>
+      <GlassButton
+        icon="mdi-help-circle-outline"
+        :icon-size="interfaceStore.isOnSmallScreen ? 16 : 24"
+        :icon-class="interfaceStore.isOnSmallScreen ? '-ml-[1px]' : ''"
+        variant="round"
+        @click="openHelpDialog"
+      />
+    </template>
     <template #title>General configuration</template>
     <template #content>
-      <v-card class="pb-2 pa-5 ma-4" max-width="600px">
-        <v-icon :icon="'mdi-earth'" class="mr-3" />
-        <span class="text-h6">Global vehicle address</span>
-        <v-form
-          ref="globalAddressForm"
-          v-model="globalAddressFormValid"
-          class="justify-center d-flex align-center"
-          @submit.prevent="setGlobalAddress"
-        >
-          <v-text-field
-            v-model="newGlobalAddress"
-            variant="underlined"
-            type="input"
-            hint="Address of the Vehicle. E.g: blueos.local"
-            class="uri-input"
-            :rules="[isValidHostAddress, isValidConnectionURI]"
-          />
-
-          <v-btn v-tooltip.bottom="'Set'" icon="mdi-check" class="mx-1 mb-5 pa-0" rounded="lg" flat type="submit" />
-          <v-btn
-            v-tooltip.bottom="'Reset to default'"
-            :disabled="newGlobalAddress === defaultGlobalAddress"
-            icon="mdi-refresh"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            @click="resetGlobalAddress"
-          />
-        </v-form>
-        <span>Current address: {{ mainVehicleStore.globalAddress }} </span><br />
-      </v-card>
-      <v-card class="pb-2 pa-5 ma-4" max-width="600px">
-        <v-progress-circular v-if="vehicleConnected === undefined" indeterminate size="24" class="mr-3" />
-        <v-icon v-else :icon="vehicleConnected ? 'mdi-lan-connect' : 'mdi-lan-disconnect'" class="mr-3" />
-        <span class="text-h6">Mavlink2Rest connection</span>
-        <v-form
-          ref="mainConnectionForm"
-          v-model="mainConnectionFormValid"
-          class="justify-center d-flex align-center"
-          @submit.prevent="setMainVehicleConnectionURI"
-        >
-          <v-checkbox
-            v-model="mainVehicleStore.customMainConnectionURI.enabled"
-            v-tooltip.bottom="'Enable custom'"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            hide-details
-          />
-
-          <v-text-field
-            v-model="mainConnectionURI"
-            :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
-            label="Mavlink2Rest URI"
-            variant="underlined"
-            type="input"
-            hint="URI of a Mavlink2Rest web-socket"
-            class="uri-input"
-            :rules="[isValidSocketConnectionURI]"
-          />
-
-          <v-btn
-            v-tooltip.bottom="'Set'"
-            :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
-            icon="mdi-check"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            type="submit"
-          />
-          <v-btn
-            v-tooltip.bottom="'Reset to default'"
-            :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
-            icon="mdi-refresh"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            @click="resetMainVehicleConnectionURI"
-          />
-        </v-form>
-        <span>Current address: {{ ConnectionManager.mainConnection()?.uri().toString() ?? 'none' }} </span><br />
-        <span
-          >Status:
-          {{
-            vehicleConnected ? 'connected' : vehicleConnected === undefined ? 'connecting...' : 'failed to connect'
-          }}</span
-        >
-      </v-card>
-      <v-card class="pb-2 pa-5 ma-4" max-width="600px">
-        <v-icon :icon="'mdi-lan-pending'" class="mr-3" />
-        <span class="text-h6">WebRTC connection</span>
-        <v-form
-          ref="webRTCSignallingForm"
-          v-model="webRTCSignallingFormValid"
-          class="justify-center d-flex align-center"
-          @submit.prevent="setWebRTCSignallingURI"
-        >
-          <v-checkbox
-            v-model="mainVehicleStore.customWebRTCSignallingURI.enabled"
-            v-tooltip.bottom="'Enable custom'"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            hide-details
-          />
-
-          <v-text-field
-            v-model="webRTCSignallingURI"
-            :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
-            label="WebRTC Signalling Server URI"
-            variant="underlined"
-            type="input"
-            hint="URI of a WebRTC Signalling Server URI"
-            class="uri-input"
-            :rules="[isValidSocketConnectionURI]"
-          />
-
-          <v-btn
-            v-tooltip.bottom="'Set'"
-            :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
-            icon="mdi-check"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            type="submit"
-          />
-          <v-btn
-            v-tooltip.bottom="'Reset to default'"
-            :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
-            icon="mdi-refresh"
-            class="mx-1 mb-5 pa-0"
-            rounded="lg"
-            flat
-            @click="resetWebRTCSignallingURI"
-          />
-        </v-form>
-        <span>Current address: {{ mainVehicleStore.webRTCSignallingURI.toString() }} </span><br />
-        <div class="my-4">
-          <span class="text-lg">Custom RTC configuration:</span>
-          <div class="mt-2">
-            <div class="flex">
-              <v-checkbox
-                v-model="mainVehicleStore.customWebRTCConfiguration.enabled"
-                v-tooltip.bottom="'Enable custom'"
-                class="mx-1 mb-5 pa-0"
-                rounded="lg"
-                hide-details
-              />
+      <div class="flex-col h-full mx-[1vw] w-[540px]">
+        <ExpansiblePanel no-top-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>Global vehicle address</template>
+          <template #subtitle>Current address: {{ mainVehicleStore.globalAddress }}</template>
+          <template #content>
+            <v-form
+              ref="globalAddressForm"
+              v-model="globalAddressFormValid"
+              class="flex w-full mt-2"
+              @submit.prevent="setGlobalAddress"
+            >
+              <div class="flex justify-center align-center">
+                <v-text-field
+                  v-model="newGlobalAddress"
+                  variant="filled"
+                  type="input"
+                  :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                  hint="Address of the Vehicle. E.g: blueos.local"
+                  class="uri-input"
+                  :rules="[isValidHostAddress, isValidConnectionURI]"
+                  @click:append-inner="resetGlobalAddress"
+                >
+                  <template #append-inner>
+                    <v-icon v-tooltip.bottom="'Reset global address'" color="white" @click="resetGlobalAddress">
+                      mdi-refresh
+                    </v-icon>
+                  </template>
+                </v-text-field>
+                <v-btn
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  class="bg-transparent -mt-5"
+                  :class="interfaceStore.isOnSmallScreen ? 'ml-1' : 'ml-5'"
+                  variant="text"
+                  type="submit"
+                >
+                  Apply
+                </v-btn>
+              </div>
+            </v-form>
+          </template>
+        </ExpansiblePanel>
+        <ExpansiblePanel no-top-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>Mavlink2Rest connection</template>
+          <template #subtitle>
+            Current address: {{ ConnectionManager.mainConnection()?.uri().toString() ?? 'none' }}<br />
+            Status:
+            {{
+              vehicleConnected ? 'connected' : vehicleConnected === undefined ? 'connecting...' : 'failed to connect'
+            }}
+          </template>
+          <template #content>
+            <v-progress-circular v-if="vehicleConnected === undefined" indeterminate size="24" class="mr-3" />
+            <v-form
+              ref="mainConnectionForm"
+              v-model="mainConnectionFormValid"
+              class="flex w-full mt-2"
+              @submit.prevent="setMainVehicleConnectionURI"
+            >
+              <div class="flex flex-row w-full justify-between align-center">
+                <div class="w-[350px]">
+                  <v-text-field
+                    v-model="mainConnectionURI"
+                    :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+                    variant="filled"
+                    type="input"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hint="URI of a Mavlink2Rest web-socket"
+                    :rules="[isValidSocketConnectionURI]"
+                  >
+                    <template #append-inner>
+                      <v-icon
+                        v-tooltip.bottom="'Reset to default'"
+                        color="white"
+                        :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+                        @click="resetMainVehicleConnectionURI"
+                      >
+                        mdi-refresh
+                      </v-icon>
+                    </template>
+                  </v-text-field>
+                </div>
+
+                <v-btn
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  class="bg-transparent -mt-5 -ml-6"
+                  :disabled="!mainVehicleStore.customMainConnectionURI.enabled"
+                  variant="text"
+                  type="submit"
+                >
+                  Apply
+                </v-btn>
+                <div
+                  class="flex flex-col align-end text-[10px]"
+                  :class="interfaceStore.isOnSmallScreen ? '-mt-3' : '-mt-5'"
+                >
+                  <v-switch
+                    v-model="mainVehicleStore.customMainConnectionURI.enabled"
+                    v-tooltip.bottom="'Enable custom'"
+                    class="-mt-5 bg-transparent"
+                    :class="interfaceStore.isOnSmallScreen ? 'mr-1' : undefined"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hide-details
+                  />
+                  <div class="-mt-[4px]">
+                    {{ mainVehicleStore.customMainConnectionURI.enabled ? 'Enabled' : 'Disabled' }}
+                  </div>
+                </div>
+              </div>
+            </v-form>
+          </template>
+        </ExpansiblePanel>
+        <ExpansiblePanel no-top-divider no-bottom-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>WebRTC connection</template>
+          <template #subtitle>Current address: {{ mainVehicleStore.webRTCSignallingURI.toString() }}</template>
+          <template #content>
+            <v-form
+              ref="webRTCSignallingForm"
+              v-model="webRTCSignallingFormValid"
+              class="justify-center d-flex align-center mt-2"
+              @submit.prevent="setWebRTCSignallingURI"
+            >
+              <div class="flex justify-between align-center w-full">
+                <div class="w-[350px]">
+                  <v-text-field
+                    v-model="webRTCSignallingURI"
+                    :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+                    variant="filled"
+                    type="input"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hint="URI of a WebRTC Signalling Server URI"
+                    class="uri-input"
+                    :rules="[isValidSocketConnectionURI]"
+                  >
+                    <template #append-inner>
+                      <v-icon
+                        v-tooltip.bottom="'Reset to default'"
+                        color="white"
+                        :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+                        @click="resetWebRTCSignallingURI"
+                      >
+                        mdi-refresh
+                      </v-icon>
+                    </template>
+                  </v-text-field>
+                </div>
+                <v-btn
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  :disabled="!mainVehicleStore.customWebRTCSignallingURI.enabled"
+                  class="bg-transparent -mt-5 -ml-6"
+                  variant="text"
+                  type="submit"
+                >
+                  Apply
+                </v-btn>
+                <div
+                  class="flex flex-col align-end text-[10px]"
+                  :class="interfaceStore.isOnSmallScreen ? '-mt-3' : '-mt-5'"
+                >
+                  <v-switch
+                    v-model="mainVehicleStore.customWebRTCSignallingURI.enabled"
+                    v-tooltip.bottom="'Enable custom'"
+                    class="-mt-5 bg-transparent"
+                    :class="interfaceStore.isOnSmallScreen ? 'mr-1' : undefined"
+                    :density="interfaceStore.isOnSmallScreen ? 'compact' : 'default'"
+                    hide-details
+                  />
+                  <div class="-mt-[4px]">
+                    {{ mainVehicleStore.customWebRTCSignallingURI.enabled ? 'Enabled' : 'Disabled' }}
+                  </div>
+                </div>
+              </div>
+            </v-form>
+          </template>
+        </ExpansiblePanel>
+        <ExpansiblePanel no-bottom-divider :is-expanded="!interfaceStore.isOnSmallScreen">
+          <template #title>Custom RTC Configuration</template>
+          <template #content>
+            <div class="flex justify-between mt-2 w-full">
               <v-textarea
                 id="rtcConfigTextInput"
                 v-model="customRtcConfiguration"
                 :disabled="!mainVehicleStore.customWebRTCConfiguration.enabled"
-                variant="underlined"
+                variant="outlined"
                 label="Custom WebRTC Configuration"
-                clearable
-                :rows="8"
+                :rows="6"
                 hint="e.g.: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] }"
-                class="uri-input"
-              />
-              <v-btn
-                v-tooltip.bottom="'Save'"
-                icon="mdi-check"
-                class="mx-1 mb-5 pa-0"
-                rounded="lg"
-                flat
-                @click="updateWebRtcConfiguration"
+                class="w-full"
               />
+              <div class="flex flex-col justify-around align-center w-[100px] -mr-6">
+                <GlassButton
+                  :size="interfaceStore.isOnSmallScreen ? 'small' : 'default'"
+                  variant="uncontained"
+                  label="APPLY"
+                  :disabled="!mainVehicleStore.customWebRTCConfiguration.enabled"
+                  label-class="font-thin text-[15px] opacity-[0.95] -ml-1"
+                  no-effects
+                  class="-mt-8"
+                  @click="handleCustomRtcConfiguration"
+                />
+                <div class="flex flex-col align-end text-[10px] -mt-8">
+                  <v-switch
+                    v-model="mainVehicleStore.customWebRTCConfiguration.enabled"
+                    v-tooltip.bottom="'Enable custom'"
+                    class="-mt-5 bg-transparent"
+                    rounded="lg"
+                    hide-details
+                  />
+                  <div class="-mt-[4px]">
+                    {{ mainVehicleStore.customWebRTCConfiguration.enabled ? 'Enabled' : 'Disabled' }}
+                  </div>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </v-card>
+          </template>
+        </ExpansiblePanel>
+      </div>
     </template>
   </BaseConfigurationView>
 </template>
@@ -179,15 +235,21 @@
 import { onMounted, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
+import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import GlassButton from '@/components/GlassButton.vue'
+import { useInteractionDialog } from '@/composables/interactionDialog'
 import * as Connection from '@/libs/connection/connection'
 import { ConnectionManager } from '@/libs/connection/connection-manager'
 import { isValidNetworkAddress } from '@/libs/utils'
 import * as Protocol from '@/libs/vehicle/protocol/protocol'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
 
 const mainVehicleStore = useMainVehicleStore()
+const interfaceStore = useAppInterfaceStore()
+const { showDialog } = useInteractionDialog()
 
 const globalAddressForm = ref()
 const globalAddressFormValid = ref(false)
@@ -215,6 +277,12 @@ const resetGlobalAddress = async (): Promise<void> => {
   await setGlobalAddress()
 }
 
+const handleCustomRtcConfiguration = (): void => {
+  if (mainVehicleStore.customWebRTCConfiguration.enabled) {
+    updateWebRtcConfiguration()
+  }
+}
+
 /** Main vehicle connection */
 
 const vehicleConnected = ref<boolean | undefined>(mainVehicleStore.isVehicleOnline)
@@ -385,10 +453,27 @@ watch(customRtcConfiguration, () => tryToPrettifyRtcConfig())
 onMounted(() => {
   tryToPrettifyRtcConfig()
 })
+
+const openHelpDialog = (): void => {
+  showDialog({
+    title: 'General Configuration Help',
+    message: [
+      // eslint-disable-next-line vue/max-len
+      'Global Vehicle Address: Sets the network address for device communication. Change and apply new settings as needed.',
+      // eslint-disable-next-line vue/max-len
+      'Mavlink2Rest Connection: Configures MAVLink over HTTP/WS. Toggle to enable/disable and apply settings to take effect.',
+      // eslint-disable-next-line vue/max-len
+      'WebRTC Connection: Establishes real-time communication over the web. Set the signaling server URI and toggle to activate.',
+      'Additional Help: For more detailed settings, refer to documentation or contact us.',
+    ],
+    variant: 'text-only',
+    maxWidth: interfaceStore.isOnSmallScreen ? '80vw' : '60vw',
+  })
+}
 </script>
 
 <style scoped>
 .uri-input {
-  min-width: 350px;
+  width: 350px;
 }
 </style>

From 803bf6dafcdd05a5fc178579d97db0603bfa5a49 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Mon, 17 Jun 2024 07:32:20 -0300
Subject: [PATCH 48/48] App: Add config submenus and its contents

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/App.vue | 297 +++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 199 insertions(+), 98 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8ecf1372b..fdb2b2c87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,108 +9,152 @@
           :style="simplifiedMainMenu ? { width: '45px', borderRadius: '0 10px 10px 0' } : mainMenuWidth"
         >
           <v-window v-model="mainMenuStep" class="h-full w-full">
-            <div
-              class="flex flex-col h-full justify-between align-center items-center"
-              :class="
-                interfaceStore.isOnSmallScreen
-                  ? 'gap-y-2 pt-2 pb-3 sm:gap-y-1 sm:py-0 sm:-ml-[3px] xs:gap-y-1 xs:py-0 xs:-ml-[3px]'
-                  : 'lg:gap-y-4 xl:gap-y-5 gap-y-6 py-6'
-              "
-            >
-              <GlassButton
-                v-if="route.name === 'widgets-view'"
-                :label="simplifiedMainMenu ? '' : 'Edit Mode'"
-                :selected="widgetStore.editingMode"
-                :label-class="menuLabelSize"
-                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
-                :tooltip="simplifiedMainMenu ? 'Edit Mode' : undefined"
-                :width="buttonSize"
-                icon="mdi-pencil"
-                :icon-size="simplifiedMainMenu ? 25 : undefined"
-                :disabled="false"
-                @click="
-                  () => {
-                    widgetStore.editingMode = !widgetStore.editingMode
-                    closeMainMenu()
-                  }
-                "
-              />
-              <GlassButton
-                v-if="route.name !== 'widgets-view'"
-                :label="simplifiedMainMenu ? '' : 'Flight'"
-                :label-class="menuLabelSize"
-                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
-                :tooltip="simplifiedMainMenu ? 'Flight' : undefined"
-                :width="buttonSize"
-                icon="mdi-send"
-                :icon-size="simplifiedMainMenu ? 25 : undefined"
-                :disabled="false"
-                :selected="$route.name === 'Flight'"
-                @click="
-                  () => {
-                    $router.push('/')
-                    closeMainMenu()
-                  }
-                "
-              />
-              <GlassButton
-                v-if="route.name !== 'Mission planning'"
-                :label="simplifiedMainMenu ? '' : 'Mission Planning'"
-                :label-class="menuLabelSize"
-                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
-                :tooltip="simplifiedMainMenu ? 'Mission Planning' : undefined"
-                icon="mdi-map-marker-radius-outline"
-                :icon-size="simplifiedMainMenu ? 25 : undefined"
-                :width="buttonSize"
-                :disabled="false"
-                :selected="$route.name === 'Mission planning'"
-                @click="
-                  () => {
-                    $router.push('/mission-planning')
-                    closeMainMenu()
-                  }
+            <v-window-item :value="1" class="h-full">
+              <div
+                class="flex flex-col h-full justify-between align-center items-center select-none"
+                :class="
+                  interfaceStore.isOnSmallScreen
+                    ? 'gap-y-2 pt-2 pb-3 sm:gap-y-1 sm:py-0 sm:-ml-[3px] xs:gap-y-1 xs:py-0 xs:-ml-[3px]'
+                    : 'lg:gap-y-4 xl:gap-y-5 gap-y-6 py-6'
                 "
-              />
-              <GlassButton
-                :label="simplifiedMainMenu ? '' : 'Settings'"
-                :label-class="menuLabelSize"
-                icon="mdi-cog-outline"
-                :icon-size="simplifiedMainMenu ? 25 : undefined"
-                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
-                :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
-                :button-class="!simplifiedMainMenu ? '-mt-1' : undefined"
-                :width="buttonSize"
-                :disabled="false"
-                :selected="showConfigurationMenu"
-                @click="showConfigurationMenu = true"
-              />
-              <GlassButton
-                :label="simplifiedMainMenu ? '' : isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
-                :label-class="menuLabelSize"
-                :icon="fullScreenToggleIcon"
-                :icon-size="simplifiedMainMenu ? 25 : undefined"
-                :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
-                :tooltip="simplifiedMainMenu ? (isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen') : undefined"
-                :button-class="simplifiedMainMenu ? '-mb-2' : ''"
-                :width="buttonSize"
-                :disabled="false"
-                :selected="false"
-                @click="
-                  () => {
-                    toggleFullscreen()
-                    closeMainMenu()
-                  }
-                "
-              />
-            </div>
+              >
+                <GlassButton
+                  v-if="route.name === 'widgets-view'"
+                  :label="simplifiedMainMenu ? '' : 'Edit Mode'"
+                  :selected="widgetStore.editingMode"
+                  :label-class="menuLabelSize"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Edit Mode' : undefined"
+                  :width="buttonSize"
+                  icon="mdi-pencil"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :disabled="false"
+                  @click="
+                    () => {
+                      widgetStore.editingMode = !widgetStore.editingMode
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'widgets-view'"
+                  :label="simplifiedMainMenu ? '' : 'Flight'"
+                  :label-class="menuLabelSize"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Flight' : undefined"
+                  :width="buttonSize"
+                  icon="mdi-send"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :disabled="false"
+                  :selected="$route.name === 'Flight'"
+                  @click="
+                    () => {
+                      $router.push('/')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  v-if="route.name !== 'Mission planning'"
+                  :label="simplifiedMainMenu ? '' : 'Mission Planning'"
+                  :label-class="menuLabelSize"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Mission Planning' : undefined"
+                  icon="mdi-map-marker-radius-outline"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="$route.name === 'Mission planning'"
+                  @click="
+                    () => {
+                      $router.push('/mission-planning')
+                      closeMainMenu()
+                    }
+                  "
+                />
+                <GlassButton
+                  :label="simplifiedMainMenu ? '' : 'Settings'"
+                  :label-class="menuLabelSize"
+                  icon="mdi-cog-outline"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
+                  :button-class="!simplifiedMainMenu ? '-mt-1' : undefined"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="showConfigurationMenu"
+                  @click="mainMenuStep = 2"
+                />
+                <GlassButton
+                  :label="simplifiedMainMenu ? '' : isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
+                  :label-class="menuLabelSize"
+                  :icon="fullScreenToggleIcon"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? (isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen') : undefined"
+                  :button-class="simplifiedMainMenu ? '-mb-2' : ''"
+                  :width="buttonSize"
+                  :disabled="false"
+                  :selected="false"
+                  @click="
+                    () => {
+                      toggleFullscreen()
+                      closeMainMenu()
+                    }
+                  "
+                />
+              </div>
+            </v-window-item>
+            <v-window-item :value="2" class="h-full w-full">
+              <div
+                class="flex flex-col w-full h-full justify-between"
+                :class="simplifiedMainMenu ? 'py-0 gap-y-0' : 'py-2 gap-y-1'"
+              >
+                <GlassButton
+                  v-for="menuitem in configMenu"
+                  :key="menuitem.title"
+                  :label="interfaceStore.isOnSmallScreen ? undefined : menuitem.title"
+                  :label-class="menuLabelSize"
+                  :button-class="interfaceStore.isOnSmallScreen ? 'mt-1 -ml-[3px]' : undefined"
+                  :icon="menuitem.icon"
+                  :selected="currentConfigMenuComponent === menuitem.component"
+                  variant="uncontained"
+                  :height="buttonSize * 0.5"
+                  :icon-size="buttonSize * 0.6"
+                  :disabled="false"
+                  @click="toggleConfigComponent(menuitem.component)"
+                  ><template #content
+                    ><div v-if="currentConfigMenuComponent === menuitem.component" class="arrow-left"></div></template
+                ></GlassButton>
+                <div class="flex flex-col justify-center align-center">
+                  <v-divider width="70%" class="mb-3" />
+                  <GlassButton
+                    :label-class="menuLabelSize"
+                    icon="mdi-arrow-left"
+                    icon-class="lg:-ml-[1px] md:-mt-[1px] -ml-[2px]"
+                    :button-class="interfaceStore.isOnSmallScreen ? (simplifiedMainMenu ? '-mt-1' : 'mt-1') : undefined"
+                    variant="round"
+                    :width="buttonSize / 2.4"
+                    :disabled="false"
+                    :selected="false"
+                    @click="
+                      () => {
+                        mainMenuStep = 1
+                        currentConfigMenuComponent = null
+                      }
+                    "
+                  />
+                </div>
+              </div>
+            </v-window-item>
           </v-window>
         </div>
       </transition>
 
       <teleport to="body">
-        <v-dialog v-model="showConfigurationMenu" transition="dialog-bottom-transition" width="100%" height="100%">
-          <ConfigurationMenu />
-        </v-dialog>
+        <GlassModal :is-visible="currentConfigMenuComponent !== null && mainMenuStep !== 1" position="menuitem"
+          ><component :is="currentConfigMenuComponent"></component
+        ></GlassModal>
       </teleport>
 
       <teleport to="body">
@@ -207,10 +251,10 @@
 import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp } from '@vueuse/core'
 import { format } from 'date-fns'
 import Swal from 'sweetalert2'
-import { computed, DefineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, DefineComponent, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
+import GlassModal from '@/components/GlassModal.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { coolMissionNames } from '@/libs/funny-name/words'
 import {
@@ -230,6 +274,13 @@ import { datalogger } from './libs/sensors-logging'
 import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
 import { useWidgetManagerStore } from './stores/widgetManager'
+import ConfigurationAlertsView from './views/ConfigurationAlertsView.vue'
+import ConfigurationDevelopmentView from './views/ConfigurationDevelopmentView.vue'
+import ConfigurationGeneralView from './views/ConfigurationGeneralView.vue'
+import ConfigurationJoystickView from './views/ConfigurationJoystickView.vue'
+import ConfigurationTelemetryView from './views/ConfigurationLogsView.vue'
+import ConfigurationMissionView from './views/ConfigurationMissionView.vue'
+import ConfigurationVideoView from './views/ConfigurationVideoView.vue'
 
 const { showDialog, closeDialog } = useInteractionDialog()
 
@@ -249,6 +300,56 @@ const mainMenuStep = ref(1)
 const simplifiedMainMenu = ref(false)
 const windowHeight = ref(window.innerHeight)
 
+const configMenu = [
+  {
+    icon: 'mdi-view-dashboard-variant',
+    title: 'General',
+    component: markRaw(ConfigurationGeneralView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-controller',
+    title: 'Joystick',
+    component: markRaw(ConfigurationJoystickView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-video',
+    title: 'Video',
+    component: markRaw(ConfigurationVideoView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-subtitles-outline',
+    title: 'Telemetry',
+    component: markRaw(ConfigurationTelemetryView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-alert-rhombus-outline',
+    title: 'Alerts',
+    component: markRaw(ConfigurationAlertsView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-dev-to',
+    title: 'Dev',
+    component: markRaw(ConfigurationDevelopmentView) as ConfigComponent,
+  },
+  {
+    icon: 'mdi-map-marker-path',
+    title: 'Mission',
+    component: markRaw(ConfigurationMissionView) as ConfigComponent,
+  },
+]
+
+const toggleConfigComponent = (component: ConfigComponent): void => {
+  if (currentConfigMenuComponent.value === null) {
+    currentConfigMenuComponent.value = component
+    return
+  }
+  if (currentConfigMenuComponent.value === component) {
+    currentConfigMenuComponent.value = null
+    return
+  }
+  currentConfigMenuComponent.value = component
+}
+
 watch(
   () => windowHeight.value < 450,
   (isSmall: boolean) => {