Supabase Removals Frontend

frontend/components/NotificationsSlideover.vue

@@ -1,9 +1,6 @@
 <script setup>
 import {formatTimeAgo} from '@vueuse/core'
 
-const supabase = useSupabaseClient()
-
-
 const { isNotificationsSlideoverOpen } = useDashboard()
 
 watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
@@ -15,18 +12,24 @@ watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
 const notifications = ref([])
 
 const setup = async () => {
-  notifications.value = (await supabase.from("notifications").select()).data
+  try {
+    notifications.value = await useNuxtApp().$api("/api/resource/notifications_items")
+  } catch (e) {
+    notifications.value = []
+  }
 }
 
 setup()
 
 const setNotificationAsRead = async (notification) => {
-  console.log(notification)
-
-  const {data,error} = await supabase.from("notifications").update({read: true}).eq("id", notification.id)
-
-  console.log(error)
-
+  try {
+    await useNuxtApp().$api(`/api/resource/notifications_items/${notification.id}`, {
+      method: "PUT",
+      body: { readAt: new Date() }
+    })
+  } catch (e) {
+    // noop: endpoint optional in older/newer backend variants
+  }
   setup()
 
 }
@@ -41,7 +44,7 @@ const setNotificationAsRead = async (notification) => {
         class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative"
         @click="setNotificationAsRead(notification)"
     >
-      <UChip color="primary" :show="!notification.read" inset>
+      <UChip color="primary" :show="!notification.read && !notification.readAt" inset>
         <UAvatar alt="FEDEO" size="md" />
       </UChip>
 
@@ -49,7 +52,7 @@ const setNotificationAsRead = async (notification) => {
         <p class="flex items-center justify-between">
           <span class="text-gray-900 dark:text-white font-medium">{{notification.title}}</span>
 
-          <time :datetime="notification.date" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.created_at))" />
+          <time :datetime="notification.date || notification.createdAt || notification.created_at" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.createdAt || notification.created_at))" />
         </p>
         <p class="text-gray-500 dark:text-gray-400">
           {{ notification.message }}