App: Startup dialogs: Implement changes to run under dialog queue

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

src/components/Tutorial.vue

@@ -98,7 +98,18 @@ const { openSnackbar } = useSnackbar()
 const interfaceStore = useAppInterfaceStore()
 const vehicleStore = useMainVehicleStore()
 
-const showTutorial = ref(true)
+const props = defineProps<{
+  /**
+   *
+   */
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const showTutorial = ref(false || props.modelValue)
 const currentTutorialStep = useStorage('cockpit-last-tutorial-step', 1)
 const isVehicleConnectedVisible = ref(false)
 const tallContent = ref(false)
@@ -316,6 +327,7 @@ const handleStepChange = (newStep: number): void => {
 const dontShowTutorialAgain = (): void => {
   interfaceStore.userHasSeenTutorial = true
   showTutorial.value = false
+  emit('update:modelValue', false)
   currentTutorialStep.value = 1
   openSnackbar({
     message: 'This guide can be reopened via the Settings > General menu',
@@ -348,8 +360,8 @@ const backTutorialStep = (): void => {
 const closeTutorial = (): void => {
   showTutorial.value = false
   interfaceStore.componentToHighlight = 'none'
-  interfaceStore.userHasSeenTutorial = true
   interfaceStore.isTutorialVisible = false
+  emit('update:modelValue', false)
 }
 
 const setVehicleConnectedVisible = (): void => {

src/components/UpdateNotification.vue

@@ -1,6 +1,6 @@
 <template>
   <InteractionDialog
-    v-model="showUpdateDialog"
+    v-model="showDialog"
     :title="dialogTitle"
     :message="dialogMessage"
     :variant="dialogVariant"
@@ -27,17 +27,35 @@
         </template>
       </v-progress-linear>
     </template>
+    <template #actions> <v-btn variant="text" size="small" @click="handleCloseDialog">Close</v-btn> </template>
   </InteractionDialog>
 </template>
 
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
-import { onBeforeMount, ref } from 'vue'
+import { computed, onBeforeMount, ref, watch } from 'vue'
 
 import InteractionDialog, { type Action } from '@/components/InteractionDialog.vue'
 import { app_version } from '@/libs/cosmos'
 import { isElectron } from '@/libs/utils'
 
+const props = defineProps<{
+  /**
+   *
+   */
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const showDialog = computed<boolean>({
+  get: () => props.modelValue,
+  set: (value: boolean): void => emit('update:modelValue', value),
+})
+
+const updateAvailable = ref(false)
 const showUpdateDialog = ref(false)
 const dialogTitle = ref('')
 const dialogMessage = ref('')
@@ -52,6 +70,17 @@ const updateInfo = ref({
 })
 const ignoredUpdateVersions = useStorage<string[]>('cockpit-ignored-update-versions', [])
 
+watch(updateAvailable, (newVal) => {
+  if (newVal) {
+    showUpdateDialog.value = true
+  }
+})
+
+const handleCloseDialog = (): void => {
+  showUpdateDialog.value = false
+  emit('update:modelValue', false)
+}
+
 const formatDate = (date: string): string => {
   return new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
 }
@@ -75,7 +104,7 @@ onBeforeMount(() => {
     dialogVariant.value = 'info'
     dialogActions.value = []
     showProgress.value = false
-    showUpdateDialog.value = true
+    updateAvailable.value = true
   })
 
   window.electronAPI.onUpdateNotAvailable(() => {
@@ -144,7 +173,7 @@ onBeforeMount(() => {
       return
     }
 
-    showUpdateDialog.value = true
+    updateAvailable.value = true
   })
 
   window.electronAPI.onDownloadProgress((progressInfo) => {
@@ -175,7 +204,7 @@ onBeforeMount(() => {
         },
       },
     ]
-    showUpdateDialog.value = true
+    updateAvailable.value = true
   })
 })
 </script>