feat: Improve subspace nesting display

.changeset/implements_improved_subspace_rendering.md

@@ -0,0 +1,9 @@
+---
+default: minor
+---
+
+# Implemented improved subspace rendering
+
+Navbar and Lobby view now represent the hierarchy of subspaces via guide lines.
+Depth of subspace limit is customizable with a setting.
+Also changes the navbar collapse/extpanded arrows to be on the right of the categories.

src/app/features/add-existing/AddExisting.tsx

@@ -83,13 +83,39 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
   const allRoomsSet = useAllJoinedRoomsSet();
   const getRoom = useGetRoom(allRoomsSet);
 
+  /**
+   * Recursively checks if a given sourceId room is an ancestor to the targetId space.
+   *
+   * @param sourceId - The room to check.
+   * @param targetId - The space ID to check against.
+   * @param visited - Set used to prevent recursion errors.
+   * @returns True if rId is an ancestor of targetId.
+   */
+  const isAncestor = useCallback(
+    (sourceId: string, targetId: string, visited: Set<string> = new Set()): boolean => {
+      // Prevent infinite recursion
+      if (visited.has(targetId)) return false;
+      visited.add(targetId);
+
+      const parentIds = roomIdToParents.get(targetId);
+      if (!parentIds) return false;
+
+      if (parentIds.has(sourceId)) {
+        return true;
+      }
+
+      return Array.from(parentIds).some((id) => isAncestor(sourceId, id, visited));
+    },
+    [roomIdToParents]
+  );
+
   const allItems: string[] = useMemo(() => {
     const rIds = space ? [...spaces] : [...rooms, ...directs];
 
     return rIds
-      .filter((rId) => rId !== parentId && !roomIdToParents.get(rId)?.has(parentId))
+      .filter((rId) => rId !== parentId && !isAncestor(rId, parentId))
       .sort(factoryRoomIdByAtoZ(mx));
-  }, [spaces, rooms, directs, space, parentId, roomIdToParents, mx]);
+  }, [space, spaces, rooms, directs, mx, parentId, isAncestor]);
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
     (rId) => getRoom(rId)?.name ?? rId,

src/app/features/lobby/DnD.css.ts

@@ -11,7 +11,7 @@ export const ItemDraggableTarget = style([
     top: 0,
     zIndex: 1,
     cursor: 'grab',
-    borderRadius: config.radii.R400,
+    borderRadius: 0,
     opacity: config.opacity.P300,
 
     ':active': {

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -30,6 +30,9 @@ import { IPowerLevels } from '$hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '$hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '$hooks/useRoomPermissions';
 import { InviteUserPrompt } from '$components/invite-user-prompt';
+import { getCanonicalAliasOrRoomId } from '$utils/matrix';
+import { useNavigate } from 'react-router-dom';
+import { getSpaceLobbyPath } from '$pages/pathUtils';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -227,6 +230,7 @@ export function HierarchyItemMenu({
   };
 
   const handleRequestClose = useCallback(() => setMenuAnchor(undefined), []);
+  const navigate = useNavigate();
 
   if (!joined && !canEditChild) {
     return null;
@@ -278,6 +282,17 @@ export function HierarchyItemMenu({
                         </Text>
                       </MenuItem>
                     )}
+                    <MenuItem
+                      size="300"
+                      radii="300"
+                      onClick={() => {
+                        navigate(getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, item.roomId)));
+                      }}
+                    >
+                      <Text as="span" size="T300" truncate>
+                        Open Lobby
+                      </Text>
+                    </MenuItem>
                     <InviteMenuItem
                       item={item}
                       requestClose={handleRequestClose}