feat: show and stream new notifications (#282)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/common/CommonPaginator.vue

@@ -4,11 +4,12 @@ import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { Paginator, WsEvents } from 'masto'
 
-const { paginator, stream, keyProp = 'id', virtualScroller = false } = defineProps<{
+const { paginator, stream, keyProp = 'id', virtualScroller = false, eventType = 'update' } = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
   virtualScroller?: boolean
   stream?: WsEvents
+  eventType?: 'notification' | 'update'
 }>()
 
 defineSlots<{
@@ -23,7 +24,7 @@ defineSlots<{
   loading: {}
 }>()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType)
 </script>
 
 <template>

components/nav/NavSide.vue

@@ -1,8 +1,21 @@
+<script setup>
+const { notifications } = useNotifications()
+</script>
+
 <template>
   <nav px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
       <NavSideItem :text="$t('nav_side.home')" to="/home" icon="i-ri:home-5-line" />
-      <NavSideItem :text="$t('nav_side.notifications')" to="/notifications" icon="i-ri:notification-4-line" />
+      <NavSideItem :text="$t('nav_side.notifications')" to="/notifications" icon="i-ri:notification-4-line">
+        <template #icon>
+          <div flex relative>
+            <div class="i-ri:notification-4-line" />
+            <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
+              {{ notifications < 10 ? notifications : '•' }}
+            </div>
+          </div>
+        </template>
+      </NavSideItem>
     </template>
     <NavSideItem :text="$t('nav_side.explore')" to="/explore" icon="i-ri:hashtag" />
     <NavSideItem :text="$t('nav_side.local')" to="/public/local" icon="i-ri:group-2-line " />

components/notification/NotificationPaginator.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import type { Notification, Paginator } from 'masto'
+import type { Notification, Paginator, WsEvents } from 'masto'
 import type { GroupedNotifications } from '~/types'
 
-const { paginator } = defineProps<{
+const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Notification[]>
+  stream?: WsEvents
 }>()
 
 function groupItems(items: Notification[]): (Notification | GroupedNotifications)[] {
@@ -41,10 +42,17 @@ function groupItems(items: Notification[]): (Notification | GroupedNotifications
 
   return results
 }
+
+const { clearNotifications } = useNotifications()
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator">
+  <CommonPaginator :paginator="paginator" :stream="stream" event-type="notification">
+    <template #updater="{ number, update }">
+      <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
+        {{ $t('timeline.show_new_items', [number]) }}
+      </button>
+    </template>
     <template #items="{ items }">
       <template v-for="item of groupItems(items)" :key="item.id">
         <NotificationGroupedFollow