- CHG: Experimenting more with install prompt.

Author: sebastian-raubach

src/components/HelpToolbar.vue

@@ -20,19 +20,29 @@
 
 <script lang="ts" setup>
 import emitter from 'tiny-emitter/instance'
+import { coreStore } from '@/store'
+
+const store = coreStore()
 
 const expanded = ref<boolean>(false)
 const showInstall = ref<boolean>(false)
 
 let deferredPrompt: any
 
+watch(expanded, async newValue => {
+  if (newValue === false && showInstall.value) {
+    store.setToolbarHiddenAfterInstallShown(true)
+  }
+})
+
 async function install () {
   if (deferredPrompt) {
     deferredPrompt.prompt()
     const { outcome } = await deferredPrompt.userChoice
 
     emitter.emit('plausible-event', { key: 'installation', props: { userChoice: outcome } })
 
+    showInstall.value = false
     deferredPrompt = undefined
   }
 }
@@ -44,7 +54,9 @@ onMounted(() => {
     // Stash the event so it can be triggered later.
     deferredPrompt = e
 
-    expanded.value = true
+    if (!store.toolbarHiddenAfterInstallShown) {
+      expanded.value = true
+    }
     showInstall.value = true
   })
 })

src/store/index.ts

@@ -53,6 +53,7 @@ export const coreStore = defineStore('core', {
     autoSelectSearch: false,
     autoProgressInputs: true,
     categoryCountInline: 4,
+    toolbarHiddenAfterInstallShown: false,
     mainDisplayMode: MAIN_DISPLAY_MODE_AUTO,
     plausible: {
       plausibleDomain: null,
@@ -105,7 +106,8 @@ export const coreStore = defineStore('core', {
     storeChangelogVersionNumber: (state): string | null => state.changelogVersionNumber,
     storeDeviceConfig: (state): any => state.deviceConfig,
     storeShowFullTraitDescription: (state): boolean => state.showFullTraitDescription,
-    storeCategoryCountInline: (state): number => state.categoryCountInline
+    storeCategoryCountInline: (state): number => state.categoryCountInline,
+    storeToolbarHiddenAfterInstallShown: (state): boolean => state.toolbarHiddenAfterInstallShown,
   },
   actions: {
     setUniqueClientId: function (newUniqueClientId: string) {
@@ -261,6 +263,9 @@ export const coreStore = defineStore('core', {
     },
     setCategoryCountInline: function (newCategoryCountInline: number) {
       this.categoryCountInline = newCategoryCountInline
+    },
+    setToolbarHiddenAfterInstallShown: function (newToolbarHiddenAfterInstallShown: boolean) {
+      this.toolbarHiddenAfterInstallShown = newToolbarHiddenAfterInstallShown
     }
   },
   persist: {