Show a banner when there are incoming chat requests (#10498)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>

src/screens/Messages/components/ChatListItem.tsx

@@ -25,6 +25,7 @@ import {
   precacheConvoQuery,
   useMarkAsReadMutation,
 } from '#/state/queries/messages/conversation'
+import {JOIN_REQUESTS_THRESHOLD} from '#/state/queries/messages/list-join-requests'
 import {unstableCacheProfileView} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
@@ -214,15 +215,15 @@ function GroupChatItem({
       primaryProfileModeration={moderation}
       isBlockedAccount={false}
       isDeletedAccount={false}
-      subtitle={
-        convo.details.joinRequestCount
-          ? convo.details.joinRequestCount > 20
+      requestInfo={
+        convo.details.unreadJoinRequestCount
+          ? convo.details.unreadJoinRequestCount > JOIN_REQUESTS_THRESHOLD
             ? l({
-                message: '20+ new join requests',
+                message: `${JOIN_REQUESTS_THRESHOLD}+ new join requests`,
                 context:
                   'Displayed when there are more than 20 requests to join a group chat',
               })
-            : plural(convo.details.joinRequestCount, {
+            : plural(convo.details.unreadJoinRequestCount, {
                 one: '# new join request',
                 other: '# new join requests',
               })
@@ -241,6 +242,7 @@ function BaseChatItem({
   avatar,
   title,
   subtitle,
+  requestInfo,
   accessibilityHint,
   isDeletedAccount,
   isBlockedAccount,
@@ -256,6 +258,7 @@ function BaseChatItem({
   avatar: React.ReactNode
   title: string
   subtitle?: string
+  requestInfo?: string
   accessibilityHint: string
   isDeletedAccount: boolean
   isBlockedAccount: boolean
@@ -280,8 +283,10 @@ function BaseChatItem({
   const playHaptic = useHaptics()
   const queryClient = useQueryClient()
   const hasUnread =
-    convo.view.unreadCount > 0 &&
     !isDeletedAccount &&
+    (convo.view.unreadCount > 0 ||
+      (convo.kind === 'group' &&
+        (convo.details.unreadJoinRequestCount ?? 0) > 0)) &&
     (convo.kind !== 'group' || convo.details.lockStatus === 'unlocked')
 
   const blockInfo = useMemo(() => {
@@ -607,6 +612,19 @@ function BaseChatItem({
 
                   {postAlerts}
 
+                  {requestInfo && (
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        hasUnread ? a.font_medium : t.atoms.text_contrast_high,
+                        isDimStyle && t.atoms.text_contrast_medium,
+                        a.pb_2xs,
+                      ]}
+                      emoji>
+                      {requestInfo}
+                    </Text>
+                  )}
+
                   <View style={[a.flex_row, a.align_center]}>
                     {LastMessageIcon && (
                       <LastMessageIcon
@@ -623,8 +641,6 @@ function BaseChatItem({
                       emoji
                       numberOfLines={2}
                       style={[
-                        a.text_sm,
-                        a.leading_snug,
                         hasUnread ? a.font_medium : t.atoms.text_contrast_high,
                         isDimStyle && t.atoms.text_contrast_medium,
                       ]}>