Add user status emoji to member list (#34210)

* Add user status emoji to member list

* snapshots

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;
+    /* Name and the user status emoji share the first row (with the name truncating and the emoji always visible)
-    flex-direction: column;
+       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;

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 = <DisambiguatedProfileView vm={disambiguatedProfileVM} className="mx_DisambiguatedProfile" />;
 
     const presenceState = member.presenceState;

packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx

@@ -120,19 +120,23 @@ export function DisambiguatedProfileView({ vm, className }: Readonly<Disambiguat
             <span className={displayNameClasses} dir="auto">
                 {displayName}
             </span>
+            {userStatus && (
+                <Tooltip description={userStatus.text}>
+                    <Text
+                        as="span"
+                        size="md"
+                        className={classNames("mx_DisambiguatedProfile_userStatus", styles.userStatus)}
+                    >
+                        {userStatusEmoji}
+                    </Text>
+                </Tooltip>
+            )}
             {/* mx_DisambiguatedProfile_mxid is required for PCSS selectors like .mx_MemberTileView .mx_DisambiguatedProfile_mxid */}
             {displayIdentifier && (
                 <span className={classNames("mx_DisambiguatedProfile_mxid", styles.disambiguatedProfile_mxid)}>
                     {displayIdentifier}
                 </span>
             )}
-            {userStatus && (
-                <Tooltip description={userStatus.text}>
-                    <Text as="span" size="md" className={styles.userStatus}>
-                        {userStatusEmoji}
-                    </Text>
-                </Tooltip>
-            )}
         </div>
     );
 }

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
     </span>
+    <span
+      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 mx_DisambiguatedProfile_userStatus DisambiguatedProfile-module_userStatus"
+    >
+      🏝️
+    </span>
     <span
       class="mx_DisambiguatedProfile_mxid DisambiguatedProfile-module_disambiguatedProfile_mxid"
     >
       @eve:matrix.org
     </span>
-    <span
-      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 DisambiguatedProfile-module_userStatus"
-    >
-      🏝️
-    </span>
   </div>
 </div>
 `;