[🐴] 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, 14 insertions, 3 deletions

diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index 33f713322..0db8b242a 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -27,6 +27,7 @@ import {getTabState, TabState} from '#/lib/routes/helpers'
 import {useGate} from '#/lib/statsig/statsig'
 import {s} from '#/lib/styles'
 import {emitSoftReset} from '#/state/events'
+import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
@@ -68,6 +69,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
     isAtMessages,
   } = useNavigationTabState()
   const numUnreadNotifications = useUnreadNotifications()
+  const numUnreadMessages = useUnreadMessageCount()
   const {footerMinimalShellTransform} = useMinimalShellMode()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const {requestSwitchToAccount} = useLoggedOutViewControls()
@@ -257,9 +259,15 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                   )
                 }
                 onPress={onPressMessages}
+                notificationCount={numUnreadMessages.numUnread}
+                accessible={true}
                 accessibilityRole="tab"
                 accessibilityLabel={_(msg`Messages`)}
-                accessibilityHint=""
+                accessibilityHint={
+                  numUnreadMessages.count > 0
+                    ? `${numUnreadMessages.numUnread} unread`
+                    : ''
+                }
               />
             )}
             <Btn
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 91d20e089..1d27a10a4 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -16,6 +16,7 @@ import {useGate} from '#/lib/statsig/statsig'
 import {isInvalidHandle} from '#/lib/strings/handles'
 import {emitSoftReset} from '#/state/events'
 import {useFetchHandle} from '#/state/queries/handle'
+import {useUnreadMessageCount} from '#/state/queries/messages/list-converations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
@@ -274,7 +275,8 @@ export function DesktopLeftNav() {
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isDesktop, isTablet} = useWebMediaQueries()
-  const numUnread = useUnreadNotifications()
+  const numUnreadNotifications = useUnreadNotifications()
+  const numUnreadMessages = useUnreadMessageCount()
   const gate = useGate()
 
   if (!hasSession && !isDesktop) {
@@ -333,7 +335,7 @@ export function DesktopLeftNav() {
           />
           <NavItem
             href="/notifications"
-            count={numUnread}
+            count={numUnreadNotifications}
             icon={
               <BellIcon
                 strokeWidth={2}
@@ -353,6 +355,7 @@ export function DesktopLeftNav() {
           {gate('dms') && (
             <NavItem
               href="/messages"
+              count={numUnreadMessages.numUnread}
               icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />}
               iconFilled={
                 <EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} />