Room list: add sections to shared components by florianduros · Pull Request #32735 · element-hq/element-web

florianduros · 2026-03-05T16:24:36Z

This PR adds the sections to the room list components of shared components:

RoomListSectionHeaderView: new component for header of the sections
VirtualizedRoomListView: two modes are introduced:
- FlatList using FlatVirtualizedList. In this mode the sections are flatten, it allows to keep the same API to pass the rooms in flat list (when no sections) or in grouped list. Following the listbox pattern
- GroupedList using GroupedVirtualizedList. Following the tree grid pattern and inspired by this example
RoomListItemView & RoomListItemAccessiblityWrapper: the item has different a11y attributes when using in a listbox in a treegrid, this logic is implemented in the wrapper.
The flat mode is forced in the room list view model in order to do the sections implementations in the store and in the vm in a separate PR. For the final user of EW, the room list is unchanged.

Screen.Recording.2026-03-11.at.10.57.27.mov

…y pattern

This is an intermediary step before implementing sections in the vm. We force the flat list but we use the underneath the view supporting sections.

florianduros · 2026-03-13T13:26:34Z

packages/shared-components/vitest.config.ts

-            "vite-plugin-node-polyfills/shims/process",
-            "react-virtuoso",
-        ],
+        include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],


Added in 9fa8b34 which is making the tests fail https://github.com/element-hq/element-web/actions/runs/23046980040/job/66938460251

florianduros · 2026-03-13T13:27:27Z

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

    /** Called when the visible range changes (virtualization API) */
    updateVisibleRooms: (startIndex: number, endIndex: number) => void;
+    /** Get view model for a specific section header (virtualization API) */
+    getSectionViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;


Suggested change

getSectionViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;

getSectionHeaderViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;

This seems reasonable (and matches the class name)

done in ea6c1b6

florianduros · 2026-03-13T13:28:01Z

packages/shared-components/src/index.ts

 export * from "./rich-list/RichList";
 export * from "./room-list/RoomListHeaderView";
 export * from "./room-list/RoomListSearchView";
+export * from "./room-list/RoomListSectionHeaderView";


Export RoomListItemAccessiblityWrapper too

done in 0c81d04

dbkr

Generally looks sensible though I think

dbkr · 2026-03-16T11:33:20Z

...ages/shared-components/src/room-list/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx

+
+import React, { memo, type JSX, type FocusEvent } from "react";
+import { type MouseEventHandler } from "react";
+import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";


sonar just wants the imports merged

done in b9632ec

dbkr · 2026-03-16T11:42:42Z

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

    /** Called when the visible range changes (virtualization API) */
    updateVisibleRooms: (startIndex: number, endIndex: number) => void;
+    /** Get view model for a specific section header (virtualization API) */
+    getSectionViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;


This seems reasonable (and matches the class name)

dbkr · 2026-03-16T11:48:29Z

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

+    );
+
+    /**
+     * Get the item component for a specific index


Could probably use just slightly updated comments for these specific methods

Added in bae1f92

dbkr · 2026-03-16T11:48:44Z

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

+    );
+
+    /**
+     * Get the item component for a specific index


and this one

Added in bae1f92

dbkr · 2026-03-16T11:50:02Z

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


+    const getHeaderKey = useCallback((header: string): string => {
+        return header;
+    }, []);


This one doesn't feel as obviously correct as the above: will the headers be unique?

Yes because we pass the section id as key. I added comment in bc93425

OK, I see, that wasn't obvious - thanks for the comment!

florianduros force-pushed the florianduros/section-shared-component branch 2 times, most recently from d3b1eb3 to 0b7c24a Compare March 5, 2026 16:32

florianduros mentioned this pull request Mar 5, 2026

Room list: sections - P1 add default section (favourites and low priority) #32452

Closed

florianduros changed the base branch from florianduros/grouped-virtuallist to develop March 5, 2026 16:59

florianduros force-pushed the florianduros/section-shared-component branch from 0b7c24a to a1521f6 Compare March 5, 2026 17:21

github-actions bot deployed to SharedComponentDiffs March 5, 2026 17:48 View deployment

github-actions bot deployed to Netlify March 5, 2026 17:59 View deployment

github-actions bot deployed to EndToEndTests March 5, 2026 20:12 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from a1521f6 to 652efce Compare March 6, 2026 10:56

github-actions bot deployed to SharedComponentDiffs March 6, 2026 10:57 View deployment

github-actions bot deployed to Netlify March 6, 2026 10:58 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from 652efce to d553fa4 Compare March 9, 2026 13:48

github-actions bot deployed to SharedComponentDiffs March 9, 2026 13:49 View deployment

github-actions bot deployed to Netlify March 9, 2026 13:50 View deployment

github-actions bot deployed to EndToEndTests March 9, 2026 14:02 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from d553fa4 to 9e45576 Compare March 10, 2026 14:56

github-actions bot deployed to Netlify March 10, 2026 14:59 View deployment

florianduros added the T-Enhancement label Mar 10, 2026

github-actions bot deployed to EndToEndTests March 10, 2026 15:13 View deployment

github-actions bot deployed to Netlify March 10, 2026 15:38 View deployment

github-actions bot deployed to SharedComponentDiffs March 10, 2026 15:39 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from dace5cc to 2917d50 Compare March 10, 2026 15:40

github-actions bot deployed to Netlify March 10, 2026 15:43 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from 2917d50 to d46037e Compare March 10, 2026 15:47

github-actions bot deployed to Netlify March 10, 2026 15:50 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from d46037e to 57d4a3e Compare March 10, 2026 15:58

github-actions bot deployed to Netlify March 10, 2026 16:04 View deployment

github-actions bot deployed to Netlify March 10, 2026 16:15 View deployment

github-actions bot deployed to Netlify March 10, 2026 16:22 View deployment

florianduros force-pushed the florianduros/section-shared-component branch from 238764b to 937d72e Compare March 10, 2026 16:32

florianduros added 6 commits March 13, 2026 11:28

feat: add wrapper to RoomListItemView to handle different accessiblit…

b95c5a6

…y pattern

feat: add section support to VirtualizedRoomListView

739d5cb

feat: add sections support to RoomListView

bc25de4

test: add screenshot for sections header

65332b2

test: add/update screenshots for sections

874d3e9

feat: force flat list on view model

4d28989

This is an intermediary step before implementing sections in the vm. We force the flat list but we use the underneath the view supporting sections.

florianduros force-pushed the florianduros/section-shared-component branch from 9996aad to a9078e2 Compare March 13, 2026 10:33

test: update RoomListViewModel test

e4856f6

florianduros force-pushed the florianduros/section-shared-component branch from a9078e2 to e4856f6 Compare March 13, 2026 10:35

github-actions bot deployed to Netlify March 13, 2026 10:38 View deployment

github-actions bot deployed to Netlify March 13, 2026 10:51 View deployment

github-actions bot deployed to EndToEndTests March 13, 2026 11:02 View deployment

github-actions bot deployed to Netlify March 13, 2026 11:12 View deployment

test: fix breaking test

25a342d

florianduros force-pushed the florianduros/section-shared-component branch from 975cf24 to 25a342d Compare March 13, 2026 11:12

github-actions bot deployed to SharedComponentDiffs March 13, 2026 11:14 View deployment

github-actions bot deployed to Netlify March 13, 2026 11:15 View deployment

github-actions bot deployed to EndToEndTests March 13, 2026 11:26 View deployment

florianduros commented Mar 13, 2026

View reviewed changes

florianduros marked this pull request as ready for review March 13, 2026 13:30

dbkr reviewed Mar 16, 2026

View reviewed changes

florianduros added 6 commits March 16, 2026 15:19

chore: rename getSectionViewModel to getSectionHeaderViewModel

ea6c1b6

chore: add missing RoomListItemAccessibilityWrapper export

0c81d04

chore: merge react imports

b9632ec

chore: simplify and add comment to getItemKey and getHeaderKey

bc93425

chore add comments to getItemComponent variants

bae1f92

chore: fix typo in example doc

10cb463

dbkr approved these changes Mar 16, 2026

View reviewed changes

florianduros mentioned this pull request Mar 24, 2026

Room list: add default sections #32785

Merged

	getSectionViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;
	getSectionHeaderViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;

Uh oh!

Conversation

florianduros commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dbkr left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

florianduros commented Mar 5, 2026 •

edited

Loading