Begin setting up for the calling interface to be mounted.

Adds a separator for rooms based on voice vs text rooms

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

@@ -10,6 +10,7 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
+  Button,
   Icon,
   IconButton,
   Icons,
@@ -21,7 +22,7 @@ import {
   Text,
   config,
   toRem,
-} from 'folds';
+} from 'folds'; // Assuming 'folds' is your UI library
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
@@ -45,7 +46,7 @@ import {
 import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
-import { makeNavCategoryId } from '../../../state/closedNavCategories';
+import { makeNavCategoryId as makeSpaceNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
@@ -75,7 +76,137 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
+import { useCallState } from '../CallProvider'; // Assuming path
+import { WidgetApiToWidgetAction } from 'matrix-widget-api';
+import { logger } from 'matrix-js-sdk/lib/logger';
 
+// --- Helper Functions ---
+
+// Determine if a room is a voice room (assuming Room object has this method)
+const isVoiceRoom = (room: Room): boolean => room.isCallRoom?.() ?? false;
+// Determine if a room is a text room
+const isTextRoom = (room: Room): boolean => !isVoiceRoom(room);
+
+// Helper function to generate unique category IDs for channel type headers
+const makeChannelTypeId = (parentId: string, type: 'text' | 'voice'): string => {
+  return `${parentId}_${type}_channels`;
+};
+
+/**
+ * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
+ * suitable for the virtualizer, including collapsible headers for text/voice channels.
+ * Removes the top-level "Channels" category header.
+ *
+ * @param hierarchy - The raw hierarchy data (array of { roomId: string }).
+ * @param mx - The Matrix client instance.
+ * @param spaceRoomId - The ID of the root space being viewed.
+ * @param closedCategories - The Set of currently closed category IDs.
+ * @returns An array of processed items for rendering.
+ */
+const processHierarchyForVirtualizer = (
+  hierarchy: { roomId: string }[],
+  mx: ReturnType<typeof useMatrixClient>,
+  spaceRoomId: string,
+  closedCategories: Set<string>
+): Array<{ type: string; key: string; [key: string]: any }> => {
+  const processed: Array<{ type: string; key: string; [key: string]: any }> = [];
+  let currentCategoryRooms = { text: [], voice: [] };
+  // Start with the root space as the initial parent context
+  let currentParentId: string = spaceRoomId;
+
+  // Function to add collected text/voice rooms under their respective headers
+  const addCollectedRoomsToProcessed = (parentId: string) => {
+    const textCategoryId = makeChannelTypeId(parentId, 'text');
+    const voiceCategoryId = makeChannelTypeId(parentId, 'voice');
+    const isTextClosed = closedCategories.has(textCategoryId);
+    const isVoiceClosed = closedCategories.has(voiceCategoryId);
+
+    // Add Text Channels Header and Rooms (if any exist)
+    if (currentCategoryRooms.text.length > 0) {
+      processed.push({
+        type: 'channel_header', // Use specific type for collapsible channel headers
+        title: 'Text Channels',
+        categoryId: textCategoryId, // ID used for collapse state
+        key: `${parentId}-text-header`,
+      });
+      // Only add room items if this category is not closed
+      if (!isTextClosed) {
+        currentCategoryRooms.text.forEach((room) =>
+          processed.push({ type: 'room', room, key: room.roomId })
+        );
+      }
+    }
+
+    // Add Voice Channels Header and Rooms (if any exist)
+    if (currentCategoryRooms.voice.length > 0) {
+      processed.push({
+        type: 'channel_header', // Use specific type
+        title: 'Voice Channels',
+        categoryId: voiceCategoryId, // ID used for collapse state
+        key: `${parentId}-voice-header`,
+      });
+      // Only add room items if this category is not closed
+      if (!isVoiceClosed) {
+        currentCategoryRooms.voice.forEach((room) =>
+          processed.push({ type: 'room', room, key: room.roomId })
+        );
+      }
+    }
+    // Reset collected rooms for the next category/space
+    currentCategoryRooms = { text: [], voice: [] };
+  };
+
+  // Iterate through the raw hierarchy provided by the hook
+  hierarchy.forEach((item) => {
+    const room = mx.getRoom(item.roomId);
+    if (!room) {
+      logger.warn(`processHierarchyForVirtualizer: Room not found for ID ${item.roomId}`);
+      return; // Skip if room data isn't available
+    }
+
+    if (room.isSpaceRoom()) {
+      // When encountering a new space, first process the rooms collected under the *previous* parent
+      addCollectedRoomsToProcessed(currentParentId);
+
+      // Now, set the current parent context to this new space
+      currentParentId = room.roomId;
+
+      // Add the space category item itself to the processed list,
+      // *UNLESS* it's the root space (we want to skip the top-level "Channels" header)
+      if (room.roomId !== spaceRoomId) {
+        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId); // Use original ID generator for spaces
+        processed.push({
+          type: 'category', // Type for main space categories
+          room,
+          categoryId: spaceCategoryId, // ID for this space's collapse state
+          key: room.roomId,
+        });
+      }
+      // Note: We assume the `hierarchy` list is already filtered based on closed *space* categories.
+    } else {
+      // This is a regular room (not a space). Add it to the appropriate list (text/voice)
+      // for the *current* parent space.
+      if (isVoiceRoom(room)) {
+        currentCategoryRooms.voice.push(room);
+      } else if (isTextRoom(room)) {
+        currentCategoryRooms.text.push(room);
+      } else {
+        // Fallback or handle unexpected room types if necessary
+        logger.warn(
+          `processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`
+        );
+        currentCategoryRooms.text.push(room); // Default to text for now
+      }
+    }
+  });
+
+  // After iterating through all items, process any remaining rooms collected under the last parent
+  addCollectedRoomsToProcessed(currentParentId);
+
+  return processed;
+};
+
+// --- Space Menu Component (Remains Unchanged) ---
 type SpaceMenuProps = {
   room: Room;
   requestClose: () => void;
@@ -86,7 +217,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const canInvite = canDoAction('invite', mx.getUserId() ?? '');
   const openSpaceSettings = useOpenSpaceSettings();
 
   const allChild = useSpaceChildren(
@@ -202,6 +333,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   );
 });
 
+// --- Space Header Component (Remains Unchanged) ---
 function SpaceHeader() {
   const space = useSpace();
   const spaceName = useRoomName(space);
@@ -219,7 +351,6 @@ function SpaceHeader() {
       return cords;
     });
   };
-
   return (
     <>
       <PageNavHeader>
@@ -255,7 +386,7 @@ function SpaceHeader() {
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <SpaceMenu room={space} requestClose={() => setMenuAnchor(undefined)} />
+              {space && <SpaceMenu room={space} requestClose={() => setMenuAnchor(undefined)} />}
             </FocusTrap>
           }
         />
@@ -264,9 +395,72 @@ function SpaceHeader() {
   );
 }
 
+// --- Fixed Bottom Nav Area Component (Remains Unchanged) ---
+function FixedBottomNavArea() {
+  const { sendWidgetAction, activeCallRoomId } = useCallState();
+  const mx = useMatrixClient();
+  const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
+
+  const handleSendMessageClick = () => {
+    const action = 'my.custom.action'; // Replace with your actual action
+    const data = { message: `Hello from ${userName}!` };
+    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
+    sendWidgetAction(action, data)
+      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
+      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
+  };
+
+  const handleToggleMuteClick = () => {
+    const action = WidgetApiToWidgetAction.SetAudioInputMuted;
+    const data = {}; // Sending empty data might imply toggle for some widgets
+    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
+    sendWidgetAction(action, data)
+      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
+      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
+  };
+
+  if (!activeCallRoomId) {
+    return (
+      <Box
+        direction="Column"
+        gap="200"
+        padding="300"
+        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }} // Use theme color if possible
+      >
+        <Text size="T200" color="Muted" align="Center">
+          No active call
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Text size="T200" color="Muted" align="Center">
+      {mx.getRoom(activeCallRoomId)?.normalizedName}
+    </Text>
+  );
+} /*
+<Box
+      direction="Column"
+      gap="200"
+      padding="300"
+      style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }}
+    >
+      <Box direction="Row" gap="200" justifyContent="Center">
+        <Button onClick={handleSendMessageClick} size="200" variant="Primary" fill="Outline">
+          <Icon src={Icons.Alphabet} size="100" />
+        </Button>
+        <Button onClick={handleToggleMuteClick} size="200" variant="Surface">
+          <Icon src={Icons.VolumeMute} size="100" />
+        </Button>
+      </Box>
+    </Box>
+    */
+
+// --- Main Space Component (Updated Rendering Logic) ---
 export function Space() {
   const mx = useMatrixClient();
-  const space = useSpace();
+  const space = useSpace(); // The current top-level space being viewed
   useNavToActivePathMapper(space.roomId);
   const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -280,10 +474,12 @@ export function Space() {
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
 
+  // State for managing collapsed categories (includes spaces and channel types)
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
+  // Memoized callback to get room objects
   const getRoom = useCallback(
-    (rId: string) => {
+    (rId: string): Room | undefined => {
       if (allJoinedRooms.has(rId)) {
         return mx.getRoom(rId) ?? undefined;
       }
@@ -292,45 +488,76 @@ export function Space() {
     [mx, allJoinedRooms]
   );
 
+  // Fetch the raw hierarchy using the hook
+  // Note: The filtering callbacks passed here primarily affect *which* rooms/spaces
+  // are included in the raw list *before* processing.
   const hierarchy = useSpaceJoinedHierarchy(
     space.roomId,
     getRoom,
+    // isRoomHidden callback: Hides room if parent space category is closed, unless room is unread/selected.
     useCallback(
       (parentId, roomId) => {
-        if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
+        // Generate the category ID for the parent *space*
+        const parentSpaceCategoryId = makeSpaceNavCategoryId(space.roomId, parentId);
+        // If the parent space category is not closed, the room is not hidden by this rule.
+        if (!closedCategories.has(parentSpaceCategoryId)) {
           return false;
         }
-        const showRoom = roomToUnread.has(roomId) || roomId === selectedRoomId;
+        // Parent space is closed. Hide the room unless it's unread or currently selected.
-        if (showRoom) return false;
+        const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
-        return true;
+        return !showRoomAnyway; // Return true to hide, false to show
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId] // Dependencies
     ),
+    // isSubCategoryClosed callback: Checks if a *space* subcategory is closed.
     useCallback(
-      (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),
+      (subCategoryId) => closedCategories.has(makeSpaceNavCategoryId(space.roomId, subCategoryId)),
-      [closedCategories, space.roomId]
+      [closedCategories, space.roomId] // Dependencies
     )
   );
 
+  // Process the raw hierarchy into a list with collapsible channel headers
+  const processedHierarchy = useMemo(
+    () =>
+      processHierarchyForVirtualizer(
+        hierarchy,
+        mx,
+        space.roomId,
+        closedCategories // Pass closed state to the processing function
+      ),
+    [hierarchy, mx, space.roomId, closedCategories] // Dependencies for memoization
+  );
+
+  // Setup the virtualizer with the processed list
   const virtualizer = useVirtualizer({
-    count: hierarchy.length,
+    count: processedHierarchy.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 0,
+    estimateSize: () => 32, // Adjust based on average item height
-    overscan: 10,
+    overscan: 10, // Render items slightly outside the viewport
   });
 
+  // Click handler for toggling category collapse state (works for spaces and channel types)
   const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
     closedCategories.has(categoryId)
   );
 
+  // Function to generate navigation links for rooms
   const getToLink = (roomId: string) =>
     getSpaceRoomPath(spaceIdOrAlias, getCanonicalAliasOrRoomId(mx, roomId));
 
+  // --- Render ---
   return (
-    <PageNav>
+    <PageNav style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Fixed Header */}
       <SpaceHeader />
-      <PageNavContent scrollRef={scrollRef}>
+
-        <Box direction="Column" gap="300">
+      {/* Scrollable Content Area */}
+      <PageNavContent
+        scrollRef={scrollRef}
+        style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
+      >
+        {/* Static Top Links (Lobby, Search) */}
+        <Box direction="Column" gap="300" paddingBottom="400">
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
               <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
@@ -365,57 +592,108 @@ export function Space() {
               </NavLink>
             </NavItem>
           </NavCategory>
-          <NavCategory
+        </Box>
-            style={{
-              height: virtualizer.getTotalSize(),
-              position: 'relative',
-            }}
-          >
-            {virtualizer.getVirtualItems().map((vItem) => {
-              const { roomId } = hierarchy[vItem.index] ?? {};
-              const room = mx.getRoom(roomId);
-              if (!room) return null;
 
-              if (room.isSpaceRoom()) {
+        {/* Virtualized List Area */}
-                const categoryId = makeNavCategoryId(space.roomId, roomId);
+        <NavCategory
+          style={{
+            height: `${virtualizer.getTotalSize()}px`, // Set height for virtualizer scroll calculations
+            width: '100%',
+            position: 'relative', // Needed for absolute positioning of virtual items
+          }}
+        >
+          {virtualizer.getVirtualItems().map((vItem) => {
+            const item = processedHierarchy[vItem.index];
+            if (!item) return null; // Should not happen with correct processing
 
-                return (
+            // --- Render Logic based on Item Type ---
-                  <VirtualTile
+            const renderContent = () => {
-                    virtualItem={vItem}
+              switch (item.type) {
-                    key={vItem.index}
+                // Render a main space category header (for nested spaces)
-                    ref={virtualizer.measureElement}
+                case 'category': {
-                  >
+                  // item has: room, categoryId, key
-                    <div style={{ paddingTop: vItem.index === 0 ? undefined : config.space.S400 }}>
+                  const { room, categoryId } = item;
+                  // Determine name: Use the room name for nested spaces
+                  const name = room.name;
+                  // Add padding above subsequent categories
+                  // Removed index === 0 check as root category is gone
+                  const paddingTop = config?.space?.S400 ?? '1rem';
+                  return (
+                    <div style={{ paddingTop: paddingTop }}>
                       <NavCategoryHeader>
                         <RoomNavCategoryButton
-                          data-category-id={categoryId}
+                          data-category-id={categoryId} // ID for collapse state
-                          onClick={handleCategoryClick}
+                          onClick={handleCategoryClick} // Toggle collapse
-                          closed={closedCategories.has(categoryId)}
+                          closed={closedCategories.has(categoryId)} // Pass closed state
                         >
-                          {roomId === space.roomId ? 'Rooms' : room?.name}
+                          {name}
                         </RoomNavCategoryButton>
                       </NavCategoryHeader>
                     </div>
-                  </VirtualTile>
+                  );
-                );
+                }
+                // Render a collapsible header for Text or Voice channels
+                case 'channel_header': {
+                  // item has: title, categoryId, key
+                  const { title, categoryId } = item;
+                  return (
+                    // Add indentation and padding for visual hierarchy
+                    <Box paddingLeft="400" paddingTop="200" paddingBottom="100">
+                      <NavCategoryHeader variant="Subtle">
+                        {' '}
+                        {/* Use subtle variant if available */}
+                        <RoomNavCategoryButton
+                          data-category-id={categoryId} // ID for collapse state
+                          onClick={handleCategoryClick} // Toggle collapse
+                          closed={closedCategories.has(categoryId)} // Pass closed state
+                          isSubCategory // Optional prop for styling tweaks
+                        >
+                          {title}
+                        </RoomNavCategoryButton>
+                      </NavCategoryHeader>
+                    </Box>
+                  );
+                }
+                // Render a regular room item (text or voice channel)
+                case 'room': {
+                  // item has: room, key
+                  const { room } = item;
+                  return (
+                    // Add indentation for rooms under headers
+                    <Box paddingLeft="500">
+                      <RoomNavItem
+                        room={room}
+                        selected={selectedRoomId === room.roomId}
+                        showAvatar={mDirects.has(room.roomId)}
+                        direct={mDirects.has(room.roomId)}
+                        linkPath={getToLink(room.roomId)}
+                        notificationMode={getRoomNotificationMode(
+                          notificationPreferences,
+                          room.roomId
+                        )}
+                      />
+                    </Box>
+                  );
+                }
+                default:
+                  // Log error for unexpected item types
+                  logger.error('Unknown item type in virtualized list:', item);
+                  return null;
               }
+            };
 
-              return (
+            // Render the virtual tile wrapper with the content
-                <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
+            return (
-                  <RoomNavItem
+              <VirtualTile virtualItem={vItem} key={item.key} ref={virtualizer.measureElement}>
-                    room={room}
+                {renderContent()}
-                    selected={selectedRoomId === roomId}
+              </VirtualTile>
-                    showAvatar={mDirects.has(roomId)}
+            );
-                    direct={mDirects.has(roomId)}
+          })}
-                    linkPath={getToLink(roomId)}
+        </NavCategory>
-                    notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
-                  />
-                </VirtualTile>
-              );
-            })}
-          </NavCategory>
-        </Box>
       </PageNavContent>
+
+      {/* Fixed Bottom Section (Remains Unchanged) */}
+      <FixedBottomNavArea />
     </PageNav>
   );
 }