Integrate @vector-im/compound-web

package.json

@@ -67,6 +67,7 @@
         "@sentry/tracing": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^0.0.3",
+        "@vector-im/compound-web": "^0.2.1",
         "await-lock": "^2.1.0",
         "blurhash": "^1.1.3",
         "classnames": "^2.2.6",

res/css/_common.pcss

@@ -18,6 +18,7 @@ limitations under the License.
 */
 
 @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
+@import url("@vector-im/compound-web/dist/style.css");
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";
 @import "./_spacing.pcss";

res/css/views/rooms/_RoomHeader.pcss

@@ -14,40 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-:root {
-    --RoomHeader-indicator-dot-size: 8px;
-    --RoomHeader-indicator-dot-offset: -3px;
-    --RoomHeader-indicator-pulseColor: $alert;
-}
-
 .mx_RoomHeader {
-    flex: 0 0 50px;
-    border-bottom: 1px solid $primary-hairline-color;
-    background-color: $background;
-}
-
-.mx_RoomHeader_wrapper {
-    height: 44px;
     display: flex;
     align-items: center;
-    min-width: 0;
-    margin: 0 20px 0 16px;
-    padding-top: 6px;
+    height: 64px;
+    gap: var(--cpd-space-3x);
+    padding: 0 var(--cpd-space-3x);
     border-bottom: 1px solid $separator;
+    background-color: $background;
+
+    &:hover {
+        cursor: pointer;
+    }
 }
 
-.mx_RoomHeader_name {
-    flex: 0 1 auto;
+.mx_RoomHeader_topic {
+    height: 0;
+    opacity: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
     overflow: hidden;
-    color: $primary-content;
-    font: var(--cpd-font-heading-sm-semibold);
-    font-weight: var(--cpd-font-weight-semibold);
-    min-height: 24px;
-    align-items: center;
-    border-radius: 6px;
-    margin: 0 3px;
-    padding: 1px 4px;
-    display: flex;
-    user-select: none;
-    cursor: pointer;
+    word-break: break-all;
+    text-overflow: ellipsis;
+
+    transition: all var(--transition-standard) ease;
+}
+
+.mx_RoomHeader:hover .mx_RoomHeader_topic {
+    /* height needed to compute the transition, it equals to the `line-height`
+        value in pixels */
+    height: calc($font-13px * 1.5);
+    opacity: 1;
 }

src/components/views/rooms/RoomHeader.tsx

@@ -15,20 +15,53 @@ limitations under the License.
 */
 
 import React from "react";
+import { Body as BodyText } from "@vector-im/compound-web";
 
 import type { Room } from "matrix-js-sdk/src/models/room";
 import { IOOBData } from "../../../stores/ThreepidInviteStore";
 import { useRoomName } from "../../../hooks/useRoomName";
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
+import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
+import { useTopic } from "../../../hooks/room/useTopic";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 export default function RoomHeader({ room, oobData }: { room?: Room; oobData?: IOOBData }): JSX.Element {
     const roomName = useRoomName(room, oobData);
+    const roomTopic = useTopic(room);
 
     return (
-        <header className="mx_RoomHeader light-panel">
-            <div className="mx_RoomHeader_wrapper">
-                <div className="mx_RoomHeader_name" dir="auto" title={roomName} role="heading" aria-level={1}>
+        <header
+            className="mx_RoomHeader light-panel"
+            onClick={() => {
+                const rightPanel = RightPanelStore.instance;
+                rightPanel.isOpen
+                    ? rightPanel.togglePanel(null)
+                    : rightPanel.setCard({ phase: RightPanelPhases.RoomSummary });
+            }}
+        >
+            {room ? (
+                <DecoratedRoomAvatar room={room} oobData={oobData} avatarSize={40} displayBadge={false} />
+            ) : (
+                <RoomAvatar oobData={oobData} width={40} height={40} />
+            )}
+            <div className="mx_RoomHeader_info">
+                <BodyText
+                    as="div"
+                    size="lg"
+                    weight="semibold"
+                    dir="auto"
+                    title={roomName}
+                    role="heading"
+                    aria-level={1}
+                >
                     {roomName}
-                </div>
+                </BodyText>
+                {roomTopic && (
+                    <BodyText as="div" size="sm" className="mx_RoomHeader_topic">
+                        {roomTopic.text}
+                    </BodyText>
+                )}
             </div>
         </header>
     );

src/hooks/room/useTopic.ts

@@ -25,14 +25,14 @@ import { Optional } from "matrix-events-sdk";
 
 import { useTypedEventEmitter } from "../useEventEmitter";
 
-export const getTopic = (room: Room): Optional<TopicState> => {
+export const getTopic = (room?: Room): Optional<TopicState> => {
     const content = room?.currentState?.getStateEvents(EventType.RoomTopic, "")?.getContent<MRoomTopicEventContent>();
     return !!content ? parseTopicContent(content) : null;
 };
 
-export function useTopic(room: Room): Optional<TopicState> {
+export function useTopic(room?: Room): Optional<TopicState> {
     const [topic, setTopic] = useState(getTopic(room));
-    useTypedEventEmitter(room.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => {
+    useTypedEventEmitter(room?.currentState, RoomStateEvent.Events, (ev: MatrixEvent) => {
         if (ev.getType() !== EventType.RoomTopic) return;
         setTopic(getTopic(room));
     });

test/components/views/rooms/RoomHeader-test.tsx

@@ -15,23 +15,35 @@ limitations under the License.
 */
 
 import React from "react";
-import { Mocked } from "jest-mock";
 import { render } from "@testing-library/react";
 import { Room } from "matrix-js-sdk/src/models/room";
+import { EventType, MatrixEvent, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
+import userEvent from "@testing-library/user-event";
 
 import { stubClient } from "../../../test-utils";
 import RoomHeader from "../../../../src/components/views/rooms/RoomHeader";
-import type { MatrixClient } from "matrix-js-sdk/src/client";
+import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
+import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
 
 describe("Roomeader", () => {
-    let client: Mocked<MatrixClient>;
     let room: Room;
 
     const ROOM_ID = "!1:example.org";
 
+    let setCardSpy: jest.SpyInstance | undefined;
+
     beforeEach(async () => {
         stubClient();
-        room = new Room(ROOM_ID, client, "@alice:example.org");
+        room = new Room(ROOM_ID, MatrixClientPeg.get()!, "@alice:example.org", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+        DMRoomMap.setShared({
+            getUserIdForRoomId: jest.fn(),
+        } as unknown as DMRoomMap);
+
+        setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
     });
 
     it("renders with no props", () => {
@@ -55,4 +67,29 @@ describe("Roomeader", () => {
         );
         expect(container).toHaveTextContent(OOB_NAME);
     });
+
+    it("renders the room topic", async () => {
+        const TOPIC = "Hello World!";
+
+        const roomTopic = new MatrixEvent({
+            type: EventType.RoomTopic,
+            event_id: "$00002",
+            room_id: room.roomId,
+            sender: "@alice:example.com",
+            origin_server_ts: 1,
+            content: { topic: TOPIC },
+            state_key: "",
+        });
+        await room.addLiveEvents([roomTopic]);
+
+        const { container } = render(<RoomHeader room={room} />);
+        expect(container).toHaveTextContent(TOPIC);
+    });
+
+    it("opens the room summary", async () => {
+        const { container } = render(<RoomHeader room={room} />);
+
+        await userEvent.click(container.firstChild! as Element);
+        expect(setCardSpy).toHaveBeenCalledWith({ phase: RightPanelPhases.RoomSummary });
+    });
 });

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -5,14 +5,35 @@ exports[`Roomeader renders with no props 1`] = `
   <header
     class="mx_RoomHeader light-panel"
   >
+    <span
+      class="mx_BaseAvatar"
+      role="presentation"
+    >
+      <span
+        aria-hidden="true"
+        class="mx_BaseAvatar_initial"
+        style="font-size: 26px; width: 40px; line-height: 40px;"
+      >
+        ?
+      </span>
+      <img
+        alt=""
+        aria-hidden="true"
+        class="mx_BaseAvatar_image"
+        data-testid="avatar-img"
+        loading="lazy"
+        src="data:image/png;base64,00"
+        style="width: 40px; height: 40px;"
+      />
+    </span>
     <div
-      class="mx_RoomHeader_wrapper"
+      class="mx_RoomHeader_info"
     >
       <div
         aria-level="1"
-        class="mx_RoomHeader_name"
         dir="auto"
         role="heading"
+        style="font: var(--cpd-font-body-lg-semibold); letter-spacing: var(--cpd-font-letter-spacing-body-lg);"
         title="Join Room"
       >
         Join Room

yarn.lock

@@ -1258,7 +1258,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
   integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
@@ -2131,6 +2131,79 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-form@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a"
+  integrity sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-label" "2.0.2"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/[email protected]":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
+  integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/[email protected]":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/[email protected]":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@sentry-internal/[email protected]":
   version "7.60.1"
   resolved "https://registry.yarnpkg.com/@sentry-internal/tracing/-/tracing-7.60.1.tgz#c20766a7e31589962ffe9ea9dc58b6f475432303"
@@ -2794,6 +2867,15 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
+"@vector-im/compound-web@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.1.tgz#60676a64dc2098da2bc780c15f28fbc3e7dfe6b2"
+  integrity sha512-vZZnl1cyxCRfW1ToPtjyMvhbLLdjoNb5m7gnY5Cvs7WyPurCV2+FeRVVYdnN2YRB37aPqlYwWXa0XV1jh4rFUQ==
+  dependencies:
+    "@radix-ui/react-form" "^0.0.3"
+    classnames "^2.3.2"
+    lodash "^4.17.21"
+
 abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -3489,7 +3571,7 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
-classnames@^2.2.6:
+classnames@^2.2.6, classnames@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==