add join room or space before navigate screen

src/app/components/room-card/RoomCard.tsx

@@ -176,6 +176,7 @@ export const RoomCard = as<'div', RoomCardProps>(
         <Box gap="200" justifyContent="SpaceBetween">
           <Avatar size="500">
             <RoomAvatar
+              variant="Secondary"
               src={avatar ?? undefined}
               alt={roomIdOrAlias}
               renderInitials={() => (

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box, Scroll, Text, toRem } from 'folds';
+import { useAtomValue } from 'jotai';
+import { RoomCard } from '../../components/room-card';
+import { RoomTopicViewer } from '../../components/room-topic-viewer';
+import { Page, PageHeader } from '../../components/page';
+import { RoomSummaryLoader } from '../../components/RoomSummaryLoader';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+
+type JoinBeforeNavigateProps = { roomIdOrAlias: string };
+export function JoinBeforeNavigate({ roomIdOrAlias }: JoinBeforeNavigateProps) {
+  const mx = useMatrixClient();
+  const allRooms = useAtomValue(allRoomsAtom);
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+
+  const handleView = (roomId: string) => {
+    if (mx.getRoom(roomId)?.isSpaceRoom()) {
+      navigateSpace(roomId);
+      return;
+    }
+    navigateRoom(roomId);
+  };
+
+  return (
+    <Page>
+      <PageHeader>
+        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+          <Text size="H3" truncate>
+            {roomIdOrAlias}
+          </Text>
+        </Box>
+      </PageHeader>
+      <Box grow="Yes">
+        <Scroll hideTrack visibility="Hover" size="0">
+          <Box style={{ height: '100%' }} grow="Yes" alignItems="Center" justifyContent="Center">
+            <RoomSummaryLoader roomIdOrAlias={roomIdOrAlias}>
+              {(summary) => (
+                <RoomCard
+                  style={{ maxWidth: toRem(364), width: '100%' }}
+                  roomIdOrAlias={roomIdOrAlias}
+                  allRooms={allRooms}
+                  avatarUrl={summary?.avatar_url}
+                  name={summary?.name}
+                  topic={summary?.topic}
+                  memberCount={summary?.num_joined_members}
+                  roomType={summary?.room_type}
+                  renderTopicViewer={(name, topic, requestClose) => (
+                    <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
+                  )}
+                  onView={handleView}
+                />
+              )}
+            </RoomSummaryLoader>
+          </Box>
+        </Scroll>
+      </Box>
+    </Page>
+  );
+}

src/app/features/join-before-navigate/index.ts

@@ -0,0 +1 @@
+export * from './JoinBeforeNavigate';

src/app/organisms/room/Room.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../state/typingMembers';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { JoinBeforeNavigate } from '../../features/join-before-navigate';
 
 export type RoomBaseViewProps = {
   room: Room;
@@ -51,11 +52,12 @@ export function RoomBaseView({ room, eventId }: RoomBaseViewProps) {
 
 export function RoomViewer() {
   const mx = useMatrixClient();
+  const { roomIdOrAlias } = useParams();
   const roomId = useSelectedRoom();
   const room = mx.getRoom(roomId);
   const { eventId } = useParams();
 
-  if (!room || !roomId) return <p>try joining this room</p>;
+  if (!room || !roomId) return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} />;
 
   return <RoomBaseView room={room} eventId={eventId} />;
 }

src/app/pages/client/space/SpaceProvider.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useParams } from 'react-router-dom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useSpaces } from '../../../state/hooks/roomList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useSelectedSpace } from '../../../hooks/router/useSelectedSpace';
 import { SpaceProvider } from '../../../hooks/useSpace';
+import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 
 export function RouteSpaceProvider() {
   const mx = useMatrixClient();
   const joinedSpaces = useSpaces(mx, allRoomsAtom);
+  const { spaceIdOrAlias } = useParams();
 
   const selectedSpaceId = useSelectedSpace();
   const space = mx.getRoom(selectedSpaceId);
 
   if (!space || !joinedSpaces.includes(space.roomId)) {
-    return <p>TODO: join space screen</p>;
+    return <JoinBeforeNavigate roomIdOrAlias={spaceIdOrAlias ?? ''} />;
   }
 
   return (