From 96549b1edcd50a46fda079f16966ef8a1b0c7138 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 3 Jun 2026 17:38:24 +0200
Subject: [PATCH] Room list: add expand all icon to room list header (#33732)

* feat: add expand all icon to room list header

* test: add screenshot

* test: add snapshot tests
---
 .../expand-sections-auto.png                  | Bin 0 -> 19272 bytes
 .../RoomListHeaderView.stories.tsx            |   6 +
 .../RoomListHeaderView.test.tsx               |  12 +-
 .../RoomListHeaderView/RoomListHeaderView.tsx |   8 +-
 .../RoomListHeaderView.test.tsx.snap          | 322 ++++++++++++++++++
 5 files changed, 345 insertions(+), 3 deletions(-)
 create mode 100644 packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/expand-sections-auto.png

diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/expand-sections-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/expand-sections-auto.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf2eec867dc61308b8c830a26d2944de3e863347
GIT binary patch
literal 19272
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

literal 0
HcmV?d00001

diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
index d622503c1d..6fe8755910 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
@@ -118,3 +118,9 @@ export const CollapseSections: Story = {
         collapseSections: "collapse",
     },
 };
+
+export const ExpandSections: Story = {
+    args: {
+        collapseSections: "expand",
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
index d6ce1e9e3f..733fedcdcd 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
@@ -12,7 +12,7 @@ import React from "react";
 
 import * as stories from "./RoomListHeaderView.stories";
 
-const { Default, NoComposeMenu, NoSpaceMenu, CollapseSections } = composeStories(stories);
+const { Default, NoComposeMenu, NoSpaceMenu, CollapseSections, ExpandSections } = composeStories(stories);
 
 describe("RoomListHeaderView", () => {
     it("renders the default state", () => {
@@ -30,6 +30,16 @@ describe("RoomListHeaderView", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("renders collapse button", () => {
+        const { container } = render(<CollapseSections />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders expand button", () => {
+        const { container } = render(<ExpandSections />);
+        expect(container).toMatchSnapshot();
+    });
+
     it("should bind the collapse all sections action", () => {
         const { getByRole } = render(<CollapseSections />);
         const collapseButton = getByRole("button", { name: "Collapse all sections" });
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
index d68fd25b0e..3b17571d54 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
@@ -9,7 +9,7 @@ import React, { type JSX } from "react";
 import { IconButton, H1 } from "@vector-im/compound-web";
 import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
 import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
-import CollapseAllIcon from "@vector-im/compound-design-tokens/assets/web/icons/collapse-all";
+import { CollapseAllIcon, ExpandAllIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { type ViewModel, useViewModel } from "../../core/viewmodel";
 import { Flex } from "../../core/utils/Flex";
@@ -182,7 +182,11 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                                     : _t("room_list|expand_all_sections")
                             }
                         >
-                            <CollapseAllIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            {collapseSections === "collapse" ? (
+                                <CollapseAllIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            ) : (
+                                <ExpandAllIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            )}
                         </IconButton>
                     )}
 
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
index 380b6419eb..b580ee5012 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
@@ -1,5 +1,327 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`RoomListHeaderView > renders collapse button 1`] = `
+<div>
+  <header
+    aria-label="Room options"
+    class="Flex-module_flex RoomListHeaderView-module_header"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex RoomListHeaderView-module_container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex RoomListHeaderView-module_title"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+      >
+        <h1
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+          title="Rooms"
+        >
+          Rooms
+        </h1>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Open space menu"
+          class="_icon-button_1215g_8 SpaceMenuView-module_button"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-1"
+          role="button"
+          style="--cpd-icon-button-size: 24px; padding: 2px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="react-use-id-2"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-3"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-labelledby="react-use-id-4"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m12 16.975-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l3.875-3.875q.575-.575 1.425-.575t1.425.575l3.875 3.875a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275zm0-9.8 3.9-3.9A.95.95 0 0 1 16.6 3q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L13.425 8.55q-.575.575-1.425.575t-1.425-.575L6.7 4.675a.95.95 0 0 1-.275-.7q0-.425.275-.7A.95.95 0 0 1 7.4 3q.425 0 .7.275z"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-labelledby="react-use-id-5"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-6"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </header>
+</div>
+`;
+
+exports[`RoomListHeaderView > renders expand button 1`] = `
+<div>
+  <header
+    aria-label="Room options"
+    class="Flex-module_flex RoomListHeaderView-module_header"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex RoomListHeaderView-module_container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex RoomListHeaderView-module_title"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+      >
+        <h1
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+          title="Rooms"
+        >
+          Rooms
+        </h1>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Open space menu"
+          class="_icon-button_1215g_8 SpaceMenuView-module_button"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-1"
+          role="button"
+          style="--cpd-icon-button-size: 24px; padding: 2px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="react-use-id-2"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-3"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-labelledby="react-use-id-4"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m12 19.2 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.875 3.875q-.575.575-1.425.575t-1.425-.575L6.7 16.7a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275zm0-14.25-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l3.875-3.875Q11.15 3 12 3t1.425.575L17.3 7.45a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275z"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-labelledby="react-use-id-5"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-6"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </header>
+</div>
+`;
+
 exports[`RoomListHeaderView > renders the default state 1`] = `
 <div>
   <header