Increase unread cap to 99+ (#10985)

src/screens/Messages/Inbox.tsx

@@ -23,6 +23,7 @@ import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
 import {useMessagesEventBus} from '#/state/messages/events'
+import {useUnreadCountsQuery} from '#/state/queries/messages/get-unread-counts'
 import {useListConvoRequests} from '#/state/queries/messages/list-conversation-requests'
 import {useUpdateAllRead} from '#/state/queries/messages/update-all-read'
 import {EmptyState} from '#/view/com/util/EmptyState'
@@ -84,16 +85,8 @@ export function MessagesInboxScreenInner({}: Props) {
     return items
   }, [data])
 
-  const hasUnreadConvos = useMemo(() => {
+  const {data: unreadCounts} = useUnreadCountsQuery()
-    return conversations.some(
+  const hasUnreadConvos = (unreadCounts?.unreadRequestConvos ?? 0) > 0
-      item =>
-        item.type === 'incoming' &&
-        item.view.members.every(
-          member => member.handle !== 'missing.invalid',
-        ) &&
-        item.view.unreadCount > 0,
-    )
-  }, [conversations])
 
   return (
     <Layout.Screen testID="messagesInboxScreen">

src/screens/Messages/components/InboxRequests.tsx

@@ -1,14 +1,12 @@
 import {plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react/macro'
 
+import {UNREAD_REQUEST_CAP} from '#/state/queries/messages/get-unread-counts'
 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,
   variant,
@@ -21,7 +19,7 @@ export function InboxRequests({
   const {t: l} = useLingui()
 
   const unread = count > 0
-  const overflow = count >= REQUEST_COUNT_CAP
+  const overflow = count >= UNREAD_REQUEST_CAP
 
   const label = !unread
     ? l({
@@ -30,8 +28,8 @@ export function InboxRequests({
       })
     : overflow
       ? l({
-          message: `10+ requests`,
+          message: `${UNREAD_REQUEST_CAP - 1}+ requests`,
-          comment: 'Displayed when the number of requests is greater than 10',
+          comment: 'Displayed when the number of requests exceeds the cap',
         })
       : plural(count, {
           one: '# request',
@@ -55,9 +53,9 @@ export function InboxRequests({
             <ButtonText style={[a.text_md, a.font_bold]}>
               {overflow
                 ? l({
-                    message: `10+`,
+                    message: `${UNREAD_REQUEST_CAP - 1}+`,
                     comment:
-                      'Displayed when the number of requests is greater than 10',
+                      'Displayed when the number of requests exceeds the cap – for example, 99+ requests',
                   })
                 : count}
             </ButtonText>

src/state/queries/messages/get-unread-counts.ts

@@ -10,13 +10,12 @@ export const RQKEY = (includeGroupChats: boolean) =>
   [RQKEY_ROOT, includeGroupChats] as const
 export const RQKEY_PARTIAL = [RQKEY_ROOT] as const
 
-// the server sentinel-caps the badge counts: unreadAcceptedConvos maxes at 31
+// the server sentinel-caps the badge counts: unreadAcceptedConvos and
-// (meaning "more than 30") and unreadRequestConvos at 11 (meaning "more than
+// unreadRequestConvos max out at 100 (meaning "more than 99"). at the cap the
-// 10"). at the cap the value is no longer an exact count, so consumers must not
+// value is no longer an exact count, so consumers must not treat it as one -
-// treat it as one - both the optimistic decrement and the badge display ceiling
+// both the optimistic decrement and the badge display ceiling key off these.
-// key off these.
+export const UNREAD_ACCEPTED_CAP = 100
-export const UNREAD_ACCEPTED_CAP = 31
+export const UNREAD_REQUEST_CAP = 100
-export const UNREAD_REQUEST_CAP = 11
 
 export function useUnreadCountsQuery() {
   const agent = useAgent()

src/state/queries/messages/list-conversations.tsx

@@ -856,18 +856,16 @@ export function useUnreadMessageCount(): {
   const request = data?.unreadRequestConvos ?? 0
 
   if (accepted > 0) {
-    const total = accepted + Math.min(request, 1)
     return {
-      count: total,
+      count: accepted,
       // accepted is sentinel-capped at UNREAD_ACCEPTED_CAP (meaning "more than
       // cap - 1"). show the "+" overflow label only when accepted is actually
-      // capped - the +1 request nudge must not trip it at exactly cap - 1
+      // capped, otherwise clamp the number to cap - 1 so we never surface the
-      // accepted convos. otherwise clamp the number to cap - 1 so the nudge
+      // sentinel value (100) itself
-      // never surfaces the sentinel value (31) itself
       numUnread:
         accepted >= UNREAD_ACCEPTED_CAP
           ? `${UNREAD_ACCEPTED_CAP - 1}+`
-          : String(Math.min(total, UNREAD_ACCEPTED_CAP - 1)),
+          : String(Math.min(accepted, UNREAD_ACCEPTED_CAP - 1)),
       // only needed when numUnread is undefined
       hasNew: false,
     }

src/view/shell/bottom-bar/BottomBar.tsx

@@ -242,7 +242,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               accessibilityLabel={l`Chat`}
               accessibilityHint={
                 !aa.flags.chatDisabled && numUnreadMessages.count > 0
+                  ? numUnreadMessages.numUnread?.includes('+')
                     ? l({
+                        message: `${numUnreadMessages.numUnread} unread items`,
+                        comment:
+                          'Accessibility hint for the bottom bar chat icon when the number of unread messages exceeds the cap, with the + symbol already included – for example, 99+ unread items',
+                      })
+                    : l({
                         message: plural(numUnreadMessages.numUnread ?? 0, {
                           one: '# unread item',
                           other: '# unread items',