Merge pull request #41 from GimleLarpes/patch-1

Revert most changes to Space.tsx

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

@@ -22,7 +22,7 @@ import {
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { useParams } from 'react-router-dom';
-import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
+import { NavButton, NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
@@ -53,8 +53,10 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/call/CallProvider';
+import { useCallMembers } from '../../hooks/useCallMembers';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { RoomNavUser } from './RoomNavUser';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -237,6 +239,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const callMembers = useCallMembers(mx, room.roomId);
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
@@ -293,8 +296,23 @@ export function RoomNavItem({
   };
 
   const optionsVisible = hover || !!menuAnchor;
+  const ariaLabel = [
+    room.name,
+    room.isCallRoom()
+      ? [
+          'Call Room',
+          isActiveCall && 'Currently in Call',
+          callMembers.length && `${callMembers.length} in Call`,
+        ]
+      : 'Text Room',
+    unread?.total && `${unread.total} Messages`,
+  ]
+    .flat()
+    .filter(Boolean)
+    .join(', ');
 
   return (
+    <Box direction="Column" grow="Yes">
       <NavItem
         variant="Background"
         radii="400"
@@ -305,7 +323,8 @@ export function RoomNavItem({
         {...hoverProps}
         {...focusWithinProps}
       >
-      <NavItemContent onClick={handleNavItemClick}>
+        <NavButton onClick={handleNavItemClick} aria-label={ariaLabel}>
+          <NavItemContent>
             <Box as="span" grow="Yes" alignItems="Center" gap="200">
               <Avatar size="200" radii="400">
                 {showAvatar ? (
@@ -356,13 +375,19 @@ export function RoomNavItem({
                 </UnreadBadgeCenter>
               )}
               {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-            <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+                <Icon
+                  size="50"
+                  src={getRoomNotificationModeIcon(notificationMode)}
+                  aria-label={notificationMode}
+                />
               )}
             </Box>
           </NavItemContent>
           {optionsVisible && (
             <NavItemOptions>
               <PopOut
+                id={`menu-${room.roomId}`}
+                aria-expanded={!!menuAnchor}
                 anchor={menuAnchor}
                 offset={menuAnchor?.width === 0 ? 0 : undefined}
                 alignOffset={menuAnchor?.width === 0 ? 0 : -5}
@@ -404,6 +429,7 @@ export function RoomNavItem({
                         data-testid="chat-button"
                         onClick={handleChatButtonClick}
                         aria-pressed={isChatOpen && selected}
+                        aria-label="Open Chat"
                         variant="Background"
                         fill="None"
                         size="300"
@@ -419,6 +445,8 @@ export function RoomNavItem({
                 <IconButton
                   onClick={handleOpenMenu}
                   aria-pressed={!!menuAnchor}
+                  aria-controls={`menu-${room.roomId}`}
+                  aria-label="More Options"
                   variant="Background"
                   fill="None"
                   size="300"
@@ -429,6 +457,15 @@ export function RoomNavItem({
               </PopOut>
             </NavItemOptions>
           )}
+        </NavButton>
       </NavItem>
+      {room.isCallRoom() && (
+        <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
+          {callMembers.map((userId) => (
+            <RoomNavUser room={room} userId={userId} />
+          ))}
+        </Box>
+      )}
+    </Box>
   );
 }

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

@@ -1,51 +1,163 @@
-import { Avatar, Box, Icon, Icons, Text } from 'folds';
+import {
-import React from 'react';
+  Avatar,
+  Box,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Text,
+  Tooltip,
+  TooltipProvider,
+} from 'folds';
+import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { NavItem, NavItemContent } from '../../components/nav';
+import { useFocusWithin, useHover } from 'react-aria';
+import { NavItem, NavItemContent, NavItemOptions } from '../../components/nav';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { useCallState } from '../../pages/client/call/CallProvider';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { getMemberDisplayName } from '../../utils/room';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { openProfileViewer } from '../../../client/action/navigation';
 
 type RoomNavUserProps = {
   room: Room;
-  space: Room;
+  userId: string;
-  sender: string;
 };
-export function RoomNavUser({ room, space, sender }: RoomNavUserProps) {
+export function RoomNavUser({ room, userId }: RoomNavUserProps) {
   const mx = useMatrixClient();
-  const members = useRoomMembers(mx, space.roomId);
   const useAuthentication = useMediaAuthentication();
-
+  const [navUserExpanded, setNavUserExpanded] = useState(false);
-  const member = members.find((roomMember) => roomMember.userId === sender);
+  const [hover, setHover] = useState(false);
-  const avatarMxcUrl = member?.getMxcAvatarUrl();
+  const { hoverProps } = useHover({ onHoverChange: setHover });
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: (isFocused) => {
+      setHover(isFocused);
+      if (!isFocused) setNavUserExpanded(false);
+    },
+  });
+  const { isCallActive, activeCallRoomId } = useCallState();
+  const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const avatarMxcUrl = getMemberAvatarMxc(room, userId);
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
     : undefined;
-  const getName =
+  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-    getMemberDisplayName(room, member?.userId ?? '') ??
+  const isCallParticipant = isActiveCall && userId !== mx.getUserId();
-    getMxIdLocalPart(member?.userId ?? '') ??
+
-    member?.userId;
+  const handleNavUserClick = () => {
+    if (isCallParticipant) {
+      setNavUserExpanded((prev) => !prev);
+    }
+  };
+
+  const handleClickUser = () => {
+    openProfileViewer(userId, room.roomId);
+  };
+
+  // PLACEHOLDER
+  const [userMuted, setUserMuted] = useState(false);
+  const handleToggleMute = () => {
+    setUserMuted(!userMuted);
+  };
+
+  const optionsVisible = (hover || userMuted || navUserExpanded) && isCallParticipant && false; // Disable until individual volume control and mute have been added
+  const ariaLabel = isCallParticipant
+    ? `Call Participant: ${getName}${userMuted ? ', Muted' : ''}`
+    : getName;
 
   return (
-    <NavItem variant="Background" radii="400">
+    <NavItem
-      <NavItemContent>
+      tabIndex={0}
-        <Box as="span" grow="Yes" alignItems="Center" gap="200">
+      variant="Background"
+      radii="400"
+      style={{ paddingTop: config.space.S200, paddingBottom: config.space.S200 }}
+      {...hoverProps}
+      {...focusWithinProps}
+      aria-label={ariaLabel}
+    >
+      <NavItemContent onClick={handleNavUserClick}>
+        <Box direction="Column" grow="Yes" gap="200" justifyContent="Stretch">
+          <Box as="span" alignItems="Center" gap="200">
             <Avatar size="200">
               <UserAvatar
-              userId={member?.userId ?? ''}
+                userId={userId}
                 src={avatarUrl ?? undefined}
                 alt={getName}
                 renderFallback={() => <Icon size="50" src={Icons.User} filled />}
               />
             </Avatar>
-          <Text size="B400" priority="300" truncate>
+            <Text
+              size="B400"
+              priority="300"
+              // Set priority based on if talking
+              truncate
+            >
               {getName}
             </Text>
           </Box>
+          {navUserExpanded && (
+            <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              {/* Slider here, when implemented into folds */}
+              <Text>---- THIS IS A SLIDER ---</Text>
+            </Box>
+          )}
+        </Box>
       </NavItemContent>
+      {optionsVisible && (
+        <NavItemOptions direction="Column" justifyContent="SpaceBetween">
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{userMuted ? 'Unmute' : 'Mute'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                onClick={handleToggleMute}
+                aria-pressed={userMuted}
+                aria-label={userMuted ? `Unmute ${getName}` : `Mute ${getName}`}
+                variant={userMuted ? 'Critical' : 'Background'}
+                fill="None"
+                size="300"
+                radii="300"
+              >
+                <Icon size="50" src={userMuted ? Icons.VolumeMute : Icons.VolumeHigh} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          {navUserExpanded && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>View Profile</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  onClick={handleClickUser}
+                  aria-label="View Profile"
+                  variant="Background"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                >
+                  <Icon size="50" src={Icons.User} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+        </NavItemOptions>
+      )}
     </NavItem>
   );
 }

src/app/hooks/useCallMembers.ts

@@ -0,0 +1,81 @@
+/*import { MatrixClient } from 'matrix-js-sdk';
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { useEffect, useState } from 'react';
+
+export const useCallMembers = (
+  mx: MatrixClient,
+  mxr: MatrixRTCSession,
+  roomId: string
+): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>([]);
+
+  useEffect(() => {
+    const room = mx.getRoom(roomId);
+
+    const updateMemberships = () => {
+      if (!room?.isCallRoom()) return;
+      setMemberships(MatrixRTCSession.callMembershipsForRoom(room));
+      //setMemberships(mxr.memberships);
+      //console.log('MEMBERSHIPS:');
+      //console.log(memberships);
+    };
+
+    updateMemberships();
+
+    mxr.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      mxr.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [mx, mxr, roomId]);
+
+  return memberships;
+};*/
+
+// TEMPORARY
+import { MatrixClient, MatrixEvent, RoomStateEvent } from 'matrix-js-sdk';
+import { useEffect, useMemo, useState } from 'react';
+import { getStateEvents } from '../utils/room';
+import { StateEvent } from '../../types/matrix/room';
+
+export const useCallMembers = (mx: MatrixClient, roomId: string): string[] => {
+  const [events, setEvents] = useState<MatrixEvent[]>([]);
+
+  useEffect(() => {
+    const room = mx.getRoom(roomId);
+
+    const updateEvents = (event?: MatrixEvent) => {
+      if (!room?.isCallRoom() || (event && event.getRoomId() !== roomId)) return;
+      setEvents(getStateEvents(room, StateEvent.GroupCallMemberPrefix));
+    };
+
+    updateEvents();
+
+    mx.on(RoomStateEvent.Events, updateEvents);
+    return () => {
+      mx.removeListener(RoomStateEvent.Events, updateEvents);
+    };
+  }, [mx, roomId]);
+
+  const participants = useMemo(
+    () =>
+      events
+        .filter((ev) => {
+          const content = ev.getContent();
+          return (
+            content &&
+            ev.getSender() &&
+            content.expires &&
+            ev.getTs() + content.expires > Date.now()
+          );
+        })
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        .map((ev) => ev.getSender()!),
+    [events]
+  );
+
+  return participants;
+};

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

@@ -26,7 +26,6 @@ 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 { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import {
@@ -46,8 +45,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 } 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';
@@ -79,118 +77,7 @@ import {
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { CallNavStatus } from '../../../features/room-nav/RoomCallNavStatus';
-import { getStateEvents } from '../../../utils/room';
+import { useCallState } from '../call/CallProvider';
-import { RoomNavUser } from '../../../features/room-nav/RoomNavUser';
-import { useStateEvents } from '../../../hooks/useStateEvents';
-
-/**
- * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
- * suitable for the virtualizer, including collapsible headers for text/voice rooms.
- * Removes the top-level "Rooms" 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: [], users: [] };
-  let currentParentId: string = spaceRoomId;
-
-  const addCollectedRoomsToProcessed = (parentId: string) => {
-    const textCategoryId = `${parentId}_text_rooms`;
-    const voiceCategoryId = `${parentId}_call_rooms`;
-    const isTextClosed = closedCategories.has(textCategoryId);
-    const isCallClosed = closedCategories.has(voiceCategoryId);
-
-    if (currentCategoryRooms.text.length > 0) {
-      processed.push({
-        type: 'room_header',
-        title: 'Text Rooms',
-        categoryId: textCategoryId,
-        key: `${parentId}-text-header`,
-      });
-      if (!isTextClosed) {
-        currentCategoryRooms.text.forEach((room) =>
-          processed.push({ type: 'room', room, key: room.roomId })
-        );
-      }
-    }
-
-    if (currentCategoryRooms.voice.length > 0) {
-      processed.push({
-        type: 'room_header',
-        title: 'Call Rooms',
-        categoryId: voiceCategoryId,
-        key: `${parentId}-voice-header`,
-      });
-      if (!isCallClosed) {
-        currentCategoryRooms.voice.forEach((room) => {
-          processed.push({ type: 'room', room, key: room.roomId });
-
-          currentCategoryRooms.users.forEach((entry) => {
-            if (entry.room.roomId === room.roomId) {
-              processed.push(entry);
-            }
-          });
-        });
-      }
-    }
-
-    currentCategoryRooms = { text: [], voice: [], users: [] };
-  };
-
-  hierarchy.forEach((item) => {
-    const room = mx.getRoom(item.roomId);
-    if (!room) {
-      logger.warn(`processHierarchyForVirtualizer: Room not found for ID ${item.roomId}`);
-    }
-
-    if (room.isSpaceRoom()) {
-      addCollectedRoomsToProcessed(currentParentId);
-      currentParentId = room.roomId;
-      if (room.roomId !== spaceRoomId) {
-        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId);
-        processed.push({
-          type: 'category',
-          room,
-          categoryId: spaceCategoryId,
-          key: room.roomId,
-        });
-      }
-    } else if (room.isCallRoom()) {
-      currentCategoryRooms.voice.push(room);
-      getStateEvents(room, 'org.matrix.msc3401.call.member').forEach(({ event }) => {
-        if (Object.entries(event?.content).length !== 0) {
-          if (event.origin_server_ts + event.content.expires > Date.now()) {
-            currentCategoryRooms.users.push({
-              type: 'user',
-              sender: event.sender,
-              key: event.event_id,
-              room,
-            });
-          }
-        }
-      });
-    } else if (!room.isCallRoom()) {
-      currentCategoryRooms.text.push(room);
-    } else {
-      logger.warn(`processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`);
-      currentCategoryRooms.text.push(room);
-    }
-  });
-
-  addCollectedRoomsToProcessed(currentParentId);
-
-  return processed;
-};
 
 type SpaceMenuProps = {
   room: Room;
@@ -203,7 +90,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', mx.getUserId() ?? '');
+  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
   const openSpaceSettings = useOpenSpaceSettings();
   const { navigateRoom } = useRoomNavigate();
 
@@ -354,6 +241,7 @@ function SpaceHeader() {
       return cords;
     });
   };
+
   return (
     <>
       <PageNavHeader>
@@ -412,6 +300,7 @@ export function Space() {
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
+  const { isCallActive, activeCallRoomId } = useCallState();
 
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
@@ -430,40 +319,25 @@ export function Space() {
     getRoom,
     useCallback(
       (parentId, roomId) => {
-        const parentSpaceCategoryId = makeSpaceNavCategoryId(space.roomId, parentId);
+        if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
-        if (!closedCategories.has(parentSpaceCategoryId)) {
           return false;
         }
-        const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
+        const showRoomAnyway =
+          roomToUnread.has(roomId) ||
+          roomId === selectedRoomId ||
+          (isCallActive && activeCallRoomId === roomId);
         return !showRoomAnyway;
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId, activeCallRoomId, isCallActive]
     ),
-
     useCallback(
-      (subCategoryId) => closedCategories.has(makeSpaceNavCategoryId(space.roomId, subCategoryId)),
+      (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),
       [closedCategories, space.roomId]
     )
   );
 
-  const callRooms = useMemo(
-    () =>
-      hierarchy
-        .map((item) => mx.getRoom(item.roomId))
-        .filter((room): room is Room => !!room && room.isCallRoom()),
-    [hierarchy, mx]
-  );
-
-  const updateTrigger = useStateEvents(callRooms, StateEvent.GroupCallMemberPrefix);
-
-  const processedHierarchy = useMemo(
-    () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hierarchy, mx, space.roomId, closedCategories, updateTrigger]
-  );
-
   const virtualizer = useVirtualizer({
-    count: processedHierarchy.length,
+    count: hierarchy.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => 32,
     overscan: 10,
@@ -477,12 +351,9 @@ export function Space() {
     getSpaceRoomPath(spaceIdOrAlias, getCanonicalAliasOrRoomId(mx, roomId));
 
   return (
-    <PageNav style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <PageNav>
       <SpaceHeader />
-      <PageNavContent
+      <PageNavContent scrollRef={scrollRef}>
-        scrollRef={scrollRef}
-        style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
-      >
         <Box direction="Column" gap="300">
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
@@ -518,91 +389,56 @@ export function Space() {
               </NavLink>
             </NavItem>
           </NavCategory>
-        </Box>
           <NavCategory
             style={{
-            height: `${virtualizer.getTotalSize()}px`,
+              height: virtualizer.getTotalSize(),
-            width: '100%',
               position: 'relative',
             }}
           >
             {virtualizer.getVirtualItems().map((vItem) => {
-            const item = processedHierarchy[vItem.index];
+              const { roomId } = hierarchy[vItem.index] ?? {};
-            if (!item) return null;
+              const room = mx.getRoom(roomId);
-            const renderContent = () => {
+              if (!room) return null;
-              switch (item.type) {
+
-                case 'category': {
+              if (room.isSpaceRoom()) {
-                  const { room, categoryId } = item;
+                const categoryId = makeNavCategoryId(space.roomId, roomId);
-                  const { name } = room;
+
-                  const paddingTop = config?.space?.S400 ?? '1rem';
                 return (
-                    <div style={{ paddingTop }}>
+                  <VirtualTile
+                    virtualItem={vItem}
+                    key={vItem.index}
+                    ref={virtualizer.measureElement}
+                  >
+                    <div style={{ paddingTop: vItem.index === 0 ? undefined : config.space.S400 }}>
                       <NavCategoryHeader>
                         <RoomNavCategoryButton
                           data-category-id={categoryId}
                           onClick={handleCategoryClick}
                           closed={closedCategories.has(categoryId)}
                         >
-                          {name}
+                          {roomId === space.roomId ? 'Rooms' : room?.name}
                         </RoomNavCategoryButton>
                       </NavCategoryHeader>
                     </div>
+                  </VirtualTile>
                 );
               }
-                case 'room_header': {
-                  const { title, categoryId } = item;
-                  return (
-                    <Box>
-                      <NavCategoryHeader variant="Subtle">
-                        <RoomNavCategoryButton
-                          data-category-id={categoryId}
-                          onClick={handleCategoryClick}
-                          closed={closedCategories.has(categoryId)}
-                        >
-                          {title}
-                        </RoomNavCategoryButton>
-                      </NavCategoryHeader>
-                    </Box>
-                  );
-                }
-                case 'room': {
-                  const { room } = item;
-                  return (
-                    <Box>
-                      <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>
-                  );
-                }
-                case 'user': {
-                  const { sender, room } = item;
-                  return (
-                    <Box style={{ paddingLeft: config.space.S200 }}>
-                      <RoomNavUser room={room} space={space} sender={sender} />
-                    </Box>
-                  );
-                }
-                default:
-                  return null;
-              }
-            };
 
               return (
-              <VirtualTile virtualItem={vItem} key={item.key} ref={virtualizer.measureElement}>
+                <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
-                {renderContent()}
+                  <RoomNavItem
+                    room={room}
+                    selected={selectedRoomId === roomId}
+                    showAvatar={mDirects.has(roomId)}
+                    direct={mDirects.has(roomId)}
+                    linkPath={getToLink(roomId)}
+                    notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
+                  />
                 </VirtualTile>
               );
             })}
           </NavCategory>
+        </Box>
       </PageNavContent>
       <CallNavStatus />
     </PageNav>