Fix so that we still use notificationsMuted / unread even if a room isn't in view.

.github/workflows/deploy.yml

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

CHANGELOG.md

@@ -1,21 +1,3 @@
-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.91",
+    "version": "1.11.90",
     "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": "36.1.0",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
         "matrix-widget-api": "^1.10.0",
         "memoize-one": "^6.0.0",
         "mime": "^4.0.4",

playwright/e2e/branding/title.spec.ts

@@ -0,0 +1,43 @@
+/*
+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,6 +69,11 @@ 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:5d62b61c4373eaca25df6c6bb99fc1be92f8f40b8abebd8897bf5b2af9eb137a";
+const TAG = "develop@sha256:e48308d68dec00af6ce43a05785d475de21a37bc2afaabb440d3a575bcc3d57d";
 
 const DEFAULT_CONFIG = {
     server_name: "localhost",

res/css/_components.pcss

@@ -283,7 +283,6 @@
 @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

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

res/css/views/rooms/_MemberListView.pcss

@@ -14,10 +14,4 @@ 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,10 +31,9 @@ Please see LICENSE files in the repository root for full details.
         min-width: 0;
     }
 
-    .mx_MemberTileView_userLabel {
+    .mx_MemberTileView_user_label {
         font: var(--cpd-font-body-sm-regular);
         font-size: 13px;
-        color: var(--cpd-color-text-secondary);
     }
 
     .mx_MemberTileView_avatar {
@@ -42,4 +41,18 @@ 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,6 +131,7 @@ 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";
@@ -223,7 +224,6 @@ 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,6 +232,8 @@ 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;
@@ -275,10 +277,6 @@ 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 = "";
     }
 
     /**
@@ -1474,7 +1472,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             collapseLhs: false,
             currentRoomId: null,
         });
-        this.subTitleStatus = "";
+        this.subtitleContext = undefined;
         this.setPageSubtitle();
         this.stores.onLoggedOut();
     }
@@ -1490,7 +1488,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             collapseLhs: false,
             currentRoomId: null,
         });
-        this.subTitleStatus = "";
+        this.subtitleContext = undefined;
         this.setPageSubtitle();
     }
 
@@ -1941,15 +1939,51 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         });
     }
 
-    private setPageSubtitle(subtitle = ""): void {
+    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,
+        };
+
         if (this.state.currentRoomId) {
             const client = MatrixClientPeg.get();
             const room = client?.getRoom(this.state.currentRoomId);
-            if (room) {
-                subtitle = `${this.subTitleStatus} | ${room.name} ${subtitle}`;
+            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}`;
             }
         } else {
-            subtitle = `${this.subTitleStatus} ${subtitle}`;
+            subtitle = subtitle;
         }
 
         const title = `${SdkConfig.get().brand} ${subtitle}`;
@@ -1966,17 +2000,11 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             PlatformPeg.get()!.setErrorStatus(state === SyncState.Error);
             PlatformPeg.get()!.setNotificationCount(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.subtitleContext = {
+            syncState: state,
+            userNotificationLevel: notificationState.level,
+            unreadNotificationCount: numUnreadRooms,
+        };
         this.setPageSubtitle();
     };
 

src/components/viewmodels/memberlist/MemberListViewModel.tsx

@@ -99,12 +99,8 @@ export function sdkRoomMemberToRoomMember(member: SdkRoomMember): Member {
     };
 }
 
-export const SEPARATOR = "SEPARATOR";
-export type MemberWithSeparator = Member | typeof SEPARATOR;
-
 export interface MemberListViewState {
-    members: MemberWithSeparator[];
-    memberCount: number;
+    members: Member[];
     search: (searchQuery: string) => void;
     isPresenceEnabled: boolean;
     shouldShowInvite: boolean;
@@ -122,16 +118,10 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
     }
 
     const sdkContext = useContext(SDKContext);
-    const [memberMap, setMemberMap] = useState<Map<string, MemberWithSeparator>>(new Map());
+    const [memberMap, setMemberMap] = useState<Map<string, Member>>(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(
         () =>
@@ -141,34 +131,24 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
                         roomId,
                         searchQuery,
                     );
-                    const threePidInvited = getPending3PidInvites(room, searchQuery);
-
-                    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
+                    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);
                     }
-
-                    // Finally add the third party invites
+                    // 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
+                    for (const member of joinedSdk) {
+                        const roomMember = sdkRoomMemberToRoomMember(member);
+                        newMemberMap.set(member.userId, roomMember);
+                    }
                     setMemberMap(newMemberMap);
-                    setMemberCount(joinedSdk.length + invitedSdk.length + threePidInvited.length);
                     if (!searchQuery) {
                         /**
                          * Since searching for members only gives you the relevant
@@ -261,7 +241,6 @@ 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,7 +8,6 @@ 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;
@@ -17,7 +16,6 @@ interface ThreePidTileViewModelProps {
 export interface ThreePidTileViewState {
     name: string;
     onClick: () => void;
-    userLabel?: string;
 }
 
 export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): ThreePidTileViewState {
@@ -30,11 +28,8 @@ 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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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_${secureRandomString(12)}`;
+    private readonly id = `mx_LabelledToggleSwitch_${randomString(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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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_${secureRandomString(12)}`;
+    private readonly id = `mx_SettingsFlag_${randomString(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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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_" + secureRandomString(10);
+        this.id = this.props.id || "checkbox_" + randomString(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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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}_${secureRandomString(8)}`);
+    const [id, setId] = useState(`${eventId}_${randomString(8)}`);
 
     useEffect(() => {
-        setId(`${eventId}_${secureRandomString(8)}`);
+        setId(`${eventId}_${randomString(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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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()}_${secureRandomString(8)}`;
+        const idSuffix = `${props.mxEvent.getId()}_${randomString(8)}`;
         this.mapId = `mx_MLocationBody_${idSuffix}`;
 
         this.reconnectedListener = createReconnectedListener(this.clearError);

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

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

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

@@ -11,11 +11,7 @@ import { List, ListRowProps } from "react-virtualized/dist/commonjs/List";
 import { AutoSizer } from "react-virtualized";
 
 import { Flex } from "../../../utils/Flex";
-import {
-    MemberWithSeparator,
-    SEPARATOR,
-    useMemberListViewModel,
-} from "../../../viewmodels/memberlist/MemberListViewModel";
+import { useMemberListViewModel } from "../../../viewmodels/memberlist/MemberListViewModel";
 import { RoomMemberTileView } from "./tiles/RoomMemberTileView";
 import { ThreePidInviteTileView } from "./tiles/ThreePidInviteTileView";
 import { MemberListHeaderView } from "./MemberListHeaderView";
@@ -30,41 +26,10 @@ interface IProps {
 const MemberListView: React.FC<IProps> = (props: IProps) => {
     const vm = useMemberListViewModel(props.roomId);
 
-    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 memberCount = vm.members.length;
 
     const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
-        if (index === totalRows) {
+        if (index === memberCount) {
             // 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} />;
@@ -72,7 +37,11 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
         const item = vm.members[index];
         return (
             <div key={key} style={style}>
-                {getRowComponent(item)}
+                {item.member ? (
+                    <RoomMemberTileView member={item.member} showPresence={vm.isPresenceEnabled} />
+                ) : (
+                    <ThreePidInviteTileView threePidInvite={item.threePidInvite} />
+                )}
             </div>
         );
     };
@@ -94,9 +63,11 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
                     {({ height, width }) => (
                         <List
                             rowRenderer={rowRenderer}
-                            rowHeight={getRowHeight}
+                            // 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)}
                             // The +1 refers to the additional empty div that we render at the end of the list.
-                            rowCount={totalRows + 1}
+                            rowCount={memberCount + 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,8 +14,7 @@ import { E2EIconView } from "./common/E2EIconView";
 import AvatarPresenceIconView from "./common/PresenceIconView";
 import BaseAvatar from "../../../avatars/BaseAvatar";
 import { _t } from "../../../../../languageHandler";
-import { MemberTileView } from "./common/MemberTileView";
-import { InvitedIconView } from "./common/InvitedIconView";
+import { MemberTileLayout } from "./common/MemberTileLayout";
 
 interface IProps {
     member: RoomMember;
@@ -44,23 +43,25 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
         presenceJSX = <AvatarPresenceIconView presenceState={presenceState} />;
     }
 
-    let iconJsx;
-    if (vm.e2eStatus) {
-        iconJsx = <E2EIconView status={vm.e2eStatus} />;
+    let userLabelJSX;
+    if (vm.userLabel) {
+        userLabelJSX = <div className="mx_MemberTileView_user_label">{vm.userLabel}</div>;
     }
-    if (member.isInvite) {
-        iconJsx = <InvitedIconView isThreePid={false} />;
+
+    let e2eIcon;
+    if (vm.e2eStatus) {
+        e2eIcon = <E2EIconView status={vm.e2eStatus} />;
     }
 
     return (
-        <MemberTileView
+        <MemberTileLayout
             title={vm.title}
             onClick={vm.onClick}
             avatarJsx={av}
             presenceJsx={presenceJSX}
             nameJsx={nameJSX}
-            userLabel={vm.userLabel}
-            iconJsx={iconJsx}
+            userLabelJsx={userLabelJSX}
+            e2eIconJsx={e2eIcon}
         />
     );
 }

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

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

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

@@ -1,25 +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 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/MemberTileLayout.tsx

@@ -15,16 +15,11 @@ interface Props {
     onClick: () => void;
     title?: string;
     presenceJsx?: JSX.Element;
-    userLabel?: React.ReactNode;
-    iconJsx?: JSX.Element;
+    userLabelJsx?: JSX.Element;
+    e2eIconJsx?: 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>;
-    }
-
+export function MemberTileLayout(props: Props): JSX.Element {
     return (
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         <div>
@@ -36,8 +31,8 @@ export function MemberTileView(props: Props): JSX.Element {
                     <div className="mx_MemberTileView_name">{props.nameJsx}</div>
                 </div>
                 <div className="mx_MemberTileView_right">
-                    {userLabelJsx}
-                    {props.iconJsx}
+                    {props.userLabelJsx}
+                    {props.e2eIconJsx}
                 </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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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: secureRandomString(24), // So that it's globally unique
+                id: randomString(24), // So that it's globally unique
                 creatorUserId: client.getUserId()!,
                 name: "Element Call",
                 type: WidgetType.CALL.preferred,

src/modules/ModuleRunner.ts

@@ -17,6 +17,10 @@ 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";
@@ -30,6 +34,7 @@ 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;
@@ -67,6 +72,15 @@ 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.
      *
@@ -100,6 +114,16 @@ 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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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-" + secureRandomString(16);
+        this.id = "instance-" + randomString(16);
     }
 
     /**

src/utils/WidgetUtils.ts

@@ -9,13 +9,12 @@ 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 { LOWERCASE, secureRandomString, secureRandomStringFrom } from "matrix-js-sdk/src/randomstring";
+import { randomString, randomLowercaseString, randomUppercaseString } from "matrix-js-sdk/src/randomstring";
 
 import PlatformPeg from "../PlatformPeg";
 import SdkConfig from "../SdkConfig";
@@ -428,10 +427,7 @@ export default class WidgetUtils {
     ): Promise<void> {
         const domain = Jitsi.getInstance().preferredDomain;
         const auth = (await Jitsi.getInstance().getJitsiAuth()) ?? undefined;
-
-        // 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);
+        const widgetId = randomString(24); // Must be globally unique
 
         let confId: string;
         if (auth === "openidtoken-jwt") {
@@ -441,8 +437,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 (capitalised so the name looks sensible in Jitsi)
-            confId = `Jitsi${capitalize(secureRandomStringFrom(24, LOWERCASE))}`;
+            // Create a random conference ID
+            confId = `Jitsi${randomUppercaseString(1)}${randomLowercaseString(23)}`;
         }
 
         // 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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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 = secureRandomString(10);
+    const nonce = randomString(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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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 = secureRandomString(32);
+    private readonly ssoID: string = randomString(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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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,8 +25,7 @@ jest.mock("matrix-js-sdk/src/randomstring");
 beforeEach(() => {
     const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
     const mockRandom = new PredictableRandom();
-    // needless to say, the mock is not cryptographically secure
-    mocked(secureRandomString).mockImplementation((len) => {
+    mocked(randomString).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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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 || secureRandomString(16),
+        event_id: id || randomString(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: secureRandomString(16),
+        event_id: randomString(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,29 +224,7 @@ 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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } from "matrix-js-sdk/src/randomstring";
 import {
     act,
     fireEvent,
@@ -287,7 +287,7 @@ describe("<Notifications />", () => {
 
     beforeEach(async () => {
         let i = 0;
-        mocked(secureRandomString).mockImplementation(() => {
+        mocked(randomString).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 { secureRandomString } from "matrix-js-sdk/src/randomstring";
+import { randomString } 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(secureRandomString).mockImplementation(() => {
+        mocked(randomString).mockImplementation(() => {
             return "testid_" + i++;
         });
 

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

@@ -49,7 +49,7 @@ describe("OIDC authorization", () => {
             origin: baseUrl,
         };
 
-        jest.spyOn(randomStringUtils, "secureRandomString").mockRestore();
+        jest.spyOn(randomStringUtils, "randomString").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.21"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.21.tgz#8f63c659e931b210139691f2cc7bb35166b792a3"
-  integrity sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==
+  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==
   dependencies:
     commander "^8.3.0"
 
@@ -8635,10 +8635,9 @@ 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@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==
+"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"
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@matrix-org/matrix-sdk-crypto-wasm" "^12.1.0"