feat: show and stream new notifications (#282)

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

composables/paginator.ts

@@ -2,7 +2,7 @@ import type { Paginator, WsEvents } from 'masto'
 import { useDeactivated } from './lifecycle'
 import type { PaginatorState } from '~/types'
 
-export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvents) {
+export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvents, eventType: 'notification' | 'update' = 'update') {
   const state = ref<PaginatorState>('idle')
   const items = ref<T[]>([])
   const nextItems = ref<T[]>([])
@@ -19,7 +19,7 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvent
     prevItems.value = []
   }
 
-  stream?.on('update', (status) => {
+  stream?.on(eventType, (status) => {
     prevItems.value.unshift(status as any)
   })
 

composables/users.ts

@@ -1,5 +1,5 @@
 import { login as loginMasto } from 'masto'
-import type { AccountCredentials, Instance } from 'masto'
+import type { AccountCredentials, Instance, WsEvents } from 'masto'
 import { clearUserDrafts } from './statusDrafts'
 import type { UserLogin } from '~/types'
 import { DEFAULT_POST_CHARS_LIMIT, DEFAULT_SERVER, STORAGE_KEY_CURRENT_USER, STORAGE_KEY_SERVERS, STORAGE_KEY_USERS } from '~/constants'
@@ -97,6 +97,43 @@ export async function signout() {
   await loginTo(currentUser.value)
 }
 
+const notifications = reactive<Record<string, undefined | [Promise<WsEvents>, number]>>({})
+
+export const useNotifications = () => {
+  const id = currentUser.value?.account.id
+
+  const clearNotifications = () => {
+    if (!id || !notifications[id])
+      return
+    notifications[id]![1] = 0
+  }
+
+  async function connect(): Promise<void> {
+    if (!id || notifications[id])
+      return
+
+    const masto = useMasto()
+    const stream = masto.stream.streamUser()
+    notifications[id] = [stream, 0]
+    ;(await stream).on('notification', () => {
+      if (notifications[id])
+        notifications[id]![1]++
+    })
+  }
+
+  function disconnect(): void {
+    if (!id || !notifications[id])
+      return
+    notifications[id]![0].then(stream => stream.disconnect())
+    notifications[id] = undefined
+  }
+
+  watch(currentUser, disconnect)
+  connect()
+
+  return { notifications: computed(() => id ? notifications[id]?.[1] ?? 0 : 0), disconnect, clearNotifications }
+}
+
 export function checkLogin() {
   if (!currentUser.value) {
     openSigninDialog()