v1.11.91

* Switch to secure random strings

Because the js-sdk methods are changing and there's no reason for these
not to use the secure versions. The dedicated upper/lower functions were
*only* used in this one case, so this should do the exact same thing with
the one exported function.

Requires https://github.com/matrix-org/matrix-js-sdk/pull/4621 (merge both together)

* Change remaining instances of randomString

which I somehow entirely missed the first time.

* Fix import order

(cherry picked from commit 56eafc908e)

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

.github/workflows/deploy.yml

@@ -96,3 +96,4 @@ jobs:
                   projectName: ${{ env.SITE == 'staging.element.io' && 'element-web-staging' || 'element-web' }}
                   directory: _deploy
                   gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+                  branch: main

CHANGELOG.md

@@ -1,3 +1,21 @@
+Changes in [1.11.91](https://github.com/element-hq/element-web/releases/tag/v1.11.91) (2025-01-28)
+==================================================================================================
+## ✨ Features
+
+* Implement changes to memberlist from feedback ([#29029](https://github.com/element-hq/element-web/pull/29029)). Contributed by @MidhunSureshR.
+* Add toast for recovery keys being out of sync ([#28946](https://github.com/element-hq/element-web/pull/28946)). Contributed by @dbkr.
+* Refactor LegacyCallHandler event emitter to use TypedEventEmitter ([#29008](https://github.com/element-hq/element-web/pull/29008)). Contributed by @t3chguy.
+* Add `Recovery` section in the new user settings `Encryption` tab ([#28673](https://github.com/element-hq/element-web/pull/28673)). Contributed by @florianduros.
+* Retry loading chunks to make the app more resilient ([#29001](https://github.com/element-hq/element-web/pull/29001)). Contributed by @t3chguy.
+* Clear account idb table on logout ([#28996](https://github.com/element-hq/element-web/pull/28996)). Contributed by @t3chguy.
+* Implement new memberlist design with MVVM architecture  ([#28874](https://github.com/element-hq/element-web/pull/28874)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Switch to secure random strings ([#29035](https://github.com/element-hq/element-web/pull/29035)). Contributed by @RiotRobot.
+* React to MatrixEvent sender/target being updated for rendering state events ([#28947](https://github.com/element-hq/element-web/pull/28947)). Contributed by @t3chguy.
+
+
 Changes in [1.11.90](https://github.com/element-hq/element-web/releases/tag/v1.11.90) (2025-01-14)
 ==================================================================================================
 ## ✨ Features

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.90",
+    "version": "1.11.91",
     "description": "A feature-rich client for Matrix.org",
     "author": "New Vector Ltd.",
     "repository": {
@@ -127,7 +127,7 @@
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
+        "matrix-js-sdk": "36.1.0",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",

playwright/e2e/branding/title.spec.ts

@@ -1,43 +0,0 @@
-/*
-Copyright 2025 New Vector 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 { expect, test } from "../../element-web-test";
-
-/*
- * Tests for branding configuration
- **/
-
-test.describe("Test without branding config", () => {
-    test("Shows standard branding when showing the home page", async ({ pageWithCredentials: page }) => {
-        await page.goto("/");
-        await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
-        expect(page.title()).toEqual("Element *");
-    });
-    test("Shows standard branding when showing a room", async ({ app, pageWithCredentials: page }) => {
-        await app.client.createRoom({ name: "Test Room" });
-        await app.viewRoomByName("Test Room");
-        expect(page.title()).toEqual("Element * | Test Room");
-    });
-});
-
-test.describe("Test with custom branding", () => {
-    test.use({
-        config: {
-            brand: "TestBrand",
-        },
-    });
-    test("Shows custom branding when showing the home page", async ({ pageWithCredentials: page }) => {
-        await page.goto("/");
-        await page.waitForSelector(".mx_MatrixChat", { timeout: 30000 });
-        expect(page.title()).toEqual("TestingApp TestBrand * $ignoredParameter");
-    });
-    test("Shows custom branding when showing a room", async ({ app, pageWithCredentials: page }) => {
-        await app.client.createRoom({ name: "Test Room" });
-        await app.viewRoomByName("Test Room");
-        expect(page.title()).toEqual("TestingApp TestBrand * Test Room $ignoredParameter");
-    });
-});

playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -69,11 +69,6 @@ const test = base.extend<{
 });
 
 test.describe("Sliding Sync", () => {
-    test.skip(
-        ({ homeserverType }) => homeserverType === "pinecone",
-        "due to a bug in Pinecone https://github.com/element-hq/dendrite/issues/3490",
-    );
-
     const checkOrder = async (wantOrder: string[], page: Page) => {
         await expect(page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile_title")).toHaveText(wantOrder);
     };

playwright/testcontainers/synapse.ts

@@ -19,7 +19,7 @@ import { HomeserverContainer, StartedHomeserverContainer } from "./HomeserverCon
 import { StartedMatrixAuthenticationServiceContainer } from "./mas.ts";
 import { Api, ClientServerApi, Verb } from "../plugins/utils/api.ts";
 
-const TAG = "develop@sha256:e48308d68dec00af6ce43a05785d475de21a37bc2afaabb440d3a575bcc3d57d";
+const TAG = "develop@sha256:5d62b61c4373eaca25df6c6bb99fc1be92f8f40b8abebd8897bf5b2af9eb137a";
 
 const DEFAULT_CONFIG = {
     server_name: "localhost",

res/css/_components.pcss

@@ -283,6 +283,7 @@
 @import "./views/rooms/_EventTile.pcss";
 @import "./views/rooms/_HistoryTile.pcss";
 @import "./views/rooms/_IRCLayout.pcss";
+@import "./views/rooms/_InvitedIconView.pcss";
 @import "./views/rooms/_JumpToBottomButton.pcss";
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";

res/css/views/rooms/_InvitedIconView.pcss

@@ -0,0 +1,10 @@
+/*
+Copyright 2025 New Vector 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.
+*/
+
+.mx_InvitedIconView {
+    color: var(--cpd-color-icon-tertiary);
+}

res/css/views/rooms/_MemberListView.pcss

@@ -14,4 +14,10 @@ Please see LICENSE files in the repository root for full details.
     .mx_MemberListView_container {
         height: 100%;
     }
+
+    .mx_MemberListView_separator {
+        margin: 0;
+        border: none;
+        border-top: 2px solid var(--cpd-color-bg-subtle-primary);
+    }
 }

res/css/views/rooms/_MemberTileView.pcss

@@ -31,9 +31,10 @@ Please see LICENSE files in the repository root for full details.
         min-width: 0;
     }
 
-    .mx_MemberTileView_user_label {
+    .mx_MemberTileView_userLabel {
         font: var(--cpd-font-body-sm-regular);
         font-size: 13px;
+        color: var(--cpd-color-text-secondary);
     }
 
     .mx_MemberTileView_avatar {
@@ -41,18 +42,4 @@ Please see LICENSE files in the repository root for full details.
         height: 32px;
         width: 32px;
     }
-
-    .mx_E2EIconView {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .mx_E2EIconView_warning {
-        color: var(--cpd-color-icon-critical-primary);
-    }
-
-    .mx_E2EIconView_verified {
-        color: var(--cpd-color-icon-success-primary);
-    }
 }

src/components/structures/MatrixChat.tsx

@@ -131,7 +131,6 @@ import { ConfirmSessionLockTheftView } from "./auth/ConfirmSessionLockTheftView"
 import { LoginSplashView } from "./auth/LoginSplashView";
 import { cleanUpDraftsIfRequired } from "../../DraftCleaner";
 import { InitialCryptoSetupStore } from "../../stores/InitialCryptoSetupStore";
-import { AppTitleContext } from "@matrix-org/react-sdk-module-api/lib/lifecycles/BrandingExtensions";
 
 // legacy export
 export { default as Views } from "../../Views";
@@ -224,6 +223,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private tokenLogin?: boolean;
     // What to focus on next component update, if anything
     private focusNext: FocusNextType;
+    private subTitleStatus: string;
     private prevWindowWidth: number;
 
     private readonly loggedInView = createRef<LoggedInViewType>();
@@ -232,8 +232,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private fontWatcher?: FontWatcher;
     private readonly stores: SdkContextClass;
 
-    private subtitleContext?: {unreadNotificationCount: number, userNotificationLevel: NotificationLevel, syncState: SyncState};
-
     public constructor(props: IProps) {
         super(props);
         this.stores = SdkContextClass.instance;
@@ -277,6 +275,10 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         }
 
         this.prevWindowWidth = UIStore.instance.windowWidth || 1000;
+
+        // object field used for tracking the status info appended to the title tag.
+        // we don't do it as react state as i'm scared about triggering needless react refreshes.
+        this.subTitleStatus = "";
     }
 
     /**
@@ -1472,7 +1474,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             collapseLhs: false,
             currentRoomId: null,
         });
-        this.subtitleContext = undefined;
+        this.subTitleStatus = "";
         this.setPageSubtitle();
         this.stores.onLoggedOut();
     }
@@ -1488,7 +1490,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             collapseLhs: false,
             currentRoomId: null,
         });
-        this.subtitleContext = undefined;
+        this.subTitleStatus = "";
         this.setPageSubtitle();
     }
 
@@ -1939,51 +1941,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
-    private setPageSubtitle(): void {
-        const extraContext = this.subtitleContext;
-        let context: AppTitleContext = {
-            brand: SdkConfig.get().brand,
-            syncError: extraContext?.syncState === SyncState.Error,
-            notificationsMuted: extraContext && extraContext.userNotificationLevel < NotificationLevel.Activity,
-            unreadNotificationCount: extraContext?.unreadNotificationCount,
-        };
-
+    private setPageSubtitle(subtitle = ""): void {
         if (this.state.currentRoomId) {
             const client = MatrixClientPeg.get();
             const room = client?.getRoom(this.state.currentRoomId);
-            context = {
-                ...context,
-                roomId: this.state.currentRoomId,
-                roomName: room?.name,
-            };
-        }
-
-        const moduleTitle = ModuleRunner.instance.extensions.branding?.getAppTitle(context);
-        if (moduleTitle) {
-            if (document.title !== moduleTitle) {
-                document.title = moduleTitle;
-            }
-            return;
-        }
-
-        // Use application default.
-
-        let subtitle = "";
-        if (context?.syncError) {
-            subtitle += `[${_t("common|offline")}] `;
-        }
-        if (context.unreadNotificationCount !== undefined && context.unreadNotificationCount > 0) {
-            subtitle += `[${context.unreadNotificationCount}]`;
-        } else if (context.notificationsMuted !== undefined && !context.notificationsMuted) {
-            subtitle += `*`;
-        }
-
-        if ('roomId' in context && context.roomId) {
-            if (context.roomName) {
-                subtitle = `${subtitle} | ${context.roomName}`;
+            if (room) {
+                subtitle = `${this.subTitleStatus} | ${room.name} ${subtitle}`;
             }
         } else {
-            subtitle = subtitle;
+            subtitle = `${this.subTitleStatus} ${subtitle}`;
         }
 
         const title = `${SdkConfig.get().brand} ${subtitle}`;
@@ -2000,11 +1966,17 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             PlatformPeg.get()!.setErrorStatus(state === SyncState.Error);
             PlatformPeg.get()!.setNotificationCount(numUnreadRooms);
         }
-        this.subtitleContext = {
-            syncState: state,
-            userNotificationLevel: notificationState.level,
-            unreadNotificationCount: numUnreadRooms,
-        };
+
+        this.subTitleStatus = "";
+        if (state === SyncState.Error) {
+            this.subTitleStatus += `[${_t("common|offline")}] `;
+        }
+        if (numUnreadRooms > 0) {
+            this.subTitleStatus += `[${numUnreadRooms}]`;
+        } else if (notificationState.level >= NotificationLevel.Activity) {
+            this.subTitleStatus += `*`;
+        }
+
         this.setPageSubtitle();
     };
 

src/components/viewmodels/memberlist/MemberListViewModel.tsx

@@ -99,8 +99,12 @@ export function sdkRoomMemberToRoomMember(member: SdkRoomMember): Member {
     };
 }
 
+export const SEPARATOR = "SEPARATOR";
+export type MemberWithSeparator = Member | typeof SEPARATOR;
+
 export interface MemberListViewState {
-    members: Member[];
+    members: MemberWithSeparator[];
+    memberCount: number;
     search: (searchQuery: string) => void;
     isPresenceEnabled: boolean;
     shouldShowInvite: boolean;
@@ -118,10 +122,16 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
     }
 
     const sdkContext = useContext(SDKContext);
-    const [memberMap, setMemberMap] = useState<Map<string, Member>>(new Map());
+    const [memberMap, setMemberMap] = useState<Map<string, MemberWithSeparator>>(new Map());
     const [isLoading, setIsLoading] = useState<boolean>(true);
     // This is the last known total number of members in this room.
     const [totalMemberCount, setTotalMemberCount] = useState(0);
+    /**
+     * This is the current number of members in the list.
+     * This number will be less than the total number of members
+     * in the room when the search functionality is used.
+     */
+    const [memberCount, setMemberCount] = useState(0);
 
     const loadMembers = useMemo(
         () =>
@@ -131,24 +141,34 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
                         roomId,
                         searchQuery,
                     );
-                    const newMemberMap = new Map<string, Member>();
-                    // First add the invited room members
-                    for (const member of invitedSdk) {
-                        const roomMember = sdkRoomMemberToRoomMember(member);
-                        newMemberMap.set(member.userId, roomMember);
-                    }
-                    // Then add the third party invites
                     const threePidInvited = getPending3PidInvites(room, searchQuery);
-                    for (const invited of threePidInvited) {
-                        const key = invited.threePidInvite!.event.getContent().display_name;
-                        newMemberMap.set(key, invited);
-                    }
-                    // Finally add the joined room members
+
+                    const newMemberMap = new Map<string, MemberWithSeparator>();
+
+                    // First add the joined room members
                     for (const member of joinedSdk) {
                         const roomMember = sdkRoomMemberToRoomMember(member);
                         newMemberMap.set(member.userId, roomMember);
                     }
+
+                    // Then a separator if needed
+                    if (joinedSdk.length > 0 && (invitedSdk.length > 0 || threePidInvited.length > 0))
+                        newMemberMap.set(SEPARATOR, SEPARATOR);
+
+                    // Then add the invited room members
+                    for (const member of invitedSdk) {
+                        const roomMember = sdkRoomMemberToRoomMember(member);
+                        newMemberMap.set(member.userId, roomMember);
+                    }
+
+                    // Finally add the third party invites
+                    for (const invited of threePidInvited) {
+                        const key = invited.threePidInvite!.event.getContent().display_name;
+                        newMemberMap.set(key, invited);
+                    }
+
                     setMemberMap(newMemberMap);
+                    setMemberCount(joinedSdk.length + invitedSdk.length + threePidInvited.length);
                     if (!searchQuery) {
                         /**
                          * Since searching for members only gives you the relevant
@@ -241,6 +261,7 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
 
     return {
         members: Array.from(memberMap.values()),
+        memberCount,
         search: loadMembers,
         shouldShowInvite,
         isPresenceEnabled,

src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import dis from "../../../../dispatcher/dispatcher";
 import { Action } from "../../../../dispatcher/actions";
 import { ThreePIDInvite } from "../../../../models/rooms/ThreePIDInvite";
+import { _t } from "../../../../languageHandler";
 
 interface ThreePidTileViewModelProps {
     threePidInvite: ThreePIDInvite;
@@ -16,6 +17,7 @@ interface ThreePidTileViewModelProps {
 export interface ThreePidTileViewState {
     name: string;
     onClick: () => void;
+    userLabel?: string;
 }
 
 export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): ThreePidTileViewState {
@@ -28,8 +30,11 @@ export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): Thr
         });
     };
 
+    const userLabel = `(${_t("member_list|invited_label")})`;
+
     return {
         name,
         onClick,
+        userLabel,
     };
 }

src/components/views/elements/LabelledToggleSwitch.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import classNames from "classnames";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import ToggleSwitch from "./ToggleSwitch";
 import { Caption } from "../typography/Caption";
@@ -36,7 +36,7 @@ interface IProps {
 }
 
 export default class LabelledToggleSwitch extends React.PureComponent<IProps> {
-    private readonly id = `mx_LabelledToggleSwitch_${randomString(12)}`;
+    private readonly id = `mx_LabelledToggleSwitch_${secureRandomString(12)}`;
 
     public render(): React.ReactNode {
         // This is a minimal version of a SettingsFlag

src/components/views/elements/SettingsFlag.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
@@ -35,7 +35,7 @@ interface IState {
 }
 
 export default class SettingsFlag extends React.Component<IProps, IState> {
-    private readonly id = `mx_SettingsFlag_${randomString(12)}`;
+    private readonly id = `mx_SettingsFlag_${secureRandomString(12)}`;
 
     public constructor(props: IProps) {
         super(props);

src/components/views/elements/StyledCheckbox.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { Ref } from "react";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import classnames from "classnames";
 
 export enum CheckboxStyle {
@@ -33,7 +33,7 @@ export default class StyledCheckbox extends React.PureComponent<IProps, IState>
     public constructor(props: IProps) {
         super(props);
         // 56^10 so unlikely chance of collision.
-        this.id = this.props.id || "checkbox_" + randomString(10);
+        this.id = this.props.id || "checkbox_" + secureRandomString(10);
     }
 
     public render(): React.ReactNode {

src/components/views/messages/MBeaconBody.tsx

@@ -18,7 +18,7 @@ import {
     ContentHelpers,
     M_BEACON,
 } from "matrix-js-sdk/src/matrix";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import classNames from "classnames";
 
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -81,10 +81,10 @@ const useBeaconState = (
 // eg thread and main timeline, reply
 // maplibregl needs a unique id to attach the map instance to
 const useUniqueId = (eventId: string): string => {
-    const [id, setId] = useState(`${eventId}_${randomString(8)}`);
+    const [id, setId] = useState(`${eventId}_${secureRandomString(8)}`);
 
     useEffect(() => {
-        setId(`${eventId}_${randomString(8)}`);
+        setId(`${eventId}_${secureRandomString(8)}`);
     }, [eventId]);
 
     return id;

src/components/views/messages/MLocationBody.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { MatrixEvent, ClientEvent, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { Tooltip } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
@@ -41,7 +41,7 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
 
         // multiple instances of same map might be in document
         // eg thread and main timeline, reply
-        const idSuffix = `${props.mxEvent.getId()}_${randomString(8)}`;
+        const idSuffix = `${props.mxEvent.getId()}_${secureRandomString(8)}`;
         this.mapId = `mx_MLocationBody_${idSuffix}`;
 
         this.reconnectedListener = createReconnectedListener(this.clearError);

src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -88,12 +88,10 @@ function getHeaderLabelJSX(vm: MemberListViewState): React.ReactNode {
             </Flex>
         );
     }
-
-    const filteredMemberCount = vm.members.length;
-    if (filteredMemberCount === 0) {
+    if (vm.memberCount === 0) {
         return _t("member_list|no_matches");
     }
-    return _t("member_list|count", { count: filteredMemberCount });
+    return _t("member_list|count", { count: vm.memberCount });
 }
 
 export const MemberListHeaderView: React.FC<Props> = (props: Props) => {

src/components/views/rooms/MemberList/MemberListView.tsx

@@ -11,7 +11,11 @@ import { List, ListRowProps } from "react-virtualized/dist/commonjs/List";
 import { AutoSizer } from "react-virtualized";
 
 import { Flex } from "../../../utils/Flex";
-import { useMemberListViewModel } from "../../../viewmodels/memberlist/MemberListViewModel";
+import {
+    MemberWithSeparator,
+    SEPARATOR,
+    useMemberListViewModel,
+} from "../../../viewmodels/memberlist/MemberListViewModel";
 import { RoomMemberTileView } from "./tiles/RoomMemberTileView";
 import { ThreePidInviteTileView } from "./tiles/ThreePidInviteTileView";
 import { MemberListHeaderView } from "./MemberListHeaderView";
@@ -26,10 +30,41 @@ interface IProps {
 const MemberListView: React.FC<IProps> = (props: IProps) => {
     const vm = useMemberListViewModel(props.roomId);
 
-    const memberCount = vm.members.length;
+    const totalRows = vm.members.length;
+
+    const getRowComponent = (item: MemberWithSeparator): React.JSX.Element => {
+        if (item === SEPARATOR) {
+            return <hr className="mx_MemberListView_separator" />;
+        } else if (item.member) {
+            return <RoomMemberTileView member={item.member} showPresence={vm.isPresenceEnabled} />;
+        } else {
+            return <ThreePidInviteTileView threePidInvite={item.threePidInvite} />;
+        }
+    };
+
+    const getRowHeight = ({ index }: { index: number }): number => {
+        if (vm.members[index] === SEPARATOR) {
+            /**
+             * This is a separator of 2px height rendered between
+             * joined and invited members.
+             */
+            return 2;
+        } else if (totalRows && index === totalRows) {
+            /**
+             * The empty spacer div rendered at the bottom should
+             * have a height of 32px.
+             */
+            return 32;
+        } else {
+            /**
+             * The actual member tiles have a height of 56px.
+             */
+            return 56;
+        }
+    };
 
     const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
-        if (index === memberCount) {
+        if (index === totalRows) {
             // We've rendered all the members,
             // now we render an empty div to add some space to the end of the list.
             return <div key={key} style={style} />;
@@ -37,11 +72,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
         const item = vm.members[index];
         return (
             <div key={key} style={style}>
-                {item.member ? (
-                    <RoomMemberTileView member={item.member} showPresence={vm.isPresenceEnabled} />
-                ) : (
-                    <ThreePidInviteTileView threePidInvite={item.threePidInvite} />
-                )}
+                {getRowComponent(item)}
             </div>
         );
     };
@@ -63,11 +94,9 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
                     {({ height, width }) => (
                         <List
                             rowRenderer={rowRenderer}
-                            // All the member tiles will have a height of 56px.
-                            // The additional empty div at the end of the list should have a height of 32px.
-                            rowHeight={({ index }) => (index === memberCount ? 32 : 56)}
+                            rowHeight={getRowHeight}
                             // The +1 refers to the additional empty div that we render at the end of the list.
-                            rowCount={memberCount + 1}
+                            rowCount={totalRows + 1}
                             // Subtract the height of MemberlistHeaderView so that the parent div does not overflow.
                             height={height - 113}
                             width={width}

src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx

@@ -14,7 +14,8 @@ import { E2EIconView } from "./common/E2EIconView";
 import AvatarPresenceIconView from "./common/PresenceIconView";
 import BaseAvatar from "../../../avatars/BaseAvatar";
 import { _t } from "../../../../../languageHandler";
-import { MemberTileLayout } from "./common/MemberTileLayout";
+import { MemberTileView } from "./common/MemberTileView";
+import { InvitedIconView } from "./common/InvitedIconView";
 
 interface IProps {
     member: RoomMember;
@@ -43,25 +44,23 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
         presenceJSX = <AvatarPresenceIconView presenceState={presenceState} />;
     }
 
-    let userLabelJSX;
-    if (vm.userLabel) {
-        userLabelJSX = <div className="mx_MemberTileView_user_label">{vm.userLabel}</div>;
-    }
-
-    let e2eIcon;
+    let iconJsx;
     if (vm.e2eStatus) {
-        e2eIcon = <E2EIconView status={vm.e2eStatus} />;
+        iconJsx = <E2EIconView status={vm.e2eStatus} />;
+    }
+    if (member.isInvite) {
+        iconJsx = <InvitedIconView isThreePid={false} />;
     }
 
     return (
-        <MemberTileLayout
+        <MemberTileView
             title={vm.title}
             onClick={vm.onClick}
             avatarJsx={av}
             presenceJsx={presenceJSX}
             nameJsx={nameJSX}
-            userLabelJsx={userLabelJSX}
-            e2eIconJsx={e2eIcon}
+            userLabel={vm.userLabel}
+            iconJsx={iconJsx}
         />
     );
 }

src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx

@@ -10,7 +10,8 @@ import React from "react";
 import { useThreePidTileViewModel } from "../../../../viewmodels/memberlist/tiles/ThreePidTileViewModel";
 import { ThreePIDInvite } from "../../../../../models/rooms/ThreePIDInvite";
 import BaseAvatar from "../../../avatars/BaseAvatar";
-import { MemberTileLayout } from "./common/MemberTileLayout";
+import { MemberTileView } from "./common/MemberTileView";
+import { InvitedIconView } from "./common/InvitedIconView";
 
 interface Props {
     threePidInvite: ThreePIDInvite;
@@ -19,5 +20,15 @@ interface Props {
 export function ThreePidInviteTileView(props: Props): JSX.Element {
     const vm = useThreePidTileViewModel(props);
     const av = <BaseAvatar name={vm.name} size="32px" aria-hidden="true" />;
-    return <MemberTileLayout nameJsx={vm.name} avatarJsx={av} onClick={vm.onClick} />;
+    const iconJsx = <InvitedIconView isThreePid={true} />;
+
+    return (
+        <MemberTileView
+            nameJsx={vm.name}
+            avatarJsx={av}
+            onClick={vm.onClick}
+            userLabel={vm.userLabel}
+            iconJsx={iconJsx}
+        />
+    );
 }

src/components/views/rooms/MemberList/tiles/common/InvitedIconView.tsx

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector 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 React from "react";
+import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
+import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
+
+import { Flex } from "../../../../../utils/Flex";
+
+interface Props {
+    isThreePid: boolean;
+}
+
+export function InvitedIconView({ isThreePid }: Props): JSX.Element {
+    const Icon = isThreePid ? EmailIcon : UserAddIcon;
+    return (
+        <Flex align="center" className="mx_InvitedIconView">
+            <Icon height="16px" width="16px" />
+        </Flex>
+    );
+}

src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx

@@ -15,11 +15,16 @@ interface Props {
     onClick: () => void;
     title?: string;
     presenceJsx?: JSX.Element;
-    userLabelJsx?: JSX.Element;
-    e2eIconJsx?: JSX.Element;
+    userLabel?: React.ReactNode;
+    iconJsx?: JSX.Element;
 }
 
-export function MemberTileLayout(props: Props): JSX.Element {
+export function MemberTileView(props: Props): JSX.Element {
+    let userLabelJsx: React.ReactNode;
+    if (props.userLabel) {
+        userLabelJsx = <div className="mx_MemberTileView_userLabel">{props.userLabel}</div>;
+    }
+
     return (
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         <div>
@@ -31,8 +36,8 @@ export function MemberTileLayout(props: Props): JSX.Element {
                     <div className="mx_MemberTileView_name">{props.nameJsx}</div>
                 </div>
                 <div className="mx_MemberTileView_right">
-                    {props.userLabelJsx}
-                    {props.e2eIconJsx}
+                    {userLabelJsx}
+                    {props.iconJsx}
                 </div>
             </AccessibleButton>
         </div>

src/models/Call.ts

@@ -18,7 +18,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership, Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { NamespacedValue } from "matrix-js-sdk/src/NamespacedValue";
 import { IWidgetApiRequest } from "matrix-widget-api";
@@ -743,7 +743,7 @@ export class ElementCall extends Call {
         const url = ElementCall.generateWidgetUrl(client, roomId);
         return WidgetStore.instance.addVirtualWidget(
             {
-                id: randomString(24), // So that it's globally unique
+                id: secureRandomString(24), // So that it's globally unique
                 creatorUserId: client.getUserId()!,
                 name: "Element Call",
                 type: WidgetType.CALL.preferred,

src/modules/ModuleRunner.ts

@@ -17,10 +17,6 @@ import {
     DefaultExperimentalExtensions,
     ProvideExperimentalExtensions,
 } from "@matrix-org/react-sdk-module-api/lib/lifecycles/ExperimentalExtensions";
-import {
-    ProvideBrandingExtensions,
-} from "@matrix-org/react-sdk-module-api/lib/lifecycles/BrandingExtensions";
-
 
 import { AppModule } from "./AppModule";
 import { ModuleFactory } from "./ModuleFactory";
@@ -34,7 +30,6 @@ class ExtensionsManager {
     // Private backing fields for extensions
     private cryptoSetupExtension: ProvideCryptoSetupExtensions;
     private experimentalExtension: ProvideExperimentalExtensions;
-    private brandingExtension?: ProvideBrandingExtensions;
 
     /** `true` if `cryptoSetupExtension` is the default implementation; `false` if it is implemented by a module. */
     private hasDefaultCryptoSetupExtension = true;
@@ -72,15 +67,6 @@ class ExtensionsManager {
         return this.experimentalExtension;
     }
 
-    /**
-     * Provides branding extension.
-     *
-     * @returns The registered extension. If no module provides this extension, undefined is returned..
-     */
-    public get branding(): ProvideBrandingExtensions|undefined {
-        return this.brandingExtension;
-    }
-
     /**
      * Add any extensions provided by the module.
      *
@@ -114,16 +100,6 @@ class ExtensionsManager {
                 );
             }
         }
-
-        if (runtimeModule.extensions?.branding) {
-            if (!this.brandingExtension) {
-                this.brandingExtension = runtimeModule.extensions?.branding;
-            } else {
-                throw new Error(
-                    `adding experimental branding implementation from module ${runtimeModule.moduleName} but an implementation was already provided.`,
-                );
-            }
-        }
     }
 }
 

src/rageshake/rageshake.ts

@@ -31,7 +31,7 @@ Please see LICENSE files in the repository root for full details.
 
 // the frequency with which we flush to indexeddb
 import { logger } from "matrix-js-sdk/src/logger";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import { getCircularReplacer } from "../utils/JSON";
 
@@ -135,7 +135,7 @@ export class IndexedDBLogStore {
         private indexedDB: IDBFactory,
         private logger: ConsoleLogger,
     ) {
-        this.id = "instance-" + randomString(16);
+        this.id = "instance-" + secureRandomString(16);
     }
 
     /**

src/utils/WidgetUtils.ts

@@ -9,12 +9,13 @@ Please see LICENSE files in the repository root for full details.
 
 import { useCallback, useEffect, useState } from "react";
 import { base32 } from "rfc4648";
+import { capitalize } from "lodash";
 import { IWidget, IWidgetData } from "matrix-widget-api";
 import { Room, ClientEvent, MatrixClient, RoomStateEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
-import { randomString, randomLowercaseString, randomUppercaseString } from "matrix-js-sdk/src/randomstring";
+import { LOWERCASE, secureRandomString, secureRandomStringFrom } from "matrix-js-sdk/src/randomstring";
 
 import PlatformPeg from "../PlatformPeg";
 import SdkConfig from "../SdkConfig";
@@ -427,7 +428,10 @@ export default class WidgetUtils {
     ): Promise<void> {
         const domain = Jitsi.getInstance().preferredDomain;
         const auth = (await Jitsi.getInstance().getJitsiAuth()) ?? undefined;
-        const widgetId = randomString(24); // Must be globally unique
+
+        // Must be globally unique, although predicatablity is not important, the js-sdk has functions to generate
+        // secure ranom strings, and speed is not important here.
+        const widgetId = secureRandomString(24);
 
         let confId: string;
         if (auth === "openidtoken-jwt") {
@@ -437,8 +441,8 @@ export default class WidgetUtils {
             // https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
             confId = base32.stringify(new TextEncoder().encode(roomId), { pad: false });
         } else {
-            // Create a random conference ID
-            confId = `Jitsi${randomUppercaseString(1)}${randomLowercaseString(23)}`;
+            // Create a random conference ID (capitalised so the name looks sensible in Jitsi)
+            confId = `Jitsi${capitalize(secureRandomStringFrom(24, LOWERCASE))}`;
         }
 
         // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets

src/utils/oidc/authorize.ts

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { completeAuthorizationCodeGrant, generateOidcAuthorizationUrl } from "matrix-js-sdk/src/oidc/authorize";
 import { QueryDict } from "matrix-js-sdk/src/utils";
 import { OidcClientConfig } from "matrix-js-sdk/src/matrix";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { IdTokenClaims } from "oidc-client-ts";
 
 import { OidcClientError } from "./error";
@@ -34,7 +34,7 @@ export const startOidcLogin = async (
 ): Promise<void> => {
     const redirectUri = PlatformPeg.get()!.getOidcCallbackUrl().href;
 
-    const nonce = randomString(10);
+    const nonce = secureRandomString(10);
 
     const prompt = isRegistration ? "create" : undefined;
 

src/vector/platform/ElectronPlatform.tsx

@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { MatrixClient, Room, MatrixEvent, OidcRegistrationClientMetadata } from "matrix-js-sdk/src/matrix";
 import React from "react";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import BasePlatform, { UpdateCheckStatus, UpdateStatus } from "../../BasePlatform";
@@ -93,7 +93,7 @@ export default class ElectronPlatform extends BasePlatform {
     private readonly ipc = new IPCManager("ipcCall", "ipcReply");
     private readonly eventIndexManager: BaseEventIndexManager = new SeshatIndexManager();
     // this is the opaque token we pass to the HS which when we get it in our callback we can resolve to a profile
-    private readonly ssoID: string = randomString(32);
+    private readonly ssoID: string = secureRandomString(32);
 
     public constructor() {
         super();

test/setupTests.ts

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import "@testing-library/jest-dom";
 import "blob-polyfill";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { mocked } from "jest-mock";
 
 import { PredictableRandom } from "./test-utils/predictableRandom"; // https://github.com/jsdom/jsdom/issues/2555
@@ -25,7 +25,8 @@ jest.mock("matrix-js-sdk/src/randomstring");
 beforeEach(() => {
     const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
     const mockRandom = new PredictableRandom();
-    mocked(randomString).mockImplementation((len) => {
+    // needless to say, the mock is not cryptographically secure
+    mocked(secureRandomString).mockImplementation((len) => {
         let ret = "";
         for (let i = 0; i < len; ++i) {
             const v = mockRandom.get() * chars.length;

test/test-utils/poll.ts

@@ -18,7 +18,7 @@ import {
     M_POLL_RESPONSE,
     M_TEXT,
 } from "matrix-js-sdk/src/matrix";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import { flushPromises } from "./utilities";
 
@@ -67,7 +67,7 @@ export const makePollEndEvent = (
     id?: string,
 ): MatrixEvent => {
     return new MatrixEvent({
-        event_id: id || randomString(16),
+        event_id: id || secureRandomString(16),
         room_id: roomId,
         origin_server_ts: ts,
         type: M_POLL_END.name,
@@ -91,7 +91,7 @@ export const makePollResponseEvent = (
     ts = 0,
 ): MatrixEvent =>
     new MatrixEvent({
-        event_id: randomString(16),
+        event_id: secureRandomString(16),
         room_id: roomId,
         origin_server_ts: ts,
         type: M_POLL_RESPONSE.name,

test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

@@ -224,7 +224,29 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
       </div>
       <div
         class="mx_MemberTileView_right"
-      />
+      >
+        <div
+          class="mx_MemberTileView_userLabel"
+        >
+          (Invited)
+        </div>
+        <div
+          class="mx_Flex mx_InvitedIconView"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0;"
+        >
+          <svg
+            fill="currentColor"
+            height="16px"
+            viewBox="0 0 24 24"
+            width="16px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 5.111a1 1 0 0 0 .514.874l7 3.89a1 1 0 0 0 .972 0l7-3.89a1 1 0 1 0-.972-1.748L12 11.856 5.486 8.237A1 1 0 0 0 4 9.111Z"
+            />
+          </svg>
+        </div>
+      </div>
     </div>
   </div>
 </div>

test/unit-tests/components/views/settings/Notifications-test.tsx

@@ -23,7 +23,7 @@ import {
     IThreepid,
     ThreepidMedium,
 } from "matrix-js-sdk/src/matrix";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import {
     act,
     fireEvent,
@@ -287,7 +287,7 @@ describe("<Notifications />", () => {
 
     beforeEach(async () => {
         let i = 0;
-        mocked(randomString).mockImplementation(() => {
+        mocked(secureRandomString).mockImplementation(() => {
             return "testid_" + i++;
         });
 

test/unit-tests/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { randomString } from "matrix-js-sdk/src/randomstring";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { act, fireEvent, render, RenderResult } from "jest-matrix-react";
 import { EventType, MatrixClient, Room, GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/matrix";
 
@@ -92,7 +92,7 @@ describe("<SpaceSettingsVisibilityTab />", () => {
 
     beforeEach(() => {
         let i = 0;
-        mocked(randomString).mockImplementation(() => {
+        mocked(secureRandomString).mockImplementation(() => {
             return "testid_" + i++;
         });
 

test/unit-tests/utils/oidc/authorize-test.ts

@@ -49,7 +49,7 @@ describe("OIDC authorization", () => {
             origin: baseUrl,
         };
 
-        jest.spyOn(randomStringUtils, "randomString").mockRestore();
+        jest.spyOn(randomStringUtils, "secureRandomString").mockRestore();
         mockPlatformPeg();
         Object.defineProperty(window, "crypto", {
             value: {

yarn.lock

@@ -3529,7 +3529,7 @@
     ts-xor "^1.3.0"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.0-af862ffd231dc0a6b8d6f2cb3601e68456c0ff24-integrity/node_modules/bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../../.cache/yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.0-af862ffd231dc0a6b8d6f2cb3601e68456c0ff24-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
   uid ""
 
@@ -8240,9 +8240,9 @@ jwt-decode@4.0.0, jwt-decode@^4.0.0:
   integrity sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==
 
 katex@^0.16.0:
-  version "0.16.11"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.11.tgz#4bc84d5584f996abece5f01c6ad11304276a33f5"
-  integrity sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==
+  version "0.16.21"
+  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.21.tgz#8f63c659e931b210139691f2cc7bb35166b792a3"
+  integrity sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==
   dependencies:
     commander "^8.3.0"
 
@@ -8635,9 +8635,10 @@ 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":
-  version "36.0.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/07f97d724f755a131571511af6662d4e3b345728"
+matrix-js-sdk@36.1.0:
+  version "36.1.0"
+  resolved "https://registry.yarnpkg.com/matrix-js-sdk/-/matrix-js-sdk-36.1.0.tgz#3685a85c0c1adf4e2c3622bce76c11430963f23d"
+  integrity sha512-KNPswMSAGKDxBybJedxRpWadaRes9paxmjTCUsQT8t1Jg3ZENraAt6ynIaxh6PxazAH9D5ly6EYKHaLMLbZ1Dg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm" "^12.1.0"