From 47968146a8ff780b31295adf0c99dda6e3902f86 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 15 Nov 2022 22:21:54 +0100
Subject: [PATCH] feat: notifications (#7)

---
 components/notification/NotificationCard.vue  | 40 +++++++++++++++++++
 .../NotificationPaginator.client.vue          | 22 ++++++++++
 pages/notifications.vue                       | 22 ++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 components/notification/NotificationCard.vue
 create mode 100644 components/notification/NotificationPaginator.client.vue
 create mode 100644 pages/notifications.vue

diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
new file mode 100644
index 00000000..44bed60c
--- /dev/null
+++ b/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>
diff --git a/components/notification/NotificationPaginator.client.vue b/components/notification/NotificationPaginator.client.vue
new file mode 100644
index 00000000..8f7674ea
--- /dev/null
+++ b/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>
diff --git a/pages/notifications.vue b/pages/notifications.vue
new file mode 100644
index 00000000..8978f500
--- /dev/null
+++ b/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>