Get unread counts vs counting convos (#10878)

src/screens/Messages/ChatList.tsx

@@ -1,7 +1,7 @@
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {useAnimatedRef} from 'react-native-reanimated'
-import {type ChatBskyActorGetStatus, ChatBskyConvoDefs} from '@atproto/api'
+import {type ChatBskyActorGetStatus, type ChatBskyConvoDefs} from '@atproto/api'
 import {Trans, useLingui} from '@lingui/react/macro'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {type NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -17,6 +17,7 @@ import {listenSoftReset} from '#/state/events'
 import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
 import {useMessagesEventBus} from '#/state/messages/events'
 import {useChatActorStatusQuery} from '#/state/queries/messages/get-status'
+import {useUnreadCountsQuery} from '#/state/queries/messages/get-unread-counts'
 import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {List, type ListRef} from '#/view/com/util/List'
@@ -507,7 +508,6 @@ export function Header({
 }) {
   const {t: l} = useLingui()
   const {gtMobile} = useBreakpoints()
-  const aa = useAgeAssurance()
   const requireEmailVerification = useRequireEmailVerification()
   const {isWithinSplitView} = useIsWithinSplitView()
 
@@ -516,24 +516,8 @@ export function Header({
   // on repeated clicks, so navigate instead to dedupe by route + params.
   const action = isWithinSplitView ? 'navigate' : 'push'
 
-  const {data: unreadInboxData, hasNextPage: hasMoreRequests} =
-    useListConvosQuery({
-      status: 'request',
-      readState: 'unread',
-      kind: aa.flags.groupChatDisabled ? 'direct' : 'all',
-    })
-
-  const inboxAllConvos =
-    unreadInboxData?.pages
-      .flatMap(page => page.convos)
-      .filter(
-        convo =>
-          !convo.muted &&
-          convo.members.every(member => member.handle !== 'missing.invalid') &&
-          (ChatBskyConvoDefs.isGroupConvo(convo.kind)
-            ? !aa.flags.groupChatDisabled
-            : true),
-      ) ?? []
+  const {data: unreadCounts} = useUnreadCountsQuery()
+  const requestCount = unreadCounts?.unreadRequestConvos ?? 0
 
   const openChatControl = useCallback(() => {
     newChatControl.open()
@@ -558,8 +542,7 @@ export function Header({
 
           <View style={[a.flex_row, a.align_center, a.gap_sm]}>
             <InboxRequests
-              count={inboxAllConvos.length}
-              more={hasMoreRequests}
+              count={requestCount}
               variant="solid"
               action={action}
             />
@@ -593,11 +576,7 @@ export function Header({
               <Trans>Chats</Trans>
             </Layout.Header.TitleText>
           </Layout.Header.Content>
-          <InboxRequests
-            count={inboxAllConvos.length}
-            more={hasMoreRequests}
-            variant="ghost"
-          />
+          <InboxRequests count={requestCount} variant="ghost" />
           <Layout.Header.Slot>
             <Link
               to="/messages/settings"

src/screens/Messages/components/InboxRequests.tsx

@@ -1,36 +1,37 @@
 import {plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react/macro'
 
-import {UNREAD_LIMIT} from '#/state/queries/messages/list-conversations'
 import {atoms as a} from '#/alf'
 import {ButtonIcon, ButtonText} from '#/components/Button'
 import {Inbox_Stroke2_Corner2_Rounded as InboxIcon} from '#/components/icons/Inbox'
 import {Link} from '#/components/Link'
 
+// The server caps unreadRequestConvos at 11, where 11 means "any more than 10".
+const REQUEST_COUNT_CAP = 11
+
 export function InboxRequests({
   count,
-  more,
   variant,
   action,
 }: {
   count: number
-  more: boolean
   variant?: 'ghost' | 'solid'
   action?: 'push' | 'navigate'
 }) {
   const {t: l} = useLingui()
 
   const unread = count > 0
+  const overflow = count >= REQUEST_COUNT_CAP
 
   const label = !unread
     ? l({
         message: `Requests`,
         comment: 'Incoming message requests',
       })
-    : count >= UNREAD_LIMIT && more
+    : overflow
       ? l({
-          message: `${count}+ requests`,
-          comment: 'Displayed when the number of requests is greater than 20',
+          message: `10+ requests`,
+          comment: 'Displayed when the number of requests is greater than 10',
         })
       : plural(count, {
           one: '# request',
@@ -52,11 +53,11 @@ export function InboxRequests({
           <ButtonIcon icon={InboxIcon} size="lg" />
           {unread && (
             <ButtonText style={[a.text_md, a.font_bold]}>
-              {count >= UNREAD_LIMIT && more
+              {overflow
                 ? l({
-                    message: `${count}+`,
+                    message: `10+`,
                     comment:
-                      'Displayed when the number of requests is greater than 20',
+                      'Displayed when the number of requests is greater than 10',
                   })
                 : count}
             </ButtonText>