Fix firebase import bug

src/locales/en.json

@@ -473,6 +473,7 @@
     "blocked": "Notification is blocked, the reminder notification will not work! Please enable it on your browser.",
     "desktop": "Desktop browser cannot receive notification if the browser is not running!",
     "early": "The notification may arrive earlier (about 1-10 minutes) because of the way we send the notification",
+    "allowNotification": "Please allow the notification prompt that shows up!",
     "transformer": "Parametric Transformer Reminder",
     "last": "Enter when you last used the Parametric Transformer",
     "countdown": "Enter countdown time of the Parametric Transformer (If you don't remember the exact time, you need to approximate it)",

src/routes/reminder.svelte

@@ -17,9 +17,9 @@
   import { pushToast } from '../stores/toast';
 
   import {
+    loading,
     firebaseToken,
     firstLoadNotification,
-    loading,
     loadingFirst,
     notificationAllowed,
     notificationSupported,
@@ -198,6 +198,9 @@
               {#if loadingSave}<Icon path={mdiLoading} size={0.8} spin className="mr-2" />{/if}
               {$t('reminder.set')}
             </Button>
+            {#if $loading}
+              <p class="text-green-400 text-center mt-2">{$t('reminder.allowNotification')}</p>
+            {/if}
           </div>
         </div>
         <div>

src/stores/firebase.js

@@ -15,7 +15,6 @@ const firebaseConfig = {
   appId: __paimon.env.FIREBASE_APP_ID,
 };
 
-let firebase;
 let messaging;
 
 export async function firstLoadNotification() {
@@ -65,9 +64,6 @@ async function initFirebase() {
   console.log('init firebase');
 
   if (!messaging) {
-    firebase = (await import('firebase/app')).default;
-    await import('firebase/messaging');
-
     firebase.initializeApp(firebaseConfig);
     messaging = firebase.messaging();
   }

src/template.html

@@ -21,6 +21,9 @@
     <script src="https://js.sentry-cdn.com/446c4cef71a54aafb71b698555500b7d.min.js" crossorigin="anonymous"></script>
     <script async defer data-domain="paimon.moe" src="https://plausible.paimon.moe/js/plausible.js"></script>
 
+    <script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js"></script>
+    <script src="https://www.gstatic.com/firebasejs/8.3.2/firebase-messaging.js"></script>
+    
     <style>
       html {
         height: 100%;