update case index page segment index and show page

resources/js/Layouts/Partials/NotificationsBell.vue

@@ -4,6 +4,9 @@ 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";
+import { BellIcon } from "lucide-vue-next";
+import { Badge } from "@/Components/ui/badge";
+import { Button } from "@/Components/ui/button";
 
 const page = usePage();
 const due = computed(
@@ -61,7 +64,7 @@ function markRead(item) {
 
   // Optimistically remove
   const removed = items.value.splice(idx, 1)[0];
-  
+
   router.patch(
     route("notifications.activity.read"),
     { activity_id: item.id },
@@ -73,7 +76,7 @@ function markRead(item) {
         // Rollback on failure
         items.value.splice(idx, 0, removed);
       },
-      preserveScroll: true
+      preserveScroll: true,
     }
   );
 }
@@ -86,18 +89,17 @@ function markRead(item) {
     :content-classes="['p-0', 'bg-white', 'max-h-96', 'overflow-hidden']"
   >
     <template #trigger>
-      <button
-        type="button"
-        class="relative inline-flex items-center justify-center w-9 h-9 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100"
-        aria-label="Notifications"
-      >
-        <FontAwesomeIcon :icon="faBell" class="w-5 h-5" />
-        <span
+      <Button variant="ghost" size="default" class="relative">
+        <BellIcon />
+
+        <Badge
           v-if="count"
-          class="absolute -top-1 -right-1 inline-flex items-center justify-center h-5 min-w-[1.25rem] px-1 rounded-full text-[11px] bg-red-600 text-white"
-          >{{ count }}</span
+          class="absolute -top-1 -right-1 h-5 min-w-5 inline-flex items-center justify-center rounded-full px-1 font-mono tabular-nums text-accent"
+          variant="destructive"
         >
-      </button>
+          {{ count }}
+        </Badge>
+      </Button>
     </template>
 
     <template #content>