Add blankslate when chats are present

app/soapbox/features/chats/components/chat-page/components/blankslate-empty.tsx

@@ -8,7 +8,7 @@ interface IBlankslate {
 }
 
 /** To display on the chats main page when no message is selected. */
-const Blankslate: React.FC<IBlankslate> = () => {
+const BlankslateEmpty: React.FC<IBlankslate> = () => {
   const history = useHistory();
 
   const handleNewChat = () => {
@@ -43,4 +43,4 @@ const Blankslate: React.FC<IBlankslate> = () => {
   );
 };
 
-export default Blankslate;
+export default BlankslateEmpty;

app/soapbox/features/chats/components/chat-page/components/blankslate-with-chats.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { Button, Stack, Text } from 'soapbox/components/ui';
+
+/** To display on the chats main page when no message is selected, but chats are present. */
+const BlankslateWithChats = () => {
+  const history = useHistory();
+
+  const handleNewChat = () => {
+    history.push('/chats/new');
+  };
+
+  return (
+    <Stack space={6} alignItems='center' justifyContent='center' className='p-6 h-full'>
+      <Stack space={2} className='max-w-sm'>
+        <Text size='2xl' weight='bold' tag='h2' align='center'>
+          <FormattedMessage
+            id='chats.main.blankslate_with_chats.title'
+            defaultMessage='Select a chat'
+          />
+        </Text>
+
+        <Text size='sm' theme='muted' align='center'>
+          <FormattedMessage
+            id='chats.main.blankslate_with_chats.subtitle'
+            defaultMessage='Select from one of your open chats or create a new message.'
+          />
+        </Text>
+      </Stack>
+
+      <Button theme='primary' onClick={handleNewChat}>
+        <FormattedMessage
+          id='chats.main.blankslate.new_chat'
+          defaultMessage='Message someone'
+        />
+      </Button>
+    </Stack>
+  );
+};
+
+export default BlankslateWithChats;

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -9,12 +9,13 @@ import { Avatar, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList,
 import VerificationBadge from 'soapbox/components/verification_badge';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
-import { MessageExpirationValues, useChat, useChatActions } from 'soapbox/queries/chats';
+import { MessageExpirationValues, useChat, useChatActions, useChats } from 'soapbox/queries/chats';
 import { secondsToDays } from 'soapbox/utils/numbers';
 
 import Chat from '../../chat';
 
-import Blankslate from './blankslate';
+import BlankslateEmpty from './blankslate-empty';
+import BlankslateWithChats from './blankslate-with-chats';
 
 const messages = defineMessages({
   blockMessage: { id: 'chat_settings.block.message', defaultMessage: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.' },
@@ -50,6 +51,7 @@ const ChatPageMain = () => {
 
   const { data: chat } = useChat(chatId);
   const { currentChatId } = useChatContext();
+  const { chatsQuery: { data: chats, isLoading } } = useChats();
 
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
@@ -95,8 +97,16 @@ const ChatPageMain = () => {
     }));
   };
 
+  if (isLoading) {
+    return null;
+  }
+
+  if (!currentChatId && chats && chats.length > 0) {
+    return <BlankslateWithChats />;
+  }
+
   if (!currentChatId) {
-    return <Blankslate />;
+    return <BlankslateEmpty />;
   }
 
   if (!chat) {