From 737cd4f800bf016e7df168695ed9c08c9269529d Mon Sep 17 00:00:00 2001
From: Florian Duros <florian.duros@ormaz.fr>
Date: Tue, 18 Feb 2025 16:55:49 +0100
Subject: [PATCH] refactor: rename `RoomListHeader` as `LegacyRoomListHeader`

---
 res/css/_components.pcss                      |  2 +-
 res/css/structures/_LeftPanel.pcss            |  4 +--
 ...Header.pcss => _LegacyRoomListHeader.pcss} | 22 ++++++-------
 src/components/structures/LeftPanel.tsx       |  4 +--
 ...istHeader.tsx => LegacyRoomListHeader.tsx} | 32 +++++++++----------
 .../views/rooms/RoomListHeader-test.tsx       |  2 +-
 6 files changed, 33 insertions(+), 33 deletions(-)
 rename res/css/views/rooms/{_RoomListHeader.pcss => _LegacyRoomListHeader.pcss} (83%)
 rename src/components/views/rooms/{RoomListHeader.tsx => LegacyRoomListHeader.tsx} (93%)

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index e6ca0c7ae9a..18ea44db5c0 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -288,6 +288,7 @@
 @import "./views/rooms/_IRCLayout.pcss";
 @import "./views/rooms/_InvitedIconView.pcss";
 @import "./views/rooms/_JumpToBottomButton.pcss";
+@import "./views/rooms/_LegacyRoomListHeader.pcss";
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
@@ -312,7 +313,6 @@
 @import "./views/rooms/_RoomInfoLine.pcss";
 @import "./views/rooms/_RoomKnocksBar.pcss";
 @import "./views/rooms/_RoomList.pcss";
-@import "./views/rooms/_RoomListHeader.pcss";
 @import "./views/rooms/_RoomPreviewBar.pcss";
 @import "./views/rooms/_RoomPreviewCard.pcss";
 @import "./views/rooms/_RoomSearchAuxPanel.pcss";
diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss
index cf2845b1730..c76fd5da022 100644
--- a/res/css/structures/_LeftPanel.pcss
+++ b/res/css/structures/_LeftPanel.pcss
@@ -113,7 +113,7 @@ Please see LICENSE files in the repository root for full details.
             display: flex;
             align-items: center;
 
-            & + .mx_RoomListHeader {
+            & + .mx_LegacyRoomListHeader {
                 margin-top: 12px;
             }
 
@@ -180,7 +180,7 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
-        .mx_RoomListHeader:first-child {
+        .mx_LegacyRoomListHeader:first-child {
             margin-top: 12px;
         }
 
diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_LegacyRoomListHeader.pcss
similarity index 83%
rename from res/css/views/rooms/_RoomListHeader.pcss
rename to res/css/views/rooms/_LegacyRoomListHeader.pcss
index 396aa4a61a7..c04b56d94af 100644
--- a/res/css/views/rooms/_RoomListHeader.pcss
+++ b/res/css/views/rooms/_LegacyRoomListHeader.pcss
@@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_RoomListHeader {
+.mx_LegacyRoomListHeader {
     display: flex;
     align-items: center;
 
-    .mx_RoomListHeader_contextLessTitle,
-    .mx_RoomListHeader_contextMenuButton {
+    .mx_LegacyRoomListHeader_contextLessTitle,
+    .mx_LegacyRoomListHeader_contextMenuButton {
         font: var(--cpd-font-heading-sm-semibold);
         font-weight: var(--cpd-font-weight-semibold);
         padding: 1px 24px 1px 4px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
         user-select: none;
     }
 
-    .mx_RoomListHeader_contextMenuButton {
+    .mx_LegacyRoomListHeader_contextMenuButton {
         border-radius: 6px;
 
         &:hover {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_RoomListHeader_plusButton {
+    .mx_LegacyRoomListHeader_plusButton {
         width: 32px;
         height: 32px;
         border-radius: 8px;
@@ -88,21 +88,21 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_RoomListHeader_iconInvite::before {
+.mx_LegacyRoomListHeader_iconInvite::before {
     mask-image: url("$(res)/img/element-icons/room/invite.svg");
 }
-.mx_RoomListHeader_iconStartChat::before {
+.mx_LegacyRoomListHeader_iconStartChat::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/user-add-solid.svg");
 }
-.mx_RoomListHeader_iconNewRoom::before {
+.mx_LegacyRoomListHeader_iconNewRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-plus.svg");
 }
-.mx_RoomListHeader_iconNewVideoRoom::before {
+.mx_LegacyRoomListHeader_iconNewVideoRoom::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-video.svg");
 }
-.mx_RoomListHeader_iconExplore::before {
+.mx_LegacyRoomListHeader_iconExplore::before {
     mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
 }
-.mx_RoomListHeader_iconPlus::before {
+.mx_LegacyRoomListHeader_iconPlus::before {
     mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
 }
diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 82040eefab4..aa4d419196d 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -23,7 +23,7 @@ import { MetaSpace, type SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/sp
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import UIStore from "../../stores/UIStore";
 import { type IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
-import RoomListHeader from "../views/rooms/RoomListHeader";
+import LegacyRoomListHeader from "../views/rooms/LegacyRoomListHeader";
 import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
 import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
@@ -415,7 +415,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
                 <div className="mx_LeftPanel_roomListContainer">
                     {shouldShowComponent(UIComponent.FilterContainer) && this.renderSearchDialExplore()}
                     {this.renderBreadcrumbs()}
-                    {!this.props.isMinimized && <RoomListHeader onVisibilityChange={this.refreshStickyHeaders} />}
+                    {!this.props.isMinimized && <LegacyRoomListHeader onVisibilityChange={this.refreshStickyHeaders} />}
                     <nav className="mx_LeftPanel_roomListWrapper" aria-label={_t("common|rooms")}>
                         <div
                             className={roomListClasses}
diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/LegacyRoomListHeader.tsx
similarity index 93%
rename from src/components/views/rooms/RoomListHeader.tsx
rename to src/components/views/rooms/LegacyRoomListHeader.tsx
index 0640aaba33a..a3585cee2d1 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/LegacyRoomListHeader.tsx
@@ -108,7 +108,7 @@ interface IProps {
     onVisibilityChange?(): void;
 }
 
-const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
+const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     const cli = useContext(MatrixClientContext);
     const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>();
     const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>();
@@ -178,7 +178,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             inviteOption = (
                 <IconizedContextMenuOption
                     label={_t("action|invite")}
-                    iconClassName="mx_RoomListHeader_iconInvite"
+                    iconClassName="mx_LegacyRoomListHeader_iconInvite"
                     onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -194,7 +194,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             newRoomOptions = (
                 <>
                     <IconizedContextMenuOption
-                        iconClassName="mx_RoomListHeader_iconNewRoom"
+                        iconClassName="mx_LegacyRoomListHeader_iconNewRoom"
                         label={_t("action|new_room")}
                         onClick={(e) => {
                             e.preventDefault();
@@ -206,7 +206,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     />
                     {videoRoomsEnabled && (
                         <IconizedContextMenuOption
-                            iconClassName="mx_RoomListHeader_iconNewVideoRoom"
+                            iconClassName="mx_LegacyRoomListHeader_iconNewVideoRoom"
                             label={_t("action|new_video_room")}
                             onClick={(e) => {
                                 e.preventDefault();
@@ -236,7 +236,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     {newRoomOptions}
                     <IconizedContextMenuOption
                         label={_t("action|explore_rooms")}
-                        iconClassName="mx_RoomListHeader_iconExplore"
+                        iconClassName="mx_LegacyRoomListHeader_iconExplore"
                         onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -251,7 +251,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     />
                     <IconizedContextMenuOption
                         label={_t("action|add_existing_room")}
-                        iconClassName="mx_RoomListHeader_iconPlus"
+                        iconClassName="mx_LegacyRoomListHeader_iconPlus"
                         onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -264,7 +264,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     {canCreateSpaces && (
                         <IconizedContextMenuOption
                             label={_t("room_list|add_space_label")}
-                            iconClassName="mx_RoomListHeader_iconPlus"
+                            iconClassName="mx_LegacyRoomListHeader_iconPlus"
                             onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -289,7 +289,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                 <>
                     <IconizedContextMenuOption
                         label={_t("action|start_new_chat")}
-                        iconClassName="mx_RoomListHeader_iconStartChat"
+                        iconClassName="mx_LegacyRoomListHeader_iconStartChat"
                         onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -300,7 +300,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     />
                     <IconizedContextMenuOption
                         label={_t("action|new_room")}
-                        iconClassName="mx_RoomListHeader_iconNewRoom"
+                        iconClassName="mx_LegacyRoomListHeader_iconNewRoom"
                         onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -312,7 +312,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     {videoRoomsEnabled && (
                         <IconizedContextMenuOption
                             label={_t("action|new_video_room")}
-                            iconClassName="mx_RoomListHeader_iconNewVideoRoom"
+                            iconClassName="mx_LegacyRoomListHeader_iconNewVideoRoom"
                             onClick={(e) => {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -333,7 +333,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
             joinRoomOpt = (
                 <IconizedContextMenuOption
                     label={_t("room_list|join_public_room_label")}
-                    iconClassName="mx_RoomListHeader_iconExplore"
+                    iconClassName="mx_LegacyRoomListHeader_iconExplore"
                     onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -378,13 +378,13 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
         })
         .join("\n");
 
-    let contextMenuButton: JSX.Element = <div className="mx_RoomListHeader_contextLessTitle">{title}</div>;
+    let contextMenuButton: JSX.Element = <div className="mx_LegacyRoomListHeader_contextLessTitle">{title}</div>;
     if (canShowMainMenu) {
         const commonProps = {
             ref: mainMenuHandle,
             onClick: openMainMenu,
             isExpanded: mainMenuDisplayed,
-            className: "mx_RoomListHeader_contextMenuButton",
+            className: "mx_LegacyRoomListHeader_contextMenuButton",
             children: title,
         };
 
@@ -401,7 +401,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     }
 
     return (
-        <aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}>
+        <aside className="mx_LegacyRoomListHeader" aria-label={_t("room|context_menu|title")}>
             {contextMenuButton}
             {pendingActionSummary ? (
                 <Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
@@ -413,7 +413,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                     ref={plusMenuHandle}
                     onClick={openPlusMenu}
                     isExpanded={plusMenuDisplayed}
-                    className="mx_RoomListHeader_plusButton"
+                    className="mx_LegacyRoomListHeader_plusButton"
                     title={_t("action|add")}
                 />
             )}
@@ -423,4 +423,4 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
     );
 };
 
-export default RoomListHeader;
+export default LegacyRoomListHeader;
diff --git a/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx b/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
index 9c9b35e4145..a4c4b4795aa 100644
--- a/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
+++ b/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
@@ -13,7 +13,7 @@ import { act, render, screen, fireEvent, type RenderResult } from "jest-matrix-r
 
 import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../../../src/stores/spaces";
-import _RoomListHeader from "../../../../../src/components/views/rooms/RoomListHeader";
+import _RoomListHeader from "../../../../../src/components/views/rooms/LegacyRoomListHeader";
 import * as testUtils from "../../../../test-utils";
 import { stubClient, mkSpace } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";