Added Notifications

Added Mentions in HistoryItems

components/NotificationsSlideover.vue

@@ -1,29 +1,60 @@
-<script setup lang="ts">
-import { formatTimeAgo } from '@vueuse/core'
-import type { Notification } from '~/types'
+<script setup>
+import {formatTimeAgo} from '@vueuse/core'
+
+const supabase = useSupabaseClient()
+
 
 const { isNotificationsSlideoverOpen } = useDashboard()
 
-//const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
+watch(isNotificationsSlideoverOpen, async (newVal,oldVal) => {
+  if(newVal === true) {
+    await setup()
+  }
+})
+
+const notifications = ref([])
+
+const setup = async () => {
+  notifications.value = (await supabase.from("notifications").select()).data
+}
+
+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)
+
+  setup()
+
+}
 </script>
 
 <template>
   <UDashboardSlideover v-model="isNotificationsSlideoverOpen" title="Benachrichtigungen">
-<!--    <NuxtLink v-for="notification in notifications" :key="notification.id" :to="`/inbox?id=${notification.id}`" class="p-3 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer flex items-center gap-3 relative">
-      <UChip color="red" :show="!!notification.unread" inset>
-        <UAvatar v-bind="notification.sender.avatar" :alt="notification.sender.name" size="md" />
+    <NuxtLink
+        v-for="notification in notifications"
+        :key="notification.id"
+        :to="notification.link"
+        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>
+        <UAvatar alt="FEDEO" size="md" />
       </UChip>
 
       <div class="text-sm flex-1">
         <p class="flex items-center justify-between">
-          <span class="text-gray-900 dark:text-white font-medium">{{ notification.sender.name }}</span>
+          <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.date))" />
+          <time :datetime="notification.date" class="text-gray-500 dark:text-gray-400 text-xs" v-text="formatTimeAgo(new Date(notification.created_at))" />
         </p>
         <p class="text-gray-500 dark:text-gray-400">
-          {{ notification.body }}
+          {{ notification.message }}
         </p>
       </div>
-    </NuxtLink>-->
+    </NuxtLink>
   </UDashboardSlideover>
 </template>