add create direct search options to open/create dm with url

src/app/pages/Router.tsx

@@ -41,7 +41,7 @@ import {
 } from './pathUtils';
 import { ClientBindAtoms, ClientLayout, ClientRoot } from './client';
 import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
-import { Direct, DirectRouteRoomProvider } from './client/direct';
+import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
 import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
 import { Notifications, Inbox, Invites } from './client/inbox';
@@ -160,7 +160,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           }
         >
           {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<p>create</p>} />
+          <Route path={_CREATE_PATH} element={<DirectCreate />} />
           <Route
             path={_ROOM_PATH}
             element={

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

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { WelcomePage } from '../WelcomePage';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { getDirectCreateSearchParams } from '../../pathSearchParam';
+import { getDirectPath, getDirectRoomPath } from '../../pathUtils';
+import { getDMRoomFor } from '../../../utils/matrix';
+import { openInviteUser } from '../../../../client/action/navigation';
+import { useDirectRooms } from './useDirectRooms';
+
+export function DirectCreate() {
+  const mx = useMatrixClient();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { userId } = getDirectCreateSearchParams(searchParams);
+  const directs = useDirectRooms();
+
+  useEffect(() => {
+    if (userId) {
+      const room = getDMRoomFor(mx, userId);
+      const { roomId } = room ?? {};
+      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 />;
+}

src/app/pages/client/direct/index.ts

@@ -1,2 +1,3 @@
 export * from './Direct';
 export * from './RoomProvider';
+export * from './DirectCreate';

src/app/pages/pathSearchParam.ts

@@ -1,7 +1,13 @@
-import { _RoomSearchParams } from './paths';
+import { _RoomSearchParams, DirectCreateSearchParams } from './paths';
 
 type SearchParamsGetter<T> = (searchParams: URLSearchParams) => T;
 
 export const getRoomSearchParams: SearchParamsGetter<_RoomSearchParams> = (searchParams) => ({
   viaServers: searchParams.get('viaServers') ?? undefined,
 });
+
+export const getDirectCreateSearchParams: SearchParamsGetter<DirectCreateSearchParams> = (
+  searchParams
+) => ({
+  userId: searchParams.get('userId') ?? undefined,
+});

src/app/pages/paths.ts

@@ -49,6 +49,9 @@ export const HOME_SEARCH_PATH = `/home/${_SEARCH_PATH}`;
 export const HOME_ROOM_PATH = `/home/${_ROOM_PATH}`;
 
 export const DIRECT_PATH = '/direct/';
+export type DirectCreateSearchParams = {
+  userId?: string;
+};
 export const DIRECT_CREATE_PATH = `/direct/${_CREATE_PATH}`;
 export const DIRECT_ROOM_PATH = `/direct/${_ROOM_PATH}`;