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/Direct.tsx

@@ -17,6 +17,7 @@ import {
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
+import { useNavigate } from 'react-router-dom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { factoryRoomIdByActivity } from '../../../utils/sort';
 import {
@@ -28,7 +29,7 @@ import {
   NavItem,
   NavItemContent,
 } from '../../../components/nav';
-import { getDirectRoomPath } from '../../pathUtils';
+import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
 import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -38,7 +39,6 @@ import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { useDirectRooms } from './useDirectRooms';
-import { openInviteUser } from '../../../../client/action/navigation';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { useRoomsUnread } from '../../../state/hooks/unread';
@@ -50,6 +50,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
+import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -138,6 +139,8 @@ function DirectHeader() {
 }
 
 function DirectEmpty() {
+  const navigate = useNavigate();
+
   return (
     <NavEmptyCenter>
       <NavEmptyLayout
@@ -153,7 +156,7 @@ function DirectEmpty() {
           </Text>
         }
         options={
-          <Button variant="Secondary" size="300" onClick={() => openInviteUser()}>
+          <Button variant="Secondary" size="300" onClick={() => navigate(getDirectCreatePath())}>
             <Text size="B300" truncate>
               Direct Message
             </Text>
@@ -172,6 +175,9 @@ export function Direct() {
   const directs = useDirectRooms();
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const navigate = useNavigate();
+
+  const createDirectSelected = useDirectCreateSelected();
 
   const selectedRoomId = useSelectedRoom();
   const noRoomToDisplay = directs.length === 0;
@@ -205,8 +211,8 @@ export function Direct() {
         <PageNavContent scrollRef={scrollRef}>
           <Box direction="Column" gap="300">
             <NavCategory>
-              <NavItem variant="Background" radii="400">
-                <NavButton onClick={() => openInviteUser()}>
+              <NavItem variant="Background" radii="400" aria-selected={createDirectSelected}>
+                <NavButton onClick={() => navigate(getDirectCreatePath())}>
                   <NavItemContent>
                     <Box as="span" grow="Yes" alignItems="Center" gap="200">
                       <Avatar size="200" radii="400">

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>
+  );
 }

src/app/pages/client/home/CreateRoom.tsx

@@ -42,7 +42,7 @@ export function HomeCreateRoom() {
                   <PageHero
                     icon={<Icon size="600" src={Icons.Hash} />}
                     title="Create Room"
-                    subTitle="Build a Room for Real-Time Conversations"
+                    subTitle="Build a Room for Real-Time Conversations."
                   />
                   <CreateRoomForm onCreate={navigateRoom} />
                 </Box>