feat: delete all notifications

components/NotificationItem.vue

@@ -44,9 +44,10 @@
 
 <script setup lang="ts">
 import { XMarkIcon } from "@heroicons/vue/24/solid";
+import type { SerializeObject } from "nitropack";
 import type { NotificationModel } from "~/prisma/client/models";
 
-const props = defineProps<{ notification: NotificationModel }>();
+const props = defineProps<{ notification: SerializeObject<NotificationModel> }>();
 
 async function deleteMe() {
   await $dropFetch(`/api/v1/notifications/:id`, {

components/UserHeader/NotificationWidgetPanel.vue

@@ -46,7 +46,8 @@
 </template>
 
 <script setup lang="ts">
+import type { SerializeObject } from "nitropack";
 import type { NotificationModel } from "~/prisma/client/models";
 
-const props = defineProps<{ notifications: Array<NotificationModel> }>();
+const props = defineProps<{ notifications: Array<SerializeObject<NotificationModel>> }>();
 </script>

composables/notifications.ts

@@ -1,12 +1,13 @@
+import type { SerializeObject } from "nitropack";
 import type { NotificationModel } from "~/prisma/client/models";
 
 const ws = new WebSocketHandler("/api/v1/notifications/ws");
 
 export const useNotifications = () =>
-  useState<Array<NotificationModel>>("notifications", () => []);
+  useState<Array<SerializeObject<NotificationModel>>>("notifications", () => []);
 
 ws.listen((e) => {
-  const notification = JSON.parse(e) as NotificationModel;
+  const notification = JSON.parse(e) as SerializeObject<NotificationModel>;
   const notifications = useNotifications();
   notifications.value.push(notification);
 });

i18n/locales/en_us.json

@@ -13,6 +13,7 @@
       "all": "View all {arrow}",
       "desc": "View and manage your notifications.",
       "markAllAsRead": "Mark all as read",
+      "clear": "Clear notifications",
       "markAsRead": "Mark as read",
       "none": "No notifications",
       "notifications": "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
+        <div class="inline-flex gap-x-2">
-          :disabled="notifications.length === 0"
+          <button
-          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"
+            :disabled="notifications.length === 0"
-          @click="markAllAsRead"
+            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") }}
+            <CheckIcon class="size-4" />
-        </button>
+            {{ $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>[]>([]);
+const notifications = useNotifications();
-
-async function fetchNotifications() {
-  const { data } = await useFetch("/api/v1/notifications");
-  notifications.value = data.value || [];
-}
-
-// Initial fetch
-await fetchNotifications();
 
 // Mark a notification as read
 async function markAsRead(id: string) {
   await $dropFetch(`/api/v1/notifications/${id}/read`, { method: "POST" });
-  const notification = notifications.value.find(
+  const notification = notifications.value.find((n) => n.id === id);
-    (n: SerializeObject<NotificationModel>) => 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" });
+  await $dropFetch("/api/v1/notifications/readall", {
-  notifications.value.forEach(
+    method: "POST",
-    (notification: SerializeObject<NotificationModel>) => {
+    failTitle: "Failed to read all notifications",
-      notification.read = true;
+  });
-    },
+  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

server/api/v1/notifications/clear.post.ts

@@ -0,0 +1,25 @@
+import aclManager from "~/server/internal/acls";
+import prisma from "~/server/internal/db/database";
+
+export default defineEventHandler(async (h3) => {
+  const userId = await aclManager.getUserIdACL(h3, ["notifications:mark"]);
+  if (!userId) throw createError({ statusCode: 403 });
+
+  const acls = await aclManager.fetchAllACLs(h3);
+  if (!acls)
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Got userId but no ACLs - what?",
+    });
+
+  await prisma.notification.deleteMany({
+    where: {
+      userId,
+      acls: {
+        hasSome: acls,
+      },
+    },
+  });
+
+  return;
+});