New room list: add search section

[florianduros]

Checklist

• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

Task https://github.com/element-hq/wat-internal/issues/204
Figma design

This PR adds the search section of the new room list.

• Move RoomListView into src/components/views/rooms/RoomListView folder. We will have many components for the new room list and we can put them in a dedicated folder.
• Add the new search section
  • Click on the search button opens the spotlight
  • Click on the explore button opens the public room directory
  • The explore button is only available in Home meta space
  • Open spotlight when focus_room_filter is fired. Behaviour in legacy/current room list:
    

    element-web/src/components/structures/RoomSearch.tsx

    Lines 25 to 43 in 03a5ee1

    	private dispatcherRef?: string;
    	public componentDidMount(): void {
    	this.dispatcherRef = defaultDispatcher.register(this.onAction);
    	}
    	public componentWillUnmount(): void {
    	defaultDispatcher.unregister(this.dispatcherRef);
    	}
    	private openSpotlight(): void {
    	defaultDispatcher.fire(Action.OpenSpotlight);
    	}
    	private onAction = (payload: ActionPayload): void => {
    	if (payload.action === "focus_room_filter") {
    	this.openSpotlight();
    	}
    	};

    • In my option this should be moved in the incoming view model when implemented.
    • PR to remove it
  • The dial button is still in discussion (can be added later easily)
  • There is not yet design when the room list size is reduced
• e2e: add a method to close notification toast
• e2e: add tests for the search section
• e2e: the tests for the new room list is quite empty but should be completed with incoming PRs adding new content to the new room list.

User interactions

Screen.Recording.2025-02-13.at.10.48.55.mov

[t3chguy]

Has wrapping/scaling issues

[t3chguy]

can we not use our semantic Flex component instead?

[florianduros]

@t3chguy The "responsiveness" of the new room list is still in discussion. We don't have visual and spec yet.

We can add it later, the new room list is behind a labs flag

[florianduros]

FYI, I opened #29259 to get rid of focus_room_filter action.