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>

packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.module.css

@@ -24,4 +24,8 @@
         font-size: var(--cpd-font-size-body-sm);
         margin-inline-start: 5px;
     }
+
+    .userStatus {
+        margin-inline-start: 5px;
+    }
 }

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

@@ -40,6 +40,10 @@ const meta = {
         displayIdentifier: { control: "text" },
         title: { control: "text" },
         emphasizeDisplayName: { control: "boolean" },
+        userStatus: {
+            status: { control: "string" },
+            emoji: { control: "string" },
+        },
     },
     args: {
         displayName: "Alice",
@@ -82,6 +86,17 @@ export const WithTooltip: Story = {
     },
 };
 
+export const WithUserStatus: Story = {
+    args: {
+        displayName: "Eve",
+        title: "Eve (@eve:matrix.org)",
+        userStatus: {
+            emoji: "🏝️",
+            text: "On holiday",
+        },
+    },
+};
+
 export const FullExample: Story = {
     args: {
         displayName: "Eve",
@@ -89,5 +104,9 @@ export const FullExample: Story = {
         colorClass: "mx_Username_color5",
         title: "Eve (@eve:matrix.org)",
         emphasizeDisplayName: true,
+        userStatus: {
+            emoji: "🏝️",
+            text: "On holiday",
+        },
     },
 };

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

@@ -7,6 +7,7 @@
 
 import React, { type JSX, type KeyboardEventHandler, type MouseEventHandler } from "react";
 import classNames from "classnames";
+import { Text, Tooltip } from "@vector-im/compound-web";
 
 import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
 import styles from "./DisambiguatedProfile.module.css";
@@ -38,6 +39,14 @@ export interface DisambiguatedProfileViewSnapshot {
      * Whether to emphasize the display name with additional styling.
      */
     emphasizeDisplayName?: boolean;
+
+    /**
+     * User status message
+     */
+    userStatus?: {
+        emoji: string;
+        text: string;
+    };
 }
 
 /**
@@ -80,7 +89,9 @@ interface DisambiguatedProfileViewProps {
  * ```
  */
 export function DisambiguatedProfileView({ vm, className }: Readonly<DisambiguatedProfileViewProps>): JSX.Element {
-    const { displayName, colorClass, displayIdentifier, title, emphasizeDisplayName } = useViewModel(vm);
+    const { displayName, colorClass, displayIdentifier, title, emphasizeDisplayName, userStatus } = useViewModel(vm);
+
+    const userStatusEmoji = userStatus && [...new Intl.Segmenter().segment(userStatus.emoji)][0]?.segment;
 
     const displayNameClasses = classNames(colorClass, {
         [styles.disambiguatedProfile_displayName]: emphasizeDisplayName,
@@ -115,6 +126,13 @@ export function DisambiguatedProfileView({ vm, className }: Readonly<Disambiguat
                     {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

@@ -36,6 +36,11 @@ exports[`DisambiguatedProfileView > renders the full example 1`] = `
     >
       @eve:matrix.org
     </span>
+    <span
+      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 DisambiguatedProfile-module_userStatus"
+    >
+      🏝️
+    </span>
   </div>
 </div>
 `;