chore(pwa): close update notification on update

src/components/ReloadPrompt.tsx

@@ -1,32 +1,52 @@
+/* eslint-disable vue/one-component-per-file */
 import { useRegisterSW } from 'virtual:pwa-register/vue';
-import { NButton, useNotification } from 'naive-ui';
+import { useNotification, type NotificationReactive } from 'naive-ui';
-import { h, type Component } from 'vue';
+import { defineComponent } from 'vue';
 import { whenever } from '@vueuse/core';
 
-export default function () {
+export default defineComponent({
-  const notification = useNotification();
+  setup() {
+    const notificationBuilder = useNotification();
 
-  const { needRefresh, updateServiceWorker } = useRegisterSW();
+    const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW();
 
-  whenever(
+    let notification: NotificationReactive | null = null;
-    needRefresh,
+
-    () => {
+    const onUpdateClicked = () => {
-      notification.create({
+      if (notification) {
-        title: 'A new version is out!',
+        notification.action = () => (
-        content: 'Reload the page to refresh the cache and get the newest version of it-tools',
+          <n-button loading type="primary" secondary>
-        closable: true,
+            Reloading
-        onClose: () => {
+          </n-button>
-          needRefresh.value = false;
+        );
-          return true;
+      }
-        },
+
-        action: () =>
+      updateServiceWorker();
-          h(
+    };
-            NButton as Component,
+
-            { onClick: updateServiceWorker, type: 'primary', secondary: true },
+    whenever(
-            { default: () => 'Reload' },
+      needRefresh,
+      () => {
+        notification = notificationBuilder.create({
+          title: 'A new version is out!',
+          content: 'Update to get the latest version of it-tools',
+          closable: true,
+          onClose: () => {
+            needRefresh.value = false;
+            return true;
+          },
+          action: () => (
+            <n-button onClick={onUpdateClicked} type="primary" secondary>
+              Reload
+            </n-button>
           ),
-      });
+        });
-    },
+      },
-    { immediate: true },
+      { immediate: true },
-  );
+    );
-}
+
+    whenever(offlineReady, () => notification?.destroy(), { immediate: true });
+
+    return () => '';
+  },
+});