New room list: add selection decoration (#29531)

* fix(room list): remove 1px extra padding

* feat(room list): add selection decoration to room list item and scroll list to this element

* test(room list item): add is selected test

* test(room list): update snapshot

* test(e2e): add test to keep the room list item visible

* test(e2e): update snapshots

src/components/views/rooms/RoomListPanel/RoomList.tsx

@@ -22,10 +22,12 @@ interface RoomListProps {
 /**
  * A virtualized list of rooms.
  */
-export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
+export function RoomList({ vm: { rooms, activeIndex } }: RoomListProps): JSX.Element {
     const roomRendererMemoized = useCallback(
-        ({ key, index, style }: ListRowProps) => <RoomListItemView room={rooms[index]} key={key} style={style} />,
-        [rooms],
+        ({ key, index, style }: ListRowProps) => (
+            <RoomListItemView room={rooms[index]} key={key} style={style} isSelected={activeIndex === index} />
+        ),
+        [rooms, activeIndex],
     );
 
     // The first div is needed to make the virtualized list take all the remaining space and scroll correctly
@@ -41,6 +43,7 @@ export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
                         rowHeight={48}
                         height={height}
                         width={width}
+                        scrollToIndex={activeIndex}
                     />
                 )}
             </AutoSizer>

src/components/views/rooms/RoomListPanel/RoomListItemView.tsx

@@ -20,12 +20,16 @@ interface RoomListItemViewPropsProps extends React.HTMLAttributes<HTMLButtonElem
      * The room to display
      */
     room: Room;
+    /**
+     * Whether the room is selected
+     */
+    isSelected: boolean;
 }
 
 /**
  * An item in the room list
  */
-export function RoomListItemView({ room, ...props }: RoomListItemViewPropsProps): JSX.Element {
+export function RoomListItemView({ room, isSelected, ...props }: RoomListItemViewPropsProps): JSX.Element {
     const vm = useRoomListItemViewModel(room);
 
     const [isHover, setIsHover] = useState(false);
@@ -38,8 +42,10 @@ export function RoomListItemView({ room, ...props }: RoomListItemViewPropsProps)
         <button
             className={classNames("mx_RoomListItemView", {
                 mx_RoomListItemView_menu_open: showHoverDecoration,
+                mx_RoomListItemView_selected: isSelected,
             })}
             type="button"
+            aria-selected={isSelected}
             aria-label={_t("room_list|room|open_room", { roomName: room.name })}
             onClick={() => vm.openRoom()}
             onMouseOver={() => setIsHover(true)}