draft

element-hq · Feb 27, 2025 · 92dea34 · 92dea34
1 parent a7a7cab
commit 92dea34
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 23 deletions.
diff --git a/res/css/_components.pcss b/res/css/_components.pcss
@@ -269,6 +269,8 @@
 @import "./views/right_panel/_VerificationPanel.pcss";
 @import "./views/right_panel/_WidgetCard.pcss";
 @import "./views/room_settings/_AliasSettings.pcss";
+@import "./views/rooms/RoomListPanel/_RoomList.pcss";
+@import "./views/rooms/RoomListPanel/_RoomListCell.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListHeaderView.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListPanel.pcss";
 @import "./views/rooms/RoomListPanel/_RoomListSearch.pcss";

diff --git a/res/css/views/rooms/RoomListPanel/_RoomList.pcss b/res/css/views/rooms/RoomListPanel/_RoomList.pcss
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_RoomList {
+    height: 100%;
+
+    .mx_RoomList_List {
+        /* Avoid when on hover, the background color to be on top of the right border */
+        padding-right: 1px;
+    }
+}
diff --git a/res/css/views/rooms/RoomListPanel/_RoomListCell.pcss b/res/css/views/rooms/RoomListPanel/_RoomListCell.pcss
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+/**
+ * The RoomCell has the following structure:
+ * button----------------------------------------|
+ * | <-12px-> container--------------------------|
+ * |          | room avatar <-12px-> content-----|
+ * |          |                      | room_name |
+ * |          |                      | ----------| <-- border
+ * |---------------------------------------------|
+ */
+.mx_RoomListCell {
+    all: unset;
+
+    &:hover {
+        background-color: var(--cpd-color-bg-action-secondary-hovered);
+    }
+
+    .mx_RoomListCell_container {
+        padding-left: var(--cpd-space-3x);
+        font: var(--cpd-font-body-md-regular);
+        height: 100%;
+
+        .mx_RoomListCell_content {
+            height: 100%;
+            flex: 1;
+            /* The border is only under the room name and the future hover menu  */
+            border-bottom: var(--cpd-border-width-0-5) solid var(--cpd-color-bg-subtle-secondary);
+            box-sizing: border-box;
+            min-width: 0;
+
+            span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}
diff --git a/src/components/views/rooms/RoomListPanel/RoomList.tsx b/src/components/views/rooms/RoomListPanel/RoomList.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { useCallback, type JSX } from "react";
+import { AutoSizer, List, type ListRowProps } from "react-virtualized";
+
+import { type RoomListViewState } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { _t } from "../../../../languageHandler";
+import { RoomListCell } from "./RoomListCell";
+
+interface RoomListProps {
+    vm: RoomListViewState;
+}
+
+export function RoomList({ vm: { rooms } }: RoomListProps): JSX.Element {
+    const roomRendererMemoized = useCallback(
+        ({ key, index, style }: ListRowProps) => (
+            <RoomListCell
+                room={rooms[index]}
+                key={key}
+                style={style}
+                onClick={() => {
+                    // TODO call view model to select room
+                }}
+            />
+        ),
+        [rooms],
+    );
+
+    return (
+        <div className="mx_RoomList">
+            <AutoSizer>
+                {({ height, width }) => (
+                    <List
+                        aria-label={_t("room_list|list_title")}
+                        className="mx_RoomList_List"
+                        rowRenderer={roomRendererMemoized}
+                        rowCount={rooms.length}
+                        rowHeight={48}
+                        height={height}
+                        width={width}
+                    />
+                )}
+            </AutoSizer>
+        </div>
+    );
+}
diff --git a/src/components/views/rooms/RoomListPanel/RoomListCell.tsx b/src/components/views/rooms/RoomListPanel/RoomListCell.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
+
+import { _t } from "../../../../languageHandler";
+import { Flex } from "../../../utils/Flex";
+import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
+
+interface RoomListCellProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * The room to display
+     */
+    room: Room;
+}
+
+/**
+ * A cell in the room list
+ */
+export function RoomListCell({ room, ...props }: RoomListCellProps): JSX.Element {
+    return (
+        <button
+            className="mx_RoomListCell"
+            type="button"
+            aria-label={_t("room_list|room|open_room", { roomName: room.name })}
+            {...props}
+        >
+            {/* We need this extra div between the button and the content in order to add a padding which is not messing with the virtualized list */}
+            <Flex className="mx_RoomListCell_container" gap="var(--cpd-space-3x)" align="center">
+                <DecoratedRoomAvatar room={room} size="32px" />
+                <Flex className="mx_RoomListCell_content" align="center">
+                    {/* We truncate the room name when too long. Title here is to show the full name on hover */}
+                    <span title={room.name}>{room.name}</span>
+                    {/* Future hover menu et notification badges */}
+                </Flex>
+            </Flex>
+        </button>
+    );
+}
diff --git a/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx b/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx
@@ -6,15 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { AutoSizer, List } from "react-virtualized";
 
-import type { ListRowProps } from "react-virtualized";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
+import { RoomListView } from "./RoomListView";
 import { Flex } from "../../../utils/Flex";
-import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
 
 type RoomListPanelProps = {
     /**
@@ -29,15 +27,6 @@ type RoomListPanelProps = {
  */
 export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) => {
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
-    const { rooms } = useRoomListViewModel();
-
-    const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
-        return (
-            <div key={key} style={style}>
-                {rooms[index].name}
-            </div>
-        );
-    };
 
     return (
         <Flex
@@ -49,17 +38,7 @@ export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) =>
         >
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />
-            <AutoSizer>
-                {({ height, width }) => (
-                    <List
-                        rowRenderer={rowRenderer}
-                        rowCount={rooms.length}
-                        rowHeight={20}
-                        height={height}
-                        width={width}
-                    />
-                )}
-            </AutoSizer>
+            <RoomListView />
         </Flex>
     );
 };
diff --git a/src/components/views/rooms/RoomListPanel/RoomListView.tsx b/src/components/views/rooms/RoomListPanel/RoomListView.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewModel";
+import { RoomList } from "./RoomList";
+
+export function RoomListView(): JSX.Element {
+    const vm = useRoomListViewModel();
+    // Room filters will be added soon
+    return <RoomList vm={vm} />;
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -2097,12 +2097,16 @@
             "one": "Currently joining %(count)s room",
             "other": "Currently joining %(count)s rooms"
         },
+        "list_title": "Room list",
         "notification_options": "Notification options",
         "open_space_menu": "Open space menu",
         "redacting_messages_status": {
             "one": "Currently removing messages in %(count)s room",
             "other": "Currently removing messages in %(count)s rooms"
         },
+        "room": {
+            "open_room": "Open room %(roomName)s"
+        },
         "show_less": "Show less",
         "show_n_more": {
             "one": "Show %(count)s more",