fix: wrong margin for room list item when in sections

Author: florianduros

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx

@@ -139,14 +139,22 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
     /**
      * Get the item component for a specific index
      * Gets the room's view model and passes it to RoomListItemView
+     *
+     * @param index - The index of the item in the list
+     * @param roomId - The ID of the room for this item
+     * @param context - The virtualization context containing list state
+     * @param onFocus - Callback to call when the item is focused
+     * @param isInLastSection - Whether this item is in the last section
+     * @param roomIndexInSection - The index of this room within its section
      */
     const getItemComponent = useCallback(
         (
             index: number,
             roomId: string,
             context: VirtualizedListContext<Context>,
             onFocus: (item: string, e: React.FocusEvent) => void,
-            roomIndexInSection: number,
+            isInLastSection?: boolean,
+            roomIndexInSection?: number,
         ): JSX.Element => {
             const { activeRoomIndex, roomCount, vm, isFlatList } = context.context;
             const isSelected = activeRoomIndex === index;
@@ -156,8 +164,8 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
             // This matches the old RoomList implementation's roving tabindex pattern
             const isFocused = context.focused && context.tabIndexKey === roomId;
 
-            const isFirstItem = index === 0;
-            const isLastItem = index === roomCount - 1;
+            const isFirstItem = isFlatList && index === 0;
+            const isLastItem = Boolean((isFlatList || isInLastSection) && index === roomCount - 1);
 
             return (
                 <RoomListItemAccessibilityWrapper
@@ -168,7 +176,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
                     isFocused={isFocused}
                     onFocus={onFocus}
                     roomIndex={index}
-                    roomIndexInSection={roomIndexInSection}
+                    roomIndexInSection={roomIndexInSection || 0}
                     roomCount={roomCount}
                     isFirstItem={isFirstItem}
                     isLastItem={isLastItem}
@@ -181,7 +189,6 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
 
     /**
      * Get the item component for a specific index in a grouped list
-     * Since we have sections, we can calculate the room's index within its section and pass it to getItemComponent
      * Gets the room's view model and passes it to RoomListItemView
      */
     const getItemComponentForGroupedList = useCallback(
@@ -194,14 +201,14 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         ): JSX.Element => {
             const { sections } = context.context;
             const roomIndexInSection = sections[groupIndex].roomIds.findIndex((id) => id === roomId);
-            return getItemComponent(index, roomId, context, onFocus, roomIndexInSection);
+            const isInLastSection = groupIndex === sections.length - 1;
+            return getItemComponent(index, roomId, context, onFocus, isInLastSection, roomIndexInSection);
         },
         [getItemComponent],
     );
 
     /**
      * Get the item component for a specific index in a flat list
-     * Since we don't have sections, we can pass 0 for the room's index within its section to getItemComponent
      * Gets the room's view model and passes it to RoomListItemView
      */
     const getItemComponentForFlatList = useCallback(
@@ -211,8 +218,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
             context: VirtualizedListContext<Context>,
             onFocus: (item: string, e: React.FocusEvent) => void,
         ): JSX.Element => {
-            // For a flat list, we don't have sections, so roomIndexInSection is unused and can be set to 0
-            return getItemComponent(index, roomId, context, onFocus, 0);
+            return getItemComponent(index, roomId, context, onFocus);
         },
         [getItemComponent],
     );