From 28559240ea76a39af9ca6bd456e7dd3a4000a4e9 Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 7 Jan 2025 17:54:40 -0300
Subject: [PATCH 1/2] Store: App-interface: Add dialog queue

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>

App: Implement startup dialogs queue

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/App.vue                | 50 ++++++++++++++++++++++++++++++--------
 src/stores/appInterface.ts | 11 +++++++++
 src/types/ui.ts            | 14 +++++++++++
 3 files changed, 65 insertions(+), 10 deletions(-)
 create mode 100644 src/types/ui.ts

diff --git a/src/App.vue b/src/App.vue
index f50106e6c..2e07879f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -313,10 +313,12 @@
     </v-main>
   </v-app>
   <About v-if="showAboutDialog" @update:show-about-dialog="showAboutDialog = $event" />
-  <Tutorial :show-tutorial="interfaceStore.isTutorialVisible" />
   <VideoLibraryModal :open-modal="interfaceStore.isVideoLibraryVisible" />
-  <VehicleDiscoveryDialog v-model="showDiscoveryDialog" show-auto-search-option />
-  <UpdateNotification v-if="isElectron()" />
+
+  <!-- Startup dialogs queue -->
+  <div v-if="activeDialog">
+    <component :is="activeDialog.component" v-bind="activeDialog.props" @close="interfaceStore.openNextDialogOnQueue" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -375,6 +377,8 @@ const isSlidingOut = ref(false)
 const simplifiedMainMenu = ref(false)
 const windowHeight = ref(window.innerHeight)
 
+const activeDialog = computed(() => interfaceStore.activeDialog)
+
 const configMenu = [
   {
     icon: 'mdi-view-dashboard-variant',
@@ -726,17 +730,43 @@ onBeforeUnmount(() => {
 const currentTopBarHeightPixels = computed(() => `${widgetStore.currentTopBarHeightPixels}px`)
 const currentBottomBarHeightPixels = computed(() => `${widgetStore.currentBottomBarHeightPixels}px`)
 
-const showDiscoveryDialog = ref(false)
 const preventAutoSearch = useStorage('cockpit-prevent-auto-vehicle-discovery-dialog', false)
 
-onMounted(() => {
+onMounted(async () => {
+  interfaceStore.enqueueDialog({
+    id: 'Tutorial',
+    component: Tutorial,
+    props: {},
+  })
+  await runElectronStartup()
+  interfaceStore.openNextDialogOnQueue()
+})
+
+const runElectronStartup = async (): Promise<void> => {
+  if (isElectron()) {
+    interfaceStore.enqueueDialog({
+      id: 'UpdateNotification',
+      component: UpdateNotification,
+      props: {},
+    })
+    // Wait 5 seconds to check if we're connected to a vehicle
+    setTimeout(() => {
+      if (vehicleStore.isVehicleOnline) return
+      interfaceStore.enqueueDialog({
+        id: 'VehicleDiscoveryDialog',
+        component: VehicleDiscoveryDialog,
+        props: {},
+      })
+      if (interfaceStore.dialogQueue[0].id === 'VehicleDiscoveryDialog') {
+        interfaceStore.openNextDialogOnQueue()
+      }
+    }, 5000)
+  }
   if (!isElectron() || preventAutoSearch.value) return
+}
 
-  // Wait 5 seconds to check if we're connected to a vehicle
-  setTimeout(() => {
-    if (vehicleStore.isVehicleOnline) return
-    showDiscoveryDialog.value = true
-  }, 5000)
+onBeforeUnmount(() => {
+  interfaceStore.dialogQueue = []
 })
 </script>
 
diff --git a/src/stores/appInterface.ts b/src/stores/appInterface.ts
index 00b900fd9..cee473f46 100644
--- a/src/stores/appInterface.ts
+++ b/src/stores/appInterface.ts
@@ -4,6 +4,7 @@ import { watch } from 'vue'
 
 import { defaultDisplayUnitPreferences } from '@/assets/defaults'
 import { useBlueOsStorage } from '@/composables/settingsSyncer'
+import { DialogOnQueue } from '@/types/ui'
 
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
@@ -28,6 +29,8 @@ export const useAppInterfaceStore = defineStore('responsive', {
     isGlassModalAlwaysOnTop: false,
     isTutorialVisible: false,
     configPanelVisible: false,
+    dialogQueue: [] as DialogOnQueue[],
+    activeDialog: undefined as DialogOnQueue | undefined,
   }),
   actions: {
     updateWidth() {
@@ -41,6 +44,14 @@ export const useAppInterfaceStore = defineStore('responsive', {
         .padStart(2, '0')
       this.UIGlassEffect.bgColor = `#${hex}${alphaHex}`
     },
+    enqueueDialog(dialog: DialogOnQueue) {
+      this.dialogQueue.push(dialog)
+    },
+    openNextDialogOnQueue() {
+      if (this.dialogQueue.length > 0) {
+        this.activeDialog = this.dialogQueue.shift()
+      }
+    },
   },
   getters: {
     isXs: (state) => state.width < 720, // Extra small devices (5-6" mobile screens in landscape)
diff --git a/src/types/ui.ts b/src/types/ui.ts
new file mode 100644
index 000000000..1b94a78c2
--- /dev/null
+++ b/src/types/ui.ts
@@ -0,0 +1,14 @@
+export type DialogOnQueue = {
+  /**
+   * Dialog Id
+   */
+  id: string
+  /**
+   * Component to be rendered
+   */
+  component: any
+  /**
+   * Props to be passed to the component
+   */
+  props?: Record<string, any>
+}

From f6e9ea45ceeffdd19d1d9dd3007eb04cd1e4872b Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Tue, 7 Jan 2025 17:57:58 -0300
Subject: [PATCH 2/2] App: Startup dialogs: Implement changes to run under
 dialog queue

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/InteractionDialog.vue      | 14 ++++++++-
 src/components/Tutorial.vue               | 19 +++---------
 src/components/UpdateNotification.vue     | 35 ++++++++++++++++-------
 src/components/VehicleDiscoveryDialog.vue | 14 +++++++--
 4 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index c8b413a8a..a4adf7863 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -1,5 +1,11 @@
 <template>
-  <v-dialog v-model="internalShowDialog" :persistent="persistent" :width="maxWidth || 'auto'">
+  <v-dialog
+    v-model="internalShowDialog"
+    :persistent="persistent"
+    :width="maxWidth || 'auto'"
+    @click:outside="handleClose"
+    @close="handleClose"
+  >
     <v-card
       :width="maxWidth || 'auto'"
       class="main-dialog px-2 rounded-lg"
@@ -200,6 +206,12 @@ const iconColor = computed(() => {
 
 const hasActionsSlot = computed(() => !!slots.actions)
 
+const handleClose = (): void => {
+  if (interfaceStore.dialogQueue.length > 0) {
+    interfaceStore.openNextDialogOnQueue()
+  }
+}
+
 watch(
   () => props.showDialog,
   (newVal) => {
diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
index edf4d61a7..7c9231201 100644
--- a/src/components/Tutorial.vue
+++ b/src/components/Tutorial.vue
@@ -91,20 +91,11 @@ const { showSnackbar } = useSnackbar()
 const interfaceStore = useAppInterfaceStore()
 const vehicleStore = useMainVehicleStore()
 
-const props = defineProps<{
-  /**
-   *
-   */
-  showTutorial?: boolean
-}>()
-
-const emits = defineEmits(['update:showTutorial'])
-
-const showTutorial = ref(props.showTutorial || false)
+const userHasSeenTutorial = useBlueOsStorage('cockpit-has-seen-tutorial', false)
+const showTutorial = ref((interfaceStore.activeDialog?.id === 'Tutorial' && !userHasSeenTutorial.value) || false)
 const currentTutorialStep = ref(1)
 const isVehicleConnectedVisible = ref(false)
 const tallContent = ref(false)
-const userHasSeenTutorial = useBlueOsStorage('cockpit-has-seen-tutorial', false)
 
 const steps = [
   {
@@ -345,7 +336,7 @@ const handleStepChangeDown = (newStep: number): void => {
 const dontShowTutorialAgain = (): void => {
   userHasSeenTutorial.value = true
   showTutorial.value = false
-  emits('update:showTutorial', false)
+  interfaceStore.openNextDialogOnQueue()
   showSnackbar({
     message: 'This guide can be reopened via the Settings > General menu',
     variant: 'info',
@@ -356,8 +347,6 @@ const dontShowTutorialAgain = (): void => {
 
 const alwaysShowTutorialOnStartup = (): void => {
   userHasSeenTutorial.value = false
-  showTutorial.value = true
-  emits('update:showTutorial', true)
 }
 
 const nextTutorialStep = (): void => {
@@ -379,7 +368,7 @@ const closeTutorial = (): void => {
   showTutorial.value = false
   interfaceStore.componentToHighlight = 'none'
   currentTutorialStep.value = 1
-  emits('update:showTutorial', false)
+  interfaceStore.openNextDialogOnQueue()
 }
 
 const setVehicleConnectedVisible = (): void => {
diff --git a/src/components/UpdateNotification.vue b/src/components/UpdateNotification.vue
index c79521856..0ce6c3e54 100644
--- a/src/components/UpdateNotification.vue
+++ b/src/components/UpdateNotification.vue
@@ -27,6 +27,7 @@
         </template>
       </v-progress-linear>
     </template>
+    <template #actions> <v-btn variant="text" size="small" @click="handleClose">Close</v-btn> </template>
   </InteractionDialog>
 </template>
 
@@ -37,6 +38,9 @@ import { onBeforeMount, ref } from 'vue'
 import InteractionDialog, { type Action } from '@/components/InteractionDialog.vue'
 import { app_version } from '@/libs/cosmos'
 import { isElectron } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+
+const interfaceStore = useAppInterfaceStore()
 
 const showUpdateDialog = ref(false)
 const dialogTitle = ref('')
@@ -52,6 +56,11 @@ const updateInfo = ref({
 })
 const ignoredUpdateVersions = useStorage<string[]>('cockpit-ignored-update-versions', [])
 
+const handleClose = (): void => {
+  interfaceStore.openNextDialogOnQueue()
+  showUpdateDialog.value = false
+}
+
 const formatDate = (date: string): string => {
   return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
 }
@@ -75,7 +84,9 @@ onBeforeMount(() => {
     dialogVariant.value = 'info'
     dialogActions.value = []
     showProgress.value = false
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 
   window.electronAPI.onUpdateNotAvailable(() => {
@@ -87,7 +98,7 @@ onBeforeMount(() => {
       {
         text: 'OK',
         action: () => {
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
     ]
@@ -107,7 +118,7 @@ onBeforeMount(() => {
           console.log(`User chose to ignore version ${updateInfo.value.version}`)
           ignoredUpdateVersions.value.push(updateInfo.value.version)
           window.electronAPI!.cancelUpdate()
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
       {
@@ -121,7 +132,7 @@ onBeforeMount(() => {
               action: () => {
                 console.log('User chose to cancel the update for the Electron app.')
                 window.electronAPI!.cancelUpdate()
-                showUpdateDialog.value = false
+                interfaceStore.openNextDialogOnQueue()
                 dialogMessage.value = 'Downloading update...'
               },
             },
@@ -132,7 +143,7 @@ onBeforeMount(() => {
         text: 'Not Now',
         action: () => {
           window.electronAPI!.cancelUpdate()
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
     ]
@@ -140,11 +151,13 @@ onBeforeMount(() => {
     // Check if this version is in the ignored list
     if (ignoredUpdateVersions.value.includes(info.version)) {
       console.log(`Skipping ignored version ${info.version}.`)
-      showUpdateDialog.value = false
+      interfaceStore.openNextDialogOnQueue()
       return
     }
 
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 
   window.electronAPI.onDownloadProgress((progressInfo) => {
@@ -164,18 +177,20 @@ onBeforeMount(() => {
         action: () => {
           console.log('User chose to install the update for the Electron app now.')
           window.electronAPI!.installUpdate()
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
       {
         text: 'Later',
         action: () => {
           console.log('User chose to install the update for the Electron app later.')
-          showUpdateDialog.value = false
+          interfaceStore.openNextDialogOnQueue()
         },
       },
     ]
-    showUpdateDialog.value = true
+    if (interfaceStore.activeDialog?.id === 'UpdateNotification' || interfaceStore.activeDialog === undefined) {
+      showUpdateDialog.value = true
+    }
   })
 })
 </script>
diff --git a/src/components/VehicleDiscoveryDialog.vue b/src/components/VehicleDiscoveryDialog.vue
index 456f5fb99..1365690d1 100644
--- a/src/components/VehicleDiscoveryDialog.vue
+++ b/src/components/VehicleDiscoveryDialog.vue
@@ -47,15 +47,18 @@
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import { useSnackbar } from '@/composables/snackbar'
 import vehicleDiscover, { NetworkVehicle } from '@/libs/electron/vehicle-discovery'
 import { reloadCockpit } from '@/libs/utils'
+import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import InteractionDialog, { Action } from './InteractionDialog.vue'
 
+const interfaceStore = useAppInterfaceStore()
+
 const props = defineProps<{
   /**
    *
@@ -75,7 +78,8 @@ const { showSnackbar } = useSnackbar()
 const mainVehicleStore = useMainVehicleStore()
 const discoveryService = vehicleDiscover
 
-const isOpen = ref(props.modelValue)
+const isDialogOpen = computed(() => interfaceStore.activeDialog?.id === 'VehicleDiscoveryDialog' || props.modelValue)
+const isOpen = ref(isDialogOpen.value || false)
 const searching = ref(false)
 const searched = ref(false)
 const vehicles = ref<NetworkVehicle[]>([])
@@ -85,6 +89,7 @@ const originalActions = [
   {
     text: 'Close',
     action: () => {
+      interfaceStore.openNextDialogOnQueue()
       isOpen.value = false
     },
   },
@@ -105,7 +110,6 @@ watch(
     isOpen.value = value
   }
 )
-
 watch(isOpen, (value) => {
   emit('update:modelValue', value)
 })
@@ -114,6 +118,8 @@ const searchVehicles = async (): Promise<void> => {
   searching.value = true
   disableButtons()
   vehicles.value = await discoveryService.findVehicles()
+  interfaceStore.openNextDialogOnQueue()
+  isOpen.value = false
   searching.value = false
   enableButtons()
   searched.value = true
@@ -122,6 +128,7 @@ const searchVehicles = async (): Promise<void> => {
 const selectVehicle = async (address: string): Promise<void> => {
   mainVehicleStore.globalAddress = address
   isOpen.value = false
+  interfaceStore.openNextDialogOnQueue()
   await reloadCockpit()
   showSnackbar({ message: 'Vehicle address updated', variant: 'success', duration: 5000 })
 }
@@ -131,6 +138,7 @@ const preventFutureAutoSearchs = (): void => {
   disableButtons()
   setTimeout(() => {
     isOpen.value = false
+    interfaceStore.openNextDialogOnQueue()
   }, 5000)
 }