From 0bf616496f8b1bd2687dfb37cbb439297437aab2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 4 Oct 2022 15:02:52 -0400
Subject: [PATCH] Chats: add blankslate component to main page

---
 .../chat-page/components/blankslate.tsx       | 46 +++++++++++++++++++
 .../chat-page/components/chat-page-main.tsx   |  3 +-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 app/soapbox/features/chats/components/chat-page/components/blankslate.tsx

diff --git a/app/soapbox/features/chats/components/chat-page/components/blankslate.tsx b/app/soapbox/features/chats/components/chat-page/components/blankslate.tsx
new file mode 100644
index 000000000..6c2d66e9f
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index 064ffe61e..1d11831e5 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/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 (