[🐴] Decrement app badge when opening unread chat (#4040)

* decrement badge count for chats

* handle decrement in `useMarkAsRead`

* remove async

* oops

3 files changed, 28 insertions, 6 deletions

diff --git a/src/lib/hooks/useNotificationHandler.ts b/src/lib/hooks/useNotificationHandler.ts
index 6f5fbd66b..e288ac3ad 100644
--- a/src/lib/hooks/useNotificationHandler.ts
+++ b/src/lib/hooks/useNotificationHandler.ts
@@ -169,10 +169,11 @@ export function useNotificationsHandler() {
           payload.reason === 'chat-message' &&
           payload.recipientDid === currentAccount?.did
         ) {
+          const isCurrentConvo = payload.convoId === currentConvoId
           return {
-            shouldShowAlert: payload.convoId !== currentConvoId,
+            shouldShowAlert: !isCurrentConvo,
             shouldPlaySound: false,
-            shouldSetBadge: false,
+            shouldSetBadge: !isCurrentConvo,
           }
         }
 
diff --git a/src/lib/notifications/notifications.ts b/src/lib/notifications/notifications.ts
index 52f984a59..1182bfcbb 100644
--- a/src/lib/notifications/notifications.ts
+++ b/src/lib/notifications/notifications.ts
@@ -1,5 +1,6 @@
 import React from 'react'
 import * as Notifications from 'expo-notifications'
+import {getBadgeCountAsync, setBadgeCountAsync} from 'expo-notifications'
 import {BskyAgent} from '@atproto/api'
 
 import {logger} from '#/logger'
@@ -109,3 +110,14 @@ export function useRequestNotificationsPermission() {
     [gate],
   )
 }
+
+export async function decrementBadgeCount(by = 1) {
+  if (!isNative) return
+
+  const currCount = await getBadgeCountAsync()
+  let newCount = currCount - by
+  if (newCount < 0) {
+    newCount = 0
+  }
+  await setBadgeCountAsync(newCount)
+}
diff --git a/src/state/queries/messages/list-converations.ts b/src/state/queries/messages/list-converations.ts
index f2c277068..4b4d50c49 100644
--- a/src/state/queries/messages/list-converations.ts
+++ b/src/state/queries/messages/list-converations.ts
@@ -10,6 +10,7 @@ import {
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {DM_SERVICE_HEADERS} from '#/state/queries/messages/const'
 import {useAgent} from '#/state/session'
+import {decrementBadgeCount} from 'lib/notifications/notifications'
 
 export const RQKEY = ['convo-list']
 type RQPageParam = string | undefined
@@ -116,10 +117,18 @@ export function useOnMarkAsRead() {
   return useCallback(
     (chatId: string) => {
       queryClient.setQueryData(RQKEY, (old: ConvoListQueryData) => {
-        return optimisticUpdate(chatId, old, convo => ({
-          ...convo,
-          unreadCount: 0,
-        }))
+        return optimisticUpdate(chatId, old, convo => {
+          // We only want to decrement the badge by one no matter the unread count, since we only increment once per
+          // sender regardless of message count
+          if (convo.unreadCount > 0) {
+            decrementBadgeCount(1)
+          }
+
+          return {
+            ...convo,
+            unreadCount: 0,
+          }
+        })
       })
     },
     [queryClient],