From d551469543c97202d5115c86c8a81ca96d1a62d0 Mon Sep 17 00:00:00 2001
From: Germain <germains@element.io>
Date: Fri, 1 Sep 2023 10:45:50 +0100
Subject: [PATCH] Room header UI updates (#11507)

* Fix performance issues with useRoomMembers

With the current implementation it would create a new function, with leading: true, rendering the whole throttling useless

* Add public room indicator

* Format room members count better

* Add public room test

* Add search to room summary card

* Update settings UI

* Update snapshot

* Remove default title attribute
---
 res/css/_common.pcss                          |  8 +++++
 .../views/right_panel/_RoomSummaryCard.pcss   |  4 +++
 res/css/views/rooms/_RoomHeader.pcss          |  6 ++++
 src/components/structures/RightPanel.tsx      |  2 ++
 src/components/structures/RoomView.tsx        |  1 +
 src/components/views/avatars/BaseAvatar.tsx   |  2 +-
 .../views/right_panel/RoomSummaryCard.tsx     | 11 +++++-
 src/components/views/rooms/RoomHeader.tsx     | 30 ++++++++++++----
 src/hooks/useRoomMembers.ts                   | 31 +++++++++--------
 src/i18n/strings/en_EN.json                   |  5 +--
 src/settings/Settings.tsx                     |  1 +
 .../__snapshots__/RoomView-test.tsx.snap      | 14 ++++----
 .../SpaceHierarchy-test.tsx.snap              |  8 ++---
 .../__snapshots__/UserMenu-test.tsx.snap      |  2 +-
 .../__snapshots__/RoomAvatar-test.tsx.snap    |  6 ++--
 ...nageRestrictedJoinRuleDialog-test.tsx.snap |  2 +-
 .../__snapshots__/AppTile-test.tsx.snap       |  3 --
 .../__snapshots__/FacePile-test.tsx.snap      |  2 +-
 .../elements/__snapshots__/Pill-test.tsx.snap | 16 ++++-----
 .../__snapshots__/RoomFacePile-test.tsx.snap  |  2 +-
 .../views/messages/TextualBody-test.tsx       |  2 +-
 .../__snapshots__/TextualBody-test.tsx.snap   | 22 +++++-------
 .../RoomSummaryCard-test.tsx.snap             |  9 ++++-
 .../__snapshots__/UserInfo-test.tsx.snap      |  2 +-
 .../views/rooms/RoomHeader-test.tsx           | 22 +++++++++++-
 .../PinnedEventTile-test.tsx.snap             |  2 +-
 .../__snapshots__/RoomHeader-test.tsx.snap    | 34 ++++++++-----------
 .../RoomPreviewBar-test.tsx.snap              |  8 ++---
 .../__snapshots__/RoomTile-test.tsx.snap      |  8 ++---
 .../AddExistingToSpaceDialog-test.tsx.snap    |  3 +-
 .../__snapshots__/HTMLExport-test.ts.snap     |  4 +--
 yarn.lock                                     | 16 ++++-----
 32 files changed, 176 insertions(+), 112 deletions(-)

diff --git a/res/css/_common.pcss b/res/css/_common.pcss
index a560474a0b5..c24ee60a825 100644
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@@ -134,6 +134,14 @@ code {
     color: $muted-fg-color;
 }
 
+.text-primary {
+    color: $primary-content;
+}
+
+.text-secondary {
+    color: $secondary-content;
+}
+
 .mx_Verified {
     color: $e2e-verified-color;
 }
diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss
index 0c11cab73b4..ec3911c17f4 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -268,3 +268,7 @@ limitations under the License.
 .mx_RoomSummaryCard_icon_poll::before {
     mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
 }
+
+.mx_RoomSummaryCard_icon_search::before {
+    mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
+}
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index edb596aa29d..2614e1713ad 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -26,6 +26,12 @@ limitations under the License.
     flex: 1;
 }
 
+.mx_RoomHeader_heading {
+    display: flex;
+    gap: var(--cpd-space-1x);
+    align-items: center;
+}
+
 .mx_RoomHeader_topic {
     height: 0;
     opacity: 0;
diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index fa4269b312d..c9d64df9683 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -57,6 +57,7 @@ interface RoomlessProps extends BaseProps {
 interface RoomProps extends BaseProps {
     room: Room;
     permalinkCreator: RoomPermalinkCreator;
+    onSearchClick?: () => void;
 }
 
 type Props = XOR<RoomlessProps, RoomProps>;
@@ -293,6 +294,7 @@ export default class RightPanel extends React.Component<Props, IState> {
                             onClose={this.onClose}
                             // whenever RightPanel is passed a room it is passed a permalinkcreator
                             permalinkCreator={this.props.permalinkCreator!}
+                            onSearchClick={this.props.onSearchClick}
                         />
                     );
                 }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index e8521aee24a..59906c5a748 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2443,6 +2443,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 resizeNotifier={this.props.resizeNotifier}
                 permalinkCreator={this.permalinkCreator}
                 e2eStatus={this.state.e2eStatus}
+                onSearchClick={this.onSearchClick}
             />
         ) : undefined;
 
diff --git a/src/components/views/avatars/BaseAvatar.tsx b/src/components/views/avatars/BaseAvatar.tsx
index 40932cf7248..d01a5affe05 100644
--- a/src/components/views/avatars/BaseAvatar.tsx
+++ b/src/components/views/avatars/BaseAvatar.tsx
@@ -99,7 +99,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
     const {
         name,
         idName,
-        title = "",
+        title,
         url,
         urls,
         size = "40px",
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 94c2069af49..2fbccfb57fa 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -58,6 +58,7 @@ interface IProps {
     room: Room;
     permalinkCreator: RoomPermalinkCreator;
     onClose(): void;
+    onSearchClick?: () => void;
 }
 
 interface IAppsSectionProps {
@@ -272,7 +273,7 @@ const onRoomSettingsClick = (ev: ButtonEvent): void => {
     PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
 };
 
-const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose }) => {
+const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, onSearchClick }) => {
     const cli = useContext(MatrixClientContext);
 
     const onShareRoomClick = (): void => {
@@ -342,6 +343,14 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
                     {_t("common|people")}
                     <span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
                 </Button>
+                <Button
+                    className="mx_RoomSummaryCard_icon_search"
+                    onClick={() => {
+                        onSearchClick?.();
+                    }}
+                >
+                    {_t("Search")}
+                </Button>
                 {!isVideoRoom && (
                     <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
                         {_t("Files")}
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 188c44f51bc..cdfd6d833dc 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -22,18 +22,18 @@ import { Icon as ThreadsIcon } from "@vector-im/compound-design-tokens/icons/thr
 import { Icon as NotificationsIcon } from "@vector-im/compound-design-tokens/icons/notifications-solid.svg";
 import { Icon as VerifiedIcon } from "@vector-im/compound-design-tokens/icons/verified.svg";
 import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";
+import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
-import { EventType, type Room } from "matrix-js-sdk/src/matrix";
+import { EventType, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 
 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 { useAccountData } from "../../../hooks/useAccountData";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useRoomMemberCount, useRoomMembers } from "../../../hooks/useRoomMembers";
-import { _t, getCurrentLanguage } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
 import { Flex } from "../../utils/Flex";
 import { Box } from "../../utils/Box";
 import { useRoomCallStatus } from "../../../hooks/room/useRoomCallStatus";
@@ -46,6 +46,9 @@ import { placeCall } from "../../../utils/room/placeCall";
 import { useEncryptionStatus } from "../../../hooks/useEncryptionStatus";
 import { E2EStatus } from "../../../utils/ShieldUtils";
 import FacePile from "../elements/FacePile";
+import { useRoomState } from "../../../hooks/useRoomState";
+import RoomAvatar from "../avatars/RoomAvatar";
+import { formatCount } from "../../../utils/FormattingUtils";
 
 /**
  * A helper to transform a notification color to the what the Compound Icon Button
@@ -76,9 +79,10 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
 
     const roomName = useRoomName(room);
     const roomTopic = useTopic(room);
+    const roomState = useRoomState(room);
 
-    const members = useRoomMembers(room);
-    const memberCount = useRoomMemberCount(room);
+    const members = useRoomMembers(room, 2500);
+    const memberCount = useRoomMemberCount(room, { throttleWait: 2500 });
 
     const { voiceCallDisabledReason, voiceCallType, videoCallDisabledReason, videoCallType } = useRoomCallStatus(room);
 
@@ -116,7 +120,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                 showOrHidePanel(RightPanelPhases.RoomSummary);
             }}
         >
-            <DecoratedRoomAvatar room={room} size="40px" displayBadge={false} />
+            <RoomAvatar room={room} size="40px" />
             <Box flex="1" className="mx_RoomHeader_info">
                 <BodyText
                     as="div"
@@ -126,9 +130,21 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                     title={roomName}
                     role="heading"
                     aria-level={1}
+                    className="mx_RoomHeader_heading"
                 >
                     {roomName}
 
+                    {!isDirectMessage && roomState.getJoinRule() === JoinRule.Public && (
+                        <Tooltip label={_t("Public room")}>
+                            <PublicIcon
+                                width="16px"
+                                height="16px"
+                                className="text-secondary"
+                                aria-label={_t("Public room")}
+                            />
+                        </Tooltip>
+                    )}
+
                     {isDirectMessage && e2eStatus === E2EStatus.Verified && (
                         <Tooltip label={_t("common|verified")}>
                             <VerifiedIcon
@@ -214,7 +230,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element {
                         size="20px"
                         overflow={false}
                     >
-                        {memberCount.toLocaleString(getCurrentLanguage())}
+                        {formatCount(memberCount)}
                     </FacePile>
                 </BodyText>
             )}
diff --git a/src/hooks/useRoomMembers.ts b/src/hooks/useRoomMembers.ts
index f054d7337b0..c0436562df7 100644
--- a/src/hooks/useRoomMembers.ts
+++ b/src/hooks/useRoomMembers.ts
@@ -23,17 +23,20 @@ import { useTypedEventEmitter } from "./useEventEmitter";
 // Hook to simplify watching Matrix Room joined members
 export const useRoomMembers = (room: Room, throttleWait = 250): RoomMember[] => {
     const [members, setMembers] = useState<RoomMember[]>(room.getJoinedMembers());
-    useTypedEventEmitter(
-        room.currentState,
-        RoomStateEvent.Members,
-        throttle(
-            () => {
-                setMembers(room.getJoinedMembers());
-            },
-            throttleWait,
-            { leading: true, trailing: true },
-        ),
+
+    const throttledUpdate = useMemo(
+        () =>
+            throttle(
+                () => {
+                    setMembers(room.getJoinedMembers());
+                },
+                throttleWait,
+                { leading: true, trailing: true },
+            ),
+        [room, throttleWait],
     );
+
+    useTypedEventEmitter(room.currentState, RoomStateEvent.Members, throttledUpdate);
     return members;
 };
 
@@ -50,11 +53,11 @@ type RoomMemberCountOpts = {
  * @param opts The options.
  * @returns the room member count.
  */
-export const useRoomMemberCount = (room: Room, opts: RoomMemberCountOpts = { throttleWait: 250 }): number => {
+export const useRoomMemberCount = (
+    room: Room,
+    { throttleWait }: RoomMemberCountOpts = { throttleWait: 250 },
+): number => {
     const [count, setCount] = useState<number>(room.getJoinedMemberCount());
-
-    const { throttleWait } = opts;
-
     const throttledUpdate = useMemo(
         () =>
             throttle(
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 963e5093bde..020d14db737 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -897,7 +897,7 @@
         "hidebold": "Hide notification dot (only display counters badges)",
         "intentional_mentions": "Enable intentional mentions",
         "ask_to_join": "Enable ask to join",
-        "new_room_decoration_ui": "Under active development, new room header & details interface"
+        "new_room_decoration_ui": "New room header & details interface"
     },
     "Thank you for trying the beta, please go into as much detail as you can so we can improve it.": "Thank you for trying the beta, please go into as much detail as you can so we can improve it.",
     "Notification Settings": "Notification Settings",
@@ -1876,6 +1876,7 @@
     "Room %(name)s": "Room %(name)s",
     "Recently visited rooms": "Recently visited rooms",
     "No recently visited rooms": "No recently visited rooms",
+    "Public room": "Public room",
     "Untrusted": "Untrusted",
     "%(count)s members": {
         "other": "%(count)s members",
@@ -1883,7 +1884,6 @@
     },
     "Video room": "Video room",
     "Public space": "Public space",
-    "Public room": "Public room",
     "Private space": "Private space",
     "Private room": "Private room",
     "%(names)s and %(name)s": "%(names)s and %(name)s",
@@ -2112,6 +2112,7 @@
     "Edit widgets, bridges & bots": "Edit widgets, bridges & bots",
     "Add widgets, bridges & bots": "Add widgets, bridges & bots",
     "Not encrypted": "Not encrypted",
+    "Search": "Search",
     "Files": "Files",
     "Poll history": "Poll history",
     "Pinned": "Pinned",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index 5cbf8369650..58ed0f705ef 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -548,6 +548,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         isFeature: true,
         labsGroup: LabGroup.Rooms,
         displayName: _td("labs|new_room_decoration_ui"),
+        description: _td("labs|under_active_development"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
         controller: new ReloadOnChangeController(),
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
index 6d678141dcf..1efaa2bbb59 100644
--- a/test/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -24,7 +24,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 24px;"
-              title=""
+              title="@user:example.com"
             >
               u
             </span>
@@ -107,7 +107,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 24px;"
-              title=""
+              title="@user:example.com"
             >
               u
             </span>
@@ -187,7 +187,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
                   data-type="round"
                   role="button"
                   style="--cpd-avatar-size: 52px;"
-                  title=""
+                  title="@user:example.com"
                 >
                   u
                 </button>
@@ -276,7 +276,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 24px;"
-              title=""
+              title="@user:example.com"
             >
               u
             </span>
@@ -356,7 +356,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   data-type="round"
                   role="button"
                   style="--cpd-avatar-size: 52px;"
-                  title=""
+                  title="@user:example.com"
                 >
                   u
                 </button>
@@ -520,7 +520,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 24px;"
-              title=""
+              title="@user:example.com"
             >
               u
             </span>
@@ -599,7 +599,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   data-type="round"
                   role="button"
                   style="--cpd-avatar-size: 52px;"
-                  title=""
+                  title="@user:example.com"
                 >
                   u
                 </button>
diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index 1e7edb176cd..407bf372bc1 100644
--- a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -77,7 +77,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 20px;"
-              title=""
+              title="room-id-2"
             >
               U
             </span>
@@ -148,7 +148,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 20px;"
-              title=""
+              title="room-id-3"
             >
               U
             </span>
@@ -220,7 +220,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 20px;"
-              title=""
+              title="space-id-4"
             >
               N
             </span>
@@ -298,7 +298,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
               data-type="round"
               role="presentation"
               style="--cpd-avatar-size: 20px;"
-              title=""
+              title="room-id-5"
             >
               N
             </span>
diff --git a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
index d8003602f49..a445cdf303a 100644
--- a/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
+++ b/test/components/structures/__snapshots__/UserMenu-test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<UserMenu> when rendered should render as expected 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 32px;"
-          title=""
+          title="@userId:matrix.org"
         >
           u
         </span>
diff --git a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
index cd545107be7..f3dffc1a26f 100644
--- a/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
+++ b/test/components/views/avatars/__snapshots__/RoomAvatar-test.tsx.snap
@@ -9,7 +9,7 @@ exports[`RoomAvatar should render as expected for a DM room 1`] = `
     data-type="round"
     role="presentation"
     style="--cpd-avatar-size: 36px;"
-    title=""
+    title="@dm_user@example.com"
   >
     D
   </span>
@@ -25,7 +25,7 @@ exports[`RoomAvatar should render as expected for a LocalRoom 1`] = `
     data-type="round"
     role="presentation"
     style="--cpd-avatar-size: 36px;"
-    title=""
+    title="@local_room_user@example.com"
   >
     l
   </span>
@@ -41,7 +41,7 @@ exports[`RoomAvatar should render as expected for a Room 1`] = `
     data-type="round"
     role="presentation"
     style="--cpd-avatar-size: 36px;"
-    title=""
+    title="!room:example.com"
   >
     t
   </span>
diff --git a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 0e29403ed56..bc886f39ec4 100644
--- a/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/test/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -77,7 +77,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 data-type="round"
                 role="presentation"
                 style="--cpd-avatar-size: 20px;"
-                title=""
+                title="!space:server"
               >
                 O
               </span>
diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index 682bb61314a..5f30df761f3 100644
--- a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -120,7 +120,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
               loading="lazy"
               referrerpolicy="no-referrer"
               src="image-file-stub"
-              title=""
               width="20px"
             />
           </span>
@@ -209,7 +208,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
               loading="lazy"
               referrerpolicy="no-referrer"
               src="image-file-stub"
-              title=""
               width="20px"
             />
           </span>
@@ -366,7 +364,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                     loading="lazy"
                     referrerpolicy="no-referrer"
                     src="image-file-stub"
-                    title=""
                     width="20px"
                   />
                 </span>
diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index ab12a66b220..bb39ac6ba4c 100644
--- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
         data-type="round"
         role="presentation"
         style="--cpd-avatar-size: 36px;"
-        title=""
+        title="456"
       >
         4
       </span>
diff --git a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
index a7bedd5f482..b7fb9d0380d 100644
--- a/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/Pill-test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="!room1:example.com"
         >
           R
         </span>
@@ -73,7 +73,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="@user2:example.com"
         >
           U
         </span>
@@ -105,7 +105,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="!room1:example.com"
         >
           R
         </span>
@@ -137,7 +137,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="@user1:example.com"
         >
           U
         </span>
@@ -169,7 +169,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="!room1:example.com"
         >
           R
         </span>
@@ -201,7 +201,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="!space1:example.com"
         >
           S
         </span>
@@ -256,7 +256,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="!room1:example.com"
         >
           R
         </span>
@@ -288,7 +288,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="@user1:example.com"
         >
           U
         </span>
diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index d77162bc53c..68c82187bae 100644
--- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<RoomFacePile /> renders 1`] = `
         data-type="round"
         role="presentation"
         style="--cpd-avatar-size: 28px;"
-        title=""
+        title="@bob:example.org"
       >
         b
       </span>
diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx
index a6b22a74123..b2e09fa48f2 100644
--- a/test/components/views/messages/TextualBody-test.tsx
+++ b/test/components/views/messages/TextualBody-test.tsx
@@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px" title="@member:domain.bla"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span title="@member:domain.bla" aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_2lhia_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_2lhia_45" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 
diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index 6c3434ce728..518e2b82995 100644
--- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
           data-testid="avatar-img"
           data-type="round"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="@member:domain.bla"
         >
           <img
             alt=""
@@ -73,7 +73,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
             loading="lazy"
             referrerpolicy="no-referrer"
             src="mxc://avatar.url/image.png"
-            title="@member:domain.bla"
             width="16px"
           />
         </span>
@@ -113,7 +112,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
               data-testid="avatar-img"
               data-type="round"
               style="--cpd-avatar-size: 16px;"
-              title=""
+              title="!room1:example.com"
             >
               <img
                 alt=""
@@ -124,7 +123,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
                 loading="lazy"
                 referrerpolicy="no-referrer"
                 src="mxc://avatar.url/room.png"
-                title="!room1:example.com"
                 width="16px"
               />
             </span>
@@ -166,7 +164,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
               data-testid="avatar-img"
               data-type="round"
               style="--cpd-avatar-size: 16px;"
-              title=""
+              title="!room1:example.com"
             >
               <img
                 alt=""
@@ -177,7 +175,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
                 loading="lazy"
                 referrerpolicy="no-referrer"
                 src="mxc://avatar.url/room.png"
-                title="!room1:example.com"
                 width="16px"
               />
             </span>
@@ -278,7 +275,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
           data-testid="avatar-img"
           data-type="round"
           style="--cpd-avatar-size: 16px;"
-          title=""
+          title="@member:domain.bla"
         >
           <img
             alt=""
@@ -289,7 +286,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
             loading="lazy"
             referrerpolicy="no-referrer"
             src="mxc://avatar.url/image.png"
-            title="@member:domain.bla"
             width="16px"
           />
         </span>
@@ -313,7 +309,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
       href="https://matrix.to/#/!room1:example.com/%event_id%"
       aria-describedby="mx_Pill_0.123456"
       ><span
-        title=""
+        title="@member:domain.bla"
         aria-label="Profile picture"
         aria-hidden="true"
         data-testid="avatar-img"
@@ -330,8 +326,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
           class="_image_2lhia_45"
           data-type="round"
           width="16px"
-          height="16px"
-          title="@member:domain.bla" /></span
+          height="16px" /></span
       ><span class="mx_Pill_text">Message from Member</span></a
     ></bdi
   ></span
@@ -348,7 +343,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
       href="https://matrix.to/#/!room2:example.com/%event_id%"
       aria-describedby="mx_Pill_0.123456"
       ><span
-        title=""
+        title="!room2:example.com"
         aria-label="Avatar"
         aria-hidden="true"
         data-testid="avatar-img"
@@ -365,8 +360,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
           class="_image_2lhia_45"
           data-type="round"
           width="16px"
-          height="16px"
-          title="!room2:example.com" /></span
+          height="16px" /></span
       ><span class="mx_Pill_text">Message in Room 2</span></a
     ></bdi
   ></span
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
index ed88d908e63..9061bf9f94f 100644
--- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           data-type="round"
           role="presentation"
           style="--cpd-avatar-size: 54px;"
-          title=""
+          title="!room:domain.org"
         >
           !
         </span>
@@ -69,6 +69,13 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             0
           </span>
         </div>
+        <div
+          class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_search"
+          role="button"
+          tabindex="0"
+        >
+          Search
+        </div>
         <div
           class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_files"
           role="button"
diff --git a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index 19f00150bd7..7bf070ff2c0 100644
--- a/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -102,7 +102,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
               data-type="round"
               role="button"
               style="--cpd-avatar-size: 230.39999999999998px;"
-              title=""
+              title="@user:example.com"
             >
               u
             </button>
diff --git a/test/components/views/rooms/RoomHeader-test.tsx b/test/components/views/rooms/RoomHeader-test.tsx
index abd0a93639a..0e02733d2a5 100644
--- a/test/components/views/rooms/RoomHeader-test.tsx
+++ b/test/components/views/rooms/RoomHeader-test.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-import { EventType, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
+import { EventType, JoinRule, MatrixClient, MatrixEvent, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
 import { getAllByTitle, getByLabelText, getByText, getByTitle, render, screen, waitFor } from "@testing-library/react";
 
 import { mkEvent, stubClient, withClientContextRenderOptions } from "../../../test-utils";
@@ -422,6 +422,26 @@ describe("RoomHeader", () => {
         });
     });
 
+    describe("public room", () => {
+        it("shows a globe", () => {
+            const joinRuleEvent = new MatrixEvent({
+                type: EventType.RoomJoinRules,
+                content: { join_rule: JoinRule.Public },
+                sender: MatrixClientPeg.get()!.getSafeUserId(),
+                state_key: "",
+                room_id: room.roomId,
+            });
+            room.addLiveEvents([joinRuleEvent]);
+
+            const { container } = render(
+                <RoomHeader room={room} />,
+                withClientContextRenderOptions(MatrixClientPeg.get()!),
+            );
+
+            expect(getByLabelText(container, "Public room")).toBeInTheDocument();
+        });
+    });
+
     describe("dm", () => {
         let client: MatrixClient;
         beforeEach(() => {
diff --git a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index acba4398123..2da4fca0b6f 100644
--- a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
       data-type="round"
       role="presentation"
       style="--cpd-avatar-size: 24px;"
-      title=""
+      title="@alice:server.org"
     >
       a
     </span>
diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
index bfcc9544543..d1ddaeeb429 100644
--- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
@@ -6,28 +6,24 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
     class="mx_Flex mx_RoomHeader light-panel"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
   >
-    <div
-      class="mx_DecoratedRoomAvatar"
+    <span
+      class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+      data-color="7"
+      data-testid="avatar-img"
+      data-type="round"
+      role="presentation"
+      style="--cpd-avatar-size: 40px;"
+      title="!1:example.org"
     >
-      <span
-        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
-        data-color="7"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 40px;"
-        title=""
-      >
-        !
-      </span>
-    </div>
+      !
+    </span>
     <div
       class="mx_Box mx_RoomHeader_info mx_Box--flex"
       style="--mx-box-flex: 1;"
     >
       <div
         aria-level="1"
-        class="_font-body-lg-semibold_1g2sj_89"
+        class="_font-body-lg-semibold_1g2sj_89 mx_RoomHeader_heading"
         dir="auto"
         role="heading"
         title="!1:example.org"
@@ -40,7 +36,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
     >
       <button
-        class="_icon-button_yvmcf_17"
+        class="_icon-button_1k9cw_17"
         disabled=""
         style="--cpd-icon-button-size: 32px;"
         title="There's no one here to call"
@@ -48,7 +44,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
         <div />
       </button>
       <button
-        class="_icon-button_yvmcf_17"
+        class="_icon-button_1k9cw_17"
         disabled=""
         style="--cpd-icon-button-size: 32px;"
         title="There's no one here to call"
@@ -56,14 +52,14 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
         <div />
       </button>
       <button
-        class="_icon-button_yvmcf_17"
+        class="_icon-button_1k9cw_17"
         style="--cpd-icon-button-size: 32px;"
         title="Threads"
       >
         <div />
       </button>
       <button
-        class="_icon-button_yvmcf_17"
+        class="_icon-button_1k9cw_17"
         style="--cpd-icon-button-size: 32px;"
         title="Notifications"
       >
diff --git a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
index 888a42edaee..8de940ba83f 100644
--- a/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomPreviewBar-test.tsx.snap
@@ -29,7 +29,7 @@ exports[`<RoomPreviewBar /> message case AskToJoin renders the corresponding mes
       data-type="round"
       role="presentation"
       style="--cpd-avatar-size: 36px;"
-      title=""
+      title="RoomPreviewBar-test-room"
     >
       R
     </span>
@@ -222,7 +222,7 @@ exports[`<RoomPreviewBar /> with an invite with an invited email when client has
       data-type="round"
       role="presentation"
       style="--cpd-avatar-size: 36px;"
-      title=""
+      title="RoomPreviewBar-test-room"
     >
       R
     </span>
@@ -281,7 +281,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a dm roo
       data-type="round"
       role="presentation"
       style="--cpd-avatar-size: 36px;"
-      title=""
+      title="RoomPreviewBar-test-room"
     >
       R
     </span>
@@ -347,7 +347,7 @@ exports[`<RoomPreviewBar /> with an invite without an invited email for a non-dm
       data-type="round"
       role="presentation"
       style="--cpd-avatar-size: 36px;"
-      title=""
+      title="RoomPreviewBar-test-room"
     >
       R
     </span>
diff --git a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
index 397d1cd2210..358c377db27 100644
--- a/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
+++ b/test/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
@@ -20,7 +20,7 @@ exports[`RoomTile when message previews are enabled and there is a message in a
         data-type="round"
         role="presentation"
         style="--cpd-avatar-size: 32px;"
-        title=""
+        title="!1:example.org"
       >
         !
       </span>
@@ -95,7 +95,7 @@ exports[`RoomTile when message previews are enabled and there is a message in th
         data-type="round"
         role="presentation"
         style="--cpd-avatar-size: 32px;"
-        title=""
+        title="!1:example.org"
       >
         !
       </span>
@@ -170,7 +170,7 @@ exports[`RoomTile when message previews are enabled should render a room without
         data-type="round"
         role="presentation"
         style="--cpd-avatar-size: 32px;"
-        title=""
+        title="!1:example.org"
       >
         !
       </span>
@@ -233,7 +233,7 @@ exports[`RoomTile when message previews are not enabled should render the room 1
         data-type="round"
         role="presentation"
         style="--cpd-avatar-size: 32px;"
-        title=""
+        title="!1:example.org"
       >
         !
       </span>
diff --git a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index 62791aea985..487a9006d75 100644
--- a/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
             data-testid="avatar-img"
             data-type="square"
             style="--cpd-avatar-size: 40px;"
-            title=""
+            title="!spaceid:example.com"
           >
             <img
               alt=""
@@ -42,7 +42,6 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
               loading="lazy"
               referrerpolicy="no-referrer"
               src="http://this.is.a.url/avatar.url/room.png"
-              title="!spaceid:example.com"
               width="40px"
             />
           </span>
diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index 1bb59a96bbd..7bd9001f6f5 100644
--- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
@@ -25,7 +25,7 @@ exports[`HTMLExport should export 1`] = `
                         <div class="mx_LegacyRoomHeader_wrapper" aria-owns="mx_RightPanel">
                             <div class="mx_LegacyRoomHeader_avatar">
                             <div class="mx_DecoratedRoomAvatar">
-                               <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
+                               <span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
                             </div>
                             </div>
                             <div class="mx_LegacyRoomHeader_name">
@@ -60,7 +60,7 @@ exports[`HTMLExport should export 1`] = `
                                     role="list"
                                 >
                                 <div class="mx_NewRoomIntro">
-                                        <span role="presentation" title="!myroom:example.org" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
+                                        <span role="presentation" title="" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56" style="--cpd-avatar-size:32px">!</span>
                                         <h2> !myroom:example.org </h2>
                                         <p>  created this room. <br/><br/> <p><span>This is the start of export of <b>!myroom:example.org</b>. Exported by <a href="https://matrix.to/#/%40userId%3Amatrix.org" target="_blank" rel="noopener noreferrer"><b>@userId:matrix.org</b></a> at 11/17/2022.</span></p> </p>
                                         <br/>
diff --git a/yarn.lock b/yarn.lock
index b6ab5b90a41..36fdf79b8b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1443,7 +1443,7 @@
   dependencies:
     "@floating-ui/utils" "^0.1.1"
 
-"@floating-ui/dom@^1.3.0":
+"@floating-ui/dom@^1.5.1":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
   integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
@@ -1452,11 +1452,11 @@
     "@floating-ui/utils" "^0.1.1"
 
 "@floating-ui/react-dom@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.1.tgz#7972a4fc488a8c746cded3cfe603b6057c308a91"
-  integrity sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.2.tgz#fab244d64db08e6bed7be4b5fcce65315ef44d20"
+  integrity sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==
   dependencies:
-    "@floating-ui/dom" "^1.3.0"
+    "@floating-ui/dom" "^1.5.1"
 
 "@floating-ui/utils@^0.1.1":
   version "0.1.1"
@@ -3064,9 +3064,9 @@
     svg2vectordrawable "^2.9.1"
 
 "@vector-im/compound-web@^0.2.3":
-  version "0.2.15"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.15.tgz#89121053cae95cc4fa82b84fc4ebf87cdf75c564"
-  integrity sha512-F4ay88XJH9LkGrHcpHyJnqqkWOdYmzwLbTQjbjokKwOPeDvcLJDZkTyRR03GbU8Ir/tlGYSx0TbrXA5XQI0g3A==
+  version "0.2.16"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.2.16.tgz#cdc578ec846999a7312d572131b5749b2cf7f86f"
+  integrity sha512-3ffijtHf4ibjLPsRoawTchf+DyaGbxtN6h/9WRvdOSTv+ML7oR7Aoo+jAPSTN+rNFuCIHKrayHJLl2YJOdeH8Q==
   dependencies:
     "@radix-ui/react-form" "^0.0.3"
     "@radix-ui/react-tooltip" "^1.0.6"