Remove pointless comments, helper funcs, and clean up formatting

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

@@ -10,7 +10,6 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
-  Button,
   Icon,
   IconButton,
   Icons,
@@ -22,11 +21,13 @@ import {
   Text,
   config,
   toRem,
-} from 'folds'; // Assuming 'folds' is your UI library
+} from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { WidgetApiToWidgetAction } from 'matrix-widget-api';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import {
@@ -46,6 +47,7 @@ import {
 import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
+// Using the original name for clarity when generating space category IDs
 import { makeNavCategoryId as makeSpaceNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
@@ -76,26 +78,12 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
-import { useCallState } from '../CallProvider'; // Assuming path
+import { useCallState } from '../CallProvider';
-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.
+ * Removes the top-level "Rooms" category header.
  *
  * @param hierarchy - The raw hierarchy data (array of { roomId: string }).
  * @param mx - The Matrix client instance.
@@ -111,25 +99,21 @@ const processHierarchyForVirtualizer = (
 ): 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 textCategoryId = `${parentId}_text_rooms`;
-    const voiceCategoryId = makeChannelTypeId(parentId, 'voice');
+    const voiceCategoryId = `${parentId}_call_rooms`;
     const isTextClosed = closedCategories.has(textCategoryId);
-    const isVoiceClosed = closedCategories.has(voiceCategoryId);
+    const isCallClosed = 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
+        type: 'channel_header',
-        title: 'Text Channels',
+        title: 'Text Rooms',
-        categoryId: textCategoryId, // ID used for collapse state
+        categoryId: textCategoryId,
         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 })
@@ -137,76 +121,55 @@ const processHierarchyForVirtualizer = (
       }
     }
 
-    // Add Voice Channels Header and Rooms (if any exist)
     if (currentCategoryRooms.voice.length > 0) {
       processed.push({
-        type: 'channel_header', // Use specific type
+        type: 'channel_header',
-        title: 'Voice Channels',
+        title: 'Call Rooms',
-        categoryId: voiceCategoryId, // ID used for collapse state
+        categoryId: voiceCategoryId,
         key: `${parentId}-voice-header`,
       });
-      // Only add room items if this category is not closed
+      if (!isCallClosed) {
-      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
+        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId);
         processed.push({
-          type: 'category', // Type for main space categories
+          type: 'category',
           room,
-          categoryId: spaceCategoryId, // ID for this space's collapse state
+          categoryId: spaceCategoryId,
           key: room.roomId,
         });
       }
-      // Note: We assume the `hierarchy` list is already filtered based on closed *space* categories.
+    } else if (room.isCallRoom()) {
+      currentCategoryRooms.voice.push(room);
+    } else if (!room.isCallRoom()) {
+      currentCategoryRooms.text.push(room);
     } else {
-      // This is a regular room (not a space). Add it to the appropriate list (text/voice)
+      logger.warn(`processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`);
-      // for the *current* parent space.
+      currentCategoryRooms.text.push(room);
-      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;
@@ -333,7 +296,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   );
 });
 
-// --- Space Header Component (Remains Unchanged) ---
 function SpaceHeader() {
   const space = useSpace();
   const spaceName = useRoomName(space);
@@ -395,14 +357,13 @@ 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 action = 'my.custom.action';
     const data = { message: `Hello from ${userName}!` };
     logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
     sendWidgetAction(action, data)
@@ -412,7 +373,7 @@ function FixedBottomNavArea() {
 
   const handleToggleMuteClick = () => {
     const action = WidgetApiToWidgetAction.SetAudioInputMuted;
-    const data = {}; // Sending empty data might imply toggle for some widgets
+    const data = {};
     logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
     sendWidgetAction(action, data)
       .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
@@ -425,7 +386,7 @@ function FixedBottomNavArea() {
         direction="Column"
         gap="200"
         padding="300"
-        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }} // Use theme color if possible
+        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }}
       >
         <Text size="T200" color="Muted" align="Center">
           No active call
@@ -436,7 +397,7 @@ function FixedBottomNavArea() {
 
   return (
     <Text size="T200" color="Muted" align="Center">
-      {mx.getRoom(activeCallRoomId)?.normalizedName}
+      {}
     </Text>
   );
 } /*
@@ -457,10 +418,9 @@ function FixedBottomNavArea() {
     </Box>
     */
 
-// --- Main Space Component (Updated Rendering Logic) ---
 export function Space() {
   const mx = useMatrixClient();
-  const space = useSpace(); // The current top-level space being viewed
+  const space = useSpace();
   useNavToActivePathMapper(space.roomId);
   const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -474,10 +434,8 @@ 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): Room | undefined => {
       if (allJoinedRooms.has(rId)) {
@@ -488,75 +446,53 @@ 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) => {
-        // 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;
         }
-        // Parent space is closed. Hide the room unless it's unread or currently selected.
         const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
-        return !showRoomAnyway; // Return true to hide, false to show
+        return !showRoomAnyway;
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId] // Dependencies
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
     ),
-    // isSubCategoryClosed callback: Checks if a *space* subcategory is closed.
+
     useCallback(
       (subCategoryId) => closedCategories.has(makeSpaceNavCategoryId(space.roomId, subCategoryId)),
-      [closedCategories, space.roomId] // Dependencies
+      [closedCategories, space.roomId]
     )
   );
 
-  // Process the raw hierarchy into a list with collapsible channel headers
   const processedHierarchy = useMemo(
-    () =>
+    () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
-      processHierarchyForVirtualizer(
+    [hierarchy, mx, space.roomId, closedCategories]
-        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: processedHierarchy.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 32, // Adjust based on average item height
+    estimateSize: () => 32,
-    overscan: 10, // Render items slightly outside the viewport
+    overscan: 10,
   });
 
-  // 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 style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Fixed Header */}
       <SpaceHeader />
-
-      {/* 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}>
@@ -593,38 +529,29 @@ export function Space() {
             </NavItem>
           </NavCategory>
         </Box>
-
-        {/* Virtualized List Area */}
         <NavCategory
           style={{
-            height: `${virtualizer.getTotalSize()}px`, // Set height for virtualizer scroll calculations
+            height: `${virtualizer.getTotalSize()}px`,
             width: '100%',
-            position: 'relative', // Needed for absolute positioning of virtual items
+            position: 'relative',
           }}
         >
           {virtualizer.getVirtualItems().map((vItem) => {
             const item = processedHierarchy[vItem.index];
-            if (!item) return null; // Should not happen with correct processing
+            if (!item) return null;
-
-            // --- Render Logic based on Item Type ---
             const renderContent = () => {
               switch (item.type) {
-                // Render a main space category header (for nested spaces)
                 case 'category': {
-                  // item has: room, categoryId, key
                   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} // ID for collapse state
+                          data-category-id={categoryId}
-                          onClick={handleCategoryClick} // Toggle collapse
+                          onClick={handleCategoryClick}
-                          closed={closedCategories.has(categoryId)} // Pass closed state
+                          closed={closedCategories.has(categoryId)}
                         >
                           {name}
                         </RoomNavCategoryButton>
@@ -632,21 +559,16 @@ export function Space() {
                     </div>
                   );
                 }
-                // 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
+                          data-category-id={categoryId}
-                          onClick={handleCategoryClick} // Toggle collapse
+                          onClick={handleCategoryClick}
-                          closed={closedCategories.has(categoryId)} // Pass closed state
+                          closed={closedCategories.has(categoryId)}
-                          isSubCategory // Optional prop for styling tweaks
+                          isSubCategory
                         >
                           {title}
                         </RoomNavCategoryButton>
@@ -654,12 +576,9 @@ export function Space() {
                     </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}
@@ -676,13 +595,11 @@ export function Space() {
                   );
                 }
                 default:
-                  // Log error for unexpected item types
                   logger.error('Unknown item type in virtualized list:', item);
                   return null;
               }
             };
 
-            // Render the virtual tile wrapper with the content
             return (
               <VirtualTile virtualItem={vItem} key={item.key} ref={virtualizer.measureElement}>
                 {renderContent()}
@@ -691,8 +608,6 @@ export function Space() {
           })}
         </NavCategory>
       </PageNavContent>
-
-      {/* Fixed Bottom Section (Remains Unchanged) */}
       <FixedBottomNavArea />
     </PageNav>
   );