feat: delete all notifications

pages/account/notifications.vue

@@ -1,20 +1,33 @@
 <template>
   <div>
     <div class="border-b border-zinc-800 pb-4 w-full">
-      <div class="flex items-center justify-between w-full">
+      <div
+        class="gap-2 flex flex-col lg:flex-row lg:items-center justify-between w-full"
+      >
         <h2
           class="text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
         >
           {{ $t("account.notifications.notifications") }}
         </h2>
-        <button
-          :disabled="notifications.length === 0"
-          class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800 disabled:hover:scale-100 disabled:hover:shadow-none"
-          @click="markAllAsRead"
-        >
-          <CheckIcon class="size-4" />
-          {{ $t("account.notifications.markAllAsRead") }}
-        </button>
+        <div class="inline-flex gap-x-2">
+          <button
+            :disabled="notifications.length === 0"
+            class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800 disabled:hover:scale-100 disabled:hover:shadow-none"
+            @click="markAllAsRead"
+          >
+            <CheckIcon class="size-4" />
+            {{ $t("account.notifications.markAllAsRead") }}
+          </button>
+          <button
+            :disabled="notifications.length === 0"
+            class="inline-flex items-center justify-center gap-x-2 rounded-md bg-red-800 px-3 py-2 text-sm font-semibold text-red-100 shadow-sm transition-all duration-200 hover:bg-red-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-800 disabled:hover:scale-100 disabled:hover:shadow-none"
+            @click="clearNotifications"
+          >
+            <TrashIcon class="size-4" />
+            {{ $t("account.notifications.clear") }}
+          </button>
+          
+        </div>
       </div>
       <p
         class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
@@ -31,7 +44,7 @@
         :class="{ 'opacity-75': notification.read }"
       >
         <div class="p-6">
-          <div class="flex items-start justify-between">
+          <div class="flex flex-col lg:flex-row items-start justify-between">
             <div class="flex-1">
               <h3 class="text-base font-semibold text-zinc-100">
                 {{ notification.title }}
@@ -52,7 +65,9 @@
                 </NuxtLink>
               </div>
             </div>
-            <div class="ml-4 flex flex-shrink-0 items-center gap-x-2">
+            <div
+              class="mt-4 lg:mt-0 lg:ml-4 flex flex-shrink-0 items-center gap-x-2"
+            >
               <span class="text-xs text-zinc-500">
                 <RelativeTime :date="notification.created" />
               </span>
@@ -106,22 +121,12 @@ useHead({
 });
 
 // Fetch notifications
-const notifications = ref<SerializeObject<NotificationModel>[]>([]);
-
-async function fetchNotifications() {
-  const { data } = await useFetch("/api/v1/notifications");
-  notifications.value = data.value || [];
-}
-
-// Initial fetch
-await fetchNotifications();
+const notifications = useNotifications();
 
 // Mark a notification as read
 async function markAsRead(id: string) {
   await $dropFetch(`/api/v1/notifications/${id}/read`, { method: "POST" });
-  const notification = notifications.value.find(
-    (n: SerializeObject<NotificationModel>) => n.id === id,
-  );
+  const notification = notifications.value.find((n) => n.id === id);
   if (notification) {
     notification.read = true;
   }
@@ -129,12 +134,21 @@ async function markAsRead(id: string) {
 
 // Mark all notifications as read
 async function markAllAsRead() {
-  await $dropFetch("/api/v1/notifications/readall", { method: "POST" });
-  notifications.value.forEach(
-    (notification: SerializeObject<NotificationModel>) => {
-      notification.read = true;
-    },
-  );
+  await $dropFetch("/api/v1/notifications/readall", {
+    method: "POST",
+    failTitle: "Failed to read all notifications",
+  });
+  notifications.value.forEach((notification) => {
+    notification.read = true;
+  });
+}
+
+async function clearNotifications() {
+  await $dropFetch("/api/v1/notifications/clear", {
+    method: "POST",
+    failTitle: "Failed to clear notifications",
+  });
+  notifications.value = [];
 }
 
 // Delete a notification