feat: notifications (#7)

components/notification/NotificationCard.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Notification } from 'masto'
+
+defineProps<{
+  notification: Notification
+}>()
+</script>
+
+<template>
+  <div flex flex-col>
+    <template v-if="notification.type === 'follow'">
+      <div flex ml-4>
+        <div i-ri:user-follow-fill mr-3 color-purple />{{ notification.account.displayName }} followed you
+      </div>
+      <AccountCard :account="notification.account" p3 />
+    </template>
+    <template v-if="notification.type === 'follow_request'">
+      <div flex ml-4>
+        <div i-ri:user-follow-fill mr-3 color-gray />{{ notification.account.displayName }} requested to follow you
+      </div>
+      <!-- TODO: accept request -->
+      <AccountCard :account="notification.account" p3 />
+    </template>
+    <template v-if="notification.type === 'favourite'">
+      <div flex ml-4>
+        <div i-ri:heart-fill mr-3 color-red />{{ notification.account.displayName }} favourited your post
+      </div>
+      <StatusCard :status="notification.status!" p3 />
+    </template>
+    <template v-if="notification.type === 'reblog'">
+      <div flex ml-4>
+        <div i-ri:repeat-fill mr-3 color-green />{{ notification.account.displayName }} reblogged your post
+      </div>
+      <StatusCard :status="notification.status!" p3 />
+    </template>
+    <template v-if="notification.type === 'mention' || notification.type === 'poll'">
+      <StatusCard :status="notification.status!" p3 />
+    </template>
+  </div>
+</template>

components/notification/NotificationPaginator.client.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Notification, Paginator } from 'masto'
+
+const { paginator } = defineProps<{
+  paginator: Paginator<any, Notification[]>
+}>()
+
+const { items: notifications, isLoading, isDone, endAnchor } = usePaginator(paginator)
+</script>
+
+<template>
+  <template v-for="notification of notifications" :key="notification.id">
+    <NotificationCard :notification="notification" border="t border" pt-4 />
+  </template>
+  <div ref="endAnchor" />
+  <div v-if="isLoading">
+    Loading...
+  </div>
+  <div v-if="isDone">
+    End of list
+  </div>
+</template>

pages/notifications.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const masto = await useMasto()
+const paginator = masto.notifications.getIterator()
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <div i-ri:notification-2-fill h-6 mr-1 /><span>Notifications</span>
+    </template>
+    <template #actions>
+      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <slot>
+      <NotificationPaginator :paginator="paginator" />
+    </slot>
+  </MainContent>
+</template>