Merge branch 'master' into Development

resources/js/Layouts/Partials/NotificationsBell.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
-import { usePage, Link } from "@inertiajs/vue3";
+import { usePage, Link, router } from "@inertiajs/vue3";
 import Dropdown from "@/Components/Dropdown.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faBell } from "@fortawesome/free-solid-svg-icons";
@@ -53,7 +53,7 @@ watch(
   }
 );
 
-async function markRead(item) {
+function markRead(item) {
   const idx = items.value.findIndex((i) => i.id === item.id);
   if (idx === -1) {
     return;
@@ -61,15 +61,21 @@ async function markRead(item) {
 
   // Optimistically remove
   const removed = items.value.splice(idx, 1)[0];
-
-  try {
-    await window.axios.post(route("notifications.activity.read"), {
-      activity_id: item.id,
-    });
-  } catch (e) {
-    // Rollback on failure
-    items.value.splice(idx, 0, removed);
-  }
+  
+  router.patch(
+    route("notifications.activity.read"),
+    { activity_id: item.id },
+    {
+      onSuccess: () => {
+        // Item successfully marked as read
+      },
+      onError: () => {
+        // Rollback on failure
+        items.value.splice(idx, 0, removed);
+      },
+      preserveScroll: true
+    }
+  );
 }
 </script>