User status in user menu (#33797)

* Add user status on user profile icon

Currently unstyled & no tests

* Style the user status icon

* Update snapshot

for avatar wrapper

* More snapshot updates

* add if braces

* Split out user status functions

to avoid circular dep which has the weird effect of just breaking
jest's mocking.

* type imports

* Update imports

* Update snapshot

* Tests

* baseline image

* Just snapshot the component itself

* User status in user menu

first pass, unstyled

* fix export

* superstylin'

* snapshots

* Add story & test

* Snapshots

and re-use the repeated rules

* Tests

* Fix jest lcov projectRoot config

* Change tooltip text to just 'clear'

* Add comment & fix console warn

* Remove all options screenshot

as it's not really particularly useful as a preset story

* remove stale screenshot

* fix imports

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

apps/web/src/utils/userStatus.ts

@@ -5,12 +5,12 @@ 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.
 */
 
-const MAX_STATUS_TEXT_BYTES = 256;
+import { type UserStatus } from "@element-hq/web-shared-components";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 
-export interface UserStatus {
-    emoji: string;
-    text: string;
-}
+// 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;
 
 export function userStatusTextWithinMaxLength(text: string): boolean {
     const textEncoder = new TextEncoder();
@@ -34,3 +34,14 @@ export function validateUserStatus(rawUserStatus: unknown): UserStatus | undefin
             : `${rawUserStatus.text.slice(0, MAX_STATUS_TEXT_BYTES)}…`,
     };
 }
+
+export function setUserStatus(client: MatrixClient, userStatus: UserStatus): Promise<void> {
+    return client.setExtendedProfileProperty("org.matrix.msc4426.status", {
+        emoji: userStatus.emoji,
+        text: userStatus.text,
+    });
+}
+
+export function clearUserStatus(client: MatrixClient): Promise<void> {
+    return client.setExtendedProfileProperty("org.matrix.msc4426.status", null);
+}