feat: Implement sub-room functionality

- Added support for sub-rooms in the SpaceHierarchy component, allowing rooms to have nested child rooms.
- Introduced UnjoinedSubRoomItem component to display unjoined sub-rooms with a join button.
- Created SubRooms settings page for managing sub-rooms, including adding and removing sub-rooms.
- Updated RoomNavItem to include options for creating sub-rooms.
- Enhanced room fetching logic to filter out sub-rooms from the main room list.
- Added hooks for managing sub-rooms state and permissions.
- Updated relevant state management to handle sub-room creation and association with parent rooms.

src/app/features/room-nav/RoomNavItem.tsx

@@ -60,6 +60,7 @@ import { CallType } from '../call/types';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { StateEvent } from '../../../types/matrix/room';
 import { mDirectAtom } from '../../state/mDirectList';
+import { useOpenCreateSubRoomModal } from '../../state/hooks/createRoomModal';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -78,7 +79,9 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
 
     const permissions = useRoomPermissions(creators, powerLevels);
     const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const canAddSubRoom = permissions.stateEvent(StateEvent.PaarrotSubRooms, mx.getSafeUserId());
     const openRoomSettings = useOpenRoomSettings();
+    const openCreateSubRoom = useOpenCreateSubRoomModal();
     const space = useSpaceOptionally();
 
     const [invitePrompt, setInvitePrompt] = useState(false);
@@ -104,6 +107,11 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
       requestClose();
     };
 
+    const handleAddSubRoom = () => {
+      openCreateSubRoom(room.roomId);
+      requestClose();
+    };
+
     const handleJoinVoice = async () => {
       try {
         // If already in a call, leave it first
@@ -211,6 +219,17 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
               Room Settings
             </Text>
           </MenuItem>
+          <MenuItem
+            onClick={handleAddSubRoom}
+            size="300"
+            after={<Icon size="100" src={Icons.Plus} />}
+            radii="300"
+            disabled={!canAddSubRoom}
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Add Sub-Room
+            </Text>
+          </MenuItem>
         </Box>
         <Line variant="Surface" size="300" />
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>