Chats: add blankslate component to main page

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { Button, Stack, Text } from 'soapbox/components/ui';
+
+interface IBlankslate {
+}
+
+/** To display on the chats main page when no message is selected. */
+const Blankslate: React.FC<IBlankslate> = () => {
+  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.title'
+            defaultMessage='No messages yet'
+          />
+        </Text>
+
+        <Text size='sm' theme='muted' align='center'>
+          <FormattedMessage
+            id='chats.main.blankslate.subtitle'
+            defaultMessage='You can start a chat with anyone that follows you'
+          />
+        </Text>
+      </Stack>
+
+      <Button onClick={handleNewChat}>
+        <FormattedMessage
+          id='chats.main.blankslate.new_chat'
+          defaultMessage='Message someone'
+        />
+      </Button>
+    </Stack>
+  );
+};
+
+export default Blankslate;

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

@@ -12,6 +12,7 @@ import { useChatActions, useChatSilence } from 'soapbox/queries/chats';
 
 import Chat from '../../chat';
 
+import Blankslate from './blankslate';
 import Welcome from './welcome';
 
 const messages = defineMessages({
@@ -68,7 +69,7 @@ const ChatPageMain = () => {
   }
 
   if (!chat) {
-    return null;
+    return <Blankslate />;
   }
 
   return (