Initial work

package.json

@@ -129,7 +129,7 @@
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#hs/safety-error-code",
         "matrix-widget-api": "^1.14.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",

src/RoomNotifs.ts

@@ -13,16 +13,27 @@ import {
     PushRuleActionName,
     PushRuleKind,
     TweakName,
+    EventStatus,
 } from "matrix-js-sdk/src/matrix";
 
-import type { IPushRule, Room, MatrixClient } from "matrix-js-sdk/src/matrix";
+import type { IPushRule, Room, MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { NotificationLevel } from "./stores/notifications/NotificationLevel";
-import { getUnsentMessages } from "./components/structures/RoomStatusBar";
 import { doesRoomHaveUnreadMessages, doesRoomOrThreadHaveUnreadMessages } from "./Unread";
 import { EffectiveMembership, getEffectiveMembership, isKnockDenied } from "./utils/membership";
 import SettingsStore from "./settings/SettingsStore";
 import { getMarkedUnreadState } from "./utils/notifications";
 
+export function getUnsentMessages(room: Room, threadId?: string): MatrixEvent[] {
+    if (!room) {
+        return [];
+    }
+    return room.getPendingEvents().filter(function (ev) {
+        const isNotSent = ev.status === EventStatus.NOT_SENT;
+        const belongsToTheThread = threadId === ev.threadRootId;
+        return isNotSent && (!threadId || belongsToTheThread);
+    });
+}
+
 export enum RoomNotifState {
     AllMessagesLoud = "all_messages_loud",
     AllMessages = "all_messages",

src/components/structures/MatrixChat.tsx

@@ -14,6 +14,7 @@ import {
     HttpApiEvent,
     type MatrixClient,
     MatrixEvent,
+    MatrixSafetyError,
     MsgType,
     type RoomType,
     SyncState,

src/components/structures/RoomStatusBar.tsx

@@ -1,4 +1,5 @@
 /*
+Copyright (c) 2025 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2015-2021 The Matrix.org Foundation C.I.C.
 
@@ -6,267 +7,28 @@ 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 React, { type JSX, type ReactNode } from "react";
-import {
-    ClientEvent,
-    EventStatus,
-    type MatrixError,
-    type MatrixEvent,
-    type Room,
-    RoomEvent,
-    type SyncState,
-    type SyncStateData,
-} from "matrix-js-sdk/src/matrix";
+import React from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t, _td } from "../../languageHandler";
-import Resend from "../../Resend";
-import dis from "../../dispatcher/dispatcher";
-import { messageForResourceLimitError } from "../../utils/ErrorUtils";
-import { Action } from "../../dispatcher/actions";
 import { StaticNotificationState } from "../../stores/notifications/StaticNotificationState";
 import AccessibleButton from "../views/elements/AccessibleButton";
 import InlineSpinner from "../views/elements/InlineSpinner";
-import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { RoomStatusBarUnsentMessages } from "./RoomStatusBarUnsentMessages";
-import ExternalLink from "../views/elements/ExternalLink";
-
-const STATUS_BAR_HIDDEN = 0;
-const STATUS_BAR_EXPANDED = 1;
-const STATUS_BAR_EXPANDED_LARGE = 2;
-
-export function getUnsentMessages(room: Room, threadId?: string): MatrixEvent[] {
-    if (!room) {
-        return [];
-    }
-    return room.getPendingEvents().filter(function (ev) {
-        const isNotSent = ev.status === EventStatus.NOT_SENT;
-        const belongsToTheThread = threadId === ev.threadRootId;
-        return isNotSent && (!threadId || belongsToTheThread);
-    });
-}
+import { useRoomStatusBarViewModel } from "../viewmodels/rooms/RoomStatusBarViewModel";
 
 interface IProps {
     // the room this statusbar is representing.
     room: Room;
-
-    // true if the room is being peeked at. This affects components that shouldn't
-    // logically be shown when peeking, such as a prompt to invite people to a room.
-    isPeeking?: boolean;
-    // callback for when the user clicks on the 'resend all' button in the
-    // 'unsent messages' bar
-    onResendAllClick?: () => void;
-
-    // callback for when the user clicks on the 'cancel all' button in the
-    // 'unsent messages' bar
-    onCancelAllClick?: () => void;
-
-    // callback for when the user clicks on the 'invite others' button in the
-    // 'you are alone' bar
-    onInviteClick?: () => void;
-
-    // callback for when we do something that changes the size of the
-    // status bar. This is used to trigger a re-layout in the parent
-    // component.
-    onResize?: () => void;
-
-    // callback for when the status bar can be hidden from view, as it is
-    // not displaying anything
-    onHidden?: () => void;
-
-    // callback for when the status bar is displaying something and should
-    // be visible
-    onVisible?: () => void;
 }
 
-interface IState {
-    syncState: SyncState | null;
-    syncStateData: SyncStateData | null;
-    unsentMessages: MatrixEvent[];
-    isResending: boolean;
-}
-
-export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
-    private unmounted = false;
-    public static contextType = MatrixClientContext;
-    declare public context: React.ContextType<typeof MatrixClientContext>;
-
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
-        super(props, context);
-
-        this.state = {
-            syncState: this.context.getSyncState(),
-            syncStateData: this.context.getSyncStateData(),
-            unsentMessages: getUnsentMessages(this.props.room),
-            isResending: false,
-        };
+export function RoomStatusBar(props: IProps) {
+    const vm = useRoomStatusBarViewModel(props);
+    if (!vm.visible) {
+        return null;
     }
-
-    public componentDidMount(): void {
-        this.unmounted = false;
-
-        const client = this.context;
-        client.on(ClientEvent.Sync, this.onSyncStateChange);
-        client.on(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
-
-        this.checkSize();
-    }
-
-    public componentDidUpdate(): void {
-        this.checkSize();
-    }
-
-    public componentWillUnmount(): void {
-        this.unmounted = true;
-        // we may have entirely lost our client as we're logging out before clicking login on the guest bar...
-        const client = this.context;
-        if (client) {
-            client.removeListener(ClientEvent.Sync, this.onSyncStateChange);
-            client.removeListener(RoomEvent.LocalEchoUpdated, this.onRoomLocalEchoUpdated);
-        }
-    }
-
-    private onSyncStateChange = (state: SyncState, prevState: SyncState | null, data?: SyncStateData): void => {
-        if (state === "SYNCING" && prevState === "SYNCING") {
-            return;
-        }
-        if (this.unmounted) return;
-        this.setState({
-            syncState: state,
-            syncStateData: data ?? null,
-        });
-    };
-
-    private onResendAllClick = (): void => {
-        Resend.resendUnsentEvents(this.props.room).then(() => {
-            this.setState({ isResending: false });
-        });
-        this.setState({ isResending: true });
-        dis.fire(Action.FocusSendMessageComposer);
-    };
-
-    private onCancelAllClick = (): void => {
-        Resend.cancelUnsentEvents(this.props.room);
-        dis.fire(Action.FocusSendMessageComposer);
-    };
-
-    private onRoomLocalEchoUpdated = (ev: MatrixEvent, room: Room): void => {
-        if (room.roomId !== this.props.room.roomId) return;
-        const messages = getUnsentMessages(this.props.room);
-        this.setState({
-            unsentMessages: messages,
-            isResending: messages.length > 0 && this.state.isResending,
-        });
-    };
-
-    // Check whether current size is greater than 0, if yes call props.onVisible
-    private checkSize(): void {
-        if (this.getSize()) {
-            if (this.props.onVisible) this.props.onVisible();
-        } else {
-            if (this.props.onHidden) this.props.onHidden();
-        }
-    }
-
-    // We don't need the actual height - just whether it is likely to have
-    // changed - so we use '0' to indicate normal size, and other values to
-    // indicate other sizes.
-    private getSize(): number {
-        if (this.shouldShowConnectionError()) {
-            return STATUS_BAR_EXPANDED;
-        } else if (this.state.unsentMessages.length > 0 || this.state.isResending) {
-            return STATUS_BAR_EXPANDED_LARGE;
-        }
-        return STATUS_BAR_HIDDEN;
-    }
-
-    private shouldShowConnectionError(): boolean {
-        // no conn bar trumps the "some not sent" msg since you can't resend without
-        // a connection!
-        // There's one situation in which we don't show this 'no connection' bar, and that's
-        // if it's a resource limit exceeded error: those are shown in the top bar.
-        const errorIsMauError = Boolean(
-            this.state.syncStateData &&
-                this.state.syncStateData.error &&
-                this.state.syncStateData.error.name === "M_RESOURCE_LIMIT_EXCEEDED",
-        );
-        return this.state.syncState === "ERROR" && !errorIsMauError;
-    }
-
-    private getUnsentMessageContent(): JSX.Element {
-        const unsentMessages = this.state.unsentMessages;
-
-        let title: ReactNode;
-
-        let consentError: MatrixError | null = null;
-        let resourceLimitError: MatrixError | null = null;
-        for (const m of unsentMessages) {
-            if (m.error && m.error.errcode === "M_CONSENT_NOT_GIVEN") {
-                consentError = m.error;
-                break;
-            } else if (m.error && m.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED") {
-                resourceLimitError = m.error;
-                break;
-            }
-        }
-        if (consentError) {
-            title = _t(
-                "room|status_bar|requires_consent_agreement",
-                {},
-                {
-                    consentLink: (sub) => (
-                        <ExternalLink href={consentError!.data?.consent_uri} target="_blank" rel="noreferrer noopener">
-                            {sub}
-                        </ExternalLink>
-                    ),
-                },
-            );
-        } else if (resourceLimitError) {
-            title = messageForResourceLimitError(
-                resourceLimitError.data.limit_type,
-                resourceLimitError.data.admin_contact,
-                {
-                    "monthly_active_user": _td("room|status_bar|monthly_user_limit_reached"),
-                    "hs_disabled": _td("room|status_bar|homeserver_blocked"),
-                    "": _td("room|status_bar|exceeded_resource_limit"),
-                },
-            );
-        } else {
-            title = _t("room|status_bar|some_messages_not_sent");
-        }
-
-        let buttonRow = (
-            <>
-                <AccessibleButton onClick={this.onCancelAllClick} className="mx_RoomStatusBar_unsentCancelAllBtn">
-                    {_t("room|status_bar|delete_all")}
-                </AccessibleButton>
-                <AccessibleButton onClick={this.onResendAllClick} className="mx_RoomStatusBar_unsentRetry">
-                    {_t("room|status_bar|retry_all")}
-                </AccessibleButton>
-            </>
-        );
-        if (this.state.isResending) {
-            buttonRow = (
-                <>
-                    <InlineSpinner w={20} h={20} />
-                    {/* span for css */}
-                    <span>{_t("forward|sending")}</span>
-                </>
-            );
-        }
-
-        return (
-            <RoomStatusBarUnsentMessages
-                title={title}
-                description={_t("room|status_bar|select_messages_to_retry")}
-                notificationState={StaticNotificationState.RED_EXCLAMATION}
-                buttons={buttonRow}
-            />
-        );
-    }
-
-    public render(): React.ReactNode {
-        if (this.shouldShowConnectionError()) {
+    if ("connectivityLost" in vm) {
         return (
             <div className="mx_RoomStatusBar">
                 <div role="alert">
@@ -286,10 +48,42 @@ export default class RoomStatusBar extends React.PureComponent<IProps, IState> {
         );
     }
 
-        if (this.state.unsentMessages.length > 0 || this.state.isResending) {
-            return this.getUnsentMessageContent();
+    if (vm.isResending) {
+        return (
+            <RoomStatusBarUnsentMessages
+                title={vm.title}
+                description={vm.description}
+                notificationState={StaticNotificationState.RED_EXCLAMATION}
+                buttons={
+                    <>
+                        <InlineSpinner w={20} h={20} />
+                        {/* span for css */}
+                        <span>{_t("forward|sending")}</span>
+                    </>
+                }
+            />
+        );
     }
 
-        return null;
+    return (
+        <RoomStatusBarUnsentMessages
+            title={vm.title}
+            description={vm.description}
+            notificationState={StaticNotificationState.RED_EXCLAMATION}
+            buttons={
+                <>
+                    {vm.onCancelAllClick && (
+                        <AccessibleButton onClick={vm.onCancelAllClick} className="mx_RoomStatusBar_unsentCancelAllBtn">
+                            {_t("room|status_bar|delete_all")}
+                        </AccessibleButton>
+                    )}
+                    {vm.onResendAllClick && (
+                        <AccessibleButton onClick={vm.onResendAllClick} className="mx_RoomStatusBar_unsentRetry">
+                            {_t("room|status_bar|retry_all")}
+                        </AccessibleButton>
+                    )}
+                </>
             }
+        />
+    );
 }

src/components/structures/RoomView.tsx

@@ -91,7 +91,7 @@ import { type IOpts } from "../../createRoom";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
 import ErrorDialog from "../views/dialogs/ErrorDialog";
 import UploadBar from "./UploadBar";
-import RoomStatusBar from "./RoomStatusBar";
+import { RoomStatusBar } from "./RoomStatusBar";
 import MessageComposer from "../views/rooms/MessageComposer";
 import JumpToBottomButton from "../views/rooms/JumpToBottomButton";
 import TopUnreadMessagesBar from "../views/rooms/TopUnreadMessagesBar";
@@ -1676,14 +1676,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
     }
 
-    private onInviteClick = (): void => {
-        // open the room inviter
-        defaultDispatcher.dispatch({
-            action: "view_invite",
-            roomId: this.getRoomId(),
-        });
-    };
-
     private onJoinButtonClicked = (): void => {
         // If the user is a ROU, allow them to transition to a PWLU
         if (this.context.client?.isGuest()) {
@@ -2022,17 +2014,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         };
     }
 
-    private onStatusBarVisible = (): void => {
-        if (this.unmounted || this.state.statusBarVisible) return;
-        this.setState({ statusBarVisible: true });
-    };
-
-    private onStatusBarHidden = (): void => {
-        // This is currently not desired as it is annoying if it keeps expanding and collapsing
-        if (this.unmounted || !this.state.statusBarVisible) return;
-        this.setState({ statusBarVisible: false });
-    };
-
     /**
      * called by the parent component when PageUp/Down/etc is pressed.
      *
@@ -2383,21 +2364,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
 
         let statusBar: JSX.Element | undefined;
-        let isStatusAreaExpanded = true;
+        const isStatusAreaExpanded = true;
 
         if (ContentMessages.sharedInstance().getCurrentUploads().length > 0) {
             statusBar = <UploadBar room={this.state.room} />;
         } else if (!this.state.search) {
-            isStatusAreaExpanded = this.state.statusBarVisible;
-            statusBar = (
-                <RoomStatusBar
-                    room={this.state.room}
-                    isPeeking={myMembership !== KnownMembership.Join}
-                    onInviteClick={this.onInviteClick}
-                    onVisible={this.onStatusBarVisible}
-                    onHidden={this.onStatusBarHidden}
-                />
-            );
+            statusBar = <RoomStatusBar room={this.state.room} />;
         }
 
         const statusBarAreaClass = classNames("mx_RoomView_statusArea", {

src/components/viewmodels/rooms/RoomStatusBarViewModel.tsx

@@ -0,0 +1,193 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    ClientEvent,
+    EventStatus,
+    MatrixSafetyError,
+    type Room,
+    RoomEvent,
+    SyncState,
+    type SyncStateData,
+} from "matrix-js-sdk/src/matrix";
+import React, { type ReactNode, useCallback, useMemo, useState } from "react";
+import { _t, _td } from "@element-hq/web-shared-components";
+
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
+import dis from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import Resend from "../../../Resend";
+import { messageForResourceLimitError } from "../../../utils/ErrorUtils";
+import ExternalLink from "../../views/elements/ExternalLink";
+
+interface RoomStatusBarInvisible {
+    visible: false;
+}
+
+interface RoomStatusBarWithError {
+    visible: true;
+    connectivityLost: boolean;
+}
+
+interface RoomStatusBarWithUnsentMessages {
+    visible: true;
+    title: ReactNode;
+    description?: string;
+}
+
+interface RoomStatusBarWithUnsentMessagesActions extends RoomStatusBarWithUnsentMessages {
+    isResending: false;
+    // callback for when the user clicks on the 'resend all' button in the
+    // 'unsent messages' bar
+    onResendAllClick?: () => void;
+
+    // callback for when the user clicks on the 'cancel all' button in the
+    // 'unsent messages' bar
+    onCancelAllClick?: () => void;
+}
+
+interface RoomStatusBarWithUnsentMessagesResending extends RoomStatusBarWithUnsentMessages {
+    isResending: true;
+}
+
+type RoomStatusBarVM =
+    | RoomStatusBarWithError
+    | RoomStatusBarWithUnsentMessagesActions
+    | RoomStatusBarWithUnsentMessagesResending
+    | RoomStatusBarInvisible;
+
+interface IProps {
+    // the room this statusbar is representing.
+    room: Room;
+}
+
+export function getTextForSafetyHarm(error: MatrixSafetyError): string {
+    const translatedStrings = [];
+    for (const harmCategory of error.harms) {
+        switch (harmCategory) {
+            case "org.matrix.msc4387.spam":
+            // case "m.spam":
+                translatedStrings.push(_t("room|safety|harms|spam"));
+                break;
+        }
+    }
+    if (translatedStrings.length > 1) {
+        return _t("room|safety|harms|multiple");
+    } else if (translatedStrings.length === 0) {
+        return error.data.error ?? _t("room|safety|harms|generic");
+    }
+    return translatedStrings[0];
+}
+
+export function useRoomStatusBarViewModel({ room }: IProps): RoomStatusBarVM {
+    const client = useMatrixClientContext();
+    const syncState = useTypedEventEmitterState(
+        client,
+        ClientEvent.Sync,
+        (state: SyncState, prevState: SyncState, data: SyncStateData) => {
+            return { state, data };
+        },
+    );
+    const [isResending, setResending] = useState(false);
+    const unsentMessages = useTypedEventEmitterState(room, RoomEvent.LocalEchoUpdated, () => {
+        return [{error: new MatrixSafetyError({ harms: ["something.unknown", "other.thing"], errcode: "ORG.MATRIX.MSC4387_SAFETY", expires: Date.now() + 60000})}];
+        return room.getPendingEvents().filter(function (ev) {
+            const isNotSent = ev.status === EventStatus.NOT_SENT;
+            return isNotSent;
+        });
+    });
+
+    const onResendAllClick = useCallback(() => {
+        setResending(true);
+        Resend.resendUnsentEvents(room).finally(() => {
+            setResending(false);
+        });
+        dis.fire(Action.FocusSendMessageComposer);
+    }, [room]);
+
+    const onCancelAllClick = useCallback(() => {
+        Resend.cancelUnsentEvents(room);
+        dis.fire(Action.FocusSendMessageComposer);
+    }, [room]);
+
+    const unsentMessagesTitle = useMemo(() => {
+        for (const m of unsentMessages) {
+            if (!m.error) {
+                continue;
+            }
+            if (m.error.errcode === "M_CONSENT_NOT_GIVEN") {
+                return _t(
+                    "room|status_bar|requires_consent_agreement",
+                    {},
+                    {
+                        consentLink: (sub) => (
+                            <ExternalLink href={m.error!.data?.consent_uri} target="_blank" rel="noreferrer noopener">
+                                {sub}
+                            </ExternalLink>
+                        ),
+                    },
+                );
+            }
+            if (m.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED") {
+                return messageForResourceLimitError(
+                    m.error.data.limit_type,
+                    m.error.data.admin_contact,
+                    {
+                        "monthly_active_user": _td("room|status_bar|monthly_user_limit_reached"),
+                        "hs_disabled": _td("room|status_bar|homeserver_blocked"),
+                        "": _td("room|status_bar|exceeded_resource_limit"),
+                    },
+                );
+            }
+            if (m.error instanceof MatrixSafetyError) {
+                return _t(
+                    "room|safety|message_not_sent_unsafe", {
+                        specificError: getTextForSafetyHarm(m.error) 
+                    }
+                );
+            }
+        }
+        return _t("room|status_bar|some_messages_not_sent");
+    }, [unsentMessages]);
+
+    const hasConnectionError = useMemo(() => {
+        // no conn bar trumps the "some not sent" msg since you can't resend without
+        // a connection!
+        // There's one situation in which we don't show this 'no connection' bar, and that's
+        // if it's a resource limit exceeded error: those are shown in the top bar.
+        const errorIsMauError = Boolean(
+            syncState.data && syncState.data.error && syncState.data.error.name === "M_RESOURCE_LIMIT_EXCEEDED",
+        );
+        return syncState.state === SyncState.Error && !errorIsMauError;
+    }, [syncState]);
+
+    if (hasConnectionError) {
+        return { visible: true, connectivityLost: true };
+    }
+
+    if (unsentMessages.length) {
+        if (isResending) {
+            return {
+                visible: true,
+                title: unsentMessagesTitle,
+                description: _t("room|status_bar|select_messages_to_retry"),
+                isResending: true,
+            };
+        }
+        return {
+            visible: true,
+            title: unsentMessagesTitle,
+            description: _t("room|status_bar|select_messages_to_retry"),
+            isResending,
+            onResendAllClick,
+            onCancelAllClick,
+        };
+    }
+
+    return { visible: false };
+}

src/i18n/strings/en_EN.json

@@ -2111,6 +2111,14 @@
         "rejoin_button": "Re-join",
         "room_content": "Room content",
         "room_is_low_priority": "This is a low priority room",
+        "safety": {
+            "harms": {
+                "multiple": "The message contained multiple problematic aspects",
+                "generic": "The server declined to give a reason",
+                "spam": "The messages are considered spam"
+            },
+            "message_not_sent_unsafe": "The message you are trying to send is unsafe: %(specificError)s"
+        },
         "search": {
             "all_rooms_button": "Search all rooms",
             "placeholder": "Search messages…",

test/unit-tests/RoomNotifs-test.ts

@@ -26,10 +26,73 @@ import {
     RoomNotifState,
     getUnreadNotificationCount,
     determineUnreadState,
+    getUnsentMessages,
 } from "../../src/RoomNotifs";
 import { NotificationLevel } from "../../src/stores/notifications/NotificationLevel";
 import SettingsStore from "../../src/settings/SettingsStore";
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { mkThread } from "../test-utils/threads";
+
+describe("getUnsentMessages", () => {
+    const ROOM_ID = "!roomId";
+    let room: Room;
+    let event: MatrixEvent;
+    let client: MatrixClient;
+    beforeEach(() => {
+        client = stubClient();
+        room = new Room(ROOM_ID, client, client.getUserId()!, {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+        event = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: "@user1:server",
+            room: "!room1:server",
+            content: {},
+        });
+        event.status = EventStatus.NOT_SENT;
+    });
+
+    it("returns no unsent messages", () => {
+        expect(getUnsentMessages(room)).toHaveLength(0);
+    });
+
+    it("checks the event status", () => {
+        room.addPendingEvent(event, "123");
+
+        expect(getUnsentMessages(room)).toHaveLength(1);
+        event.status = EventStatus.SENT;
+
+        expect(getUnsentMessages(room)).toHaveLength(0);
+    });
+
+    it("only returns events related to a thread", () => {
+        room.addPendingEvent(event, "123");
+
+        const { rootEvent, events } = mkThread({
+            room,
+            client,
+            authorId: "@alice:example.org",
+            participantUserIds: ["@alice:example.org"],
+            length: 2,
+        });
+        rootEvent.status = EventStatus.NOT_SENT;
+        room.addPendingEvent(rootEvent, rootEvent.getId()!);
+        for (const event of events) {
+            event.status = EventStatus.NOT_SENT;
+            room.addPendingEvent(event, Date.now() + Math.random() + "");
+        }
+
+        const pendingEvents = getUnsentMessages(room, rootEvent.getId());
+
+        expect(pendingEvents[0].threadRootId).toBe(rootEvent.getId());
+        expect(pendingEvents[1].threadRootId).toBe(rootEvent.getId());
+        expect(pendingEvents[2].threadRootId).toBe(rootEvent.getId());
+
+        // Filters out the non thread events
+        expect(pendingEvents.every((ev) => ev.getId() !== event.getId())).toBe(true);
+    });
+});
 
 describe("RoomNotifs test", () => {
     let client: jest.Mocked<MatrixClient>;

test/unit-tests/components/structures/RoomStatusBar-test.tsx

@@ -17,11 +17,10 @@ import {
     MatrixError,
 } from "matrix-js-sdk/src/matrix";
 
-import RoomStatusBar, { getUnsentMessages } from "../../../../src/components/structures/RoomStatusBar";
+import { RoomStatusBar } from "../../../../src/components/structures/RoomStatusBar";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { mkEvent, stubClient } from "../../../test-utils/test-utils";
-import { mkThread } from "../../../test-utils/threads";
 
 describe("RoomStatusBar", () => {
     const ROOM_ID = "!roomId:example.org";
@@ -55,49 +54,6 @@ describe("RoomStatusBar", () => {
             ),
         });
 
-    describe("getUnsentMessages", () => {
-        it("returns no unsent messages", () => {
-            expect(getUnsentMessages(room)).toHaveLength(0);
-        });
-
-        it("checks the event status", () => {
-            room.addPendingEvent(event, "123");
-
-            expect(getUnsentMessages(room)).toHaveLength(1);
-            event.status = EventStatus.SENT;
-
-            expect(getUnsentMessages(room)).toHaveLength(0);
-        });
-
-        it("only returns events related to a thread", () => {
-            room.addPendingEvent(event, "123");
-
-            const { rootEvent, events } = mkThread({
-                room,
-                client,
-                authorId: "@alice:example.org",
-                participantUserIds: ["@alice:example.org"],
-                length: 2,
-            });
-            rootEvent.status = EventStatus.NOT_SENT;
-            room.addPendingEvent(rootEvent, rootEvent.getId()!);
-            for (const event of events) {
-                event.status = EventStatus.NOT_SENT;
-                room.addPendingEvent(event, Date.now() + Math.random() + "");
-            }
-
-            const pendingEvents = getUnsentMessages(room, rootEvent.getId());
-
-            expect(pendingEvents[0].threadRootId).toBe(rootEvent.getId());
-            expect(pendingEvents[1].threadRootId).toBe(rootEvent.getId());
-            expect(pendingEvents[2].threadRootId).toBe(rootEvent.getId());
-
-            // Filters out the non thread events
-            expect(pendingEvents.every((ev) => ev.getId() !== event.getId())).toBe(true);
-        });
-    });
-
-    describe("<RoomStatusBar />", () => {
     it("should render nothing when room has no error or unsent messages", () => {
         const { container } = getComponent();
         expect(container.firstChild).toBe(null);
@@ -146,5 +102,4 @@ describe("RoomStatusBar", () => {
             expect(container).toMatchSnapshot();
         });
     });
-    });
 });

yarn.lock

@@ -1579,17 +1579,8 @@
     yaml "^2.7.0"
 
 "@element-hq/web-shared-components@link:packages/shared-components":
-  version "0.0.0-test.11"
-  dependencies:
-    "@element-hq/element-web-module-api" "^1.8.0"
-    "@vector-im/compound-design-tokens" "^6.3.0"
-    classnames "^2.5.1"
-    counterpart "^0.18.6"
-    lodash "^4.17.21"
-    matrix-web-i18n "^3.4.0"
-    patch-package "^8.0.1"
-    react-merge-refs "^3.0.2"
-    temporal-polyfill "^0.3.0"
+  version "0.0.0"
+  uid ""
 
 "@emnapi/core@^1.4.3", "@emnapi/core@^1.5.0":
   version "1.7.0"
@@ -2394,10 +2385,10 @@
     emojibase "^17.0.0"
     emojibase-data "^17.0.0"
 
-"@matrix-org/matrix-sdk-crypto-wasm@^15.3.0":
-  version "15.3.0"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-15.3.0.tgz#141fd041ae382b793369bcee4394b0b577bdea0c"
-  integrity sha512-QyxHvncvkl7nf+tnn92PjQ54gMNV8hMSpiukiDgNrqF6IYwgySTlcSdkPYdw8QjZJ0NR6fnVrNzMec0OohM3wA==
+"@matrix-org/matrix-sdk-crypto-wasm@^16.0.0":
+  version "16.0.0"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-16.0.0.tgz#6cd8cde24a9b374d9d1da3a768becbfc346de37e"
+  integrity sha512-c+0eu/ckG+ik62CaOFvHAulJlspw2CBKcLrWbiEQsXv4J3PC4xaaDI5VHFAl7FDU+U9Ww2DDNTieszCh4Lk0/Q==
 
 "@matrix-org/react-sdk-module-api@^2.4.0":
   version "2.5.0"
@@ -4221,15 +4212,16 @@
     classnames "^2.5.1"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
+  uid ""
 
 "@vector-im/matrix-wysiwyg@2.40.0":
   version "2.40.0"
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.40.0.tgz#53c9ca5ea907d91e4515da64f20a82e5586b882c"
   integrity sha512-8LRFLs5PEKYs4lOL7aJ4lL/hGCrvEvOYkCR3JggXYXDVMtX4LmfdlKYucSAe98pCmqAAbLRvlRcR1bTOYvM8ug==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm"
+    "@vector-im/matrix-wysiwyg-wasm" "link:../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.40.0-53c9ca5ea907d91e4515da64f20a82e5586b882c-integrity/node_modules/bindings/wysiwyg-wasm"
 
 "@vitest/expect@3.2.4":
   version "3.2.4"
@@ -9697,12 +9689,12 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#develop":
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#hs/safety-error-code":
   version "39.3.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/942fdf5bee0f0303f32c2cae87df6108666bb780"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/62515599d64f69ac1b8e5bbd9fba85ffefb21f1b"
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@matrix-org/matrix-sdk-crypto-wasm" "^15.3.0"
+    "@matrix-org/matrix-sdk-crypto-wasm" "^16.0.0"
     another-json "^0.2.0"
     bs58 "^6.0.0"
     content-type "^1.0.4"