Add user status to DM rooms in the room list (#34191)

* Add user status to DM rooms in the room list * Screenshot * Tests for fetchUserStatus
2026-07-09 09:56:23 +00:00
parent 746ba6acab
commit 707d5a4353
11 changed files with 203 additions and 22 deletions
@@ -6,14 +6,14 @@ 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 { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
 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";
+import { fetchUserStatus, validateUserStatus } from "../utils/userStatus";

 const logger = rootLogger.getChild("useUserStatus");

@@ -27,14 +27,14 @@ 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 () => {
@@ -42,22 +42,18 @@ export function useUserStatus(userId: string | undefined): UserStatus | undefine
                return;
            }
            if (!userId) {
-                setRawUserStatus(undefined);
+                setUserStatus(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);
+                const result = await fetchUserStatus(matrixClient, userId);
+                setUserStatus(result);
            } catch (ex) {
-                if (ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND") {
-                    setRawUserStatus(undefined);
-                } else {
-                    logger.warn(`Failed to get userStatus for ${userId}`, ex);
-                }
+                logger.warn(`Failed to get userStatus for ${userId}`, ex);
            }
        })();
    }, [isEnabled, userId, matrixClient]);
@@ -65,5 +61,5 @@ export function useUserStatus(userId: string | undefined): UserStatus | undefine
        return;
    }

-    return validateUserStatus(rawUserStatus);
+    return userStatus;
 }
@@ -6,17 +6,32 @@ Please see LICENSE files in the repository root for full details.
 */

 import { type UserStatus } from "@element-hq/web-shared-components";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";

 // MSC4426 defines the maximum length of a status to be 256 bytes of UTF-8,
 // so we truncate anything longer than that.
 const MAX_STATUS_TEXT_BYTES = 256;

+// Static Intl.Segmenter for grabbing the first grapheme of a user status emoji.
+// We make one and keep it for performance.
+const intlSegmenter = new Intl.Segmenter();
+
+/**
+ * Checks if a given text is within the maximum allowed length for a user status.
+ * @param text The text to check.
+ * @returns True if the text is within the maximum length, false otherwise.
+ */
 export function userStatusTextWithinMaxLength(text: string): boolean {
    const textEncoder = new TextEncoder();
    return textEncoder.encode(text).length <= MAX_STATUS_TEXT_BYTES;
 }

+/**
+ * Validates an object from a user profile and returns a UserStatus object if it contains a valid user status.
+ * @param rawUserStatus The raw user status object to validate.
+ * @returns A UserStatus object if valid, otherwise undefined.
+ */
 export function validateUserStatus(rawUserStatus: unknown): UserStatus | undefined {
    if (typeof rawUserStatus !== "object" || rawUserStatus === null) {
        return undefined;
@@ -28,13 +43,40 @@ export function validateUserStatus(rawUserStatus: unknown): UserStatus | undefin
        return undefined;
    }
    return {
-        emoji: rawUserStatus.emoji,
+        emoji: [...intlSegmenter.segment(rawUserStatus.emoji)][0]?.segment,
        text: userStatusTextWithinMaxLength(rawUserStatus.text)
            ? rawUserStatus.text
            : `${rawUserStatus.text.slice(0, MAX_STATUS_TEXT_BYTES)}…`,
    };
 }

+/**
+ * Fetch the MSC4426 user status of the given user. Returns undefined if the server does not
+ * support extended profiles, the user has no (valid) status, or the status could not be fetched.
+ *
+ * @param client The Matrix client to fetch the status with.
+ * @param userId The ID of the user whose status is being fetched.
+ */
+export async function fetchUserStatus(client: MatrixClient, userId: string): Promise<UserStatus | undefined> {
+    if ((await client.doesServerSupportExtendedProfiles()) === false) {
+        return undefined;
+    }
+    try {
+        return validateUserStatus(await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.status"));
+    } catch (ex) {
+        if (!(ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND")) {
+            logger.warn(`Failed to get userStatus for ${userId}`, ex);
+        }
+        return undefined;
+    }
+}
+
+/**
+ * Sets the MSC4426 user status for the given user.
+ *
+ * @param client The Matrix client to use.
+ * @param userStatus The user status to set.
+ */
 export function setUserStatus(client: MatrixClient, userStatus: UserStatus): Promise<void> {
    return client.setExtendedProfileProperty("org.matrix.msc4426.status", {
        emoji: userStatus.emoji,
@@ -42,6 +84,11 @@ export function setUserStatus(client: MatrixClient, userStatus: UserStatus): Pro
    });
 }

+/**
+ * Clears the MSC4426 user status for the given user.
+ *
+ * @param client The Matrix client to use.
+ */
 export function clearUserStatus(client: MatrixClient): Promise<void> {
    return client.setExtendedProfileProperty("org.matrix.msc4426.status", null);
 }
@@ -11,11 +11,13 @@ import {
    type RoomListItemViewSnapshot,
    type RoomListItemViewActions,
    type Section,
+    type UserStatus,
 } from "@element-hq/web-shared-components";
-import { RoomEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
+import { logger } from "matrix-js-sdk/src/logger";

-import type { Room, MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import type { Room, MatrixClient, RoomMember, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
 import type { RoomNotificationState } from "../../stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../stores/notifications/NotificationState";
@@ -41,6 +43,7 @@ import { type Call, CallEvent } from "../../models/Call";
 import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 import { getCustomSectionData, isDefaultSectionTag } from "../../stores/room-list-v3/section";
 import { _t } from "../../languageHandler";
+import { fetchUserStatus, validateUserStatus } from "../../utils/userStatus";

 /**
 * View section type without `isSelected` field
@@ -75,6 +78,11 @@ export class RoomListItemViewModel
     */
    private availableSections: Sections;

+    /**
+     * The user ID of the other user if this room is a DM, used to show their user status.
+     */
+    private readonly dmUserId?: string;
+
    public constructor(props: RoomItemProps) {
        // Get notification state first so we can generate a complete initial snapshot
        const notifState = RoomNotificationStateStore.instance.getRoomState(props.room);
@@ -141,6 +149,17 @@ export class RoomListItemViewModel

        // Load message preview asynchronously (sync data is already complete)
        void this.loadAndSetMessagePreview();
+
+        // If this room is a DM, show the MSC4426 user status of the other user
+        this.dmUserId = DMRoomMap.shared().getUserIdForRoomId(props.room.roomId) ?? undefined;
+        if (this.dmUserId) {
+            props.client.on(ClientEvent.UserProfileUpdate, this.onUserProfileUpdate);
+            this.disposables.track(() => {
+                props.client.off(ClientEvent.UserProfileUpdate, this.onUserProfileUpdate);
+            });
+
+            this.updateUserStatus();
+        }
    }

    public dispose(): void {
@@ -268,6 +287,30 @@ export class RoomListItemViewModel
        this.snapshot.merge({ messagePreview });
    }

+    /**
+     * Handler for profile updates received via sync, to keep the DM user's status up to date.
+     */
+    private onUserProfileUpdate: ClientEventHandlerMap[ClientEvent.UserProfileUpdate] = (userId, profile) => {
+        if (userId !== this.dmUserId || !SettingsStore.getValue("feature_user_status")) return;
+        this.snapshot.merge({ userStatus: validateUserStatus(profile?.["org.matrix.msc4426.status"]) });
+    };
+
+    /**
+     * Fetch and set the user status of the DM user, if the feature is enabled.
+     */
+    private updateUserStatus(): void {
+        (async () => {
+            let userStatus: UserStatus | undefined;
+            if (this.dmUserId && SettingsStore.getValue("feature_user_status")) {
+                userStatus = await fetchUserStatus(this.props.client, this.dmUserId);
+            }
+            if (this.disposables.isDisposed) return;
+            this.snapshot.merge({ userStatus });
+        })().catch((ex) => {
+            logger.warn(`Failed to update userStatus for ${this.dmUserId}`, ex);
+        });
+    }
+
    /**
     * Generate a complete RoomListItem with all synchronous data.
     * Message preview is loaded separately to avoid blocking initial render.
@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { mocked } from "jest-mock";

-import { clearUserStatus, setUserStatus, userStatusTextWithinMaxLength } from "../../../src/utils/userStatus";
+import {
+    clearUserStatus,
+    fetchUserStatus,
+    setUserStatus,
+    userStatusTextWithinMaxLength,
+} from "../../../src/utils/userStatus";
 import { stubClient } from "../../test-utils";

 describe("userStatus utils", () => {
@@ -39,6 +45,60 @@ describe("userStatus utils", () => {
        });
    });

+    describe("fetchUserStatus", () => {
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            client = stubClient();
+            client.doesServerSupportExtendedProfiles = jest.fn();
+        });
+
+        it("returns undefined if the server does not support extended profiles", async () => {
+            mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(false);
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+            expect(client.getExtendedProfileProperty).not.toHaveBeenCalled();
+        });
+
+        it("returns the validated status if the server supports extended profiles and has a status set", async () => {
+            mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🐳", text: "Feeling a little blue" });
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toEqual({
+                emoji: "🐳",
+                text: "Feeling a little blue",
+            });
+            expect(client.getExtendedProfileProperty).toHaveBeenCalledWith(
+                "@alice:example.com",
+                "org.matrix.msc4426.status",
+            );
+        });
+
+        it("returns undefined if the status is invalid", async () => {
+            mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            mocked(client.getExtendedProfileProperty).mockResolvedValue({ text: "Feeling a little blue" });
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+        });
+
+        it("returns undefined if the user has no status set", async () => {
+            mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            mocked(client.getExtendedProfileProperty).mockRejectedValue(
+                new MatrixError({ errcode: "M_NOT_FOUND" }, 404),
+            );
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+        });
+
+        it("returns undefined and logs a warning if fetching the status fails unexpectedly", async () => {
+            mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            const error = new Error("network error");
+            mocked(client.getExtendedProfileProperty).mockRejectedValue(error);
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+        });
+    });
+
    describe("clearUserStatus", () => {
        let client: MatrixClient;

@@ -10,6 +10,12 @@ Please see LICENSE files in the repository root for full details.
 * The emoji should be a single grapheme cluster.
 */
 export interface UserStatus {
+    /**
+     * The emoji representing the user's status. This must be a single grapheme cluster.
+     */
    emoji: string;
+    /**
+     * The text representing the user's status.
+     */
    text: string;
 }
@@ -6,7 +6,7 @@
 */

 import React, { type JSX, memo, type ReactNode } from "react";
-import { Text } from "@vector-im/compound-web";
+import { Text, Tooltip } from "@vector-im/compound-web";
 import classNames from "classnames";

 import { Flex } from "../../../../core/utils/Flex";
@@ -54,7 +54,15 @@ export const RoomListItemContent = memo(function RoomListItemContent({
                <div className={styles.ellipsis}>
                    <div className={styles.roomName} title={item.name} data-testid="room-name">
                        {item.name}
+                        {item.userStatus && (
+                            <Tooltip description={item.userStatus.text}>
+                                <Text as="span" className={styles.userStatusEmoji}>
+                                    {item.userStatus.emoji}
+                                </Text>
+                            </Tooltip>
+                        )}
                    </div>
+
                    {item.messagePreview && (
                        <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
                            {item.messagePreview}
@@ -99,6 +99,15 @@
    text-overflow: ellipsis;
 }

+.roomName {
+    /* Allow the room name to shrink and truncate when displayed next to the user status emoji */
+    min-width: 0;
+}
+
+.userStatusEmoji {
+    padding-left: var(--cpd-space-1-5x);
+}
+
 .selected {
    .container {
        background-color: var(--cpd-color-bg-action-tertiary-selected);
@@ -314,3 +314,12 @@ export const SectionDisabled: Story = {
        areSectionsEnabled: false,
    },
 };
+
+export const WithUserStatus: Story = {
+    args: {
+        userStatus: {
+            emoji: "🌭",
+            text: "Hot",
+        },
+    },
+};
@@ -16,6 +16,7 @@ import { RoomListItemContent } from "./RoomListItemContent";
 import { type RoomNotifState } from "./RoomNotifs";
 import styles from "./RoomListItemView.module.css";
 import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { type UserStatus } from "../../../../core/userStatus";
 import { _t } from "../../../../core/i18n/i18n";

 /**
@@ -72,6 +73,8 @@ export interface RoomListItemViewSnapshot {
    isBold: boolean;
    /** Optional message preview text */
    messagePreview?: string;
+    /** The MSC4426 user status of the other user in a DM room, if any */
+    userStatus?: UserStatus;
    /** Notification decoration data */
    notification: NotificationDecorationData;
    /** Whether the more options menu should be shown */
@@ -91,7 +91,7 @@ interface DisambiguatedProfileViewProps {
 export function DisambiguatedProfileView({ vm, className }: Readonly<DisambiguatedProfileViewProps>): JSX.Element {
    const { displayName, colorClass, displayIdentifier, title, emphasizeDisplayName, userStatus } = useViewModel(vm);

-    const userStatusEmoji = userStatus && [...new Intl.Segmenter().segment(userStatus.emoji)][0]?.segment;
+    const userStatusEmoji = userStatus && userStatus.emoji;

    const displayNameClasses = classNames(colorClass, {
        [styles.disambiguatedProfile_displayName]: emphasizeDisplayName,