Show user status in timeline (#32991)

* Use other branch

* All the changes that got lost

* Fix merge

* Ensure emoji can only be one character long

* Fixup labs feature

* Remove redundant check

* Update snapshot

* update snapshot

* add snapshot

* unpin

* fix pnpm lock

* undo pn[m lockfile changes altogether

as we shouldn't actually need any afaik

* update snpahot for changed IDs

* Snapshot update

* Snapshot update

* There is now another section

* more snapshots

* more snapshot

* More snapshots

* oh come on snapshots

* actual snapshot update

* Fix sonar issues

* just update the thing manually

* [screams internally]

* Update snapshot

* test for useUserStatus

* Make useUserStatus actually truncate

* Split out slash command to its own file

& add test

* Remove irrelevant comment

* doc

* Comment on non-obvious error message

---------

Co-authored-by: David Baker <dbkr@users.noreply.github.com>

apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.ts

@@ -15,6 +15,7 @@ import { type MouseEvent } from "react";
 import { _t } from "../../../../languageHandler";
 import { getUserNameColorClass } from "../../../../utils/FormattingUtils";
 import UserIdentifier from "../../../../customisations/UserIdentifier";
+import type { UserStatus } from "../../../../hooks/useUserStatus";
 
 /**
  * Information about a member for disambiguation purposes.
@@ -46,6 +47,10 @@ export interface DisambiguatedProfileViewModelProps {
      * The member information for disambiguation.
      */
     member?: MemberInfo | null;
+    /**
+     * The user's present status.
+     */
+    userStatus?: UserStatus;
     /**
      * The fallback name to use if the member's display name is not available.
      */
@@ -62,6 +67,7 @@ export interface DisambiguatedProfileViewModelProps {
      * Whether to show a tooltip with additional information.
      */
     withTooltip?: boolean;
+
     /**
      * Optional click handler for the profile.
      */
@@ -79,7 +85,7 @@ export class DisambiguatedProfileViewModel
     private static readonly computeSnapshot = (
         props: DisambiguatedProfileViewModelProps,
     ): DisambiguatedProfileViewSnapshot => {
-        const { member, fallbackName, colored, emphasizeDisplayName, withTooltip } = props;
+        const { member, fallbackName, colored, emphasizeDisplayName, withTooltip, userStatus } = props;
 
         // Compute display name
         const displayName = member?.rawDisplayName || fallbackName;
@@ -122,11 +128,15 @@ export class DisambiguatedProfileViewModel
             displayIdentifier,
             title,
             emphasizeDisplayName,
+            userStatus,
         };
     };
 
     public constructor(props: DisambiguatedProfileViewModelProps) {
         super(props, DisambiguatedProfileViewModel.computeSnapshot(props));
+        this.snapshot.merge({
+            userStatus: props.userStatus,
+        });
     }
 
     public setMember(fallbackName: string, member?: MemberInfo | null): void {
@@ -136,6 +146,13 @@ export class DisambiguatedProfileViewModel
         this.snapshot.set(DisambiguatedProfileViewModel.computeSnapshot(this.props));
     }
 
+    public setUserStatus(userStatus?: UserStatus): void {
+        this.props.userStatus = userStatus;
+        this.snapshot.merge({
+            userStatus,
+        });
+    }
+
     public onClick = (evt: MouseEvent<HTMLDivElement>): void => {
         this.props.onClick?.(evt);
     };