[🐴] 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>

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,
+      })
+    },
+  })
+}