Room list: collapse sections when a room is dragged (#34290)

* Collapse sections when a room is dragged

* Update vm to follow the drag methods renaming

* Update e2e tests

* Update screenshots

Author: florianduros

apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts

@@ -60,22 +60,27 @@ export async function assertRoomInSection(page: Page, sectionName: string, roomN
 export async function dragRoomToSection(page: Page, roomName: string, sectionName: string): Promise<void> {
     const sourceRow = getRoomList(page).getByRole("row", { name: `Open room ${roomName}` });
     const source = sourceRow.locator("button").first();
-    const target = getSectionHeader(page, sectionName);
 
     await expect(sourceRow).toBeVisible();
     await expect(source).toBeVisible();
-    await expect(target).toBeVisible();
 
+    // The source is safe to cache because it is grabbed before the sections collapse.
     const sourceBox = await getBoundingBox(source, `room ${roomName}`);
-    const targetBox = await getBoundingBox(target, `section ${sectionName}`);
-
     const sourceX = sourceBox.x + sourceBox.width / 2;
     const sourceY = sourceBox.y + sourceBox.height / 2;
-    const targetY = targetBox.y + targetBox.height / 2;
 
     // Grab the room
     await page.mouse.move(sourceX, sourceY);
     await page.mouse.down();
+    // Move past the 5px PointerSensor activation threshold so the drag actually starts.
+    // This triggers onSectionOrRoomDragStart, which collapses all sections.
+    await page.mouse.move(sourceX, sourceY + 10, { steps: 5 });
+
+    // Re-query the target now that the sections have collapsed and the layout reflowed.
+    const target = getSectionHeader(page, sectionName);
+    const targetBox = await getBoundingBox(target, `section ${sectionName}`);
+    const targetY = targetBox.y + targetBox.height / 2;
+
     //  Move the room on the section header
     await page.mouse.move(sourceX, targetY, { steps: 10 });
     // Drop the room

apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png

@@ -1716,7 +1716,7 @@ describe("RoomListViewModel", () => {
                 it("should collapse every section on drag start", () => {
                     expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(true);
 
-                    viewModel.onSectionDragStart();
+                    viewModel.onSectionOrRoomDragStart();
 
                     expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(false);
                     expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(false);
@@ -1731,8 +1731,8 @@ describe("RoomListViewModel", () => {
                     // Collapse Favourite before the drag; other sections remain expanded
                     viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).onClick();
 
-                    viewModel.onSectionDragStart();
-                    viewModel.onSectionDragEnd();
+                    viewModel.onSectionOrRoomDragStart();
+                    viewModel.onSectionOrRoomDragEnd();
 
                     expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(false);
                     expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(true);
@@ -1752,13 +1752,13 @@ describe("RoomListViewModel", () => {
                 it("should re-snapshot expansion state on each drag start", () => {
                     // First cycle: Favourite is collapsed before the drag
                     viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).onClick();
-                    viewModel.onSectionDragStart();
-                    viewModel.onSectionDragEnd();
+                    viewModel.onSectionOrRoomDragStart();
+                    viewModel.onSectionOrRoomDragEnd();
 
                     // Between cycles: collapse CHATS_TAG as well
                     viewModel.getSectionHeaderViewModel(CHATS_TAG).onClick();
-                    viewModel.onSectionDragStart();
-                    viewModel.onSectionDragEnd();
+                    viewModel.onSectionOrRoomDragStart();
+                    viewModel.onSectionOrRoomDragEnd();
 
                     // The second drag end must restore the state captured at the second drag start
                     // (Favourite collapsed, CHATS_TAG collapsed, LowPriority expanded), not the first cycle's snapshot.
@@ -1768,7 +1768,7 @@ describe("RoomListViewModel", () => {
                 });
 
                 it("should be a no-op when drag end is called without drag start", () => {
-                    viewModel.onSectionDragEnd();
+                    viewModel.onSectionOrRoomDragEnd();
 
                     expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(true);
                     expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(true);

apps/web/src/viewmodels/room-list/RoomListViewModel.test.ts

@@ -961,7 +961,7 @@ export class RoomListViewModel
         void this.updateRoomListData(false, null, sourceTag);
     };
 
-    public onSectionDragStart = (): void => {
+    public onSectionOrRoomDragStart = (): void => {
         this.savedExpansionStates.clear();
         for (const [tag, sectionVM] of this.roomSectionHeaderViewModels) {
             this.savedExpansionStates.set(tag, sectionVM.isExpanded);
@@ -970,7 +970,7 @@ export class RoomListViewModel
         void this.updateRoomListData();
     };
 
-    public onSectionDragEnd = (): void => {
+    public onSectionOrRoomDragEnd = (): void => {
         for (const [tag, expanded] of this.savedExpansionStates) {
             const sectionVM = this.roomSectionHeaderViewModels.get(tag);
             if (sectionVM) sectionVM.isExpanded = expanded;

apps/web/src/viewmodels/room-list/RoomListViewModel.ts

@@ -45,8 +45,8 @@ const RoomListViewWrapperImpl = ({
     setScrollToIndex,
     changeRoomSection,
     changeSectionOrder,
-    onSectionDragStart,
-    onSectionDragEnd,
+    onSectionOrRoomDragStart,
+    onSectionOrRoomDragEnd,
     ...rest
 }: RoomListViewProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -62,8 +62,8 @@ const RoomListViewWrapperImpl = ({
         setScrollToIndex,
         changeRoomSection,
         changeSectionOrder,
-        onSectionDragStart,
-        onSectionDragEnd,
+        onSectionOrRoomDragStart,
+        onSectionOrRoomDragEnd,
     });
     return <RoomListView vm={vm} renderAvatar={renderAvatarProp} />;
 };
@@ -121,8 +121,8 @@ const meta = {
         setScrollToIndex: fn(),
         changeRoomSection: fn(),
         changeSectionOrder: fn(),
-        onSectionDragStart: fn(),
-        onSectionDragEnd: fn(),
+        onSectionOrRoomDragStart: fn(),
+        onSectionOrRoomDragEnd: fn(),
     },
     parameters: {
         design: {

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

@@ -101,9 +101,9 @@ export interface RoomListViewActions {
     /** Called to change the order of sections */
     changeSectionOrder: (sourceTag: string, targetTag: string) => void;
     /** Called when a section drag starts — collapses all sections */
-    onSectionDragStart: () => void;
+    onSectionOrRoomDragStart: () => void;
     /** Called when a section drag ends (drop or cancel) — restores expansion states */
-    onSectionDragEnd: () => void;
+    onSectionOrRoomDragEnd: () => void;
 }
 
 /**

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

@@ -41,8 +41,8 @@ const RoomListWrapperImpl = ({
     renderAvatar: renderAvatarProp,
     changeRoomSection,
     changeSectionOrder,
-    onSectionDragStart,
-    onSectionDragEnd,
+    onSectionOrRoomDragStart,
+    onSectionOrRoomDragEnd,
     ...rest
 }: RoomListStoryProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -58,8 +58,8 @@ const RoomListWrapperImpl = ({
         setScrollToIndex,
         changeRoomSection,
         changeSectionOrder,
-        onSectionDragStart,
-        onSectionDragEnd,
+        onSectionOrRoomDragStart,
+        onSectionOrRoomDragEnd,
     });
 
     return (
@@ -104,8 +104,8 @@ const meta = {
         setScrollToIndex: fn(),
         changeRoomSection: fn(),
         changeSectionOrder: fn(),
-        onSectionDragStart: fn(),
-        onSectionDragEnd: fn(),
+        onSectionOrRoomDragStart: fn(),
+        onSectionOrRoomDragEnd: fn(),
     },
     parameters: {
         design: {

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

@@ -94,8 +94,8 @@ describe("<VirtualizedRoomListView />", () => {
             // reach them, so explicitly reset call history for the spies under test.
             (Sections.args.changeRoomSection as any).mockClear?.();
             (Sections.args.changeSectionOrder as any).mockClear?.();
-            (Sections.args.onSectionDragStart as any).mockClear?.();
-            (Sections.args.onSectionDragEnd as any).mockClear?.();
+            (Sections.args.onSectionOrRoomDragStart as any).mockClear?.();
+            (Sections.args.onSectionOrRoomDragEnd as any).mockClear?.();
         });
 
         it("should call changeRoomSection when drag ends successfully", async () => {
@@ -192,8 +192,8 @@ describe("<VirtualizedRoomListView />", () => {
             await waitFor(() => {
                 expect(Sections.args.changeSectionOrder).toHaveBeenCalledWith("favourites", "low-priority");
             });
-            expect(Sections.args.onSectionDragStart).toHaveBeenCalled();
-            expect(Sections.args.onSectionDragEnd).toHaveBeenCalled();
+            expect(Sections.args.onSectionOrRoomDragStart).toHaveBeenCalled();
+            expect(Sections.args.onSectionOrRoomDragEnd).toHaveBeenCalled();
         });
     });
 

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

@@ -581,17 +581,13 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
     return (
         <DragDropProvider<RoomListDragData>
             onDragStart={(event) => {
-                const { source } = event.operation;
-                // Changing the state of sections (collapsed/expanded) while dragging a section header causes a double readback for the a11y announcement.
-                if (isSectionDragData(source?.data)) {
-                    vm.onSectionDragStart();
-                }
+                // Changing the state of sections (collapsed/expanded) while dragging a section header or a room causes a double readback for the a11y announcement.
+                vm.onSectionOrRoomDragStart();
             }}
             onDragEnd={(event) => {
                 const { source, target } = event.operation;
-                if (isSectionDragData(source?.data)) {
-                    vm.onSectionDragEnd();
-                }
+                vm.onSectionOrRoomDragEnd();
+
                 if (event.canceled || !source || !target) return;
                 if (isSectionDragData(source.data)) {
                     vm.changeSectionOrder(String(source.id), String(target.id));