New create chat screen (#2463)

* fix dm invite appears in home

* use migrated function for convert to dm/room commands

* add new create chat screen

src/app/pages/client/direct/DirectCreate.tsx

@@ -1,33 +1,75 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { WelcomePage } from '../WelcomePage';
+import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getDirectCreateSearchParams } from '../../pathSearchParam';
-import { getDirectPath, getDirectRoomPath } from '../../pathUtils';
+import { getDirectRoomPath } from '../../pathUtils';
 import { getDMRoomFor } from '../../../utils/matrix';
-import { openInviteUser } from '../../../../client/action/navigation';
 import { useDirectRooms } from './useDirectRooms';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import {
+  Page,
+  PageContent,
+  PageContentCenter,
+  PageHeader,
+  PageHero,
+  PageHeroSection,
+} from '../../../components/page';
+import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { CreateChat } from '../../../features/create-chat';
 
 export function DirectCreate() {
   const mx = useMatrixClient();
+  const screenSize = useScreenSizeContext();
+
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { userId } = getDirectCreateSearchParams(searchParams);
+
   const directs = useDirectRooms();
 
   useEffect(() => {
     if (userId) {
-      const room = getDMRoomFor(mx, userId);
-      const { roomId } = room ?? {};
+      const roomId = getDMRoomFor(mx, userId)?.roomId;
       if (roomId && directs.includes(roomId)) {
         navigate(getDirectRoomPath(roomId), { replace: true });
-      } else {
-        openInviteUser(undefined, userId);
       }
-    } else {
-      navigate(getDirectPath(), { replace: true });
     }
   }, [mx, navigate, directs, userId]);
 
-  return <WelcomePage />;
+  return (
+    <Page>
+      {screenSize === ScreenSize.Mobile && (
+        <PageHeader balance outlined={false}>
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <BackRouteHandler>
+              {(onBack) => (
+                <IconButton onClick={onBack}>
+                  <Icon src={Icons.ArrowLeft} />
+                </IconButton>
+              )}
+            </BackRouteHandler>
+          </Box>
+        </PageHeader>
+      )}
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover">
+          <PageContent>
+            <PageContentCenter>
+              <PageHeroSection>
+                <Box direction="Column" gap="700">
+                  <PageHero
+                    icon={<Icon size="600" src={Icons.Mention} />}
+                    title="Create Chat"
+                    subTitle="Start a private, encrypted chat by entering a user ID."
+                  />
+                  <CreateChat defaultUserId={userId} />
+                </Box>
+              </PageHeroSection>
+            </PageContentCenter>
+          </PageContent>
+        </Scroll>
+      </Box>
+    </Page>
+  );
 }