element-hq · langleyd · Jun 12, 2026 · Jun 16, 2026 · Jun 16, 2026 · Jun 18, 2026
@@ -9,19 +9,28 @@ 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;
+    /* Grid so that the name and the user status emoji share the first row
+       (with the name truncating and the emoji always visible), while the
+       disambiguated MXID gets a full row below. */
+    display: grid;
+    grid-template-columns: minmax(0, max-content) auto;
+    align-items: center;
 
     .mx_DisambiguatedProfile_mxid {
+        grid-column: 1 / -1;
         margin-inline-start: 0;
         font: var(--cpd-font-body-sm-regular);
         text-overflow: ellipsis;
         overflow: hidden;
     }
 
+    .mx_DisambiguatedProfile_userStatus {
+        margin-inline-start: var(--cpd-space-0-5x);
+    }
+
     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;

@@ -113,6 +113,11 @@ Please see LICENSE files in the repository root for full details.
             height: 20px;
         }
 
+        .mx_UserInfo_userStatusMessage {
+            justify-content: center;
+            max-width: 100%;
+        }
+
         .mx_UserInfo_timezone {
             height: 20px;
             margin: 0;

@@ -68,6 +68,12 @@ Please see LICENSE files in the repository root for full details.
     padding: var(--cpd-space-1x);
 }
 
+.mx_RoomHeader_userStatus {
+    /* With the heading's own 4px gap this makes up the 8px gap from the design */
+    margin-inline-start: var(--cpd-space-1x);
+    min-width: 0;
+}
+
 .mx_RoomHeader .mx_FacePile {
     color: $secondary-content;
     background: $background;

@@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_AvatarSetting_avatar {
-    width: 90px;
-    min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
-    height: 90px;
+    width: 120px;
+    min-width: 120px; /* so it doesn't get crushed by the flexbox in languages with longer words */
+    height: 120px;
     margin-top: 8px;
     position: relative;
 
@@ -31,9 +31,9 @@ Please see LICENSE files in the repository root for full details.
 
     & > img {
         display: block;
-        height: 90px;
+        height: 120px;
         width: inherit;
-        border-radius: 90px;
+        border-radius: 120px;
         cursor: pointer;
         object-fit: cover;
     }

@@ -19,10 +19,14 @@ Please see LICENSE files in the repository root for full details.
         gap: 16px;
 
         .mx_UserProfileSettings_profile_displayName {
-            flex-grow: 1;
+            flex-grow: 0;
             width: 100%;
             gap: 0;
         }
+        .mx_UserProfileSettings_profile_nameAndStatus {
+            width: 100%;
+            gap: 16px;
+        }
     }
 
     .mx_UserProfileSettings_profile_controls {

@@ -8,14 +8,15 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type User, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { Heading, Tooltip, Text } from "@vector-im/compound-web";
-import { Flex } from "@element-hq/web-shared-components";
+import { Flex, UserStatusMessageView } from "@element-hq/web-shared-components";
 
 import { useUserfoHeaderViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
 import MemberAvatar from "../../avatars/MemberAvatar";
 import { Container, type Member, type IDevice } from "../UserInfo";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";
+import { useUserStatus } from "../../../../hooks/useUserStatus";
 
 export interface UserInfoHeaderViewProps {
     member: Member;
@@ -33,6 +34,7 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
     const vm = useUserfoHeaderViewModel({ member, roomId });
     const avatarUrl = (member as User).avatarUrl;
     const displayName = (member as RoomMember).rawDisplayName;
+    const userStatus = useUserStatus(member.userId);
 
     let presenceLabel: JSX.Element | undefined;
 
@@ -73,6 +75,9 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
                             {displayName}
                         </Flex>
                     </Heading>
+                    {userStatus && (
+                        <UserStatusMessageView status={userStatus} className="mx_UserInfo_userStatusMessage" />
+                    )}
                     {presenceLabel}
                     {vm.timezoneInfo && (
                         <Tooltip label={vm.timezoneInfo?.timezone ?? ""}>

@@ -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;

@@ -20,7 +20,7 @@
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import { HistoryVisibility, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { Flex, Box } from "@element-hq/web-shared-components";
+import { Flex, Box, UserStatusMessageView } from "@element-hq/web-shared-components";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { HistoryIcon, UserProfileSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -57,6 +57,7 @@
 import { CurrentRightPanelPhaseContextProvider } from "../../../../contexts/CurrentRightPanelPhaseContext.tsx";
 import { LocalRoom } from "../../../../models/LocalRoom.ts";
 import { useIsEncrypted } from "../../../../hooks/useIsEncrypted.ts";
+import { useUserStatus } from "../../../../hooks/useUserStatus.ts";
 
 function RoomHeaderButtons({
     room,
@@ -448,6 +449,7 @@
     const historyVisibility = useRoomState(room, (state) => state.getHistoryVisibility());
     const dmMember = useDmMember(room);
     const isDirectMessage = !!dmMember;
+    const dmUserStatus = useUserStatus(dmMember?.userId);
     const isRoomEncrypted = useIsEncrypted(client, room);
     const e2eStatus = useEncryptionStatus(client, room);
     const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
@@ -496,6 +498,10 @@
                         >
                             <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
 
+                            {isDirectMessage && dmUserStatus && (
+                                <UserStatusMessageView status={dmUserStatus} className="mx_RoomHeader_userStatus" />
+                            )}
+
                             {!isDirectMessage && joinRule === JoinRule.Public && (
                                 <Tooltip label={_t("common|public_room")} placement="right">
                                     <PublicIcon

@@ -181,7 +181,7 @@ const AvatarSetting: React.FC<IProps> = ({
             <BaseAvatar
                 idName={placeholderId}
                 name={placeholderName}
-                size="90px"
+                size="120px"
                 url={avatarURL}
                 altText={avatarAccessibleName}
             />

@@ -11,7 +11,12 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
-import { Flex, useToastContext } from "@element-hq/web-shared-components";
+import {
+    Flex,
+    SetStatusView,
+    useCreateAutoDisposedViewModel,
+    useToastContext,
+} from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
@@ -27,6 +32,8 @@ import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { SettingsSection } from "./shared/SettingsSection.tsx";
+import { SetStatusViewModel } from "../../../viewmodels/status/SetStatusViewModel.ts";
+import SettingsStore from "../../../settings/SettingsStore.ts";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
@@ -131,6 +138,9 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
         })();
     }, [client]);
 
+    const userStatusEnabled = SettingsStore.getValue("feature_user_status");
+    const setStatusVM = useCreateAutoDisposedViewModel(() => new SetStatusViewModel({ client }));
+
     const onAvatarRemove = useCallback(async () => {
         const removeToast = toastRack.displayToast(
             <SpinnerToast>{_t("settings|general|avatar_remove_progress")}</SpinnerToast>,
@@ -212,21 +222,27 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
                         placeholderId={client.getUserId() ?? ""}
                         disabled={!canSetAvatar}
                     />
-                    <EditInPlace
-                        className="mx_UserProfileSettings_profile_displayName"
-                        label={_t("settings|general|display_name")}
-                        value={displayName}
-                        saveButtonLabel={_t("common|save")}
-                        cancelButtonLabel={_t("common|cancel")}
-                        savedLabel={_t("common|saved")}
-                        savingLabel={_t("common|updating")}
-                        onChange={onDisplayNameChanged}
-                        onCancel={onDisplayNameCancel}
-                        onSave={onDisplayNameSave}
-                        disabled={!canSetDisplayName}
-                    >
-                        {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
-                    </EditInPlace>
+
+                    <Flex direction="column" className="mx_UserProfileSettings_profile_nameAndStatus">
+                        <EditInPlace
+                            className="mx_UserProfileSettings_profile_displayName"
+                            label={_t("settings|general|display_name")}
+                            value={displayName}
+                            saveButtonLabel={_t("common|save")}
+                            cancelButtonLabel={_t("common|cancel")}
+                            savedLabel={_t("common|saved")}
+                            savingLabel={_t("common|updating")}
+                            onChange={onDisplayNameChanged}
+                            onCancel={onDisplayNameCancel}
+                            onSave={onDisplayNameSave}
+                            disabled={!canSetDisplayName}
+                        >
+                            {displayNameError && (
+                                <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>
+                            )}
+                        </EditInPlace>
+                        {userStatusEnabled && <SetStatusView vm={setStatusVM} />}
+                    </Flex>
                 </div>
                 {avatarError && (
                     <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">

@@ -462,7 +462,7 @@ const SpacePanel: React.FC = () => {
                         ref={ref}
                         aria-label={_t("common|spaces")}
                     >
-                        <UserMenu vm={userMenuVm} className="mx_UserMenu" />
+                        <UserMenu vm={userMenuVm} setStatusVm={userMenuVm.setStatusVm} className="mx_UserMenu" />
                         <AccessibleButton
                             className={classNames("mx_SpacePanel_toggleCollapse", {
                                 expanded: !isPanelCollapsed,

@@ -6,16 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { useEffect, useState } from "react";
-import { ClientEvent, MatrixError } from "matrix-js-sdk/src/matrix";
-import { logger as rootLogger } from "matrix-js-sdk/src/logger";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { type UserStatus } from "@element-hq/web-shared-components";
 
 import { useMatrixClientContext } from "../contexts/MatrixClientContext";
 import { useTypedEventEmitter } from "./useEventEmitter";
 import { useFeatureEnabled } from "./useSettings";
-import { validateUserStatus } from "../utils/userStatus";
-
-const logger = rootLogger.getChild("useUserStatus");
+import { fetchUserStatus, validateUserStatus } from "../utils/userStatus";
 
 /**
  * Hook to get the MSC4426 user status for a given user ID. Returns undefined if the feature is disabled,
@@ -27,43 +24,30 @@ const logger = rootLogger.getChild("useUserStatus");
 export function useUserStatus(userId: string | undefined): UserStatus | undefined {
     const isEnabled = useFeatureEnabled("feature_user_status");
     const matrixClient = useMatrixClientContext();
-    const [rawUserStatus, setRawUserStatus] = useState<unknown>();
+    const [userStatus, setUserStatus] = useState<UserStatus | undefined>();
 
     useTypedEventEmitter(matrixClient, ClientEvent.UserProfileUpdate, (syncedUserId, syncProfile) => {
         if (syncedUserId !== userId) {
             return;
         }
 
-        setRawUserStatus(syncProfile["org.matrix.msc4426.status"]);
+        setUserStatus(validateUserStatus(syncProfile["org.matrix.msc4426.status"]));
     });
     useEffect(() => {
         (async () => {
             if (!isEnabled) {
                 return;
             }
             if (!userId) {
-                setRawUserStatus(undefined);
-                return;
-            }
-            if ((await matrixClient.doesServerSupportExtendedProfiles()) === false) {
-                setRawUserStatus(undefined);
+                setUserStatus(undefined);
                 return;
             }
-            try {
-                const result = await matrixClient.getExtendedProfileProperty(userId, "org.matrix.msc4426.status");
-                setRawUserStatus(result);
-            } catch (ex) {
-                if (ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND") {
-                    setRawUserStatus(undefined);
-                } else {
-                    logger.warn(`Failed to get userStatus for ${userId}`, ex);
-                }
-            }
+            setUserStatus(await fetchUserStatus(matrixClient, userId));
         })();
     }, [isEnabled, userId, matrixClient]);
     if (!isEnabled) {
         return;
     }
 
-    return validateUserStatus(rawUserStatus);
+    return userStatus;
 }