[🐴] Unread messages badge (#3901)

* add badge

* move stringify logic to hook

* add mutation hooks

* optimistic mark convo as read

* don't count muted chats

* Integrate new context

* Integrate mark unread mutation

* Remove unused edit

---------

Co-authored-by: Eric Bailey <git@esb.lol>

2 files changed, 140 insertions, 3 deletions

diff --git a/src/state/queries/messages/conversation.ts b/src/state/queries/messages/conversation.ts
index 9456861d2..c322e0c62 100644
--- a/src/state/queries/messages/conversation.ts
+++ b/src/state/queries/messages/conversation.ts
@@ -1,6 +1,7 @@
 import {BskyAgent} from '@atproto-labs/api'
-import {useQuery} from '@tanstack/react-query'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
+import {RQKEY as ListConvosQueryKey} from '#/state/queries/messages/list-converations'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 import {useHeaders} from './temp-headers'
 
@@ -23,3 +24,36 @@ export function useConvoQuery(convoId: string) {
     },
   })
 }
+
+export function useMarkAsReadMutation() {
+  const headers = useHeaders()
+  const {serviceUrl} = useDmServiceUrlStorage()
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({
+      convoId,
+      messageId,
+    }: {
+      convoId: string
+      messageId?: string
+    }) => {
+      const agent = new BskyAgent({service: serviceUrl})
+      await agent.api.chat.bsky.convo.updateRead(
+        {
+          convoId,
+          messageId,
+        },
+        {
+          encoding: 'application/json',
+          headers,
+        },
+      )
+    },
+    onSuccess() {
+      queryClient.invalidateQueries({
+        queryKey: ListConvosQueryKey,
+      })
+    },
+  })
+}
diff --git a/src/state/queries/messages/list-converations.ts b/src/state/queries/messages/list-converations.ts
index 1e4ecb6d7..e66551ceb 100644
--- a/src/state/queries/messages/list-converations.ts
+++ b/src/state/queries/messages/list-converations.ts
@@ -1,6 +1,12 @@
-import {BskyAgent} from '@atproto-labs/api'
-import {useInfiniteQuery} from '@tanstack/react-query'
+import {useCallback, useMemo} from 'react'
+import {
+  BskyAgent,
+  ChatBskyConvoDefs,
+  ChatBskyConvoListConvos,
+} from '@atproto-labs/api'
+import {useInfiniteQuery, useQueryClient} from '@tanstack/react-query'
 
+import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {useDmServiceUrlStorage} from '#/screens/Messages/Temp/useDmServiceUrlStorage'
 import {useHeaders} from './temp-headers'
 
@@ -27,3 +33,100 @@ export function useListConvos({refetchInterval}: {refetchInterval: number}) {
     refetchInterval,
   })
 }
+
+export function useUnreadMessageCount() {
+  const {currentConvoId} = useCurrentConvoId()
+  const convos = useListConvos({
+    refetchInterval: 30_000,
+  })
+
+  const count =
+    convos.data?.pages
+      .flatMap(page => page.convos)
+      .filter(convo => convo.id !== currentConvoId)
+      .reduce((acc, convo) => {
+        return acc + (!convo.muted && convo.unreadCount > 0 ? 1 : 0)
+      }, 0) ?? 0
+
+  return useMemo(() => {
+    return {
+      count,
+      numUnread: count > 0 ? (count > 30 ? '30+' : String(count)) : undefined,
+    }
+  }, [count])
+}
+
+type ConvoListQueryData = {
+  pageParams: Array<string | undefined>
+  pages: Array<ChatBskyConvoListConvos.OutputSchema>
+}
+
+export function useOnDeleteMessage() {
+  const queryClient = useQueryClient()
+
+  return useCallback(
+    (chatId: string, messageId: string) => {
+      queryClient.setQueryData(RQKEY, (old: ConvoListQueryData) => {
+        return optimisticUpdate(chatId, old, convo =>
+          messageId === convo.lastMessage?.id
+            ? {
+                ...convo,
+                lastMessage: {
+                  $type: 'chat.bsky.convo.defs#deletedMessageView',
+                  id: messageId,
+                  rev: '',
+                },
+              }
+            : convo,
+        )
+      })
+    },
+    [queryClient],
+  )
+}
+
+export function useOnNewMessage() {
+  const queryClient = useQueryClient()
+
+  return useCallback(
+    (chatId: string, message: ChatBskyConvoDefs.MessageView) => {
+      queryClient.setQueryData(RQKEY, (old: ConvoListQueryData) => {
+        return optimisticUpdate(chatId, old, convo => ({
+          ...convo,
+          lastMessage: message,
+          unreadCount: convo.unreadCount + 1,
+        }))
+      })
+      queryClient.invalidateQueries({queryKey: RQKEY})
+    },
+    [queryClient],
+  )
+}
+
+export function useOnCreateConvo() {
+  const queryClient = useQueryClient()
+
+  return useCallback(() => {
+    queryClient.invalidateQueries({queryKey: RQKEY})
+  }, [queryClient])
+}
+
+function optimisticUpdate(
+  chatId: string,
+  old: ConvoListQueryData,
+  updateFn: (convo: ChatBskyConvoDefs.ConvoView) => ChatBskyConvoDefs.ConvoView,
+) {
+  if (!old) {
+    return old
+  }
+
+  return {
+    ...old,
+    pages: old.pages.map(page => ({
+      ...page,
+      convos: page.convos.map(convo =>
+        chatId === convo.id ? updateFn(convo) : convo,
+      ),
+    })),
+  }
+}