Added Notifications

resources/js/Layouts/MainLayout.vue

@@ -16,15 +16,21 @@ const achievementSound = new Audio('/sounds/seatBelt.wav')
 
 function handleNewNotifications(notifications: Notification[]) {
     if (!notifications?.length) return
-    const unseen = notifications.filter(n => !seenNotificationIds.value.has(n.id))
-    if (!unseen.length) return
-    unseen.forEach(n => seenNotificationIds.value.add(n.id))
-    activeToasts.value.push(...unseen)
+
+    const newToasts: Notification[] = []
+    for (const n of notifications) {
+        if (!seenNotificationIds.value.has(n.id)) {
+            seenNotificationIds.value.add(n.id)
+            newToasts.push(n)
+        }
+    }
+
+    if (!newToasts.length) return
+    activeToasts.value.push(...newToasts)
     achievementSound.play().catch(() => {})
 }
 
 
-
 // ── Toasts ────────────────────────────────────────────────────────────────────
 const activeToasts = ref<Notification[]>([])
 
@@ -47,13 +53,13 @@ router.on('success', (event) => {
 <template>
     <Radar>
         <div class="layoutContainer">
-            <MainHeader :key="transitionKey" />
+            <MainHeader :key="`header-${transitionKey}`" />
             <Transition name="fade" mode="out-in">
-                <main id="pageContainer" :key="transitionKey">
+                <main id="pageContainer" :key="`main-${transitionKey}`">
                     <slot />
                 </main>
             </Transition>
-            <MainFooter :key="transitionKey" />
+            <MainFooter :key="`footer-${transitionKey}`" />
         </div>
 
         <div class="toast-stack">