add option to follow space tombstone

src/app/components/create-room/RoomVersionSelector.tsx

@@ -47,7 +47,7 @@ export function RoomVersionSelector({
       gap="500"
     >
       <SettingTile
-        title="Room Version"
+        title="Version"
         after={
           <PopOut
             anchor={menuCords}

src/app/features/common-settings/general/RoomUpgrade.tsx

@@ -218,7 +218,7 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
           replacementRoom
             ? tombstoneContent.body ||
               `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
-            : `Current room version: ${roomVersion}.`
+            : `Current version: ${roomVersion}.`
         }
         after={
           <Box alignItems="Center" gap="200">

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

@@ -10,6 +10,7 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
+  Button,
   Icon,
   IconButton,
   Icons,
@@ -18,7 +19,9 @@ import {
   MenuItem,
   PopOut,
   RectCords,
+  Spinner,
   Text,
+  color,
   config,
   toRem,
 } from 'folds';
@@ -64,7 +67,7 @@ import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
 import { copyToClipboard } from '../../../utils/dom';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { useStateEvent } from '../../../hooks/useStateEvent';
-import { StateEvent } from '../../../../types/matrix/room';
+import { Membership, StateEvent } from '../../../../types/matrix/room';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -78,6 +81,9 @@ import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { BreakWord } from '../../../styles/Text.css';
 
 type SpaceMenuProps = {
   room: Room;
@@ -288,6 +294,75 @@ function SpaceHeader() {
   );
 }
 
+type SpaceTombstoneProps = { roomId: string; replacementRoomId: string };
+export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProps) {
+  const mx = useMatrixClient();
+  const { navigateRoom } = useRoomNavigate();
+
+  const [joinState, handleJoin] = useAsyncCallback(
+    useCallback(() => {
+      const currentRoom = mx.getRoom(roomId);
+      const via = currentRoom ? getViaServers(currentRoom) : [];
+      return mx.joinRoom(replacementRoomId, {
+        viaServers: via,
+      });
+    }, [mx, roomId, replacementRoomId])
+  );
+  const replacementRoom = mx.getRoom(replacementRoomId);
+
+  const handleOpen = () => {
+    if (replacementRoom) navigateRoom(replacementRoom.roomId);
+    if (joinState.status === AsyncStatus.Success) navigateRoom(joinState.data.roomId);
+  };
+
+  return (
+    <Box
+      style={{
+        padding: config.space.S200,
+        borderRadius: config.radii.R400,
+        borderWidth: config.borderWidth.B300,
+      }}
+      className={ContainerColor({ variant: 'Surface' })}
+      direction="Column"
+      gap="300"
+    >
+      <Box direction="Column" grow="Yes" gap="100">
+        <Text size="L400">Space Upgraded</Text>
+        <Text size="T200">This space has been replaced and is no longer active.</Text>
+        {joinState.status === AsyncStatus.Error && (
+          <Text className={BreakWord} style={{ color: color.Critical.Main }} size="T200">
+            {(joinState.error as any)?.message ?? 'Failed to join replacement space!'}
+          </Text>
+        )}
+      </Box>
+      <Box direction="Column" shrink="No">
+        {replacementRoom?.getMyMembership() === Membership.Join ||
+        joinState.status === AsyncStatus.Success ? (
+          <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
+            <Text size="B300">Open New Space</Text>
+          </Button>
+        ) : (
+          <Button
+            onClick={handleJoin}
+            size="300"
+            variant="Primary"
+            fill="Solid"
+            radii="300"
+            before={
+              joinState.status === AsyncStatus.Loading && (
+                <Spinner size="100" variant="Primary" fill="Solid" />
+              )
+            }
+            disabled={joinState.status === AsyncStatus.Loading}
+          >
+            <Text size="B300">Join New Space</Text>
+          </Button>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
 export function Space() {
   const mx = useMatrixClient();
   const space = useSpace();
@@ -300,6 +375,8 @@ export function Space() {
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
 
+  const tombstoneEvent = useStateEvent(space, StateEvent.RoomTombstone);
+
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
@@ -355,6 +432,12 @@ export function Space() {
       <SpaceHeader />
       <PageNavContent scrollRef={scrollRef}>
         <Box direction="Column" gap="300">
+          {tombstoneEvent && (
+            <SpaceTombstone
+              roomId={space.roomId}
+              replacementRoomId={tombstoneEvent.getContent().replacement_room}
+            />
+          )}
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
               <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>