feat: add header to new room list

element-hq · Feb 19, 2025 · b86effa · b86effa
1 parent f018798
commit b86effa
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 1 deletion.
diff --git a/src/components/views/rooms/RoomListView/RoomListView.tsx b/src/components/views/rooms/RoomListView/RoomListView.tsx
@@ -10,6 +10,7 @@ import React from "react";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
+import { RoomListHeaderView } from "./RoomListHeaderView";
 
 type RoomListViewProps = {
     /**
@@ -28,6 +29,7 @@ export const RoomListView: React.FC<RoomListViewProps> = ({ activeSpace }) => {
     return (
         <div className="mx_RoomListView" data-testid="room-list-view">
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
+            <RoomListHeaderView />
         </div>
     );
 };
diff --git a/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListView/__snapshots__/RoomListView-test.tsx.snap
@@ -5,7 +5,17 @@ exports[`<RoomListView /> should not render the RoomListSearch component when UI
   <div
     class="mx_RoomListView"
     data-testid="room-list-view"
-  />
+  >
+    <header
+      aria-label="Room options"
+      class="mx_Flex mx_RoomListHeaderView"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+    >
+      <h1>
+        Home
+      </h1>
+    </header>
+  </div>
 </DocumentFragment>
 `;
 
@@ -71,6 +81,55 @@ exports[`<RoomListView /> should render the RoomListSearch component when UIComp
         </svg>
       </button>
     </div>
+    <header
+      aria-label="Room options"
+      class="mx_Flex mx_RoomListHeaderView"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: 0;"
+    >
+      <h1>
+        Home
+      </h1>
+      <button
+        aria-disabled="false"
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="Add"
+        class="_icon-button_bh2qc_17"
+        data-state="closed"
+        id="radix-:r0:"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          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
+              clip-rule="evenodd"
+              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-2V5Z"
+              fill-rule="evenodd"
+            />
+            <path
+              d="m8.023 14.711 1.331-3.992a1 1 0 0 1 1.656-.391l2.662 2.662a1 1 0 0 1-.391 1.655l-3.993 1.331a1 1 0 0 1-1.265-1.265Z"
+            />
+            <path
+              clip-rule="evenodd"
+              d="M19.765 2.82a2 2 0 0 0-2.828 0L9.866 9.89c-.195.195-.341.42-.439.66a1.024 1.024 0 0 0-.073.168l-1.33 3.992a1 1 0 0 0 1.264 1.265l3.993-1.33c.059-.02.115-.045.167-.074.24-.097.466-.243.66-.438l7.072-7.071a2 2 0 0 0 0-2.829L19.765 2.82Zm-6.717 9.546 6.717-6.718-1.414-1.414-6.717 6.718 1.414 1.414Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </button>
+    </header>
   </div>
 </DocumentFragment>
 `;