Merge pull request #8708 from internet-development/@APiligrim/chat-request-ui

[APP-1317] update: chat request ui to hide chat requests when there are no messages

src/screens/Messages/ChatList.tsx

@@ -164,12 +164,18 @@ export function MessagesScreenInner({navigation, route}: Props) {
         // filter out convos that are actively being left
         .filter(convo => !leftConvos.includes(convo.id))
 
+      const hasInboxRequests = inboxPreviewConvos?.length > 0
+
       return [
+        ...(hasInboxRequests
+          ? [
               {
-          type: 'INBOX',
+                type: 'INBOX' as const,
                 count: inboxPreviewConvos.length,
                 profiles: inboxPreviewConvos.slice(0, 3),
               },
+            ]
+          : []),
         ...conversations.map(
           convo => ({type: 'CONVERSATION', conversation: convo}) as const,
         ),
@@ -223,16 +229,24 @@ export function MessagesScreenInner({navigation, route}: Props) {
     return listenSoftReset(onSoftReset)
   }, [onSoftReset, isScreenFocused])
 
-  // Will always have 1 item - the inbox button
+  // NOTE(APiligrim)
-  if (conversations.length < 2) {
+  // Show empty state only if there are no conversations at all
+  const actualConversations = conversations.filter(
+    item => item.type === 'CONVERSATION',
+  )
+  const hasInboxRequests = inboxPreviewConvos?.length > 0
+
+  if (actualConversations.length === 0) {
     return (
       <Layout.Screen>
         <Header newChatControl={newChatControl} />
         <Layout.Center>
+          {hasInboxRequests && (
             <InboxPreview
               count={inboxPreviewConvos.length}
               profiles={inboxPreviewConvos}
             />
+          )}
           {isLoading ? (
             <ChatListLoadingPlaceholder />
           ) : (