Close toast on click

src/App.vue

@@ -10,7 +10,7 @@ usePWAReload();
     <template #top>
       <VaNavbar shadowed>
         <template #center>
-          <RouterLink to="/" class="text-2xl font-bold hover:underline">TramTracks</RouterLink>
+          <RouterLink to="/" class="text-2xl font-bold hover:underline">TramTrack</RouterLink>
         </template>
         <template #right>
           <VaButton to="/stats" icon="leaderboard" title="Statistiken" />

src/composables/reload.ts

@@ -3,7 +3,7 @@ import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { useToast } from 'vuestic-ui';
 
 export function usePWAReload() {
-  const { init } = useToast();
+  const { init, close } = useToast();
 
   const { updateServiceWorker } = useRegisterSW({
     immediate: true,
@@ -24,14 +24,21 @@ export function usePWAReload() {
         color: 'success',
         duration: 2000
       }),
-    onNeedRefresh: () =>
-      init({
+    onNeedRefresh: () => {
+      const toastId = init({
         title: 'Update verfügbar',
         message: 'Für diese WebApp ist ein Update verfügbar, bitte klicke hier zum Aktualisieren!',
         color: 'warning',
         duration: 0,
         closeable: false,
-        onClick: updateServiceWorker
-      })
+        onClick: async () => {
+          await updateServiceWorker();
+
+          if (toastId) {
+            close(toastId);
+          }
+        }
+      });
+    }
   });
 }