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/state/createRoomModal.ts

@@ -2,6 +2,8 @@ import { atom } from 'jotai';
 
 export type CreateRoomModalState = {
   spaceId?: string;
+  /** When set, the created room will be added as a sub-room to this room */
+  parentSubRoomId?: string;
 };
 
 export const createRoomModalAtom = atom<CreateRoomModalState | undefined>(undefined);

src/app/state/hooks/createRoomModal.ts

@@ -32,3 +32,17 @@ export const useOpenCreateRoomModal = (): OpenCallback => {
 
   return open;
 };
+
+type OpenSubRoomCallback = (parentRoomId: string) => void;
+export const useOpenCreateSubRoomModal = (): OpenSubRoomCallback => {
+  const setSettings = useSetAtom(createRoomModalAtom);
+
+  const open: OpenSubRoomCallback = useCallback(
+    (parentSubRoomId) => {
+      setSettings({ parentSubRoomId });
+    },
+    [setSettings]
+  );
+
+  return open;
+};

src/app/state/roomSettings.ts

@@ -4,6 +4,7 @@ export enum RoomSettingsPage {
   GeneralPage,
   MembersPage,
   PermissionsPage,
+  SubRoomsPage,
   EmojisStickersPage,
   DeveloperToolsPage,
 }