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 a560474a0b..c24ee60a82 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 0c11cab73b..ec3911c17f 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 edb596aa29..2614e1713a 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 fa4269b312..c9d64df968 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 e8521aee24..59906c5a74 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 40932cf724..d01a5affe0 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 94c2069af4..2fbccfb57f 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 188c44f51b..cdfd6d833d 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 f054d7337b..c0436562df 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 963e5093bd..020d14db73 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 5cbf836965..58ed0f705e 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 6d678141dc..1efaa2bbb5 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 1e7edb176c..407bf372bc 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 d8003602f4..a445cdf303 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 cd545107be..f3dffc1a26 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 0e29403ed5..bc886f39ec 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 682bb61314..5f30df761f 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 ab12a66b22..bb39ac6ba4 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 a7bedd5f48..b7fb9d0380 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 d77162bc53..68c82187ba 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 a6b22a7412..b2e09fa48f 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 6c3434ce72..518e2b8299 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 ed88d908e6..9061bf9f94 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 19f00150bd..7bf070ff2c 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 abd0a93639..0e02733d2a 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 acba439812..2da4fca0b6 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 bfcc954454..d1ddaeeb42 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 888a42edae..8de940ba83 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 397d1cd221..358c377db2 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 62791aea98..487a9006d7 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 1bb59a96bb..7bd9001f6f 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 b6ab5b90a4..36fdf79b8b 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"