Chats: display component at /chats/new

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

@@ -1,11 +1,13 @@
 import classNames from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
+import { Route, Switch } from 'react-router-dom';
 
 import { Stack } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import { useChat } from 'soapbox/queries/chats';
 
 import ChatPageMain from './components/chat-page-main';
+import ChatPageNew from './components/chat-page-new';
 import ChatPageSidebar from './components/chat-page-sidebar';
 
 interface IChatPage {
@@ -72,7 +74,14 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
           'hidden sm:block': !chat,
         })}
         >
-          <ChatPageMain />
+          <Switch>
+            <Route path='/chats/new'>
+              <ChatPageNew />
+            </Route>
+            <Route>
+              <ChatPageMain />
+            </Route>
+          </Switch>
         </Stack>
       </div>
     </div>

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { CardTitle, Stack } from 'soapbox/components/ui';
+
+interface IChatPageNew {
+}
+
+/** New message form to create a chat. */
+const ChatPageNew: React.FC<IChatPageNew> = () => {
+  return (
+    <Stack className='h-full p-6 space-y-8'>
+      <CardTitle title='New Message' />
+    </Stack>
+  );
+};
+
+export default ChatPageNew;