diff --git a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss index f2d63b7a1e..8a7e342bfa 100644 --- a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss +++ b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss @@ -9,10 +9,17 @@ Please see LICENSE files in the repository root for full details. /** Disambiguated profile needs to have a different layout in the member tile */ .mx_MemberTileView .mx_DisambiguatedProfile { - display: flex; - flex-direction: column; + /* Name and the user status emoji share the first row (with the name truncating and the emoji always visible) + Disambiguated MXID gets a full row below. */ + display: grid; + grid-template-columns: min-content 1fr; + + .mx_DisambiguatedProfile_userStatus { + margin-inline-start: var(--cpd-space-0-5x); + } .mx_DisambiguatedProfile_mxid { + grid-column: 1 / -1; margin-inline-start: 0; font: var(--cpd-font-body-sm-regular); text-overflow: ellipsis; @@ -21,7 +28,7 @@ Please see LICENSE files in the repository root for full details. span:not(.mx_DisambiguatedProfile_mxid) { /** - In a member tile, this span element is a flex child and so + In a member tile, this span element is a grid child and so we need the following for text overflow to work. **/ overflow: hidden; diff --git a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx index a381305088..aab430a3ea 100644 --- a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx +++ b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx @@ -18,6 +18,7 @@ import { MemberTileView } from "./common/MemberTileView"; import { InvitedIconView } from "./common/InvitedIconView"; import { type MemberWithSeparator } from "../../../../viewmodels/memberlist/MemberListViewModel"; import { DisambiguatedProfileViewModel } from "../../../../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel"; +import { useUserStatus } from "../../../../../hooks/useUserStatus"; interface IProps { /** @@ -47,17 +48,22 @@ export function RoomMemberTileView(props: IProps): JSX.Element { /> ); const name = vm.name; + const userStatus = useUserStatus(member.userId); const disambiguatedProfileVM = useCreateAutoDisposedViewModel( () => new DisambiguatedProfileViewModel({ fallbackName: name, member, withTooltip: true, + userStatus, }), ); useEffect(() => { disambiguatedProfileVM.setMember(name, member); }, [disambiguatedProfileVM, member, name]); + useEffect(() => { + disambiguatedProfileVM.setUserStatus(userStatus); + }, [disambiguatedProfileVM, userStatus]); const nameJSX = ; const presenceState = member.presenceState; diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png index f016ac3067..12007a7a98 100644 Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png differ diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx index fd71067443..6af6bd2162 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx @@ -120,19 +120,23 @@ export function DisambiguatedProfileView({ vm, className }: Readonly {displayName} + {userStatus && ( + + + {userStatusEmoji} + + + )} {/* mx_DisambiguatedProfile_mxid is required for PCSS selectors like .mx_MemberTileView .mx_DisambiguatedProfile_mxid */} {displayIdentifier && ( {displayIdentifier} )} - {userStatus && ( - - - {userStatusEmoji} - - - )} ); } diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap index 9d4c1fc3d6..087c41314a 100644 --- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap +++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap @@ -31,16 +31,16 @@ exports[`DisambiguatedProfileView > renders the full example 1`] = ` > Eve + + 🏝️ + @eve:matrix.org - - 🏝️ - `;