hide event timeline feature behind dev tool

src/app/hooks/useRoomNavigate.ts

@@ -13,6 +13,8 @@ import { getOrphanParents } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
 import { useSelectedSpace } from './router/useSelectedSpace';
+import { settingsAtom } from '../state/settings';
+import { useSetting } from '../state/hooks/settings';
 
 export const useRoomNavigate = () => {
   const navigate = useNavigate();
@@ -20,6 +22,7 @@ export const useRoomNavigate = () => {
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const spaceSelectedId = useSelectedSpace();
+  const [developerTools] = useSetting(settingsAtom, 'developerTools');
 
   const navigateSpace = useCallback(
     (roomId: string) => {
@@ -32,9 +35,9 @@ export const useRoomNavigate = () => {
   const navigateRoom = useCallback(
     (roomId: string, eventId?: string, opts?: NavigateOptions) => {
       const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
+      const openSpaceTimeline = developerTools && spaceSelectedId === roomId;
 
-      const orphanParents =
-        spaceSelectedId === roomId ? [roomId] : getOrphanParents(roomToParents, roomId);
+      const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId);
       if (orphanParents.length > 0) {
         const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(
           mx,
@@ -43,7 +46,7 @@ export const useRoomNavigate = () => {
             : orphanParents[0] // TODO: better orphan parent selection.
         );
 
-        if (spaceSelectedId === roomId) {
+        if (openSpaceTimeline) {
           navigate(getSpaceRoomPath(pSpaceIdOrAlias, roomId, eventId), opts);
           return;
         }
@@ -59,7 +62,7 @@ export const useRoomNavigate = () => {
 
       navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
     },
-    [mx, navigate, spaceSelectedId, roomToParents, mDirects]
+    [mx, navigate, spaceSelectedId, roomToParents, mDirects, developerTools]
   );
 
   return {

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

@@ -11,10 +11,13 @@ import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
 import { mDirectAtom } from '../../../state/mDirectList';
+import { settingsAtom } from '../../../state/settings';
+import { useSetting } from '../../../state/hooks/settings';
 
 export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   const mx = useMatrixClient();
   const space = useSpace();
+  const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const [roomToParents, setRoomToParents] = useAtom(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
@@ -35,7 +38,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
     );
   }
 
-  if (room.isSpaceRoom() && room.roomId === space.roomId) {
+  if (developerTools && room.isSpaceRoom() && room.roomId === space.roomId) {
     // allow to view space timeline
     return (
       <RoomProvider key={room.roomId} value={room}>

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

@@ -84,6 +84,7 @@ type SpaceMenuProps = {
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
   const mx = useMatrixClient();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@@ -175,16 +176,18 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
             Space Settings
           </Text>
         </MenuItem>
-        <MenuItem
-          onClick={handleOpenTimeline}
-          size="300"
-          after={<Icon size="100" src={Icons.Terminal} />}
-          radii="300"
-        >
-          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-            Event Timeline
-          </Text>
-        </MenuItem>
+        {developerTools && (
+          <MenuItem
+            onClick={handleOpenTimeline}
+            size="300"
+            after={<Icon size="100" src={Icons.Terminal} />}
+            radii="300"
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Event Timeline
+            </Text>
+          </MenuItem>
+        )}
       </Box>
       <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>