From 656d3e8083a2ca02033cfa5a4e4a5d56f0427f5b Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:15:00 +0530
Subject: [PATCH 01/24] Add new e2e icon for the member tile

---
 res/css/views/rooms/_E2EIconView.pcss         | 20 ++++++++
 src/components/views/rooms/E2EIcon.tsx        |  2 +-
 .../MemberList/tiles/common/E2EIconView.tsx   | 47 +++++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 res/css/views/rooms/_E2EIconView.pcss
 create mode 100644 src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx

diff --git a/res/css/views/rooms/_E2EIconView.pcss b/res/css/views/rooms/_E2EIconView.pcss
new file mode 100644
index 00000000000..19952db2007
--- /dev/null
+++ b/res/css/views/rooms/_E2EIconView.pcss
@@ -0,0 +1,20 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.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);
+}
diff --git a/src/components/views/rooms/E2EIcon.tsx b/src/components/views/rooms/E2EIcon.tsx
index 29899e85ba9..99ac07e0ecb 100644
--- a/src/components/views/rooms/E2EIcon.tsx
+++ b/src/components/views/rooms/E2EIcon.tsx
@@ -22,7 +22,7 @@ export enum E2EState {
     Normal = "normal",
 }
 
-const crossSigningUserTitles: { [key in E2EState]?: TranslationKey } = {
+export const crossSigningUserTitles: { [key in E2EState]?: TranslationKey } = {
     [E2EState.Warning]: _td("encryption|cross_signing_user_warning"),
     [E2EState.Normal]: _td("encryption|cross_signing_user_normal"),
     [E2EState.Verified]: _td("encryption|cross_signing_user_verified"),
diff --git a/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx b/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx
new file mode 100644
index 00000000000..9d3212f5e76
--- /dev/null
+++ b/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx
@@ -0,0 +1,47 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { Tooltip } from "@vector-im/compound-web";
+import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+
+import { _t } from "../../../../../../languageHandler";
+import { E2EStatus } from "../../../../../../utils/ShieldUtils";
+import { E2EState, crossSigningUserTitles } from "../../../E2EIcon";
+
+function getIconFromStatus(status: E2EState | E2EStatus): React.JSX.Element | undefined {
+    switch (status) {
+        case E2EState.Normal:
+        case E2EStatus.Normal:
+            return undefined;
+        case E2EState.Verified:
+        case E2EStatus.Verified:
+            return <VerifiedIcon height="16px" width="16px" className="mx_E2EIconView_verified" />;
+        case E2EState.Warning:
+        case E2EStatus.Warning:
+            return <ErrorIcon height="16px" width="16px" className="mx_E2EIconView_warning" />;
+    }
+}
+
+interface Props {
+    status: E2EState | E2EStatus;
+}
+
+export const E2EIconView: React.FC<Props> = ({ status }) => {
+    const e2eTitle = crossSigningUserTitles[status];
+    const label = e2eTitle ? _t(e2eTitle) : "";
+
+    const icon = getIconFromStatus(status);
+    if (!icon) return null;
+
+    return (
+        <Tooltip label={label}>
+            <div className="mx_E2EIconView">{icon}</div>
+        </Tooltip>
+    );
+};

From 45c1bd13a4f2710fe0bb4a26ba6bd93a08c3bb9c Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:27:20 +0530
Subject: [PATCH 02/24] Add new presence icon for member tile

---
 res/css/views/rooms/_PresenceIconView.pcss    | 32 ++++++++++++++
 .../tiles/common/PresenceIconView.tsx         | 44 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 res/css/views/rooms/_PresenceIconView.pcss
 create mode 100644 src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx

diff --git a/res/css/views/rooms/_PresenceIconView.pcss b/res/css/views/rooms/_PresenceIconView.pcss
new file mode 100644
index 00000000000..6be4ac47827
--- /dev/null
+++ b/res/css/views/rooms/_PresenceIconView.pcss
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_PresenceIconView {
+    position: absolute;
+    top: 24px;
+    left: 24px;
+    width: 12px;
+    height: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--cpd-color-bg-canvas-default);
+    border-radius: 100%;
+
+    .mx_PresenceIconView_online {
+        color: var(--cpd-color-icon-accent-primary);
+    }
+
+    .mx_PresenceIconView_offline,
+    .mx_PresenceIconView_dnd {
+        color: var(--cpd-color-icon-tertiary);
+    }
+
+    .mx_PresenceIconView_unavailable {
+        color: var(--cpd-color-icon-quaternary);
+    }
+}
diff --git a/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx b/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
new file mode 100644
index 00000000000..18aaa13a239
--- /dev/null
+++ b/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import OnlineOrUnavailableIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-solid-8x8";
+import OfflineIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-outline-8x8";
+import DNDIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-strikethrough-8x8";
+import classNames from "classnames";
+import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
+
+interface Props {
+    className?: string;
+    presenceState: string;
+}
+
+export const BUSY_PRESENCE_NAME = new UnstableValue("busy", "org.matrix.msc3026.busy");
+
+function getIconForPresenceState(state: string): React.JSX.Element {
+    switch (state) {
+        case "online":
+            return <OnlineOrUnavailableIcon height="8px" width="8px" className="mx_PresenceIconView_online" />;
+        case "offline":
+            return <OfflineIcon height="8px" width="8px" className="mx_PresenceIconView_offline" />;
+        case "unavailable":
+        case "io.element.unreachable":
+            return <OnlineOrUnavailableIcon height="8px" width="8px" className="mx_PresenceIconView_unavailable" />;
+        case BUSY_PRESENCE_NAME.name:
+        case BUSY_PRESENCE_NAME.altName:
+            return <DNDIcon height="8px" width="8px" className="mx_PresenceIconView_dnd" />;
+        default:
+            throw new Error(`Presence state "${state}" is unknown.`);
+    }
+}
+
+const AvatarPresenceIconView: React.FC<Props> = ({ className, presenceState }) => {
+    const names = classNames("mx_PresenceIconView", className);
+    return <div className={names}>{getIconForPresenceState(presenceState)}</div>;
+};
+
+export default AvatarPresenceIconView;

From 7768795dd7d5de3ed1abdf5d66f77eb97b112463 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:32:33 +0530
Subject: [PATCH 03/24] Implement new member tile

---
 res/css/views/rooms/_MemberTileView.pcss      |  58 +++++++
 .../memberlist/tiles/MemberTileViewModel.tsx  | 160 ++++++++++++++++++
 .../tiles/ThreePidTileViewModel.tsx           |  35 ++++
 .../MemberList/tiles/RoomMemberTileView.tsx   |  67 ++++++++
 .../tiles/ThreePidInviteTileView.tsx          |  23 +++
 .../tiles/common/MemberTileLayout.tsx         |  40 +++++
 src/models/rooms/PresenceState.ts             |   8 +
 src/models/rooms/RoomMember.ts                |  22 +++
 src/models/rooms/ThreePIDInvite.ts            |  12 ++
 9 files changed, 425 insertions(+)
 create mode 100644 res/css/views/rooms/_MemberTileView.pcss
 create mode 100644 src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
 create mode 100644 src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
 create mode 100644 src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
 create mode 100644 src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx
 create mode 100644 src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
 create mode 100644 src/models/rooms/PresenceState.ts
 create mode 100644 src/models/rooms/RoomMember.ts
 create mode 100644 src/models/rooms/ThreePIDInvite.ts

diff --git a/res/css/views/rooms/_MemberTileView.pcss b/res/css/views/rooms/_MemberTileView.pcss
new file mode 100644
index 00000000000..94d9987e598
--- /dev/null
+++ b/res/css/views/rooms/_MemberTileView.pcss
@@ -0,0 +1,58 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MemberTileView {
+    display: flex;
+    padding: var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-4x);
+    box-sizing: border-box;
+    height: 56px;
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-300);
+
+    .mx_MemberTileView_left,
+    .mx_MemberTileView_right {
+        display: flex;
+        align-items: center;
+        gap: var(--cpd-space-2x);
+    }
+
+    .mx_MemberTileView_left {
+        flex-basis: 209px;
+        flex-grow: 1;
+        min-width: 0;
+    }
+
+    .mx_MemberTileView_name {
+        font: var(--cpd-font-body-md-medium);
+        font-size: 15px;
+        min-width: 0;
+    }
+
+    .mx_MemberTileView_user_label {
+        font: var(--cpd-font-body-sm-regular);
+        font-size: 13px;
+    }
+
+    .mx_MemberTileView_avatar {
+        position: relative;
+        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);
+    }
+}
diff --git a/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
new file mode 100644
index 00000000000..e2a32c76dbf
--- /dev/null
+++ b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
@@ -0,0 +1,160 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { useEffect, useMemo, useState } from "react";
+import { RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
+import { UserVerificationStatus, CryptoEvent } from "matrix-js-sdk/src/crypto-api";
+
+import dis from "../../../../dispatcher/dispatcher";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
+import { Action } from "../../../../dispatcher/actions";
+import { asyncSome } from "../../../../utils/arrays";
+import { getUserDeviceIds } from "../../../../utils/crypto/deviceInfo";
+import { RoomMember } from "../../../../models/rooms/RoomMember";
+import { E2EState } from "../../../views/rooms/E2EIcon";
+import { _t, _td, TranslationKey } from "../../../../languageHandler";
+import UserIdentifierCustomisations from "../../../../customisations/UserIdentifier";
+
+interface MemberTileViewModelProps {
+    member: RoomMember;
+    showPresence?: boolean;
+}
+
+export interface MemberTileViewState extends MemberTileViewModelProps {
+    e2eStatus?: E2EState;
+    name: string;
+    onClick: () => void;
+    title?: string;
+    userLabel?: string;
+}
+
+export enum PowerStatus {
+    Admin = "admin",
+    Moderator = "moderator",
+}
+
+const PowerLabel: Record<PowerStatus, TranslationKey> = {
+    [PowerStatus.Admin]: _td("power_level|admin"),
+    [PowerStatus.Moderator]: _td("power_level|moderator"),
+};
+
+export function useMemberTileViewModel(props: MemberTileViewModelProps): MemberTileViewState {
+    const [e2eStatus, setE2eStatus] = useState<E2EState | undefined>();
+
+    useEffect(() => {
+        const cli = MatrixClientPeg.safeGet();
+
+        const updateE2EStatus = async (): Promise<void> => {
+            const { userId } = props.member;
+            const isMe = userId === cli.getUserId();
+            const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId);
+            if (!userTrust?.isCrossSigningVerified()) {
+                setE2eStatus(userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal);
+                return;
+            }
+
+            const deviceIDs = await getUserDeviceIds(cli, userId);
+            const anyDeviceUnverified = await asyncSome(deviceIDs, async (deviceId) => {
+                // For your own devices, we use the stricter check of cross-signing
+                // verification to encourage everyone to trust their own devices via
+                // cross-signing so that other users can then safely trust you.
+                // For other people's devices, the more general verified check that
+                // includes locally verified devices can be used.
+                const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, deviceId);
+                return !deviceTrust || (isMe ? !deviceTrust.crossSigningVerified : !deviceTrust.isVerified());
+            });
+            setE2eStatus(anyDeviceUnverified ? E2EState.Warning : E2EState.Verified);
+        };
+
+        const onRoomStateEvents = (ev: MatrixEvent): void => {
+            if (ev.getType() !== EventType.RoomEncryption) return;
+            const { roomId } = props.member;
+            if (ev.getRoomId() !== roomId) return;
+
+            // The room is encrypted now.
+            cli.removeListener(RoomStateEvent.Events, onRoomStateEvents);
+            updateE2EStatus();
+        };
+
+        const onUserTrustStatusChanged = (userId: string, trustStatus: UserVerificationStatus): void => {
+            if (userId !== props.member.userId) return;
+            updateE2EStatus();
+        };
+
+        const { roomId } = props.member;
+        if (roomId) {
+            const isRoomEncrypted = cli.isRoomEncrypted(roomId);
+            if (isRoomEncrypted) {
+                cli.on(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged);
+                updateE2EStatus();
+            } else {
+                // Listen for room to become encrypted
+                cli.on(RoomStateEvent.Events, onRoomStateEvents);
+            }
+        }
+
+        return () => {
+            if (cli) {
+                cli.removeListener(RoomStateEvent.Events, onRoomStateEvents);
+                cli.removeListener(CryptoEvent.UserTrustStatusChanged, onUserTrustStatusChanged);
+            }
+        };
+    }, [props.member]);
+
+    const onClick = (): void => {
+        dis.dispatch({
+            action: Action.ViewUser,
+            member: props.member,
+            push: true,
+        });
+    };
+
+    const member = props.member;
+    const name = props.member.name;
+
+    const powerStatusMap = new Map([
+        [100, PowerStatus.Admin],
+        [50, PowerStatus.Moderator],
+    ]);
+
+    // Find the nearest power level with a badge
+    let powerLevel = props.member.powerLevel;
+    for (const [pl] of powerStatusMap) {
+        if (props.member.powerLevel >= pl) {
+            powerLevel = pl;
+            break;
+        }
+    }
+
+    const title = useMemo(() => {
+        return _t("member_list|power_label", {
+            userName: UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, {
+                roomId: member.roomId,
+            }),
+            powerLevelNumber: member.powerLevel,
+        }).trim();
+    }, [member.powerLevel, member.roomId, member.userId]);
+
+    let userLabel;
+    const powerStatus = powerStatusMap.get(powerLevel);
+    if (powerStatus) {
+        userLabel = _t(PowerLabel[powerStatus]);
+    }
+    if (props.member.isInvite) {
+        userLabel = `(${_t("member_list|invited_label")})`;
+    }
+
+    return {
+        title,
+        member,
+        name,
+        onClick,
+        e2eStatus,
+        showPresence: props.showPresence,
+        userLabel,
+    };
+}
diff --git a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
new file mode 100644
index 00000000000..9725c305273
--- /dev/null
+++ b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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";
+
+interface ThreePidTileViewModelProps {
+    threePidInvite: ThreePIDInvite;
+}
+
+export interface ThreePidTileViewState {
+    name: string;
+    onClick: () => void;
+}
+
+export function useThreePidTileViewModel(props: ThreePidTileViewModelProps): ThreePidTileViewState {
+    const invite = props.threePidInvite;
+    const name = invite.event.getContent().display_name;
+    const onClick = (): void => {
+        dis.dispatch({
+            action: Action.View3pidInvite,
+            event: invite.event,
+        });
+    };
+
+    return {
+        name,
+        onClick,
+    };
+}
diff --git a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
new file mode 100644
index 00000000000..6d3b511e123
--- /dev/null
+++ b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
@@ -0,0 +1,67 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+
+import DisambiguatedProfile from "../../../messages/DisambiguatedProfile";
+import { RoomMember } from "../../../../../models/rooms/RoomMember";
+import { useMemberTileViewModel } from "../../../../viewmodels/memberlist/tiles/MemberTileViewModel";
+import { E2EIconView } from "./common/E2EIconView";
+import AvatarPresenceIconView from "./common/PresenceIconView";
+import BaseAvatar from "../../../avatars/BaseAvatar";
+import { _t } from "../../../../../languageHandler";
+import { MemberTileLayout } from "./common/MemberTileLayout";
+
+interface IProps {
+    member: RoomMember;
+    showPresence?: boolean;
+}
+
+export function RoomMemberTileView(props: IProps): JSX.Element {
+    const vm = useMemberTileViewModel(props);
+    const member = vm.member;
+    const av = (
+        <BaseAvatar
+            size="32px"
+            name={member.name}
+            idName={member.userId}
+            title={member.displayUserId}
+            url={member.avatarThumbnailUrl}
+            altText={_t("common|user_avatar")}
+        />
+    );
+    const name = vm.name;
+    const nameJSX = <DisambiguatedProfile member={member} fallbackName={name || ""} />;
+
+    const presenceState = member.presenceState;
+    let presenceJSX: JSX.Element | undefined;
+    if (vm.showPresence && presenceState) {
+        presenceJSX = <AvatarPresenceIconView presenceState={presenceState} />;
+    }
+
+    let userLabelJSX;
+    if (vm.userLabel) {
+        userLabelJSX = <div className="mx_MemberTileView_user_label">{vm.userLabel}</div>;
+    }
+
+    let e2eIcon;
+    if (vm.e2eStatus) {
+        e2eIcon = <E2EIconView status={vm.e2eStatus} />;
+    }
+
+    return (
+        <MemberTileLayout
+            title={vm.title}
+            onClick={vm.onClick}
+            avatarJsx={av}
+            presenceJsx={presenceJSX}
+            nameJsx={nameJSX}
+            userLabelJsx={userLabelJSX}
+            e2eIconJsx={e2eIcon}
+        />
+    );
+}
diff --git a/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx b/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx
new file mode 100644
index 00000000000..2058f090c83
--- /dev/null
+++ b/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx
@@ -0,0 +1,23 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+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";
+
+interface Props {
+    threePidInvite: ThreePIDInvite;
+}
+
+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} />;
+}
diff --git a/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
new file mode 100644
index 00000000000..5638ed870c9
--- /dev/null
+++ b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
@@ -0,0 +1,40 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+
+import AccessibleButton from "../../../../elements/AccessibleButton";
+
+interface Props {
+    avatarJsx: JSX.Element;
+    nameJsx: JSX.Element | string;
+    onClick: () => void;
+    title?: string;
+    presenceJsx?: JSX.Element;
+    userLabelJsx?: JSX.Element;
+    e2eIconJsx?: JSX.Element;
+}
+
+export function MemberTileLayout(props: Props): JSX.Element {
+    return (
+        // The wrapping div is required to make the magic mouse listener work, for some reason.
+        <div>
+            <AccessibleButton className="mx_MemberTileView" title={props.title} onClick={props.onClick}>
+                <div className="mx_MemberTileView_left">
+                    <div className="mx_MemberTileView_avatar">
+                        {props.avatarJsx} {props.presenceJsx}
+                    </div>
+                    <div className="mx_MemberTileView_name">{props.nameJsx}</div>
+                </div>
+                <div className="mx_MemberTileView_right">
+                    {props.userLabelJsx}
+                    {props.e2eIconJsx}
+                </div>
+            </AccessibleButton>
+        </div>
+    );
+}
diff --git a/src/models/rooms/PresenceState.ts b/src/models/rooms/PresenceState.ts
new file mode 100644
index 00000000000..05ecba2e356
--- /dev/null
+++ b/src/models/rooms/PresenceState.ts
@@ -0,0 +1,8 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+export type PresenceState = "offline" | "online" | "unavailable" | "io.element.unreachable";
diff --git a/src/models/rooms/RoomMember.ts b/src/models/rooms/RoomMember.ts
new file mode 100644
index 00000000000..9007e78264b
--- /dev/null
+++ b/src/models/rooms/RoomMember.ts
@@ -0,0 +1,22 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { PresenceState } from "./PresenceState";
+
+export type RoomMember = {
+    roomId: string;
+    userId: string;
+    displayUserId: string;
+    name: string;
+    rawDisplayName?: string;
+    disambiguate: boolean;
+    avatarThumbnailUrl?: string;
+    powerLevel: number;
+    lastModifiedTime: number;
+    presenceState?: PresenceState;
+    isInvite: boolean;
+};
diff --git a/src/models/rooms/ThreePIDInvite.ts b/src/models/rooms/ThreePIDInvite.ts
new file mode 100644
index 00000000000..84f5a87cbed
--- /dev/null
+++ b/src/models/rooms/ThreePIDInvite.ts
@@ -0,0 +1,12 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+export type ThreePIDInvite = {
+    event: MatrixEvent;
+};

From 4f50174aa97b0325bd1e7ba704bb01d56d650d07 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:35:11 +0530
Subject: [PATCH 04/24] Implement memberlist view model

---
 .../memberlist/MemberListViewModel.tsx        | 263 ++++++++++++++++++
 1 file changed, 263 insertions(+)
 create mode 100644 src/components/viewmodels/memberlist/MemberListViewModel.tsx

diff --git a/src/components/viewmodels/memberlist/MemberListViewModel.tsx b/src/components/viewmodels/memberlist/MemberListViewModel.tsx
new file mode 100644
index 00000000000..511c8c6fb9c
--- /dev/null
+++ b/src/components/viewmodels/memberlist/MemberListViewModel.tsx
@@ -0,0 +1,263 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    ClientEvent,
+    EventType,
+    MatrixEvent,
+    Room,
+    RoomEvent,
+    RoomMemberEvent,
+    RoomState,
+    RoomStateEvent,
+    RoomMember as SdkRoomMember,
+    User,
+    UserEvent,
+} from "matrix-js-sdk/src/matrix";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { throttle } from "lodash";
+
+import { RoomMember } from "../../../models/rooms/RoomMember";
+import { mediaFromMxc } from "../../../customisations/Media";
+import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
+import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../../settings/UIFeature";
+import { PresenceState } from "../../../models/rooms/PresenceState";
+import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { SDKContext } from "../../../contexts/SDKContext";
+import PosthogTrackers from "../../../PosthogTrackers";
+import { ButtonEvent } from "../../views/elements/AccessibleButton";
+import { inviteToRoom } from "../../../utils/room/inviteToRoom";
+import { canInviteTo } from "../../../utils/room/canInviteTo";
+import { isValid3pidInvite } from "../../../RoomInvite";
+import { ThreePIDInvite } from "../../../models/rooms/ThreePIDInvite";
+import { XOR } from "../../../@types/common";
+import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
+
+type Member = XOR<{ member: RoomMember }, { threePidInvite: ThreePIDInvite }>;
+
+export function getPending3PidInvites(room: Room, searchQuery?: string): Member[] {
+    // include 3pid invites (m.room.third_party_invite) state events.
+    // The HS may have already converted these into m.room.member invites so
+    // we shouldn't add them if the 3pid invite state key (token) is in the
+    // member invite (content.third_party_invite.signed.token)
+    const inviteEvents = room.currentState.getStateEvents("m.room.third_party_invite").filter(function (e) {
+        if (!isValid3pidInvite(e)) return false;
+        if (searchQuery && !(e.getContent().display_name as string)?.includes(searchQuery)) return false;
+
+        // discard all invites which have a m.room.member event since we've
+        // already added them.
+        const memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey()!);
+        if (memberEvent) return false;
+        return true;
+    });
+    const invites: Member[] = inviteEvents.map((e) => {
+        return {
+            threePidInvite: {
+                event: e,
+            },
+        };
+    });
+    return invites;
+}
+
+export function sdkRoomMemberToRoomMember(member: SdkRoomMember): Member {
+    const displayUserId =
+        UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, {
+            roomId: member.roomId,
+        }) ?? member.userId;
+
+    const mxcAvatarURL = member.getMxcAvatarUrl();
+    const avatarThumbnailUrl =
+        (mxcAvatarURL && mediaFromMxc(mxcAvatarURL).getThumbnailOfSourceHttp(96, 96, "crop")) ?? undefined;
+
+    const user = member.user;
+    let presenceState: PresenceState | undefined;
+    if (user) {
+        presenceState = (user.presence as PresenceState) || undefined;
+    }
+
+    return {
+        member: {
+            roomId: member.roomId,
+            userId: member.userId,
+            displayUserId: displayUserId,
+            name: member.name,
+            rawDisplayName: member.rawDisplayName,
+            disambiguate: member.disambiguate,
+            avatarThumbnailUrl: avatarThumbnailUrl,
+            powerLevel: member.powerLevel,
+            lastModifiedTime: member.getLastModifiedTime(),
+            presenceState,
+            isInvite: member.membership === KnownMembership.Invite,
+        },
+    };
+}
+
+export interface MemberListViewState {
+    members: Member[];
+    search: (searchQuery: string) => void;
+    isPresenceEnabled: boolean;
+    shouldShowInvite: boolean;
+    shouldShowSearch: boolean;
+    isLoading: boolean;
+    canInvite: boolean;
+    onInviteButtonClick: (ev: ButtonEvent) => void;
+}
+export function useMemberListViewModel(roomId: string): MemberListViewState {
+    const cli = useMatrixClientContext();
+
+    const room = useMemo(() => cli.getRoom(roomId), [roomId, cli]);
+    if (!room) {
+        throw new Error(`Room with id ${roomId} does not exist!`);
+    }
+
+    const sdkContext = useContext(SDKContext);
+    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 = useRef<number>(0);
+
+    const searchQuery = useRef("");
+
+    const loadMembers = useMemo(
+        () =>
+            throttle(
+                async (): Promise<void> => {
+                    const { joined: joinedSdk, invited: invitedSdk } = await sdkContext.memberListStore.loadMemberList(
+                        roomId,
+                        searchQuery.current,
+                    );
+                    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.current);
+                    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);
+                    if (!searchQuery.current) {
+                        /**
+                         * Since searching for members only gives you the relevant
+                         * members matching the query, do not update the totalMemberCount!
+                         **/
+                        totalMemberCount.current = newMemberMap.size;
+                    }
+                },
+                500,
+                { leading: true, trailing: true },
+            ),
+        [roomId, sdkContext.memberListStore, room],
+    );
+
+    const search = useCallback(
+        (query: string) => {
+            searchQuery.current = query;
+            loadMembers();
+        },
+        [loadMembers],
+    );
+
+    const isPresenceEnabled = useMemo(
+        () => sdkContext.memberListStore.isPresenceEnabled(),
+        [sdkContext.memberListStore],
+    );
+
+    // Determines whether the rendered invite button is enabled or disabled
+    const getCanUserInviteToThisRoom = useCallback((): boolean => !!room && canInviteTo(room), [room]);
+    const [canInvite, setCanInvite] = useState<boolean>(getCanUserInviteToThisRoom());
+
+    // Determines whether the invite button should be shown or not.
+    const getShouldShowInvite = useCallback(
+        (): boolean => room?.getMyMembership() === KnownMembership.Join && shouldShowComponent(UIComponent.InviteUsers),
+        [room],
+    );
+    const [shouldShowInvite, setShouldShowInvite] = useState<boolean>(getShouldShowInvite());
+
+    const onInviteButtonClick = (ev: ButtonEvent): void => {
+        PosthogTrackers.trackInteraction("WebRightPanelMemberListInviteButton", ev);
+        ev.preventDefault();
+        inviteToRoom(room);
+    };
+
+    useTypedEventEmitter(cli, RoomStateEvent.Events, (event: MatrixEvent) => {
+        if (event.getRoomId() === roomId && event.getType() === EventType.RoomThirdPartyInvite) {
+            loadMembers();
+            const newCanInvite = getCanUserInviteToThisRoom();
+            setCanInvite(newCanInvite);
+        }
+    });
+
+    useTypedEventEmitter(cli, RoomStateEvent.Update, (state: RoomState) => {
+        if (state.roomId === roomId) loadMembers();
+    });
+
+    useTypedEventEmitter(cli, RoomMemberEvent.Name, (_: MatrixEvent, member: SdkRoomMember) => {
+        if (member.roomId === roomId) loadMembers();
+    });
+
+    useTypedEventEmitter(cli, ClientEvent.Room, (room: Room) => {
+        // We listen for room events because when we accept an invite
+        // we need to wait till the room is fully populated with state
+        // before refreshing the member list else we get a stale list.
+        if (room.roomId === roomId) loadMembers();
+    });
+
+    useTypedEventEmitter(cli, RoomEvent.MyMembership, (room: Room, membership: string, oldMembership?: string) => {
+        if (room.roomId !== roomId) return;
+        if (membership === KnownMembership.Join && oldMembership !== KnownMembership.Join) {
+            // we just joined the room, load the member list
+            loadMembers();
+            const newShouldShowInvite = getShouldShowInvite();
+            setShouldShowInvite(newShouldShowInvite);
+        }
+    });
+
+    useTypedEventEmitter(cli, UserEvent.Presence, (_: MatrixEvent | undefined, user: User) => {
+        if (memberMap.has(user.userId)) loadMembers();
+    });
+
+    useTypedEventEmitter(cli, UserEvent.CurrentlyActive, (_: MatrixEvent | undefined, user: User) => {
+        if (memberMap.has(user.userId)) loadMembers();
+    });
+
+    // Initial load of the memberlist
+    useEffect(() => {
+        (async () => {
+            await loadMembers();
+            /**
+             * isLoading is used to render a spinner on initial call.
+             * Further calls need not mutate this state since it's perfectly fine to
+             * show the existing memberlist until the new one loads.
+             */
+            setIsLoading(false);
+        })();
+    }, [loadMembers]);
+
+    return {
+        members: Array.from(memberMap.values()),
+        search,
+        shouldShowInvite,
+        isPresenceEnabled,
+        isLoading,
+        onInviteButtonClick,
+        shouldShowSearch: totalMemberCount.current >= 20,
+        canInvite,
+    };
+}

From 6eb51b34bf152b88eca6bc94dc1c9c5ae63e5a77 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:36:03 +0530
Subject: [PATCH 05/24] Implement new memberlist header view

---
 .../views/rooms/_MemberListHeaderView.pcss    |  37 +++++
 .../rooms/MemberList/MemberListHeaderView.tsx | 137 ++++++++++++++++++
 2 files changed, 174 insertions(+)
 create mode 100644 res/css/views/rooms/_MemberListHeaderView.pcss
 create mode 100644 src/components/views/rooms/MemberList/MemberListHeaderView.tsx

diff --git a/res/css/views/rooms/_MemberListHeaderView.pcss b/res/css/views/rooms/_MemberListHeaderView.pcss
new file mode 100644
index 00000000000..0143dda501a
--- /dev/null
+++ b/res/css/views/rooms/_MemberListHeaderView.pcss
@@ -0,0 +1,37 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MemberListHeaderView {
+    border-bottom: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
+    max-height: 112px;
+
+    .mx_MemberListHeaderView_container {
+        margin-top: var(--cpd-space-6x);
+        width: 100%;
+    }
+
+    .mx_MemberListHeaderView_invite_small {
+        margin-left: var(--cpd-space-3x);
+    }
+
+    .mx_MemberListHeaderView_invite_large {
+        width: 288px;
+        height: 36px;
+    }
+
+    .mx_MemberListHeaderView_label {
+        padding: var(--cpd-space-6x) 0 var(--cpd-space-2x) var(--cpd-space-4x);
+        box-sizing: border-box;
+        width: 100%;
+        color: var(--cpd-color-text-secondary);
+        font: var(--cpd-font-body-sm-semibold);
+    }
+
+    .mx_MemberListHeaderView_search {
+        width: 240px;
+    }
+}
diff --git a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx
new file mode 100644
index 00000000000..93ce1ca665d
--- /dev/null
+++ b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx
@@ -0,0 +1,137 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { Search, Text, Button, Tooltip, InlineSpinner } from "@vector-im/compound-web";
+import React from "react";
+import InviteIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
+import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { Flex } from "../../../utils/Flex";
+import { MemberListViewState } from "../../../viewmodels/memberlist/MemberListViewModel";
+import { _t } from "../../../../languageHandler";
+
+interface TooltipProps {
+    canInvite: boolean;
+    children: React.ReactNode;
+}
+
+const OptionalTooltip: React.FC<TooltipProps> = ({ canInvite, children }) => {
+    if (canInvite) return children;
+    // If the user isn't allowed to invite others to this room, wrap with a relevant tooltip.
+    return <Tooltip description={_t("member_list|invite_button_no_perms_tooltip")}>{children}</Tooltip>;
+};
+
+interface Props {
+    vm: MemberListViewState;
+}
+
+const InviteButton: React.FC<Props> = ({ vm }) => {
+    const shouldShowInvite = vm.shouldShowInvite;
+    const shouldShowSearch = vm.shouldShowSearch;
+    const disabled = !vm.canInvite;
+
+    if (!shouldShowInvite) {
+        // In this case, invite button should not be rendered.
+        return null;
+    }
+
+    if (shouldShowSearch) {
+        /// When rendered alongside a search box, the invite button is just an icon.
+        return (
+            <OptionalTooltip canInvite={vm.canInvite}>
+                <Button
+                    className="mx_MemberListHeaderView_invite_small"
+                    kind="primary"
+                    onClick={vm.onInviteButtonClick}
+                    size="sm"
+                    iconOnly={true}
+                    Icon={InviteIcon}
+                    disabled={disabled}
+                    aria-label={_t("action|invite")}
+                />
+            </OptionalTooltip>
+        );
+    }
+
+    // Without a search box, invite button is a full size button.
+    return (
+        <OptionalTooltip canInvite={vm.canInvite}>
+            <Button
+                kind="secondary"
+                size="sm"
+                Icon={UserAddIcon}
+                className="mx_MemberListHeaderView_invite_large"
+                disabled={!vm.canInvite}
+                onClick={vm.onInviteButtonClick}
+            >
+                {_t("action|invite")}
+            </Button>
+        </OptionalTooltip>
+    );
+};
+
+/**
+ * This should be:
+ * A loading text with spinner while the memberlist loads.
+ * Member count of the room when there's nothing in the search field.
+ * Number of matching members during search or 'No result' if search found nothing.
+ */
+function getHeaderLabelJSX(vm: MemberListViewState): React.ReactNode {
+    if (vm.isLoading) {
+        return (
+            <Flex align="center" gap="8px">
+                <InlineSpinner /> {_t("common|loading")}
+            </Flex>
+        );
+    }
+
+    const filteredMemberCount = vm.members.length;
+    if (filteredMemberCount === 0) {
+        return _t("member_list|no_matches");
+    }
+    return _t("member_list|count", { count: filteredMemberCount });
+}
+
+export const MemberListHeaderView: React.FC<Props> = (props: Props) => {
+    const vm = props.vm;
+
+    let contentJSX: React.ReactNode;
+
+    if (vm.shouldShowSearch) {
+        // When we need to show the search box
+        contentJSX = (
+            <Flex justify="center" className="mx_MemberListHeaderView_container">
+                <Search
+                    className="mx_MemberListHeaderView_search mx_no_textinput"
+                    name="searchMembers"
+                    placeholder={_t("member_list|filter_placeholder")}
+                    onChange={(e) => vm.search((e as React.ChangeEvent<HTMLInputElement>).target.value)}
+                />
+                <InviteButton vm={vm} />
+            </Flex>
+        );
+    } else if (!vm.shouldShowSearch && vm.shouldShowInvite) {
+        // When we don't need to show the search box but still need an invite button
+        contentJSX = (
+            <Flex justify="center" className="mx_MemberListHeaderView_container">
+                <InviteButton vm={vm} />
+            </Flex>
+        );
+    } else {
+        // No search box and no invite icon, so nothing to render!
+        contentJSX = null;
+    }
+
+    return (
+        <Flex className="mx_MemberListHeaderView" as="header" align="center" justify="space-between" direction="column">
+            {!vm.isLoading && contentJSX}
+            <Text as="div" size="sm" weight="semibold" className="mx_MemberListHeaderView_label">
+                {getHeaderLabelJSX(vm)}
+            </Text>
+        </Flex>
+    );
+};

From 697d15a211cb68dbfdcc89b230165677a6c69580 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:37:06 +0530
Subject: [PATCH 06/24] Support the new memberlist in Diasambiguated profile

1. Use MemberInfo instead of RoomMember
2. CSS changes to reflect the new design
---
 .../views/messages/_DisambiguatedProfile.pcss | 23 ++++++++++++++++++-
 .../views/messages/DisambiguatedProfile.tsx   | 10 ++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/res/css/views/messages/_DisambiguatedProfile.pcss b/res/css/views/messages/_DisambiguatedProfile.pcss
index 25a28971d41..93dce8ab52b 100644
--- a/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -21,8 +21,29 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_DisambiguatedProfile_mxid {
-        margin-inline-start: 5px;
         color: $secondary-content;
         font-size: var(--cpd-font-size-body-sm);
+        margin-inline-start: 5px;
+    }
+}
+
+/** Disambiguated profile needs to have a different layout in the member tile */
+.mx_MemberTileView .mx_DisambiguatedProfile {
+    display: flex;
+    flex-direction: column;
+
+    .mx_DisambiguatedProfile_mxid {
+        margin-inline-start: 0;
+        font: var(--cpd-font-body-sm-regular);
+    }
+
+    span:not(.mx_DisambiguatedProfile_mxid) {
+        /**
+        In a member tile, this span element is a flex child and so
+        we need the following for text overflow to work.
+        **/
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }
diff --git a/src/components/views/messages/DisambiguatedProfile.tsx b/src/components/views/messages/DisambiguatedProfile.tsx
index 0e7d2e046eb..b6b469eaa65 100644
--- a/src/components/views/messages/DisambiguatedProfile.tsx
+++ b/src/components/views/messages/DisambiguatedProfile.tsx
@@ -8,15 +8,21 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 
 import { _t } from "../../../languageHandler";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import UserIdentifier from "../../../customisations/UserIdentifier";
 
+interface MemberInfo {
+    userId: string;
+    roomId: string;
+    rawDisplayName?: string;
+    disambiguate: boolean;
+}
+
 interface IProps {
-    member?: RoomMember | null;
+    member?: MemberInfo | null;
     fallbackName: string;
     onClick?(): void;
     colored?: boolean;

From 9eca64c20c1b64f1f390a11d2c358ced876b508e Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:40:08 +0530
Subject: [PATCH 07/24] Implement new memberlist view

---
 package.json                                  |  8 +-
 res/css/views/rooms/_MemberListView.pcss      | 17 ++++
 .../views/rooms/MemberList/MemberListView.tsx | 82 +++++++++++++++++++
 src/i18n/strings/en_EN.json                   | 13 +--
 yarn.lock                                     | 53 ++++++++++--
 5 files changed, 157 insertions(+), 16 deletions(-)
 create mode 100644 res/css/views/rooms/_MemberListView.pcss
 create mode 100644 src/components/views/rooms/MemberList/MemberListView.tsx

diff --git a/package.json b/package.json
index b36807f7c3f..9218cd28e8e 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^2.0.1",
+        "@vector-im/compound-design-tokens": "^2.1.0",
         "@vector-im/compound-web": "^7.5.0",
         "@vector-im/matrix-wysiwyg": "2.38.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -149,7 +149,9 @@
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
-        "what-input": "^5.2.10"
+        "what-input": "^5.2.10",
+        "@types/react-virtualized": "^9.21.30",
+        "react-virtualized": "^9.22.5"
     },
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
@@ -301,4 +303,4 @@
     "engines": {
         "node": ">=20.0.0"
     }
-}
+}
\ No newline at end of file
diff --git a/res/css/views/rooms/_MemberListView.pcss b/res/css/views/rooms/_MemberListView.pcss
new file mode 100644
index 00000000000..162b8558b8a
--- /dev/null
+++ b/res/css/views/rooms/_MemberListView.pcss
@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_MemberListView {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+
+    .mx_MemberListView_container {
+        height: 100%;
+    }
+}
diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx
new file mode 100644
index 00000000000..549eda26ddb
--- /dev/null
+++ b/src/components/views/rooms/MemberList/MemberListView.tsx
@@ -0,0 +1,82 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { Form } from "@vector-im/compound-web";
+import React from "react";
+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 { RoomMemberTileView } from "./tiles/RoomMemberTileView";
+import { ThreePidInviteTileView } from "./tiles/ThreePidInviteTileView";
+import { MemberListHeaderView } from "./MemberListHeaderView";
+import BaseCard from "../../right_panel/BaseCard";
+import { _t } from "../../../../languageHandler";
+
+interface IProps {
+    roomId: string;
+    onClose: () => void;
+}
+
+const MemberListView: React.FC<IProps> = (props: IProps) => {
+    const vm = useMemberListViewModel(props.roomId);
+
+    const memberCount = vm.members.length;
+
+    const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
+        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} />;
+        }
+        const item = vm.members[index];
+        return (
+            <div key={key} style={style}>
+                {item.member ? (
+                    <RoomMemberTileView member={item.member} showPresence={vm.isPresenceEnabled} />
+                ) : (
+                    <ThreePidInviteTileView threePidInvite={item.threePidInvite} />
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <BaseCard
+            id="memberlist-panel"
+            className="mx_MemberListView"
+            ariaLabelledBy="memberlist-panel-tab"
+            role="tabpanel"
+            header={_t("common|people")}
+            onClose={props.onClose}
+        >
+            <Flex align="stretch" direction="column" className="mx_MemberListView_container">
+                <Form.Root>
+                    <MemberListHeaderView vm={vm} />
+                </Form.Root>
+                <AutoSizer>
+                    {({ 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)}
+                            // The +1 refers to the additional empty div that we render at the end of the list.
+                            rowCount={memberCount + 1}
+                            // Subtract the height of MemberlistHeaderView so that the parent div does not overflow.
+                            height={height - 113}
+                            width={width}
+                        />
+                    )}
+                </AutoSizer>
+            </Flex>
+        </BaseCard>
+    );
+};
+
+export default MemberListView;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 42cf08ae703..086dfec4dd0 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1579,9 +1579,14 @@
         "toggle_attribution": "Toggle attribution"
     },
     "member_list": {
-        "filter_placeholder": "Filter room members",
+        "count": {
+            "one": "%(count)s Member",
+            "other": "%(count)s Members"
+        },
+        "filter_placeholder": "Search members...",
         "invite_button_no_perms_tooltip": "You do not have permission to invite users",
-        "invited_list_heading": "Invited",
+        "invited_label": "Invited",
+        "no_matches": "No matches",
         "power_label": "%(userName)s (power %(powerLevelNumber)s)"
     },
     "member_list_back_action_label": "Room members",
@@ -1734,7 +1739,6 @@
         "custom_level": "Custom level",
         "default": "Default",
         "label": "Power level",
-        "mod": "Mod",
         "moderator": "Moderator",
         "restricted": "Restricted"
     },
@@ -2362,7 +2366,7 @@
             "enable_element_call_no_permissions_tooltip": "You do not have sufficient permissions to change this."
         }
     },
-    "room_summary_card_back_action_label": "Room information",
+    "room_summary_card_back_action_label": "Room info",
     "scalar": {
         "error_create": "Unable to create widget.",
         "error_membership": "You are not in this room.",
@@ -3066,7 +3070,6 @@
         "invite": "Invite people",
         "invite_description": "Invite with email or username",
         "invite_link": "Share invite link",
-        "invite_this_space": "Invite to this space",
         "joining_space": "Joining",
         "landing_welcome": "Welcome to <name/>",
         "leave_dialog_action": "Leave space",
diff --git a/yarn.lock b/yarn.lock
index e72b11a5ede..7b026cc33fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,6 +1089,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.7.2":
+  version "7.25.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.9.tgz#65884fd6dc255a775402cc1d9811082918f4bf00"
+  integrity sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.25.7", "@babel/template@^7.3.3":
   version "7.25.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.7.tgz#27f69ce382855d915b14ab0fe5fb4cbf88fa0769"
@@ -3166,6 +3173,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-virtualized@^9.21.30":
+  version "9.21.30"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.30.tgz#ba39821bcb2487512a8a2cdd9fbdb5e6fc87fedb"
+  integrity sha512-4l2TFLQ8BCjNDQlvH85tU6gctuZoEdgYzENQyZHpgTHU7hoLzYgPSOALMAeA58LOWua8AzC6wBivPj1lfl6JgQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@18.3.3":
   version "18.3.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
@@ -3369,10 +3384,10 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
-"@vector-im/compound-design-tokens@^2.0.1":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-2.1.1.tgz#d6175a99fe4b97688464126f255386990f3048d6"
-  integrity sha512-QnUi2K14D9KTXxcLQKUU3V75cforZLMwhaaJDNftT8F5mG86950hAM+qhgDNEpEU+pkTffQj0/g/5859YmqWzQ==
+"@vector-im/compound-design-tokens@^2.1.0":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-2.1.3.tgz#8205ffb455a09d71a02d838f3dbb8503c4e6ec27"
+  integrity sha512-U4UF7MVguENf0lQnkU2a9p/3llTsLXzbzmFFOxi0h6ny2igNxZj/kROP/jXTxxV9xD4TNn3z098Bos4J/qJpBA==
 
 "@vector-im/compound-web@^7.5.0":
   version "7.5.0"
@@ -3390,7 +3405,7 @@
     ts-xor "^1.3.0"
     vaul "^1.0.0"
 
-"@vector-im/matrix-wysiwyg-wasm@link:../../bindings/wysiwyg-wasm":
+"@vector-im/matrix-wysiwyg-wasm@link:../../Library/Caches/Yarn/v6/npm-@vector-im-matrix-wysiwyg-2.38.0-af862ffd231dc0a6b8d6f2cb3601e68456c0ff24-integrity/node_modules/bindings/wysiwyg-wasm":
   version "0.0.0"
   uid ""
 
@@ -3399,7 +3414,7 @@
   resolved "https://registry.yarnpkg.com/@vector-im/matrix-wysiwyg/-/matrix-wysiwyg-2.38.0.tgz#af862ffd231dc0a6b8d6f2cb3601e68456c0ff24"
   integrity sha512-cMEVicFYVzFxuSyWON0aVGjAJMcgJZ+LxuLTEp8EGuu8cRacuh0RN5rapb11YVZygzFvE7X1cMedJ/fKd5vRLA==
   dependencies:
-    "@vector-im/matrix-wysiwyg-wasm" "link:../../Library/Caches/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"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
@@ -4413,6 +4428,11 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^1.0.4:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -5171,7 +5191,7 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1:
+dom-helpers@^5.0.1, dom-helpers@^5.1.3:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -8279,7 +8299,7 @@ matrix-web-i18n@^3.2.1:
     minimist "^1.2.8"
     walk "^2.3.15"
 
-matrix-widget-api@^1.10.0:
+matrix-widget-api@^1.10.0, matrix-widget-api@^1.8.2:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.10.0.tgz#d31ea073a5871a1fb1a511ef900b0c125a37bf55"
   integrity sha512-rkAJ29briYV7TJnfBVLVSKtpeBrBju15JZFSDP6wj8YdbCu1bdmlplJayQ+vYaw1x4fzI49Q+Nz3E85s46sRDw==
@@ -9966,6 +9986,11 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-redux@^7.2.0:
   version "7.2.9"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d"
@@ -10016,6 +10041,18 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-virtualized@^9.22.5:
+  version "9.22.5"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.5.tgz#bfb96fed519de378b50d8c0064b92994b3b91620"
+  integrity sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    clsx "^1.0.4"
+    dom-helpers "^5.1.3"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"

From 3561aecaa484674fad3a612608adc319a31be269 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:41:01 +0530
Subject: [PATCH 08/24] Add and use a new overflow component

We used the EntityTile component as a pretend overflow tile in some
places. This new lighter component is added so  that we can remove the
complex EntityTile component.
---
 res/css/views/rooms/_OverflowTile.pcss        | 51 +++++++++++++++++++
 .../views/dialogs/ForwardDialog.tsx           | 17 ++-----
 .../views/rooms/OverflowTileView.tsx          | 32 ++++++++++++
 3 files changed, 86 insertions(+), 14 deletions(-)
 create mode 100644 res/css/views/rooms/_OverflowTile.pcss
 create mode 100644 src/components/views/rooms/OverflowTileView.tsx

diff --git a/res/css/views/rooms/_OverflowTile.pcss b/res/css/views/rooms/_OverflowTile.pcss
new file mode 100644
index 00000000000..f577b6bd224
--- /dev/null
+++ b/res/css/views/rooms/_OverflowTile.pcss
@@ -0,0 +1,51 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2015, 2016 OpenMarket Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_OverflowTileView {
+    display: flex;
+    align-items: center;
+    color: $primary-content;
+    cursor: pointer;
+}
+
+.mx_OverflowTileView_text {
+    flex: 1 1 0;
+    overflow: hidden;
+    font: var(--cpd-font-body-md-regular);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-style: italic;
+}
+
+.mx_OverflowTileView:hover {
+    padding-right: 30px;
+    position: relative; /* to keep the chevron aligned */
+}
+
+.mx_OverflowTileView:hover::before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 8px); /* center */
+    right: -8px;
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    width: 16px;
+    height: 16px;
+    background-color: $header-panel-text-primary-color;
+}
+
+.mx_OverflowTileView_icon {
+    padding-left: 3px;
+    padding-right: 12px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    position: relative;
+    line-height: 0;
+}
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 687e0f9eedd..cdf5b7b735e 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -23,8 +23,6 @@ import {
     TimelineEvents,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-// eslint-disable-next-line no-restricted-imports
-import OverflowHorizontalSvg from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
@@ -42,8 +40,6 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import TruncatedList from "../elements/TruncatedList";
-import EntityTile from "../rooms/EntityTile";
-import BaseAvatar from "../avatars/BaseAvatar";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
@@ -60,6 +56,7 @@ import {
 } from "../../../accessibility/RovingTabIndex";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { OverflowTileView } from "../rooms/OverflowTileView";
 
 const AVATAR_SIZE = 30;
 
@@ -275,17 +272,9 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
     }
 
     const [truncateAt, setTruncateAt] = useState(20);
+
     function overflowTile(overflowCount: number, totalCount: number): JSX.Element {
-        const text = _t("common|and_n_others", { count: overflowCount });
-        return (
-            <EntityTile
-                className="mx_EntityTile_ellipsis"
-                avatarJsx={<BaseAvatar url={OverflowHorizontalSvg} name="..." size="36px" />}
-                name={text}
-                showPresence={false}
-                onClick={() => setTruncateAt(totalCount)}
-            />
-        );
+        return <OverflowTileView remaining={overflowCount} onClick={() => setTruncateAt(totalCount)} />;
     }
 
     const onKeyDown = (ev: React.KeyboardEvent, state: IState): void => {
diff --git a/src/components/views/rooms/OverflowTileView.tsx b/src/components/views/rooms/OverflowTileView.tsx
new file mode 100644
index 00000000000..ea9eba6f4ca
--- /dev/null
+++ b/src/components/views/rooms/OverflowTileView.tsx
@@ -0,0 +1,32 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import Icon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+
+import { _t } from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
+
+interface Props {
+    // The number of remaining items
+    remaining: number;
+    onClick(): void;
+}
+
+/**
+ * @deprecated Only used in ForwardDialog component; newer designs have moved away from this.
+ */
+export const OverflowTileView: React.FC<Props> = ({ remaining, onClick }) => {
+    return (
+        <AccessibleButton onClick={onClick} className="mx_OverflowTileView">
+            <div className="mx_OverflowTileView_icon">
+                <Icon height="36px" width="36px" />
+            </div>
+            <div className="mx_OverflowTileView_text">{_t("common|and_n_others", { count: remaining })}</div>
+        </AccessibleButton>
+    );
+};

From c27e2fb00f4edc29fd69d2ab890fbe496e984fb2 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:46:39 +0530
Subject: [PATCH 09/24] Remove old code

---
 res/css/views/rooms/_EntityTile.pcss          | 128 -----
 res/css/views/rooms/_MemberList.pcss          |  69 ---
 src/components/views/rooms/EntityTile.tsx     | 170 -------
 src/components/views/rooms/MemberList.tsx     | 450 -----------------
 src/components/views/rooms/MemberTile.tsx     | 220 ---------
 .../views/rooms/MemberList-test.tsx           | 452 ------------------
 .../views/rooms/MemberTile-test.tsx           |  73 ---
 .../__snapshots__/MemberTile-test.tsx.snap    | 160 -------
 8 files changed, 1722 deletions(-)
 delete mode 100644 res/css/views/rooms/_EntityTile.pcss
 delete mode 100644 res/css/views/rooms/_MemberList.pcss
 delete mode 100644 src/components/views/rooms/EntityTile.tsx
 delete mode 100644 src/components/views/rooms/MemberList.tsx
 delete mode 100644 src/components/views/rooms/MemberTile.tsx
 delete mode 100644 test/unit-tests/components/views/rooms/MemberList-test.tsx
 delete mode 100644 test/unit-tests/components/views/rooms/MemberTile-test.tsx
 delete mode 100644 test/unit-tests/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap

diff --git a/res/css/views/rooms/_EntityTile.pcss b/res/css/views/rooms/_EntityTile.pcss
deleted file mode 100644
index 979d5bb5d43..00000000000
--- a/res/css/views/rooms/_EntityTile.pcss
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_EntityTile {
-    display: flex;
-    align-items: center;
-    color: $primary-content;
-    cursor: pointer;
-
-    .mx_E2EIcon {
-        margin: 0;
-        position: absolute;
-        bottom: 2px;
-        right: 7px;
-    }
-}
-
-.mx_EntityTile:hover {
-    padding-right: 30px;
-    position: relative; /* to keep the chevron aligned */
-}
-
-.mx_EntityTile:hover::before {
-    content: "";
-    position: absolute;
-    top: calc(50% - 8px); /* center */
-    right: -8px;
-    mask: url("@vector-im/compound-design-tokens/icons/chevron-right.svg");
-    mask-repeat: no-repeat;
-    mask-position: center;
-    width: 16px;
-    height: 16px;
-    background-color: $header-panel-text-primary-color;
-}
-
-.mx_EntityTile:not(.mx_EntityTile_unreachable) .mx_PresenceLabel {
-    display: none;
-}
-
-.mx_EntityTile:hover .mx_PresenceLabel {
-    display: block;
-}
-
-.mx_EntityTile_invite {
-    display: table-cell;
-    vertical-align: middle;
-    margin-left: 10px;
-    width: 26px;
-}
-
-.mx_EntityTile_avatar {
-    padding-left: 3px;
-    padding-right: 12px;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    position: relative;
-    line-height: 0;
-}
-
-.mx_EntityTile_name {
-    flex: 1 1 0;
-    overflow: hidden;
-    font: var(--cpd-font-body-md-regular);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.mx_EntityTile_details {
-    overflow: hidden;
-    flex: 1;
-}
-
-.mx_EntityTile_ellipsis .mx_EntityTile_name {
-    font-style: italic;
-    color: $primary-content;
-}
-
-.mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
-    font-style: italic;
-    color: $primary-content;
-}
-
-.mx_EntityTile_unavailable .mx_EntityTile_avatar,
-.mx_EntityTile_unavailable .mx_EntityTile_name,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name {
-    opacity: 0.5;
-}
-
-.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name {
-    opacity: 0.25;
-}
-
-.mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name,
-.mx_EntityTile_unreachable .mx_EntityTile_avatar,
-.mx_EntityTile_unreachable .mx_EntityTile_name {
-    opacity: 0.25;
-}
-
-.mx_EntityTile_subtext {
-    font-size: $font-11px;
-    opacity: 0.5;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: clip;
-}
-
-.mx_EntityTile_power {
-    padding-inline-start: 6px;
-    font-size: $font-10px;
-    color: $secondary-content;
-    max-width: 6em;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.mx_EntityTile:hover .mx_EntityTile_power {
-    display: none;
-}
diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss
deleted file mode 100644
index e3fe819ab65..00000000000
--- a/res/css/views/rooms/_MemberList.pcss
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MemberList {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-
-    .mx_Spinner {
-        flex: 1 0 auto;
-    }
-
-    .mx_SearchBox {
-        margin-bottom: 5px;
-    }
-
-    h2 {
-        text-transform: uppercase;
-        color: $h3-color;
-        font-weight: var(--cpd-font-weight-semibold);
-        font-size: $font-13px;
-        padding-left: 3px;
-        padding-right: 12px;
-        margin-top: 8px;
-        margin-bottom: 4px;
-    }
-
-    .mx_AutoHideScrollbar {
-        flex: 1 1 0;
-        margin-top: var(--cpd-space-3x);
-    }
-}
-
-.mx_MemberList_chevron {
-    position: absolute;
-    right: 35px;
-    margin-top: -15px;
-}
-
-.mx_MemberList_border {
-    overflow-y: auto;
-
-    order: 1;
-    flex: 1 1 0px;
-}
-
-.mx_MemberList_query {
-    height: 16px;
-
-    /* stricter rule to override the one in _common.pcss */
-    &[type="text"] {
-        font-size: $font-12px;
-    }
-}
-
-.mx_MemberList_wrapper {
-    padding: 10px;
-}
-
-.mx_MemberList_invite {
-    margin: 0 var(--cpd-space-2x);
-    width: calc(100% - var(--cpd-space-4x));
-}
diff --git a/src/components/views/rooms/EntityTile.tsx b/src/components/views/rooms/EntityTile.tsx
deleted file mode 100644
index 946a5cd46b4..00000000000
--- a/src/components/views/rooms/EntityTile.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2018 New Vector Ltd
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import classNames from "classnames";
-
-import AccessibleButton from "../elements/AccessibleButton";
-import { _t, _td, TranslationKey } from "../../../languageHandler";
-import E2EIcon, { E2EState } from "./E2EIcon";
-import BaseAvatar from "../avatars/BaseAvatar";
-import PresenceLabel from "./PresenceLabel";
-
-export enum PowerStatus {
-    Admin = "admin",
-    Moderator = "moderator",
-}
-
-const PowerLabel: Record<PowerStatus, TranslationKey> = {
-    [PowerStatus.Admin]: _td("power_level|admin"),
-    [PowerStatus.Moderator]: _td("power_level|mod"),
-};
-
-export type PresenceState = "offline" | "online" | "unavailable" | "io.element.unreachable";
-
-const PRESENCE_CLASS: Record<PresenceState, string> = {
-    "offline": "mx_EntityTile_offline",
-    "online": "mx_EntityTile_online",
-    "unavailable": "mx_EntityTile_unavailable",
-    "io.element.unreachable": "mx_EntityTile_unreachable",
-};
-
-function presenceClassForMember(presenceState?: PresenceState, lastActiveAgo?: number, showPresence?: boolean): string {
-    if (showPresence === false) {
-        return "mx_EntityTile_online_beenactive";
-    }
-
-    // offline is split into two categories depending on whether we have
-    // a last_active_ago for them.
-    if (presenceState === "offline") {
-        if (lastActiveAgo) {
-            return PRESENCE_CLASS["offline"] + "_beenactive";
-        } else {
-            return PRESENCE_CLASS["offline"] + "_neveractive";
-        }
-    } else if (presenceState) {
-        return PRESENCE_CLASS[presenceState];
-    } else {
-        return PRESENCE_CLASS["offline"] + "_neveractive";
-    }
-}
-
-interface IProps {
-    name?: string;
-    nameJSX?: JSX.Element;
-    title?: string;
-    avatarJsx?: JSX.Element; // <BaseAvatar />
-    className?: string;
-    presenceState: PresenceState;
-    presenceLastActiveAgo: number;
-    presenceLastTs: number;
-    presenceCurrentlyActive?: boolean;
-    onClick(): void;
-    showPresence: boolean;
-    subtextLabel?: string;
-    e2eStatus?: E2EState;
-    powerStatus?: PowerStatus;
-}
-
-interface IState {
-    hover: boolean;
-}
-
-export default class EntityTile extends React.PureComponent<IProps, IState> {
-    public static defaultProps = {
-        onClick: () => {},
-        presenceState: "offline",
-        presenceLastActiveAgo: 0,
-        presenceLastTs: 0,
-        showInviteButton: false,
-        showPresence: true,
-    };
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            hover: false,
-        };
-    }
-
-    /**
-     * Creates the PresenceLabel component if needed
-     * @returns The PresenceLabel component if we need to render it, undefined otherwise
-     */
-    private getPresenceLabel(): JSX.Element | undefined {
-        if (!this.props.showPresence) return;
-        const activeAgo = this.props.presenceLastActiveAgo
-            ? Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)
-            : -1;
-        return (
-            <PresenceLabel
-                activeAgo={activeAgo}
-                currentlyActive={this.props.presenceCurrentlyActive}
-                presenceState={this.props.presenceState}
-            />
-        );
-    }
-
-    public render(): React.ReactNode {
-        const mainClassNames: Record<string, boolean> = {
-            mx_EntityTile: true,
-        };
-        if (this.props.className) mainClassNames[this.props.className] = true;
-
-        const presenceClass = presenceClassForMember(
-            this.props.presenceState,
-            this.props.presenceLastActiveAgo,
-            this.props.showPresence,
-        );
-        mainClassNames[presenceClass] = true;
-
-        const name = this.props.nameJSX || this.props.name;
-        const nameAndPresence = (
-            <div className="mx_EntityTile_details">
-                <div className="mx_EntityTile_name">{name}</div>
-                {this.getPresenceLabel()}
-            </div>
-        );
-
-        let powerLabel;
-        const powerStatus = this.props.powerStatus;
-        if (powerStatus) {
-            const powerText = _t(PowerLabel[powerStatus]);
-            powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
-        }
-
-        let e2eIcon;
-        const { e2eStatus } = this.props;
-        if (e2eStatus) {
-            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} bordered={true} />;
-        }
-
-        const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} size="36px" aria-hidden="true" />;
-
-        // The wrapping div is required to make the magic mouse listener work, for some reason.
-        return (
-            <div>
-                <AccessibleButton
-                    className={classNames(mainClassNames)}
-                    title={this.props.title}
-                    onClick={this.props.onClick}
-                >
-                    <div className="mx_EntityTile_avatar">
-                        {av}
-                        {e2eIcon}
-                    </div>
-                    {nameAndPresence}
-                    {powerLabel}
-                </AccessibleButton>
-            </div>
-        );
-    }
-}
diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx
deleted file mode 100644
index 5587b56bf82..00000000000
--- a/src/components/views/rooms/MemberList.tsx
+++ /dev/null
@@ -1,450 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
-Copyright 2017, 2018 New Vector Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import {
-    MatrixEvent,
-    Room,
-    RoomEvent,
-    RoomMember,
-    RoomMemberEvent,
-    RoomState,
-    RoomStateEvent,
-    User,
-    UserEvent,
-    EventType,
-    ClientEvent,
-} from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import { throttle } from "lodash";
-import { Button, Tooltip } from "@vector-im/compound-web";
-import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add-solid";
-// eslint-disable-next-line no-restricted-imports
-import OverflowHorizontalSvg from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg";
-
-import { _t } from "../../../languageHandler";
-import dis from "../../../dispatcher/dispatcher";
-import { isValid3pidInvite } from "../../../RoomInvite";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import BaseCard from "../right_panel/BaseCard";
-import TruncatedList from "../elements/TruncatedList";
-import Spinner from "../elements/Spinner";
-import SearchBox from "../../structures/SearchBox";
-import { ButtonEvent } from "../elements/AccessibleButton";
-import EntityTile from "./EntityTile";
-import MemberTile from "./MemberTile";
-import BaseAvatar from "../avatars/BaseAvatar";
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../../settings/UIFeature";
-import PosthogTrackers from "../../../PosthogTrackers";
-import { SDKContext } from "../../../contexts/SDKContext";
-import { canInviteTo } from "../../../utils/room/canInviteTo";
-import { inviteToRoom } from "../../../utils/room/inviteToRoom";
-import { Action } from "../../../dispatcher/actions";
-
-const INITIAL_LOAD_NUM_MEMBERS = 30;
-const INITIAL_LOAD_NUM_INVITED = 5;
-const SHOW_MORE_INCREMENT = 100;
-
-interface IProps {
-    roomId: string;
-    searchQuery: string;
-    onClose(): void;
-    onSearchQueryChanged: (query: string) => void;
-}
-
-interface IState {
-    loading: boolean;
-    filteredJoinedMembers: Array<RoomMember>;
-    filteredInvitedMembers: Array<RoomMember | MatrixEvent>;
-    canInvite: boolean;
-    truncateAtJoined: number;
-    truncateAtInvited: number;
-}
-
-export default class MemberList extends React.Component<IProps, IState> {
-    private readonly showPresence: boolean;
-    private unmounted = false;
-
-    public static contextType = SDKContext;
-    declare public context: React.ContextType<typeof SDKContext>;
-    private tiles: Map<string, MemberTile> = new Map();
-
-    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
-        super(props, context);
-        this.state = this.getMembersState([], []);
-        this.showPresence = context?.memberListStore.isPresenceEnabled() ?? true;
-    }
-
-    private listenForMembersChanges(): void {
-        const cli = MatrixClientPeg.safeGet();
-        cli.on(RoomStateEvent.Update, this.onRoomStateUpdate);
-        cli.on(RoomMemberEvent.Name, this.onRoomMemberName);
-        cli.on(RoomStateEvent.Events, this.onRoomStateEvent);
-        // We listen for changes to the lastPresenceTs which is essentially
-        // listening for all presence events (we display most of not all of
-        // the information contained in presence events).
-        cli.on(UserEvent.LastPresenceTs, this.onUserPresenceChange);
-        cli.on(UserEvent.Presence, this.onUserPresenceChange);
-        cli.on(UserEvent.CurrentlyActive, this.onUserPresenceChange);
-        cli.on(ClientEvent.Room, this.onRoom); // invites & joining after peek
-        cli.on(RoomEvent.MyMembership, this.onMyMembership);
-    }
-
-    public componentDidMount(): void {
-        this.unmounted = false;
-        this.listenForMembersChanges();
-        this.updateListNow(true);
-    }
-
-    public componentWillUnmount(): void {
-        this.unmounted = true;
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
-            cli.removeListener(RoomMemberEvent.Name, this.onRoomMemberName);
-            cli.removeListener(RoomEvent.MyMembership, this.onMyMembership);
-            cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvent);
-            cli.removeListener(ClientEvent.Room, this.onRoom);
-            cli.removeListener(UserEvent.LastPresenceTs, this.onUserPresenceChange);
-            cli.removeListener(UserEvent.Presence, this.onUserPresenceChange);
-            cli.removeListener(UserEvent.CurrentlyActive, this.onUserPresenceChange);
-        }
-
-        // cancel any pending calls to the rate_limited_funcs
-        this.updateList.cancel();
-    }
-
-    private get canInvite(): boolean {
-        const cli = MatrixClientPeg.safeGet();
-        const room = cli.getRoom(this.props.roomId);
-
-        return !!room && canInviteTo(room);
-    }
-
-    private getMembersState(invitedMembers: Array<RoomMember>, joinedMembers: Array<RoomMember>): IState {
-        return {
-            loading: false,
-            filteredJoinedMembers: joinedMembers,
-            filteredInvitedMembers: invitedMembers,
-            canInvite: this.canInvite,
-
-            // ideally we'd size this to the page height, but
-            // in practice I find that a little constraining
-            truncateAtJoined: INITIAL_LOAD_NUM_MEMBERS,
-            truncateAtInvited: INITIAL_LOAD_NUM_INVITED,
-        };
-    }
-
-    private onUserPresenceChange = (event: MatrixEvent | undefined, user: User): void => {
-        // Attach a SINGLE listener for global presence changes then locate the
-        // member tile and re-render it. This is more efficient than every tile
-        // ever attaching their own listener.
-        const tile = this.tiles.get(user.userId);
-        if (tile) {
-            this.updateList(); // reorder the membership list
-        }
-    };
-
-    private onRoom = (room: Room): void => {
-        if (room.roomId !== this.props.roomId) {
-            return;
-        }
-        // We listen for room events because when we accept an invite
-        // we need to wait till the room is fully populated with state
-        // before refreshing the member list else we get a stale list.
-        this.updateListNow(true);
-    };
-
-    private onMyMembership = (room: Room, membership: string, oldMembership?: string): void => {
-        if (
-            room.roomId === this.props.roomId &&
-            membership === KnownMembership.Join &&
-            oldMembership !== KnownMembership.Join
-        ) {
-            // we just joined the room, load the member list
-            this.updateListNow(true);
-        }
-    };
-
-    private onRoomStateUpdate = (state: RoomState): void => {
-        if (state.roomId !== this.props.roomId) return;
-        this.updateList();
-    };
-
-    private onRoomMemberName = (ev: MatrixEvent, member: RoomMember): void => {
-        if (member.roomId !== this.props.roomId) {
-            return;
-        }
-        this.updateList();
-    };
-
-    private onRoomStateEvent = (event: MatrixEvent): void => {
-        if (event.getRoomId() === this.props.roomId && event.getType() === EventType.RoomThirdPartyInvite) {
-            this.updateList();
-        }
-
-        if (this.canInvite !== this.state.canInvite) this.setState({ canInvite: this.canInvite });
-    };
-
-    private updateList = throttle(
-        () => {
-            this.updateListNow(false);
-        },
-        500,
-        { leading: true, trailing: true },
-    );
-
-    // XXX: exported for tests
-    public async updateListNow(showLoadingSpinner?: boolean): Promise<void> {
-        if (this.unmounted) {
-            return;
-        }
-        if (showLoadingSpinner) {
-            this.setState({ loading: true });
-        }
-        const { joined, invited } = await this.context.memberListStore.loadMemberList(
-            this.props.roomId,
-            this.props.searchQuery,
-        );
-        if (this.unmounted) {
-            return;
-        }
-        this.setState({
-            loading: false,
-            filteredJoinedMembers: joined,
-            filteredInvitedMembers: invited,
-        });
-    }
-
-    private createOverflowTileJoined = (overflowCount: number, totalCount: number): JSX.Element => {
-        return this.createOverflowTile(overflowCount, totalCount, this.showMoreJoinedMemberList);
-    };
-
-    private createOverflowTileInvited = (overflowCount: number, totalCount: number): JSX.Element => {
-        return this.createOverflowTile(overflowCount, totalCount, this.showMoreInvitedMemberList);
-    };
-
-    private createOverflowTile = (overflowCount: number, totalCount: number, onClick: () => void): JSX.Element => {
-        // For now we'll pretend this is any entity. It should probably be a separate tile.
-        const text = _t("common|and_n_others", { count: overflowCount });
-        return (
-            <EntityTile
-                className="mx_EntityTile_ellipsis"
-                avatarJsx={<BaseAvatar url={OverflowHorizontalSvg} name="..." size="36px" />}
-                name={text}
-                showPresence={false}
-                onClick={onClick}
-            />
-        );
-    };
-
-    private showMoreJoinedMemberList = (): void => {
-        this.setState({
-            truncateAtJoined: this.state.truncateAtJoined + SHOW_MORE_INCREMENT,
-        });
-    };
-
-    private showMoreInvitedMemberList = (): void => {
-        this.setState({
-            truncateAtInvited: this.state.truncateAtInvited + SHOW_MORE_INCREMENT,
-        });
-    };
-
-    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
-        if (prevProps.searchQuery !== this.props.searchQuery) {
-            this.updateListNow(false);
-        }
-    }
-
-    private onSearchQueryChanged = (searchQuery: string): void => {
-        this.props.onSearchQueryChanged(searchQuery);
-    };
-
-    private onPending3pidInviteClick = (inviteEvent: MatrixEvent): void => {
-        dis.dispatch({
-            action: Action.View3pidInvite,
-            event: inviteEvent,
-        });
-    };
-
-    private getPending3PidInvites(): MatrixEvent[] {
-        // include 3pid invites (m.room.third_party_invite) state events.
-        // The HS may have already converted these into m.room.member invites so
-        // we shouldn't add them if the 3pid invite state key (token) is in the
-        // member invite (content.third_party_invite.signed.token)
-        const room = MatrixClientPeg.safeGet().getRoom(this.props.roomId);
-
-        if (room) {
-            return room.currentState.getStateEvents("m.room.third_party_invite").filter(function (e) {
-                if (!isValid3pidInvite(e)) return false;
-
-                // discard all invites which have a m.room.member event since we've
-                // already added them.
-                const memberEvent = room.currentState.getInviteForThreePidToken(e.getStateKey()!);
-                if (memberEvent) return false;
-                return true;
-            });
-        }
-
-        return [];
-    }
-
-    private makeMemberTiles(members: Array<RoomMember | MatrixEvent>): JSX.Element[] {
-        return members.map((m) => {
-            if (m instanceof RoomMember) {
-                // Is a Matrix invite
-                return (
-                    <MemberTile
-                        key={m.userId}
-                        member={m}
-                        ref={(tile) => {
-                            if (tile) this.tiles.set(m.userId, tile);
-                            else this.tiles.delete(m.userId);
-                        }}
-                        showPresence={this.showPresence}
-                    />
-                );
-            } else {
-                // Is a 3pid invite
-                return (
-                    <EntityTile
-                        key={m.getStateKey()}
-                        name={m.getContent().display_name}
-                        showPresence={false}
-                        onClick={() => this.onPending3pidInviteClick(m)}
-                    />
-                );
-            }
-        });
-    }
-
-    private getChildrenJoined = (start: number, end: number): Array<JSX.Element> => {
-        return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
-    };
-
-    private getChildCountJoined = (): number => this.state.filteredJoinedMembers.length;
-
-    private getChildrenInvited = (start: number, end: number): Array<JSX.Element> => {
-        let targets = this.state.filteredInvitedMembers;
-        if (end > this.state.filteredInvitedMembers.length) {
-            targets = targets.concat(this.getPending3PidInvites());
-        }
-
-        return this.makeMemberTiles(targets.slice(start, end));
-    };
-
-    private getChildCountInvited = (): number => {
-        return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length;
-    };
-
-    public render(): React.ReactNode {
-        if (this.state.loading) {
-            return (
-                <BaseCard
-                    id="memberlist-panel"
-                    className="mx_MemberList"
-                    ariaLabelledBy="memberlist-panel-tab"
-                    role="tabpanel"
-                    header={_t("common|people")}
-                    onClose={this.props.onClose}
-                >
-                    <Spinner />
-                </BaseCard>
-            );
-        }
-
-        const cli = MatrixClientPeg.safeGet();
-        const room = cli.getRoom(this.props.roomId);
-        let inviteButton: JSX.Element | undefined;
-
-        if (room?.getMyMembership() === KnownMembership.Join && shouldShowComponent(UIComponent.InviteUsers)) {
-            const inviteButtonText = room.isSpaceRoom() ? _t("space|invite_this_space") : _t("room|invite_this_room");
-
-            const button = (
-                <Button
-                    size="sm"
-                    kind="secondary"
-                    className="mx_MemberList_invite"
-                    onClick={this.onInviteButtonClick}
-                    disabled={!this.state.canInvite}
-                >
-                    <UserAddIcon width="1em" height="1em" />
-                    {inviteButtonText}
-                </Button>
-            );
-
-            if (this.state.canInvite) {
-                inviteButton = button;
-            } else {
-                inviteButton = <Tooltip label={_t("member_list|invite_button_no_perms_tooltip")}>{button}</Tooltip>;
-            }
-        }
-
-        let invitedHeader;
-        let invitedSection;
-        if (this.getChildCountInvited() > 0) {
-            invitedHeader = <h2>{_t("member_list|invited_list_heading")}</h2>;
-            invitedSection = (
-                <TruncatedList
-                    className="mx_MemberList_section mx_MemberList_invited"
-                    truncateAt={this.state.truncateAtInvited}
-                    createOverflowElement={this.createOverflowTileInvited}
-                    getChildren={this.getChildrenInvited}
-                    getChildCount={this.getChildCountInvited}
-                />
-            );
-        }
-
-        const footer = (
-            <SearchBox
-                className="mx_MemberList_query mx_textinput_icon mx_textinput_search"
-                placeholder={_t("member_list|filter_placeholder")}
-                onSearch={this.onSearchQueryChanged}
-                initialValue={this.props.searchQuery}
-            />
-        );
-
-        return (
-            <BaseCard
-                id="memberlist-panel"
-                className="mx_MemberList"
-                ariaLabelledBy="memberlist-panel-tab"
-                role="tabpanel"
-                header={_t("common|people")}
-                footer={footer}
-                onClose={this.props.onClose}
-            >
-                {inviteButton}
-                <div className="mx_MemberList_wrapper">
-                    <TruncatedList
-                        className="mx_MemberList_section mx_MemberList_joined"
-                        truncateAt={this.state.truncateAtJoined}
-                        createOverflowElement={this.createOverflowTileJoined}
-                        getChildren={this.getChildrenJoined}
-                        getChildCount={this.getChildCountJoined}
-                    />
-                    {invitedHeader}
-                    {invitedSection}
-                </div>
-            </BaseCard>
-        );
-    }
-
-    private onInviteButtonClick = (ev: ButtonEvent): void => {
-        PosthogTrackers.trackInteraction("WebRightPanelMemberListInviteButton", ev);
-
-        const cli = MatrixClientPeg.safeGet();
-        const room = cli.getRoom(this.props.roomId)!;
-
-        inviteToRoom(room);
-    };
-}
diff --git a/src/components/views/rooms/MemberTile.tsx b/src/components/views/rooms/MemberTile.tsx
deleted file mode 100644
index acb2e5153ba..00000000000
--- a/src/components/views/rooms/MemberTile.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { RoomMember, RoomStateEvent, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
-import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
-
-import dis from "../../../dispatcher/dispatcher";
-import { _t } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { Action } from "../../../dispatcher/actions";
-import EntityTile, { PowerStatus, PresenceState } from "./EntityTile";
-import MemberAvatar from "./../avatars/MemberAvatar";
-import DisambiguatedProfile from "../messages/DisambiguatedProfile";
-import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
-import { E2EState } from "./E2EIcon";
-import { asyncSome } from "../../../utils/arrays";
-import { getUserDeviceIds } from "../../../utils/crypto/deviceInfo";
-
-interface IProps {
-    member: RoomMember;
-    showPresence?: boolean;
-}
-
-interface IState {
-    isRoomEncrypted: boolean;
-    e2eStatus?: E2EState;
-}
-
-export default class MemberTile extends React.Component<IProps, IState> {
-    private userLastModifiedTime?: number;
-    private memberLastModifiedTime?: number;
-
-    public static defaultProps = {
-        showPresence: true,
-    };
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            isRoomEncrypted: false,
-        };
-    }
-
-    public componentDidMount(): void {
-        const cli = MatrixClientPeg.safeGet();
-
-        const { roomId } = this.props.member;
-        if (roomId) {
-            const isRoomEncrypted = cli.isRoomEncrypted(roomId);
-            this.setState({
-                isRoomEncrypted,
-            });
-            if (isRoomEncrypted) {
-                cli.on(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
-                this.updateE2EStatus();
-            } else {
-                // Listen for room to become encrypted
-                cli.on(RoomStateEvent.Events, this.onRoomStateEvents);
-            }
-        }
-    }
-
-    public componentWillUnmount(): void {
-        const cli = MatrixClientPeg.get();
-
-        if (cli) {
-            cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-            cli.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserTrustStatusChanged);
-        }
-    }
-
-    private onRoomStateEvents = (ev: MatrixEvent): void => {
-        if (ev.getType() !== EventType.RoomEncryption) return;
-        const { roomId } = this.props.member;
-        if (ev.getRoomId() !== roomId) return;
-
-        // The room is encrypted now.
-        const cli = MatrixClientPeg.safeGet();
-        cli.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
-        this.setState({
-            isRoomEncrypted: true,
-        });
-        this.updateE2EStatus();
-    };
-
-    private onUserTrustStatusChanged = (userId: string, trustStatus: UserVerificationStatus): void => {
-        if (userId !== this.props.member.userId) return;
-        this.updateE2EStatus();
-    };
-
-    private async updateE2EStatus(): Promise<void> {
-        const cli = MatrixClientPeg.safeGet();
-        const { userId } = this.props.member;
-        const isMe = userId === cli.getUserId();
-        const userTrust = await cli.getCrypto()?.getUserVerificationStatus(userId);
-        if (!userTrust?.isCrossSigningVerified()) {
-            this.setState({
-                e2eStatus: userTrust?.wasCrossSigningVerified() ? E2EState.Warning : E2EState.Normal,
-            });
-            return;
-        }
-
-        const deviceIDs = await getUserDeviceIds(cli, userId);
-        const anyDeviceUnverified = await asyncSome(deviceIDs, async (deviceId) => {
-            // For your own devices, we use the stricter check of cross-signing
-            // verification to encourage everyone to trust their own devices via
-            // cross-signing so that other users can then safely trust you.
-            // For other people's devices, the more general verified check that
-            // includes locally verified devices can be used.
-            const deviceTrust = await cli.getCrypto()?.getDeviceVerificationStatus(userId, deviceId);
-            return !deviceTrust || (isMe ? !deviceTrust.crossSigningVerified : !deviceTrust.isVerified());
-        });
-        this.setState({
-            e2eStatus: anyDeviceUnverified ? E2EState.Warning : E2EState.Verified,
-        });
-    }
-
-    public shouldComponentUpdate(nextProps: IProps, nextState: IState): boolean {
-        if (
-            this.memberLastModifiedTime === undefined ||
-            this.memberLastModifiedTime < nextProps.member.getLastModifiedTime()
-        ) {
-            return true;
-        }
-        if (
-            nextProps.member.user &&
-            (this.userLastModifiedTime === undefined ||
-                this.userLastModifiedTime < nextProps.member.user.getLastModifiedTime())
-        ) {
-            return true;
-        }
-        if (nextState.isRoomEncrypted !== this.state.isRoomEncrypted || nextState.e2eStatus !== this.state.e2eStatus) {
-            return true;
-        }
-        return false;
-    }
-
-    private onClick = (): void => {
-        dis.dispatch({
-            action: Action.ViewUser,
-            member: this.props.member,
-            push: true,
-        });
-    };
-
-    private getDisplayName(): string {
-        return this.props.member.name;
-    }
-
-    private getPowerLabel(): string {
-        return _t("member_list|power_label", {
-            userName: UserIdentifierCustomisations.getDisplayUserIdentifier(this.props.member.userId, {
-                roomId: this.props.member.roomId,
-            }),
-            powerLevelNumber: this.props.member.powerLevel,
-        }).trim();
-    }
-
-    public render(): React.ReactNode {
-        const member = this.props.member;
-        const name = this.getDisplayName();
-        const presenceState = member.user?.presence as PresenceState | undefined;
-
-        const av = <MemberAvatar member={member} size="36px" aria-hidden="true" />;
-
-        if (member.user) {
-            this.userLastModifiedTime = member.user.getLastModifiedTime();
-        }
-        this.memberLastModifiedTime = member.getLastModifiedTime();
-
-        const powerStatusMap = new Map([
-            [100, PowerStatus.Admin],
-            [50, PowerStatus.Moderator],
-        ]);
-
-        // Find the nearest power level with a badge
-        let powerLevel = this.props.member.powerLevel;
-        for (const [pl] of powerStatusMap) {
-            if (this.props.member.powerLevel >= pl) {
-                powerLevel = pl;
-                break;
-            }
-        }
-
-        const powerStatus = powerStatusMap.get(powerLevel);
-
-        let e2eStatus: E2EState | undefined;
-        if (this.state.isRoomEncrypted) {
-            e2eStatus = this.state.e2eStatus;
-        }
-
-        const nameJSX = <DisambiguatedProfile member={member} fallbackName={name || ""} />;
-
-        return (
-            <EntityTile
-                {...this.props}
-                presenceState={presenceState}
-                presenceLastActiveAgo={member.user ? member.user.lastActiveAgo : 0}
-                presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
-                presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
-                avatarJsx={av}
-                title={this.getPowerLabel()}
-                name={name}
-                nameJSX={nameJSX}
-                powerStatus={powerStatus}
-                showPresence={this.props.showPresence}
-                e2eStatus={e2eStatus}
-                onClick={this.onClick}
-            />
-        );
-    }
-}
diff --git a/test/unit-tests/components/views/rooms/MemberList-test.tsx b/test/unit-tests/components/views/rooms/MemberList-test.tsx
deleted file mode 100644
index 34c37d2ba58..00000000000
--- a/test/unit-tests/components/views/rooms/MemberList-test.tsx
+++ /dev/null
@@ -1,452 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import {
-    act,
-    fireEvent,
-    render,
-    RenderResult,
-    screen,
-    waitFor,
-    waitForElementToBeRemoved,
-    cleanup,
-} from "jest-matrix-react";
-import { Room, MatrixClient, RoomState, RoomMember, User, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import { mocked, MockedObject } from "jest-mock";
-
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import * as TestUtils from "../../../../test-utils";
-import MemberList from "../../../../../src/components/views/rooms/MemberList";
-import { SDKContext } from "../../../../../src/contexts/SDKContext";
-import { TestSdkContext } from "../../../TestSdkContext";
-import {
-    filterConsole,
-    flushPromises,
-    getMockClientWithEventEmitter,
-    mockClientMethodsRooms,
-    mockClientMethodsUser,
-} from "../../../../test-utils";
-import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
-import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
-
-jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
-    shouldShowComponent: jest.fn(),
-}));
-
-function generateRoomId() {
-    return "!" + Math.random().toString().slice(2, 10) + ":domain";
-}
-
-describe("MemberList", () => {
-    filterConsole(
-        "Age for event was not available, using `now - origin_server_ts` as a fallback. If the device clock is not correct issues might occur.",
-    );
-    function createRoom(opts = {}) {
-        const room = new Room(generateRoomId(), client, client.getUserId()!);
-        if (opts) {
-            Object.assign(room, opts);
-        }
-        return room;
-    }
-
-    let client: MatrixClient;
-    let root: RenderResult;
-    let memberListRoom: Room;
-    let memberList: MemberList;
-
-    let adminUsers: RoomMember[] = [];
-    let moderatorUsers: RoomMember[] = [];
-    let defaultUsers: RoomMember[] = [];
-
-    function memberString(member: RoomMember): string {
-        if (!member) {
-            return "(null)";
-        } else {
-            const u = member.user;
-            return (
-                "(" +
-                member.name +
-                ", " +
-                member.powerLevel +
-                ", " +
-                (u ? u.lastActiveAgo : "<null>") +
-                ", " +
-                (u ? u.getLastActiveTs() : "<null>") +
-                ", " +
-                (u ? u.currentlyActive : "<null>") +
-                ", " +
-                (u ? u.presence : "<null>") +
-                ")"
-            );
-        }
-    }
-
-    function expectOrderedByPresenceAndPowerLevel(memberTiles: NodeListOf<Element>, isPresenceEnabled: boolean) {
-        let prevMember: RoomMember | undefined;
-        for (const tile of memberTiles) {
-            const memberA = prevMember;
-            const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]];
-            prevMember = memberB; // just in case an expect fails, set this early
-            if (!memberA) {
-                continue;
-            }
-
-            console.log("COMPARING A VS B:", memberString(memberA), memberString(memberB));
-
-            const userA = memberA.user!;
-            const userB = memberB.user!;
-
-            let groupChange = false;
-
-            if (isPresenceEnabled) {
-                const convertPresence = (p: string) => (p === "unavailable" ? "online" : p);
-                const presenceIndex = (p: string) => {
-                    const order = ["active", "online", "offline"];
-                    const idx = order.indexOf(convertPresence(p));
-                    return idx === -1 ? order.length : idx; // unknown states at the end
-                };
-
-                const idxA = presenceIndex(userA.currentlyActive ? "active" : userA.presence);
-                const idxB = presenceIndex(userB.currentlyActive ? "active" : userB.presence);
-                console.log("Comparing presence groups...");
-                expect(idxB).toBeGreaterThanOrEqual(idxA);
-                groupChange = idxA !== idxB;
-            } else {
-                console.log("Skipped presence groups");
-            }
-
-            if (!groupChange) {
-                console.log("Comparing power levels...");
-                expect(memberA.powerLevel).toBeGreaterThanOrEqual(memberB.powerLevel);
-                groupChange = memberA.powerLevel !== memberB.powerLevel;
-            } else {
-                console.log("Skipping power level check due to group change");
-            }
-
-            if (!groupChange) {
-                if (isPresenceEnabled) {
-                    console.log("Comparing last active timestamp...");
-                    expect(userB.getLastActiveTs()).toBeLessThanOrEqual(userA.getLastActiveTs());
-                    groupChange = userA.getLastActiveTs() !== userB.getLastActiveTs();
-                } else {
-                    console.log("Skipping last active timestamp");
-                }
-            } else {
-                console.log("Skipping last active timestamp check due to group change");
-            }
-
-            if (!groupChange) {
-                const nameA = memberA.name[0] === "@" ? memberA.name.slice(1) : memberA.name;
-                const nameB = memberB.name[0] === "@" ? memberB.name.slice(1) : memberB.name;
-                const collator = new Intl.Collator();
-                const nameCompare = collator.compare(nameB, nameA);
-                console.log("Comparing name");
-                expect(nameCompare).toBeGreaterThanOrEqual(0);
-            } else {
-                console.log("Skipping name check due to group change");
-            }
-        }
-    }
-
-    function renderMemberList(enablePresence: boolean): void {
-        TestUtils.stubClient();
-        client = MatrixClientPeg.safeGet();
-        client.hasLazyLoadMembersEnabled = () => false;
-
-        // Make room
-        memberListRoom = createRoom();
-        expect(memberListRoom.roomId).toBeTruthy();
-
-        // Make users
-        adminUsers = [];
-        moderatorUsers = [];
-        defaultUsers = [];
-        const usersPerLevel = 2;
-        for (let i = 0; i < usersPerLevel; i++) {
-            const adminUser = new RoomMember(memberListRoom.roomId, `@admin${i}:localhost`);
-            adminUser.membership = KnownMembership.Join;
-            adminUser.powerLevel = 100;
-            adminUser.user = User.createUser(adminUser.userId, client);
-            adminUser.user.currentlyActive = true;
-            adminUser.user.presence = "online";
-            adminUser.user.lastPresenceTs = 1000;
-            adminUser.user.lastActiveAgo = 10;
-            adminUsers.push(adminUser);
-
-            const moderatorUser = new RoomMember(memberListRoom.roomId, `@moderator${i}:localhost`);
-            moderatorUser.membership = KnownMembership.Join;
-            moderatorUser.powerLevel = 50;
-            moderatorUser.user = User.createUser(moderatorUser.userId, client);
-            moderatorUser.user.currentlyActive = true;
-            moderatorUser.user.presence = "online";
-            moderatorUser.user.lastPresenceTs = 1000;
-            moderatorUser.user.lastActiveAgo = 10;
-            moderatorUsers.push(moderatorUser);
-
-            const defaultUser = new RoomMember(memberListRoom.roomId, `@default${i}:localhost`);
-            defaultUser.membership = KnownMembership.Join;
-            defaultUser.powerLevel = 0;
-            defaultUser.user = User.createUser(defaultUser.userId, client);
-            defaultUser.user.currentlyActive = true;
-            defaultUser.user.presence = "online";
-            defaultUser.user.lastPresenceTs = 1000;
-            defaultUser.user.lastActiveAgo = 10;
-            defaultUsers.push(defaultUser);
-        }
-
-        client.getRoom = (roomId) => {
-            if (roomId === memberListRoom.roomId) return memberListRoom;
-            else return null;
-        };
-        memberListRoom.currentState = {
-            members: {},
-            getMember: jest.fn(),
-            getStateEvents: ((eventType, stateKey) =>
-                stateKey === undefined ? [] : null) as RoomState["getStateEvents"], // ignore 3pid invites
-        } as unknown as RoomState;
-        for (const member of [...adminUsers, ...moderatorUsers, ...defaultUsers]) {
-            memberListRoom.currentState.members[member.userId] = member;
-        }
-
-        const gatherWrappedRef = (r: MemberList) => {
-            memberList = r;
-        };
-        const context = new TestSdkContext();
-        context.client = client;
-        context.memberListStore.isPresenceEnabled = jest.fn().mockReturnValue(enablePresence);
-        root = render(
-            <SDKContext.Provider value={context}>
-                <MemberList
-                    searchQuery=""
-                    onClose={jest.fn()}
-                    onSearchQueryChanged={jest.fn()}
-                    roomId={memberListRoom.roomId}
-                    ref={gatherWrappedRef}
-                />
-            </SDKContext.Provider>,
-        );
-    }
-
-    describe.each([false, true])("does order members correctly (presence %s)", (enablePresence) => {
-        beforeEach(function () {
-            renderMemberList(enablePresence);
-        });
-
-        describe("does order members correctly", () => {
-            // Note: even if presence is disabled, we still expect that the presence
-            // tests will pass. All expectOrderedByPresenceAndPowerLevel does is ensure
-            // the order is perceived correctly, regardless of what we did to the members.
-
-            // Each of the 4 tests here is done to prove that the member list can meet
-            // all 4 criteria independently. Together, they should work.
-
-            it("by presence state", async () => {
-                // Intentionally pick users that will confuse the power level sorting
-                const activeUsers = [defaultUsers[0]];
-                const onlineUsers = [adminUsers[0]];
-                const offlineUsers = [...moderatorUsers, ...adminUsers.slice(1), ...defaultUsers.slice(1)];
-                activeUsers.forEach((u) => {
-                    u.user!.currentlyActive = true;
-                    u.user!.presence = "online";
-                });
-                onlineUsers.forEach((u) => {
-                    u.user!.currentlyActive = false;
-                    u.user!.presence = "online";
-                });
-                offlineUsers.forEach((u) => {
-                    u.user!.currentlyActive = false;
-                    u.user!.presence = "offline";
-                });
-
-                // Bypass all the event listeners and skip to the good part
-                await act(() => memberList.updateListNow(true));
-
-                const tiles = root.container.querySelectorAll(".mx_EntityTile");
-                expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
-            });
-
-            it("by power level", async () => {
-                // We already have admin, moderator, and default users so leave them alone
-
-                // Bypass all the event listeners and skip to the good part
-                await act(() => memberList.updateListNow(true));
-
-                const tiles = root.container.querySelectorAll(".mx_EntityTile");
-                expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
-            });
-
-            it("by last active timestamp", async () => {
-                // Intentionally pick users that will confuse the power level sorting
-                // lastActiveAgoTs == lastPresenceTs - lastActiveAgo
-                const activeUsers = [defaultUsers[0]];
-                const semiActiveUsers = [adminUsers[0]];
-                const inactiveUsers = [...moderatorUsers, ...adminUsers.slice(1), ...defaultUsers.slice(1)];
-                activeUsers.forEach((u) => {
-                    u.powerLevel = 100; // set everyone to the same PL to avoid running that check
-                    u.user!.lastPresenceTs = 1000;
-                    u.user!.lastActiveAgo = 0;
-                });
-                semiActiveUsers.forEach((u) => {
-                    u.powerLevel = 100;
-                    u.user!.lastPresenceTs = 1000;
-                    u.user!.lastActiveAgo = 50;
-                });
-                inactiveUsers.forEach((u) => {
-                    u.powerLevel = 100;
-                    u.user!.lastPresenceTs = 1000;
-                    u.user!.lastActiveAgo = 100;
-                });
-
-                // Bypass all the event listeners and skip to the good part
-                await act(() => memberList.updateListNow(true));
-
-                const tiles = root.container.querySelectorAll(".mx_EntityTile");
-                expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
-            });
-
-            it("by name", async () => {
-                // Intentionally put everyone on the same level to force a name comparison
-                const allUsers = [...adminUsers, ...moderatorUsers, ...defaultUsers];
-                allUsers.forEach((u) => {
-                    u.user!.currentlyActive = true;
-                    u.user!.presence = "online";
-                    u.user!.lastPresenceTs = 1000;
-                    u.user!.lastActiveAgo = 0;
-                    u.powerLevel = 100;
-                });
-
-                // Bypass all the event listeners and skip to the good part
-                await act(() => memberList.updateListNow(true));
-
-                const tiles = root.container.querySelectorAll(".mx_EntityTile");
-                expectOrderedByPresenceAndPowerLevel(tiles, enablePresence);
-            });
-        });
-    });
-
-    describe("memberlist is rendered correctly", () => {
-        beforeEach(function () {
-            renderMemberList(true);
-        });
-
-        it("memberlist is re-rendered on unreachable presence event", async () => {
-            defaultUsers[0].user?.setPresenceEvent(
-                new MatrixEvent({
-                    type: "m.presence",
-                    sender: defaultUsers[0].userId,
-                    content: {
-                        presence: "io.element.unreachable",
-                        currently_active: false,
-                    },
-                }),
-            );
-            expect(await screen.findByText(/User's server unreachable/)).toBeInTheDocument();
-        });
-
-        describe("Invite button", () => {
-            const roomId = "!room:server.org";
-            let client!: MockedObject<MatrixClient>;
-            let room!: Room;
-
-            beforeEach(function () {
-                mocked(shouldShowComponent).mockReturnValue(true);
-                client = getMockClientWithEventEmitter({
-                    ...mockClientMethodsUser(),
-                    ...mockClientMethodsRooms(),
-                    getRoom: jest.fn(),
-                    hasLazyLoadMembersEnabled: jest.fn(),
-                });
-                room = new Room(roomId, client, client.getSafeUserId());
-                client.getRoom.mockReturnValue(room);
-            });
-
-            afterEach(() => {
-                jest.restoreAllMocks();
-                cleanup();
-            });
-
-            const renderComponent = () => {
-                const context = new TestSdkContext();
-                context.client = client;
-                return render(
-                    <SDKContext.Provider value={context}>
-                        <MemberList
-                            searchQuery=""
-                            onClose={jest.fn()}
-                            onSearchQueryChanged={jest.fn()}
-                            roomId={room.roomId}
-                        />
-                    </SDKContext.Provider>,
-                );
-            };
-
-            it("does not render invite button when current user is not a member", async () => {
-                renderComponent();
-                await flushPromises();
-
-                expect(screen.queryByText("Invite to this room")).not.toBeInTheDocument();
-            });
-
-            it("does not render invite button UI customisation hides invites", async () => {
-                mocked(shouldShowComponent).mockReturnValue(false);
-                renderComponent();
-                await flushPromises();
-
-                expect(screen.queryByText("Invite to this room")).not.toBeInTheDocument();
-            });
-
-            it("renders disabled invite button when current user is a member but does not have rights to invite", async () => {
-                jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
-                jest.spyOn(room, "canInvite").mockReturnValue(false);
-
-                const { findByLabelText } = renderComponent();
-
-                // button rendered but disabled
-                await expect(findByLabelText("You do not have permission to invite users")).resolves.toHaveAttribute(
-                    "aria-disabled",
-                    "true",
-                );
-            });
-
-            it("renders enabled invite button when current user is a member and has rights to invite", async () => {
-                jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
-                jest.spyOn(room, "canInvite").mockReturnValue(true);
-
-                const { findByText } = renderComponent();
-
-                await expect(findByText("Invite to this room")).resolves.not.toBeDisabled();
-            });
-
-            it("opens room inviter on button click", async () => {
-                jest.spyOn(defaultDispatcher, "dispatch");
-                jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
-                jest.spyOn(room, "canInvite").mockReturnValue(true);
-
-                const { getByRole } = renderComponent();
-                await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
-
-                await waitFor(() =>
-                    expect(getByRole("button", { name: "Invite to this room" })).not.toHaveAttribute(
-                        "aria-disabled",
-                        "true",
-                    ),
-                );
-
-                fireEvent.click(getByRole("button", { name: "Invite to this room" }));
-
-                expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
-                    action: "view_invite",
-                    roomId,
-                });
-            });
-        });
-    });
-});
diff --git a/test/unit-tests/components/views/rooms/MemberTile-test.tsx b/test/unit-tests/components/views/rooms/MemberTile-test.tsx
deleted file mode 100644
index cf829c2927e..00000000000
--- a/test/unit-tests/components/views/rooms/MemberTile-test.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright 2024 New Vector Ltd.
- * Copyright 2023 The Matrix.org Foundation C.I.C.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React from "react";
-import { render, screen, waitFor } from "jest-matrix-react";
-import { MatrixClient, RoomMember, Device } from "matrix-js-sdk/src/matrix";
-import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
-import { mocked } from "jest-mock";
-import userEvent from "@testing-library/user-event";
-
-import * as TestUtils from "../../../../test-utils";
-import MemberTile from "../../../../../src/components/views/rooms/MemberTile";
-
-describe("MemberTile", () => {
-    let matrixClient: MatrixClient;
-    let member: RoomMember;
-
-    beforeEach(() => {
-        matrixClient = TestUtils.stubClient();
-        mocked(matrixClient.isRoomEncrypted).mockReturnValue(true);
-        member = new RoomMember("roomId", matrixClient.getUserId()!);
-    });
-
-    it("should not display an E2EIcon when the e2E status = normal", () => {
-        const { container } = render(<MemberTile member={member} />);
-
-        expect(container).toMatchSnapshot();
-    });
-
-    it("should display an warning E2EIcon when the e2E status = Warning", async () => {
-        mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
-            isCrossSigningVerified: jest.fn().mockReturnValue(false),
-            wasCrossSigningVerified: jest.fn().mockReturnValue(true),
-        } as unknown as UserVerificationStatus);
-
-        const { container } = render(<MemberTile member={member} />);
-
-        expect(container).toMatchSnapshot();
-        await waitFor(async () => {
-            await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
-            expect(screen.getByText("This user has not verified all of their sessions.")).toBeInTheDocument();
-        });
-    });
-
-    it("should display an verified E2EIcon when the e2E status = Verified", async () => {
-        // Mock all the required crypto methods
-        const deviceMap = new Map<string, Map<string, Device>>();
-        deviceMap.set(member.userId, new Map([["deviceId", {} as Device]]));
-        // Return a DeviceMap = Map<string, Map<string, Device>>
-        mocked(matrixClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(deviceMap);
-        mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
-            isCrossSigningVerified: jest.fn().mockReturnValue(true),
-        } as unknown as UserVerificationStatus);
-        mocked(matrixClient.getCrypto()!.getDeviceVerificationStatus).mockResolvedValue({
-            crossSigningVerified: true,
-        } as DeviceVerificationStatus);
-
-        const { container } = render(<MemberTile member={member} />);
-
-        expect(container).toMatchSnapshot();
-        await waitFor(async () => {
-            await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
-            expect(
-                screen.getByText("You have verified this user. This user has verified all of their sessions."),
-            ).toBeInTheDocument();
-        });
-    });
-});
diff --git a/test/unit-tests/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
deleted file mode 100644
index b5d7b87a7ea..00000000000
--- a/test/unit-tests/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap
+++ /dev/null
@@ -1,160 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MemberTile should display an verified E2EIcon when the e2E status = Verified 1`] = `
-<div>
-  <div>
-    <div
-      aria-label="@userId:matrix.org (power 0)"
-      class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
-      role="button"
-      tabindex="0"
-    >
-      <div
-        class="mx_EntityTile_avatar"
-      >
-        <span
-          aria-hidden="true"
-          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
-          data-color="2"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 36px;"
-          title="@userId:matrix.org"
-        >
-          u
-        </span>
-      </div>
-      <div
-        class="mx_EntityTile_details"
-      >
-        <div
-          class="mx_EntityTile_name"
-        >
-          <div
-            class="mx_DisambiguatedProfile"
-          >
-            <span
-              class=""
-              dir="auto"
-            >
-              @userId:matrix.org
-            </span>
-          </div>
-        </div>
-        <div
-          class="mx_PresenceLabel"
-        >
-          Offline
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`MemberTile should display an warning E2EIcon when the e2E status = Warning 1`] = `
-<div>
-  <div>
-    <div
-      aria-label="@userId:matrix.org (power 0)"
-      class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
-      role="button"
-      tabindex="0"
-    >
-      <div
-        class="mx_EntityTile_avatar"
-      >
-        <span
-          aria-hidden="true"
-          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
-          data-color="2"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 36px;"
-          title="@userId:matrix.org"
-        >
-          u
-        </span>
-      </div>
-      <div
-        class="mx_EntityTile_details"
-      >
-        <div
-          class="mx_EntityTile_name"
-        >
-          <div
-            class="mx_DisambiguatedProfile"
-          >
-            <span
-              class=""
-              dir="auto"
-            >
-              @userId:matrix.org
-            </span>
-          </div>
-        </div>
-        <div
-          class="mx_PresenceLabel"
-        >
-          Offline
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`MemberTile should not display an E2EIcon when the e2E status = normal 1`] = `
-<div>
-  <div>
-    <div
-      aria-label="@userId:matrix.org (power 0)"
-      class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
-      role="button"
-      tabindex="0"
-    >
-      <div
-        class="mx_EntityTile_avatar"
-      >
-        <span
-          aria-hidden="true"
-          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
-          data-color="2"
-          data-testid="avatar-img"
-          data-type="round"
-          role="presentation"
-          style="--cpd-avatar-size: 36px;"
-          title="@userId:matrix.org"
-        >
-          u
-        </span>
-      </div>
-      <div
-        class="mx_EntityTile_details"
-      >
-        <div
-          class="mx_EntityTile_name"
-        >
-          <div
-            class="mx_DisambiguatedProfile"
-          >
-            <span
-              class=""
-              dir="auto"
-            >
-              @userId:matrix.org
-            </span>
-          </div>
-        </div>
-        <div
-          class="mx_PresenceLabel"
-        >
-          Offline
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

From cf0726da9f1c1aaeb855e01a297875a1fb8204f8 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:47:29 +0530
Subject: [PATCH 10/24] Add/remove css files from _components.pcss

---
 res/css/_components.pcss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/res/css/_components.pcss b/res/css/_components.pcss
index e9a53cd43cc..b966d62ddd1 100644
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@@ -278,9 +278,9 @@
 @import "./views/rooms/_CallGuestLinkButton.pcss";
 @import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
+@import "./views/rooms/_E2EIconView.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
 @import "./views/rooms/_EmojiButton.pcss";
-@import "./views/rooms/_EntityTile.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";
 @import "./views/rooms/_EventPreview.pcss";
 @import "./views/rooms/_EventTile.pcss";
@@ -290,13 +290,17 @@
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
-@import "./views/rooms/_MemberList.pcss";
+@import "./views/rooms/_MemberListHeaderView.pcss";
+@import "./views/rooms/_MemberListView.pcss";
+@import "./views/rooms/_MemberTileView.pcss";
 @import "./views/rooms/_MessageComposer.pcss";
 @import "./views/rooms/_MessageComposerFormatBar.pcss";
 @import "./views/rooms/_NewRoomIntro.pcss";
 @import "./views/rooms/_NotificationBadge.pcss";
+@import "./views/rooms/_OverflowTile.pcss";
 @import "./views/rooms/_PinnedEventTile.pcss";
 @import "./views/rooms/_PinnedMessageBanner.pcss";
+@import "./views/rooms/_PresenceIconView.pcss";
 @import "./views/rooms/_PresenceLabel.pcss";
 @import "./views/rooms/_ReadReceiptGroup.pcss";
 @import "./views/rooms/_ReplyPreview.pcss";

From ceb864320fa7b5cb9400b5040901e50e1269c6d9 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:49:09 +0530
Subject: [PATCH 11/24] Increase minimum width as per design

---
 src/components/structures/MainSplit.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/structures/MainSplit.tsx b/src/components/structures/MainSplit.tsx
index 54aa2203549..dc8f911ef47 100644
--- a/src/components/structures/MainSplit.tsx
+++ b/src/components/structures/MainSplit.tsx
@@ -99,7 +99,7 @@ export default class MainSplit extends React.Component<IProps> {
                 <Resizable
                     key={this.props.sizeKey}
                     defaultSize={this.loadSidePanelSize()}
-                    minWidth={264}
+                    minWidth={320}
                     maxWidth="50%"
                     enable={{
                         top: false,

From e6e036060890f8d553ffa3780f249b5b561cd213 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:49:52 +0530
Subject: [PATCH 12/24] Actually use the new memberlist view

---
 src/components/structures/RightPanel.tsx | 21 ++-------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx
index a1f20162430..644c1cfc41f 100644
--- a/src/components/structures/RightPanel.tsx
+++ b/src/components/structures/RightPanel.tsx
@@ -17,7 +17,6 @@ import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import RoomSummaryCard from "../views/right_panel/RoomSummaryCard";
 import WidgetCard from "../views/right_panel/WidgetCard";
-import MemberList from "../views/rooms/MemberList";
 import UserInfo from "../views/right_panel/UserInfo";
 import ThirdPartyMemberInfo from "../views/rooms/ThirdPartyMemberInfo";
 import FilePanel from "./FilePanel";
@@ -34,6 +33,7 @@ import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/
 import { Action } from "../../dispatcher/actions";
 import { XOR } from "../../@types/common";
 import ExtensionsCard from "../views/right_panel/ExtensionsCard";
+import MemberListView from "../views/rooms/MemberList/MemberListView";
 
 interface BaseProps {
     overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView)
@@ -57,7 +57,6 @@ type Props = XOR<RoomlessProps, RoomProps>;
 
 interface IState {
     phase?: RightPanelPhases;
-    searchQuery: string;
     cardState?: IRightPanelCardState;
 }
 
@@ -67,10 +66,6 @@ export default class RightPanel extends React.Component<Props, IState> {
 
     public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
-
-        this.state = {
-            searchQuery: "",
-        };
     }
 
     private readonly delayedUpdate = throttle(
@@ -147,10 +142,6 @@ export default class RightPanel extends React.Component<Props, IState> {
         }
     };
 
-    private onSearchQueryChanged = (searchQuery: string): void => {
-        this.setState({ searchQuery });
-    };
-
     public render(): React.ReactNode {
         let card = <div />;
         const roomId = this.props.room?.roomId;
@@ -159,15 +150,7 @@ export default class RightPanel extends React.Component<Props, IState> {
         switch (phase) {
             case RightPanelPhases.MemberList:
                 if (!!roomId) {
-                    card = (
-                        <MemberList
-                            roomId={roomId}
-                            key={roomId}
-                            onClose={this.onClose}
-                            searchQuery={this.state.searchQuery}
-                            onSearchQueryChanged={this.onSearchQueryChanged}
-                        />
-                    );
+                    card = <MemberListView roomId={roomId} onClose={this.onClose} />;
                 }
                 break;
 

From 41e20e5038c002ec5e50fa0971eeae28d9067f6c Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:50:24 +0530
Subject: [PATCH 13/24] Fix broken jest tests

---
 test/unit-tests/components/structures/RightPanel-test.tsx     | 4 ++--
 .../structures/__snapshots__/MainSplit-test.tsx.snap          | 4 ++--
 .../structures/__snapshots__/RoomView-test.tsx.snap           | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/test/unit-tests/components/structures/RightPanel-test.tsx b/test/unit-tests/components/structures/RightPanel-test.tsx
index ad29791ee9f..6222397ad10 100644
--- a/test/unit-tests/components/structures/RightPanel-test.tsx
+++ b/test/unit-tests/components/structures/RightPanel-test.tsx
@@ -124,7 +124,7 @@ describe("RightPanel", () => {
         await waitFor(() => expect(screen.queryByTestId("spinner")).not.toBeInTheDocument());
 
         // room one will be in the MemberList phase - confirm this is rendered
-        expect(container.getElementsByClassName("mx_MemberList")).toHaveLength(1);
+        expect(container.getElementsByClassName("mx_MemberListView")).toHaveLength(1);
 
         // wait for RPS room 2 updates to fire, then rerender
         const _rpsUpdated = waitForRpsUpdate();
@@ -146,7 +146,7 @@ describe("RightPanel", () => {
         // the correct right panel state for whichever room we are showing, so we
         // confirm we do not have the MemberList class on the page and that we have
         // the expected room title
-        expect(container.getElementsByClassName("mx_MemberList")).toHaveLength(0);
+        expect(container.getElementsByClassName("mx_MemberListView")).toHaveLength(0);
         expect(screen.getByRole("heading", { name: "r2" })).toBeInTheDocument();
     });
 });
diff --git a/test/unit-tests/components/structures/__snapshots__/MainSplit-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/MainSplit-test.tsx.snap
index 94f5b236049..8f7800c82be 100644
--- a/test/unit-tests/components/structures/__snapshots__/MainSplit-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/MainSplit-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<MainSplit/> renders 1`] = `
     </div>
     <div
       class="mx_RightPanel_ResizeWrapper"
-      style="position: relative; user-select: auto; width: 320px; height: 100%; max-width: 50%; min-width: 264px; box-sizing: border-box; flex-shrink: 0;"
+      style="position: relative; user-select: auto; width: 320px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
     >
       <div>
         Right panel
@@ -44,7 +44,7 @@ exports[`<MainSplit/> respects defaultSize prop 1`] = `
     </div>
     <div
       class="mx_RightPanel_ResizeWrapper"
-      style="position: relative; user-select: auto; width: 500px; height: 100%; max-width: 50%; min-width: 264px; box-sizing: border-box; flex-shrink: 0;"
+      style="position: relative; user-select: auto; width: 500px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
     >
       <div>
         Right panel
diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index 6e9fb7fa366..65a755058bf 100644
--- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -1994,7 +1994,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
       </div>
       <div
         class="mx_RightPanel_ResizeWrapper"
-        style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 264px; box-sizing: border-box; flex-shrink: 0;"
+        style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
       >
         <aside
           class="mx_RightPanel"

From a57d0b72c32d42c126216df6a529b49341ed123f Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:51:44 +0530
Subject: [PATCH 14/24] Add jest tests

---
 test/test-utils/test-utils.ts                 |   2 +
 .../memberlist/MemberListHeaderView-test.tsx  | 121 +++++++++
 .../rooms/memberlist/MemberListView-test.tsx  | 256 ++++++++++++++++++
 .../rooms/memberlist/MemberTileView-test.tsx  | 116 ++++++++
 .../memberlist/PresenceIconView-test.tsx      |  42 +++
 .../MemberTileView-test.tsx.snap              | 231 ++++++++++++++++
 .../PresenceIconView-test.tsx.snap            | 175 ++++++++++++
 .../views/rooms/memberlist/common.tsx         | 146 ++++++++++
 8 files changed, 1089 insertions(+)
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
 create mode 100644 test/unit-tests/components/views/rooms/memberlist/common.tsx

diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index 39852f049ee..95a27ab322d 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -800,6 +800,8 @@ export const mkThirdPartyInviteEvent = (user: string, displayName: string, room:
         type: EventType.RoomThirdPartyInvite,
         content: {
             display_name: displayName,
+            public_key: "foo",
+            key_validity_url: "bar",
         },
         skey: "test" + Math.random(),
         user,
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
new file mode 100644
index 00000000000..f0e726c453c
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
@@ -0,0 +1,121 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { act, fireEvent, screen } from "jest-matrix-react";
+import { RoomMember, User, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+import { mocked } from "jest-mock";
+
+import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
+import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
+import { Rendered, renderMemberList } from "./common";
+
+jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
+    shouldShowComponent: jest.fn(),
+}));
+
+type Children = (args: { height: number; width: number }) => React.JSX.Element;
+jest.mock("react-virtualized", () => {
+    const ReactVirtualized = jest.requireActual("react-virtualized");
+    return {
+        ...ReactVirtualized,
+        AutoSizer: ({ children }: { children: Children }) => children({ height: 1000, width: 1000 }),
+    };
+});
+jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(1500);
+jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(1500);
+
+describe("Does not render invite button in memberlist header", () => {
+    it("when user is not a member", async () => {
+        await renderMemberList(true, (room) => room.updateMyMembership(KnownMembership.Leave));
+        expect(screen.queryByRole("button", { name: "Invite" })).toBeNull();
+    });
+
+    it("when UI customisation hides invites", async () => {
+        mocked(shouldShowComponent).mockReturnValue(false);
+        const { client, memberListRoom } = await renderMemberList(true);
+        // Needs this specific event...
+        act(() => {
+            client.emit(RoomEvent.MyMembership, memberListRoom, KnownMembership.Join, KnownMembership.Invite);
+        });
+        await new Promise((r) => setTimeout(r, 1000));
+        expect(screen.queryByRole("button", { name: "Invite" })).toBeNull();
+    });
+});
+
+describe("MemberListHeaderView", () => {
+    let rendered: Rendered;
+
+    beforeEach(async function () {
+        mocked(shouldShowComponent).mockReturnValue(true);
+        rendered = await renderMemberList(true);
+    });
+
+    it("Shows the correct member count", async () => {
+        expect(await screen.findByText("6 Members")).toBeVisible();
+    });
+
+    it("Does not show search box when there's less than 20 members", async () => {
+        expect(screen.queryByPlaceholderText("Search members...")).toBeNull();
+    });
+
+    it("Shows search box when there's more than 20 members", async () => {
+        const { memberListRoom, client, reRender } = rendered;
+        // Memberlist already has 6 members, add 14 more to make the total 20
+        for (let i = 0; i < 14; ++i) {
+            const newMember = new RoomMember(memberListRoom.roomId, `@new${i}:localhost`);
+            newMember.membership = KnownMembership.Join;
+            newMember.powerLevel = 0;
+            newMember.user = User.createUser(newMember.userId, client);
+            newMember.user.currentlyActive = true;
+            newMember.user.presence = "online";
+            newMember.user.lastPresenceTs = 1000;
+            newMember.user.lastActiveAgo = 10;
+            memberListRoom.currentState.members[newMember.userId] = newMember;
+        }
+        await reRender();
+        expect(screen.queryByPlaceholderText("Search members...")).toBeVisible();
+    });
+
+    describe("Invite button functionality", () => {
+        afterEach(() => {
+            jest.restoreAllMocks();
+        });
+
+        it("Renders disabled invite button when current user is a member but does not have rights to invite", async () => {
+            const { memberListRoom, reRender } = rendered;
+            jest.spyOn(memberListRoom, "getMyMembership").mockReturnValue(KnownMembership.Join);
+            jest.spyOn(memberListRoom, "canInvite").mockReturnValue(false);
+            await reRender();
+            expect(screen.getByRole("button", { name: "Invite" })).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("Renders enabled invite button when current user is a member and has rights to invite", async () => {
+            const { memberListRoom, reRender } = rendered;
+            jest.spyOn(memberListRoom, "getMyMembership").mockReturnValue(KnownMembership.Join);
+            jest.spyOn(memberListRoom, "canInvite").mockReturnValue(true);
+            await reRender();
+            expect(screen.getByRole("button", { name: "Invite" })).not.toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("Opens room inviter on button click", async () => {
+            const { memberListRoom, reRender } = rendered;
+            jest.spyOn(defaultDispatcher, "dispatch");
+            jest.spyOn(memberListRoom, "canInvite").mockReturnValue(true);
+            await reRender();
+
+            fireEvent.click(screen.getByRole("button", { name: "Invite" }));
+            expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
+                action: "view_invite",
+                roomId: memberListRoom.roomId,
+            });
+        });
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
new file mode 100644
index 00000000000..e49b642b6ee
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
@@ -0,0 +1,256 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { act } from "react";
+import { waitFor } from "jest-matrix-react";
+import { Room, RoomMember, MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { filterConsole } from "../../../../../test-utils";
+import { Rendered, renderMemberList } from "./common";
+
+jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
+    shouldShowComponent: jest.fn(),
+}));
+
+type Children = (args: { height: number; width: number }) => React.JSX.Element;
+jest.mock("react-virtualized", () => {
+    const ReactVirtualized = jest.requireActual("react-virtualized");
+    return {
+        ...ReactVirtualized,
+        AutoSizer: ({ children }: { children: Children }) => children({ height: 1000, width: 1000 }),
+    };
+});
+jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(1500);
+jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(1500);
+
+describe("MemberListView and MemberlistHeaderView", () => {
+    filterConsole(
+        "Age for event was not available, using `now - origin_server_ts` as a fallback. If the device clock is not correct issues might occur.",
+    );
+
+    function memberString(member: RoomMember): string {
+        if (!member) {
+            return "(null)";
+        } else {
+            const u = member.user;
+            return (
+                "(" +
+                member.name +
+                ", " +
+                member.powerLevel +
+                ", " +
+                (u ? u.lastActiveAgo : "<null>") +
+                ", " +
+                (u ? u.getLastActiveTs() : "<null>") +
+                ", " +
+                (u ? u.currentlyActive : "<null>") +
+                ", " +
+                (u ? u.presence : "<null>") +
+                ")"
+            );
+        }
+    }
+
+    function expectOrderedByPresenceAndPowerLevel(
+        memberListRoom: Room,
+        memberTiles: NodeListOf<Element>,
+        isPresenceEnabled: boolean,
+    ) {
+        let prevMember: RoomMember | undefined;
+        for (const tile of memberTiles) {
+            const memberA = prevMember;
+            const memberB = memberListRoom.currentState.members[tile.getAttribute("aria-label")!.split(" ")[0]];
+            prevMember = memberB; // just in case an expect fails, set this early
+            if (!memberA) {
+                continue;
+            }
+
+            console.log("COMPARING A VS B:", memberString(memberA), memberString(memberB));
+
+            const userA = memberA.user!;
+            const userB = memberB.user!;
+
+            let groupChange = false;
+
+            if (isPresenceEnabled) {
+                const convertPresence = (p: string) => (p === "unavailable" ? "online" : p);
+                const presenceIndex = (p: string) => {
+                    const order = ["active", "online", "offline"];
+                    const idx = order.indexOf(convertPresence(p));
+                    return idx === -1 ? order.length : idx; // unknown states at the end
+                };
+
+                const idxA = presenceIndex(userA.currentlyActive ? "active" : userA.presence);
+                const idxB = presenceIndex(userB.currentlyActive ? "active" : userB.presence);
+                console.log("Comparing presence groups...");
+                expect(idxB).toBeGreaterThanOrEqual(idxA);
+                groupChange = idxA !== idxB;
+            } else {
+                console.log("Skipped presence groups");
+            }
+
+            if (!groupChange) {
+                console.log("Comparing power levels...");
+                expect(memberA.powerLevel).toBeGreaterThanOrEqual(memberB.powerLevel);
+                groupChange = memberA.powerLevel !== memberB.powerLevel;
+            } else {
+                console.log("Skipping power level check due to group change");
+            }
+
+            if (!groupChange) {
+                if (isPresenceEnabled) {
+                    console.log("Comparing last active timestamp...");
+                    expect(userB.getLastActiveTs()).toBeLessThanOrEqual(userA.getLastActiveTs());
+                    groupChange = userA.getLastActiveTs() !== userB.getLastActiveTs();
+                } else {
+                    console.log("Skipping last active timestamp");
+                }
+            } else {
+                console.log("Skipping last active timestamp check due to group change");
+            }
+
+            if (!groupChange) {
+                const nameA = memberA.name[0] === "@" ? memberA.name.slice(1) : memberA.name;
+                const nameB = memberB.name[0] === "@" ? memberB.name.slice(1) : memberB.name;
+                const collator = new Intl.Collator();
+                const nameCompare = collator.compare(nameB, nameA);
+                console.log("Comparing name");
+                expect(nameCompare).toBeGreaterThanOrEqual(0);
+            } else {
+                console.log("Skipping name check due to group change");
+            }
+        }
+    }
+
+    describe("MemberListView", () => {
+        let rendered: Rendered;
+
+        beforeEach(async function () {
+            rendered = await renderMemberList(true);
+        });
+
+        it("Memberlist is re-rendered on unreachable presence event", async () => {
+            const { root, defaultUsers } = rendered;
+            await act(async () => {
+                defaultUsers[0].user?.setPresenceEvent(
+                    new MatrixEvent({
+                        type: "m.presence",
+                        sender: defaultUsers[0].userId,
+                        content: {
+                            presence: "io.element.unreachable",
+                            currently_active: false,
+                        },
+                    }),
+                );
+            });
+            await waitFor(() => {
+                expect(root.container.querySelector(".mx_PresenceIconView_unavailable")).not.toBeNull();
+            });
+        });
+    });
+
+    describe.each([true, false])("does order members correctly (presence %s)", (enablePresence) => {
+        let rendered: Rendered;
+
+        beforeEach(async function () {
+            rendered = await renderMemberList(enablePresence);
+        });
+
+        describe("does order members correctly", () => {
+            // Note: even if presence is disabled, we still expect that the presence
+            // tests will pass. All expectOrderedByPresenceAndPowerLevel does is ensure
+            // the order is perceived correctly, regardless of what we did to the members.
+
+            // Each of the 4 tests here is done to prove that the member list can meet
+            // all 4 criteria independently. Together, they should work.
+
+            it("by presence state", async () => {
+                const { adminUsers, defaultUsers, moderatorUsers, reRender, root, memberListRoom } = rendered;
+                // Intentionally pick users that will confuse the power level sorting
+                const activeUsers = [defaultUsers[0]];
+                const onlineUsers = [adminUsers[0]];
+                const offlineUsers = [...moderatorUsers, ...adminUsers.slice(1), ...defaultUsers.slice(1)];
+                activeUsers.forEach((u) => {
+                    u.user!.currentlyActive = true;
+                    u.user!.presence = "online";
+                });
+                onlineUsers.forEach((u) => {
+                    u.user!.currentlyActive = false;
+                    u.user!.presence = "online";
+                });
+                offlineUsers.forEach((u) => {
+                    u.user!.currentlyActive = false;
+                    u.user!.presence = "offline";
+                });
+
+                await reRender();
+
+                const tiles = root.container.querySelectorAll(".mx_MemberTileView");
+                expectOrderedByPresenceAndPowerLevel(memberListRoom, tiles, enablePresence);
+            });
+
+            it("by power level", async () => {
+                const { reRender, root, memberListRoom } = rendered;
+                // We already have admin, moderator, and default users so leave them alone
+
+                await reRender();
+
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
+                expectOrderedByPresenceAndPowerLevel(memberListRoom, tiles, enablePresence);
+            });
+
+            it("by last active timestamp", async () => {
+                const { adminUsers, defaultUsers, moderatorUsers, reRender, root, memberListRoom } = rendered;
+                // Intentionally pick users that will confuse the power level sorting
+                // lastActiveAgoTs == lastPresenceTs - lastActiveAgo
+                const activeUsers = [defaultUsers[0]];
+                const semiActiveUsers = [adminUsers[0]];
+                const inactiveUsers = [...moderatorUsers, ...adminUsers.slice(1), ...defaultUsers.slice(1)];
+                activeUsers.forEach((u) => {
+                    u.powerLevel = 100; // set everyone to the same PL to avoid running that check
+                    u.user!.lastPresenceTs = 1000;
+                    u.user!.lastActiveAgo = 0;
+                });
+                semiActiveUsers.forEach((u) => {
+                    u.powerLevel = 100;
+                    u.user!.lastPresenceTs = 1000;
+                    u.user!.lastActiveAgo = 50;
+                });
+                inactiveUsers.forEach((u) => {
+                    u.powerLevel = 100;
+                    u.user!.lastPresenceTs = 1000;
+                    u.user!.lastActiveAgo = 100;
+                });
+
+                await reRender();
+
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
+                expectOrderedByPresenceAndPowerLevel(memberListRoom, tiles, enablePresence);
+            });
+
+            it("by name", async () => {
+                const { adminUsers, defaultUsers, moderatorUsers, reRender, root, memberListRoom } = rendered;
+                // Intentionally put everyone on the same level to force a name comparison
+                const allUsers = [...adminUsers, ...moderatorUsers, ...defaultUsers];
+                allUsers.forEach((u) => {
+                    u.user!.currentlyActive = true;
+                    u.user!.presence = "online";
+                    u.user!.lastPresenceTs = 1000;
+                    u.user!.lastActiveAgo = 0;
+                    u.powerLevel = 100;
+                });
+
+                await reRender();
+
+                const tiles = root.container.querySelectorAll(".mx_EntityTile");
+                expectOrderedByPresenceAndPowerLevel(memberListRoom, tiles, enablePresence);
+            });
+        });
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
new file mode 100644
index 00000000000..663f5e8490b
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { render, screen, waitFor } from "jest-matrix-react";
+import { MatrixClient, RoomMember as SdkRoomMember, Device, Room } from "matrix-js-sdk/src/matrix";
+import { UserVerificationStatus, DeviceVerificationStatus } from "matrix-js-sdk/src/crypto-api";
+import { mocked } from "jest-mock";
+import userEvent from "@testing-library/user-event";
+
+import * as TestUtils from "../../../../../test-utils";
+import { RoomMember } from "../../../../../../src/models/rooms/RoomMember";
+import {
+    getPending3PidInvites,
+    sdkRoomMemberToRoomMember,
+} from "../../../../../../src/components/viewmodels/memberlist/MemberListViewModel";
+import { RoomMemberTileView } from "../../../../../../src/components/views/rooms/MemberList/tiles/RoomMemberTileView";
+import { ThreePidInviteTileView } from "../../../../../../src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView";
+
+describe("MemberTileView", () => {
+    describe("RoomMemberTileView", () => {
+        let matrixClient: MatrixClient;
+        let member: RoomMember;
+
+        beforeEach(() => {
+            matrixClient = TestUtils.stubClient();
+            mocked(matrixClient.isRoomEncrypted).mockReturnValue(true);
+            const sdkMember = new SdkRoomMember("roomId", matrixClient.getUserId()!);
+            member = sdkRoomMemberToRoomMember(sdkMember)!.member!;
+        });
+
+        it("should not display an E2EIcon when the e2E status = normal", () => {
+            const { container } = render(<RoomMemberTileView member={member} />);
+            const e2eIcon = container.querySelector(".mx_E2EIconView");
+            expect(e2eIcon).toBeNull();
+            expect(container).toMatchSnapshot();
+        });
+
+        it("should display an warning E2EIcon when the e2E status = Warning", async () => {
+            mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
+                isCrossSigningVerified: jest.fn().mockReturnValue(false),
+                wasCrossSigningVerified: jest.fn().mockReturnValue(true),
+            } as unknown as UserVerificationStatus);
+
+            const { container } = render(<RoomMemberTileView member={member} />);
+            await waitFor(async () => {
+                await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
+                expect(screen.getByText("This user has not verified all of their sessions.")).toBeInTheDocument();
+            });
+            expect(container).toMatchSnapshot();
+        });
+
+        it("should display an verified E2EIcon when the e2E status = Verified", async () => {
+            // Mock all the required crypto methods
+            const deviceMap = new Map<string, Map<string, Device>>();
+            deviceMap.set(member.userId, new Map([["deviceId", {} as Device]]));
+            // Return a DeviceMap = Map<string, Map<string, Device>>
+            mocked(matrixClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(deviceMap);
+            mocked(matrixClient.getCrypto()!.getUserVerificationStatus).mockResolvedValue({
+                isCrossSigningVerified: jest.fn().mockReturnValue(true),
+            } as unknown as UserVerificationStatus);
+            mocked(matrixClient.getCrypto()!.getDeviceVerificationStatus).mockResolvedValue({
+                crossSigningVerified: true,
+            } as DeviceVerificationStatus);
+
+            const { container } = render(<RoomMemberTileView member={member} />);
+
+            await waitFor(async () => {
+                await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
+                expect(
+                    screen.getByText("You have verified this user. This user has verified all of their sessions."),
+                ).toBeInTheDocument();
+            });
+            expect(container).toMatchSnapshot();
+        });
+
+        it("renders user labels correctly", async () => {
+            member.powerLevel = 50;
+            const { container: container1 } = render(<RoomMemberTileView member={member} />);
+            expect(container1).toHaveTextContent("Moderator");
+
+            member.powerLevel = 100;
+            const { container: container2 } = render(<RoomMemberTileView member={member} />);
+            expect(container2).toHaveTextContent("Admin");
+
+            member.isInvite = true;
+            const { container: container3 } = render(<RoomMemberTileView member={member} />);
+            expect(container3).toHaveTextContent("Invited");
+        });
+    });
+
+    describe("ThreePidInviteTileView", () => {
+        let cli: MatrixClient;
+        let room: Room;
+
+        beforeEach(() => {
+            cli = TestUtils.stubClient();
+            room = new Room("!mytestroom:foo.org", cli, cli.getSafeUserId());
+            room.getLiveTimeline().addEvent(
+                TestUtils.mkThirdPartyInviteEvent(cli.getSafeUserId(), "Foobar", room.roomId),
+                { toStartOfTimeline: false, addToState: true },
+            );
+        });
+
+        it("renders ThreePidInvite correctly", async () => {
+            const [{ threePidInvite }] = getPending3PidInvites(room);
+            const { container } = render(<ThreePidInviteTileView threePidInvite={threePidInvite!} />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
new file mode 100644
index 00000000000..d06fcc560f9
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
@@ -0,0 +1,42 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+
+import AvatarPresenceIconView from "../../../../../../src/components/views/rooms/MemberList/tiles/common/PresenceIconView";
+
+describe("<PresenceIconView/>", () => {
+    it("renders correctly for presence=online", () => {
+        const { container } = render(<AvatarPresenceIconView presenceState="online" />);
+        expect(container.querySelector(".mx_PresenceIconView_online")).toBeDefined();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders correctly for presence=offline", () => {
+        const { container } = render(<AvatarPresenceIconView presenceState="offline" />);
+        expect(container.querySelector(".mx_PresenceIconView_offline")).toBeDefined();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders correctly for presence=unavailable/unreachable", () => {
+        const { container: container1 } = render(<AvatarPresenceIconView presenceState="unavailable" />);
+        expect(container1.querySelector(".mx_PresenceIconView_unavailable")).toBeDefined();
+        expect(container1).toMatchSnapshot();
+
+        const { container: container2 } = render(<AvatarPresenceIconView presenceState="io.element.unreachable" />);
+        expect(container2.querySelector(".mx_PresenceIconView_unavailable")).toBeDefined();
+        expect(container2).toMatchSnapshot();
+    });
+
+    it("renders correctly for presence=busy", () => {
+        const { container } = render(<AvatarPresenceIconView presenceState="busy" />);
+        expect(container.querySelector(".mx_PresenceIconView_dnd")).toBeDefined();
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
new file mode 100644
index 00000000000..6feb72ea62d
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon when the e2E status = Verified 1`] = `
+<div>
+  <div>
+    <div
+      aria-label="@userId:matrix.org (power 0)"
+      class="mx_AccessibleButton mx_MemberTileView"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_MemberTileView_left"
+      >
+        <div
+          class="mx_MemberTileView_avatar"
+        >
+          <span
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="2"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 32px;"
+            title="@userId:matrix.org"
+          >
+            u
+          </span>
+           
+        </div>
+        <div
+          class="mx_MemberTileView_name"
+        >
+          <div
+            class="mx_DisambiguatedProfile"
+          >
+            <span
+              class=""
+              dir="auto"
+            >
+              @userId:matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_MemberTileView_right"
+      >
+        <div
+          aria-labelledby=":ri:"
+          class="mx_E2EIconView"
+        >
+          <svg
+            class="mx_E2EIconView_verified"
+            fill="currentColor"
+            height="16px"
+            viewBox="0 0 24 24"
+            width="16px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.15 21.75 6.7 19.3l-2.75-.6a.943.943 0 0 1-.6-.387.928.928 0 0 1-.175-.688L3.45 14.8l-1.875-2.15a.934.934 0 0 1-.25-.65c0-.25.083-.467.25-.65L3.45 9.2l-.275-2.825a.928.928 0 0 1 .175-.688.943.943 0 0 1 .6-.387l2.75-.6 1.45-2.45a.983.983 0 0 1 .55-.438.97.97 0 0 1 .7.038l2.6 1.1 2.6-1.1a.97.97 0 0 1 .7-.038.983.983 0 0 1 .55.438L17.3 4.7l2.75.6c.25.05.45.18.6.388.15.208.208.437.175.687L20.55 9.2l1.875 2.15c.167.183.25.4.25.65s-.083.467-.25.65L20.55 14.8l.275 2.825a.928.928 0 0 1-.175.688.943.943 0 0 1-.6.387l-2.75.6-1.45 2.45a.983.983 0 0 1-.55.438.97.97 0 0 1-.7-.038l-2.6-1.1-2.6 1.1a.97.97 0 0 1-.7.038.983.983 0 0 1-.55-.438Zm2.8-9.05L9.5 11.275A.933.933 0 0 0 8.813 11c-.275 0-.513.1-.713.3a.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7l2.15 2.15c.2.2.433.3.7.3.267 0 .5-.1.7-.3l4.25-4.25c.2-.2.296-.433.287-.7a1.055 1.055 0 0 0-.287-.7 1.02 1.02 0 0 0-.713-.313.93.93 0 0 0-.712.288L10.95 12.7Z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon when the e2E status = Warning 1`] = `
+<div>
+  <div>
+    <div
+      aria-label="@userId:matrix.org (power 0)"
+      class="mx_AccessibleButton mx_MemberTileView"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_MemberTileView_left"
+      >
+        <div
+          class="mx_MemberTileView_avatar"
+        >
+          <span
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="2"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 32px;"
+            title="@userId:matrix.org"
+          >
+            u
+          </span>
+           
+        </div>
+        <div
+          class="mx_MemberTileView_name"
+        >
+          <div
+            class="mx_DisambiguatedProfile"
+          >
+            <span
+              class=""
+              dir="auto"
+            >
+              @userId:matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_MemberTileView_right"
+      >
+        <div
+          aria-labelledby=":r8:"
+          class="mx_E2EIconView"
+        >
+          <svg
+            class="mx_E2EIconView_warning"
+            fill="currentColor"
+            height="16px"
+            viewBox="0 0 24 24"
+            width="16px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when the e2E status = normal 1`] = `
+<div>
+  <div>
+    <div
+      aria-label="@userId:matrix.org (power 0)"
+      class="mx_AccessibleButton mx_MemberTileView"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_MemberTileView_left"
+      >
+        <div
+          class="mx_MemberTileView_avatar"
+        >
+          <span
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="2"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 32px;"
+            title="@userId:matrix.org"
+          >
+            u
+          </span>
+           
+        </div>
+        <div
+          class="mx_MemberTileView_name"
+        >
+          <div
+            class="mx_DisambiguatedProfile"
+          >
+            <span
+              class=""
+              dir="auto"
+            >
+              @userId:matrix.org
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mx_MemberTileView_right"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly 1`] = `
+<div>
+  <div>
+    <div
+      class="mx_AccessibleButton mx_MemberTileView"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="mx_MemberTileView_left"
+      >
+        <div
+          class="mx_MemberTileView_avatar"
+        >
+          <span
+            aria-hidden="true"
+            class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+            data-color="1"
+            data-testid="avatar-img"
+            data-type="round"
+            role="presentation"
+            style="--cpd-avatar-size: 32px;"
+          >
+            F
+          </span>
+           
+        </div>
+        <div
+          class="mx_MemberTileView_name"
+        >
+          Foobar
+        </div>
+      </div>
+      <div
+        class="mx_MemberTileView_right"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
new file mode 100644
index 00000000000..edf24f529ea
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PresenceIconView/> renders correctly for presence=busy 1`] = `
+<div>
+  <div
+    class="mx_PresenceIconView"
+  >
+    <svg
+      class="mx_PresenceIconView_dnd"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#a)"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0ZM5.435 6.048A2.5 2.5 0 0 1 1.687 3.05l3.748 2.998Zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961Z"
+          fill-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<PresenceIconView/> renders correctly for presence=offline 1`] = `
+<div>
+  <div
+    class="mx_PresenceIconView"
+  >
+    <svg
+      class="mx_PresenceIconView_offline"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#a)"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"
+          fill-rule="evenodd"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<PresenceIconView/> renders correctly for presence=online 1`] = `
+<div>
+  <div
+    class="mx_PresenceIconView"
+  >
+    <svg
+      class="mx_PresenceIconView_online"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#a)"
+      >
+        <path
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 1`] = `
+<div>
+  <div
+    class="mx_PresenceIconView"
+  >
+    <svg
+      class="mx_PresenceIconView_unavailable"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#a)"
+      >
+        <path
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 2`] = `
+<div>
+  <div
+    class="mx_PresenceIconView"
+  >
+    <svg
+      class="mx_PresenceIconView_unavailable"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#a)"
+      >
+        <path
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
diff --git a/test/unit-tests/components/views/rooms/memberlist/common.tsx b/test/unit-tests/components/views/rooms/memberlist/common.tsx
new file mode 100644
index 00000000000..77a9ca852d8
--- /dev/null
+++ b/test/unit-tests/components/views/rooms/memberlist/common.tsx
@@ -0,0 +1,146 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { act } from "react";
+import { render, RenderResult, waitFor } from "jest-matrix-react";
+import { Room, MatrixClient, RoomState, RoomMember, User, EventType, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+import { KnownMembership } from "matrix-js-sdk/src/types";
+
+import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
+import * as TestUtils from "../../../../../test-utils";
+import { SDKContext } from "../../../../../../src/contexts/SDKContext";
+import { TestSdkContext } from "../../../../TestSdkContext";
+import MemberListView from "../../../../../../src/components/views/rooms/MemberList/MemberListView";
+import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
+
+export function createRoom(client: MatrixClient, opts = {}) {
+    const roomId = "!" + Math.random().toString().slice(2, 10) + ":domain";
+    const room = new Room(roomId, client, client.getUserId()!);
+    room.updateMyMembership(KnownMembership.Join);
+    if (opts) {
+        Object.assign(room, opts);
+    }
+    return room;
+}
+
+export type Rendered = {
+    client: MatrixClient;
+    root: RenderResult;
+    memberListRoom: Room;
+    adminUsers: RoomMember[];
+    moderatorUsers: RoomMember[];
+    defaultUsers: RoomMember[];
+    reRender: () => Promise<void>;
+};
+
+export async function renderMemberList(
+    enablePresence: boolean,
+    roomSetup?: (room: Room) => void,
+    usersPerLevel: number = 2,
+): Promise<Rendered> {
+    TestUtils.stubClient();
+    const client = MatrixClientPeg.safeGet();
+    client.hasLazyLoadMembersEnabled = () => false;
+
+    // Make room
+    const memberListRoom = createRoom(client);
+    expect(memberListRoom.roomId).toBeTruthy();
+
+    // Give the test an opportunity to make changes to room before first render
+    roomSetup?.(memberListRoom);
+
+    // Make users
+    const adminUsers = [];
+    const moderatorUsers = [];
+    const defaultUsers = [];
+    for (let i = 0; i < usersPerLevel; i++) {
+        const adminUser = new RoomMember(memberListRoom.roomId, `@admin${i}:localhost`);
+        adminUser.membership = KnownMembership.Join;
+        adminUser.powerLevel = 100;
+        adminUser.user = User.createUser(adminUser.userId, client);
+        adminUser.user.currentlyActive = true;
+        adminUser.user.presence = "online";
+        adminUser.user.lastPresenceTs = 1000;
+        adminUser.user.lastActiveAgo = 10;
+        adminUsers.push(adminUser);
+
+        const moderatorUser = new RoomMember(memberListRoom.roomId, `@moderator${i}:localhost`);
+        moderatorUser.membership = KnownMembership.Join;
+        moderatorUser.powerLevel = 50;
+        moderatorUser.user = User.createUser(moderatorUser.userId, client);
+        moderatorUser.user.currentlyActive = true;
+        moderatorUser.user.presence = "online";
+        moderatorUser.user.lastPresenceTs = 1000;
+        moderatorUser.user.lastActiveAgo = 10;
+        moderatorUsers.push(moderatorUser);
+
+        const defaultUser = new RoomMember(memberListRoom.roomId, `@default${i}:localhost`);
+        defaultUser.membership = KnownMembership.Join;
+        defaultUser.powerLevel = 0;
+        defaultUser.user = User.createUser(defaultUser.userId, client);
+        defaultUser.user.currentlyActive = true;
+        defaultUser.user.presence = "online";
+        defaultUser.user.lastPresenceTs = 1000;
+        defaultUser.user.lastActiveAgo = 10;
+        defaultUsers.push(defaultUser);
+    }
+
+    client.getRoom = (roomId) => {
+        if (roomId === memberListRoom.roomId) return memberListRoom;
+        else return null;
+    };
+    memberListRoom.currentState = {
+        members: {},
+        getMember: jest.fn(),
+        getStateEvents: ((eventType, stateKey) => (stateKey === undefined ? [] : null)) as RoomState["getStateEvents"], // ignore 3pid invites
+    } as unknown as RoomState;
+    for (const member of [...adminUsers, ...moderatorUsers, ...defaultUsers]) {
+        memberListRoom.currentState.members[member.userId] = member;
+    }
+
+    const context = new TestSdkContext();
+    context.client = client;
+    context.memberListStore.isPresenceEnabled = jest.fn().mockReturnValue(enablePresence);
+    const root = render(
+        <MatrixClientContext.Provider value={client}>
+            <SDKContext.Provider value={context}>
+                <MemberListView roomId={memberListRoom.roomId} onClose={() => {}} />
+            </SDKContext.Provider>
+        </MatrixClientContext.Provider>,
+    );
+    await waitFor(async () => {
+        expect(root.container.querySelectorAll(".mx_MemberTileView")).toHaveLength(usersPerLevel * 3);
+    });
+
+    const reRender = createReRenderFunction(client, memberListRoom);
+
+    return {
+        client,
+        root,
+        memberListRoom,
+        adminUsers,
+        moderatorUsers,
+        defaultUsers,
+        reRender,
+    };
+}
+
+function createReRenderFunction(client: MatrixClient, memberListRoom: Room): Rendered["reRender"] {
+    return async function (): Promise<void> {
+        await act(async () => {
+            //@ts-ignore
+            client.emit(RoomStateEvent.Events, {
+                //@ts-ignore
+                getType: () => EventType.RoomThirdPartyInvite,
+                getRoomId: () => memberListRoom.roomId,
+            });
+        });
+        await new Promise((r) => setTimeout(r, 1000));
+    };
+}

From 2c4d3d5084bc6da10868cf96a551505b13639091 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:52:39 +0530
Subject: [PATCH 15/24] Playwright: Make it possible to disable presence

---
 playwright/element-web-test.ts                |   9 +-
 .../synapse/templates/no-presence/README.md   |   1 +
 .../templates/no-presence/homeserver.yaml     | 110 ++++++++++++++++++
 .../synapse/templates/no-presence/log.config  |  50 ++++++++
 4 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 playwright/plugins/homeserver/synapse/templates/no-presence/README.md
 create mode 100644 playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml
 create mode 100644 playwright/plugins/homeserver/synapse/templates/no-presence/log.config

diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts
index 8206d766098..2bf8e1ad5a7 100644
--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@@ -122,6 +122,7 @@ export interface Fixtures {
     bot: Bot;
     labsFlags: string[];
     webserver: Webserver;
+    disablePresence: boolean;
 }
 
 export const test = base.extend<Fixtures>({
@@ -133,8 +134,9 @@ export const test = base.extend<Fixtures>({
         );
         await use(context);
     },
+    disablePresence: false,
     config: CONFIG_JSON,
-    page: async ({ context, page, config, labsFlags }, use) => {
+    page: async ({ context, page, config, labsFlags, disablePresence, homeserver }, use) => {
         await context.route(`http://localhost:8080/config.json*`, async (route) => {
             const json = { ...CONFIG_JSON, ...config };
             json["features"] = {
@@ -145,6 +147,11 @@ export const test = base.extend<Fixtures>({
                     return obj;
                 }, {}),
             };
+            if (disablePresence) {
+                json["enable_presence_by_hs_url"] = {
+                    [homeserver.config.baseUrl]: false,
+                };
+            }
             await route.fulfill({ json });
         });
         await use(page);
diff --git a/playwright/plugins/homeserver/synapse/templates/no-presence/README.md b/playwright/plugins/homeserver/synapse/templates/no-presence/README.md
new file mode 100644
index 00000000000..9bfa7c43f86
--- /dev/null
+++ b/playwright/plugins/homeserver/synapse/templates/no-presence/README.md
@@ -0,0 +1 @@
+A synapse configured with presence disabled
diff --git a/playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml b/playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml
new file mode 100644
index 00000000000..686b2176935
--- /dev/null
+++ b/playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml
@@ -0,0 +1,110 @@
+server_name: "localhost"
+pid_file: /data/homeserver.pid
+public_baseurl: "{{PUBLIC_BASEURL}}"
+listeners:
+    - port: 8008
+      tls: false
+      bind_addresses: ["::"]
+      type: http
+      x_forwarded: true
+
+      resources:
+          - names: [client]
+            compress: false
+
+database:
+    name: "sqlite3"
+    args:
+        database: ":memory:"
+
+log_config: "/data/log.config"
+
+rc_messages_per_second: 10000
+rc_message_burst_count: 10000
+rc_registration:
+    per_second: 10000
+    burst_count: 10000
+rc_joins:
+    local:
+        per_second: 9999
+        burst_count: 9999
+    remote:
+        per_second: 9999
+        burst_count: 9999
+rc_joins_per_room:
+    per_second: 9999
+    burst_count: 9999
+rc_3pid_validation:
+    per_second: 1000
+    burst_count: 1000
+
+rc_invites:
+    per_room:
+        per_second: 1000
+        burst_count: 1000
+    per_user:
+        per_second: 1000
+        burst_count: 1000
+
+rc_login:
+    address:
+        per_second: 10000
+        burst_count: 10000
+    account:
+        per_second: 10000
+        burst_count: 10000
+    failed_attempts:
+        per_second: 10000
+        burst_count: 10000
+
+media_store_path: "/data/media_store"
+uploads_path: "/data/uploads"
+enable_registration: true
+enable_registration_without_verification: true
+disable_msisdn_registration: false
+registration_shared_secret: "{{REGISTRATION_SECRET}}"
+report_stats: false
+macaroon_secret_key: "{{MACAROON_SECRET_KEY}}"
+form_secret: "{{FORM_SECRET}}"
+signing_key_path: "/data/localhost.signing.key"
+
+trusted_key_servers:
+    - server_name: "matrix.org"
+suppress_key_server_warning: true
+
+ui_auth:
+    session_timeout: "300s"
+
+oidc_providers:
+    - idp_id: test
+      idp_name: "OAuth test"
+      issuer: "http://localhost:{{OAUTH_SERVER_PORT}}/oauth"
+      authorization_endpoint: "http://localhost:{{OAUTH_SERVER_PORT}}/oauth/auth.html"
+      # the token endpoint receives requests from synapse, rather than the webapp, so needs to escape the docker container.
+      token_endpoint: "http://host.containers.internal:{{OAUTH_SERVER_PORT}}/oauth/token"
+      userinfo_endpoint: "http://host.containers.internal:{{OAUTH_SERVER_PORT}}/oauth/userinfo"
+      client_id: "synapse"
+      discover: false
+      scopes: ["profile"]
+      skip_verification: true
+      client_auth_method: none
+      user_mapping_provider:
+          config:
+              display_name_template: "{{ user.name }}"
+
+# Inhibit background updates as this Synapse isn't long-lived
+background_updates:
+    min_batch_size: 100000
+    sleep_duration_ms: 100000
+
+experimental_features:
+    # Needed for e2e/crypto/crypto.spec.ts > Cryptography > decryption failure
+    # messages > non-joined historical messages.
+    # Can be removed after Synapse enables it by default
+    msc4115_membership_on_events: true
+
+enable_authenticated_media: true
+
+presence:
+    enabled: false
+    include_offline_users_on_sync: false
diff --git a/playwright/plugins/homeserver/synapse/templates/no-presence/log.config b/playwright/plugins/homeserver/synapse/templates/no-presence/log.config
new file mode 100644
index 00000000000..b9123d0f5b9
--- /dev/null
+++ b/playwright/plugins/homeserver/synapse/templates/no-presence/log.config
@@ -0,0 +1,50 @@
+# Log configuration for Synapse.
+#
+# This is a YAML file containing a standard Python logging configuration
+# dictionary. See [1] for details on the valid settings.
+#
+# Synapse also supports structured logging for machine readable logs which can
+# be ingested by ELK stacks. See [2] for details.
+#
+# [1]: https://docs.python.org/3.7/library/logging.config.html#configuration-dictionary-schema
+# [2]: https://matrix-org.github.io/synapse/latest/structured_logging.html
+
+version: 1
+
+formatters:
+    precise:
+        format: '%(asctime)s - %(name)s - %(lineno)d - %(levelname)s - %(request)s - %(message)s'
+
+handlers:
+    # A handler that writes logs to stderr. Unused by default, but can be used
+    # instead of "buffer" and "file" in the logger handlers.
+    console:
+        class: logging.StreamHandler
+        formatter: precise
+
+loggers:
+    synapse.storage.SQL:
+        # beware: increasing this to DEBUG will make synapse log sensitive
+        # information such as access tokens.
+        level: DEBUG
+
+    twisted:
+        # We send the twisted logging directly to the file handler,
+        # to work around https://github.com/matrix-org/synapse/issues/3471
+        # when using "buffer" logger. Use "console" to log to stderr instead.
+        handlers: [console]
+        propagate: false
+
+root:
+    level: DEBUG
+
+    # Write logs to the `buffer` handler, which will buffer them together in memory,
+    # then write them to a file.
+    #
+    # Replace "buffer" with "console" to log to stderr instead. (Note that you'll
+    # also need to update the configuration for the `twisted` logger above, in
+    # this case.)
+    #
+    handlers: [console]
+
+disable_existing_loggers: false

From 0b28e202305a90e25300c6ea3cc2877dd6d082d8 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 20:54:00 +0530
Subject: [PATCH 16/24] Add playwright tests

---
 playwright/e2e/crypto/dehydration.spec.ts     |   4 +-
 .../e2e/lazy-loading/lazy-loading.spec.ts     |   2 +-
 playwright/e2e/right-panel/memberlist.spec.ts |  43 ++++++++++++++++++
 .../e2e/right-panel/right-panel.spec.ts       |  10 ++--
 playwright/pages/ElementAppPage.ts            |  12 +++++
 .../with-four-members-linux.png               | Bin 0 -> 17967 bytes
 6 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 playwright/e2e/right-panel/memberlist.spec.ts
 create mode 100644 playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png

diff --git a/playwright/e2e/crypto/dehydration.spec.ts b/playwright/e2e/crypto/dehydration.spec.ts
index 39629c82622..52c8844ea41 100644
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@@ -39,7 +39,7 @@ const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
 }
 
 test.describe("Dehydration", () => {
@@ -93,7 +93,7 @@ test.describe("Dehydration", () => {
         await viewRoomSummaryByName(page, app, ROOM_NAME);
 
         await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberList")).toBeVisible();
+        await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
         await getMemberTileByName(page, NAME).click();
         await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();
diff --git a/playwright/e2e/lazy-loading/lazy-loading.spec.ts b/playwright/e2e/lazy-loading/lazy-loading.spec.ts
index d6a2edb3e5e..8d5f32adf50 100644
--- a/playwright/e2e/lazy-loading/lazy-loading.spec.ts
+++ b/playwright/e2e/lazy-loading/lazy-loading.spec.ts
@@ -78,7 +78,7 @@ test.describe("Lazy Loading", () => {
     }
 
     function getMemberInMemberlist(page: Page, name: string): Locator {
-        return page.locator(".mx_MemberList .mx_EntityTile_name").filter({ hasText: name });
+        return page.locator(".mx_MemberListView .mx_MemberTileView_name").filter({ hasText: name });
     }
 
     async function checkMemberList(page: Page, charlies: Bot[]) {
diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts
new file mode 100644
index 00000000000..9a22e2e25e9
--- /dev/null
+++ b/playwright/e2e/right-panel/memberlist.spec.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+import { Bot } from "../../pages/bot";
+
+const ROOM_NAME = "Test room";
+const NAME = "Alice";
+
+test.describe("Memberlist", () => {
+    test.use({
+        displayName: NAME,
+        startHomeserverOpts: "no-presence",
+        disablePresence: true,
+    });
+
+    test.beforeEach(async ({ app, user, page, homeserver }, testInfo) => {
+        testInfo.setTimeout(testInfo.timeout + 30_000);
+        const id = await app.client.createRoom({ name: ROOM_NAME });
+        const newBots: Bot[] = [];
+        const names = ["Bob", "Bob", "Susan"];
+        for (let i = 0; i < 3; i++) {
+            const displayName = names[i];
+            const autoAcceptInvites = displayName !== "Susan";
+            const bot = new Bot(page, homeserver, { displayName, startClient: true, autoAcceptInvites });
+            await bot.prepareClient();
+            await app.client.inviteUser(id, bot.credentials?.userId);
+            newBots.push(bot);
+        }
+    });
+
+    test("Renders correctly", { tag: "@screenshot" }, async ({ page, app }) => {
+        await app.viewRoomByName(ROOM_NAME);
+        const memberlist = await app.toggleMemberlistPanel();
+        await expect(memberlist.locator(".mx_MemberTileView")).toHaveCount(4);
+        await expect(memberlist.getByText("(Invited)")).toHaveCount(1);
+        await expect(page.locator(".mx_MemberListView")).toMatchScreenshot("with-four-members.png");
+    });
+});
diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts
index 1e9b8ebe1d4..607b479ffcc 100644
--- a/playwright/e2e/right-panel/right-panel.spec.ts
+++ b/playwright/e2e/right-panel/right-panel.spec.ts
@@ -24,7 +24,7 @@ const ROOM_ADDRESS_LONG =
     "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
 }
 
 test.describe("RightPanel", () => {
@@ -107,14 +107,14 @@ test.describe("RightPanel", () => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
             await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await page.getByLabel("Room info").nth(1).click();
             await checkRoomSummaryCard(page, ROOM_NAME);
@@ -130,14 +130,14 @@ test.describe("RightPanel", () => {
                 .locator(".mx_RoomInfoLine_private")
                 .getByRole("button", { name: /\d member/ })
                 .click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
         });
     });
 });
diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts
index 494d9fc9aa0..4d7dd001d0a 100644
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -177,6 +177,18 @@ export class ElementAppPage {
         return this.page.locator(".mx_RightPanel");
     }
 
+    /**
+     * Opens/closes the memberlist panel
+     * @returns locator to the memberlist panel
+     */
+    public async toggleMemberlistPanel(): Promise<Locator> {
+        const locator = this.page.locator(".mx_FacePile");
+        await locator.click();
+        const memberlist = this.page.locator(".mx_MemberListView");
+        await memberlist.waitFor();
+        return memberlist;
+    }
+
     /**
      * Get a locator for the tooltip associated with an element
      * @param e The element with the tooltip
diff --git a/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png b/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0e14ee55cf0c7489e8bb91dfeb41b2880f323dd
GIT binary patch
literal 17967
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

literal 0
HcmV?d00001


From ad96434ebabd33a16b1471d884f4f8fa846121fc Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Sun, 5 Jan 2025 22:30:09 +0530
Subject: [PATCH 17/24] Fix lint error

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9218cd28e8e..309984bea22 100644
--- a/package.json
+++ b/package.json
@@ -303,4 +303,4 @@
     "engines": {
         "node": ">=20.0.0"
     }
-}
\ No newline at end of file
+}

From ec78793812afa4989e31077c527020b3cd39ca27 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Mon, 6 Jan 2025 15:14:48 +0530
Subject: [PATCH 18/24] Undo translation changes that must be done via localazy

---
 src/i18n/strings/en_EN.json                                   | 4 ++--
 .../views/rooms/memberlist/MemberListHeaderView-test.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 086dfec4dd0..a12a7c27f47 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1583,7 +1583,7 @@
             "one": "%(count)s Member",
             "other": "%(count)s Members"
         },
-        "filter_placeholder": "Search members...",
+        "filter_placeholder": "Filter room members",
         "invite_button_no_perms_tooltip": "You do not have permission to invite users",
         "invited_label": "Invited",
         "no_matches": "No matches",
@@ -2366,7 +2366,7 @@
             "enable_element_call_no_permissions_tooltip": "You do not have sufficient permissions to change this."
         }
     },
-    "room_summary_card_back_action_label": "Room info",
+    "room_summary_card_back_action_label": "Room information",
     "scalar": {
         "error_create": "Unable to create widget.",
         "error_membership": "You are not in this room.",
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
index f0e726c453c..af79e81fc78 100644
--- a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
@@ -63,7 +63,7 @@ describe("MemberListHeaderView", () => {
     });
 
     it("Does not show search box when there's less than 20 members", async () => {
-        expect(screen.queryByPlaceholderText("Search members...")).toBeNull();
+        expect(screen.queryByPlaceholderText("Filter room members")).toBeNull();
     });
 
     it("Shows search box when there's more than 20 members", async () => {
@@ -81,7 +81,7 @@ describe("MemberListHeaderView", () => {
             memberListRoom.currentState.members[newMember.userId] = newMember;
         }
         await reRender();
-        expect(screen.queryByPlaceholderText("Search members...")).toBeVisible();
+        expect(screen.queryByPlaceholderText("Filter room members")).toBeVisible();
     });
 
     describe("Invite button functionality", () => {

From 9ac4da3963214af496fe3a63b4c320e739775b15 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Tue, 7 Jan 2025 00:11:24 +0530
Subject: [PATCH 19/24] Update license header

---
 playwright/e2e/right-panel/memberlist.spec.ts                   | 2 +-
 res/css/views/rooms/_E2EIconView.pcss                           | 2 +-
 res/css/views/rooms/_MemberListHeaderView.pcss                  | 2 +-
 res/css/views/rooms/_MemberListView.pcss                        | 2 +-
 res/css/views/rooms/_MemberTileView.pcss                        | 2 +-
 res/css/views/rooms/_OverflowTile.pcss                          | 2 +-
 res/css/views/rooms/_PresenceIconView.pcss                      | 2 +-
 src/components/viewmodels/memberlist/MemberListViewModel.tsx    | 2 +-
 .../viewmodels/memberlist/tiles/MemberTileViewModel.tsx         | 2 +-
 .../viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx       | 2 +-
 src/components/views/rooms/MemberList/MemberListHeaderView.tsx  | 2 +-
 src/components/views/rooms/MemberList/MemberListView.tsx        | 2 +-
 .../views/rooms/MemberList/tiles/RoomMemberTileView.tsx         | 2 +-
 .../views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx     | 2 +-
 .../views/rooms/MemberList/tiles/common/E2EIconView.tsx         | 2 +-
 .../views/rooms/MemberList/tiles/common/MemberTileLayout.tsx    | 2 +-
 .../views/rooms/MemberList/tiles/common/PresenceIconView.tsx    | 2 +-
 src/components/views/rooms/OverflowTileView.tsx                 | 2 +-
 src/models/rooms/PresenceState.ts                               | 2 +-
 src/models/rooms/RoomMember.ts                                  | 2 +-
 src/models/rooms/ThreePIDInvite.ts                              | 2 +-
 .../views/rooms/memberlist/MemberListHeaderView-test.tsx        | 2 +-
 .../components/views/rooms/memberlist/MemberListView-test.tsx   | 2 +-
 .../components/views/rooms/memberlist/MemberTileView-test.tsx   | 2 +-
 .../components/views/rooms/memberlist/PresenceIconView-test.tsx | 2 +-
 test/unit-tests/components/views/rooms/memberlist/common.tsx    | 2 +-
 26 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts
index 9a22e2e25e9..8a7e13606d1 100644
--- a/playwright/e2e/right-panel/memberlist.spec.ts
+++ b/playwright/e2e/right-panel/memberlist.spec.ts
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/res/css/views/rooms/_E2EIconView.pcss b/res/css/views/rooms/_E2EIconView.pcss
index 19952db2007..3e2b1d95802 100644
--- a/res/css/views/rooms/_E2EIconView.pcss
+++ b/res/css/views/rooms/_E2EIconView.pcss
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/res/css/views/rooms/_MemberListHeaderView.pcss b/res/css/views/rooms/_MemberListHeaderView.pcss
index 0143dda501a..326cf84dd6c 100644
--- a/res/css/views/rooms/_MemberListHeaderView.pcss
+++ b/res/css/views/rooms/_MemberListHeaderView.pcss
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/res/css/views/rooms/_MemberListView.pcss b/res/css/views/rooms/_MemberListView.pcss
index 162b8558b8a..e13b17b226e 100644
--- a/res/css/views/rooms/_MemberListView.pcss
+++ b/res/css/views/rooms/_MemberListView.pcss
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/res/css/views/rooms/_MemberTileView.pcss b/res/css/views/rooms/_MemberTileView.pcss
index 94d9987e598..702edd8f9d2 100644
--- a/res/css/views/rooms/_MemberTileView.pcss
+++ b/res/css/views/rooms/_MemberTileView.pcss
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/res/css/views/rooms/_OverflowTile.pcss b/res/css/views/rooms/_OverflowTile.pcss
index f577b6bd224..a0ac5bb4f61 100644
--- a/res/css/views/rooms/_OverflowTile.pcss
+++ b/res/css/views/rooms/_OverflowTile.pcss
@@ -3,7 +3,7 @@ Copyright 2024 New Vector Ltd.
 Copyright 2020 The Matrix.org Foundation C.I.C.
 Copyright 2015, 2016 OpenMarket Ltd
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/res/css/views/rooms/_PresenceIconView.pcss b/res/css/views/rooms/_PresenceIconView.pcss
index 6be4ac47827..e09fbdf2fa1 100644
--- a/res/css/views/rooms/_PresenceIconView.pcss
+++ b/res/css/views/rooms/_PresenceIconView.pcss
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/viewmodels/memberlist/MemberListViewModel.tsx b/src/components/viewmodels/memberlist/MemberListViewModel.tsx
index 511c8c6fb9c..4a1a2d59f19 100644
--- a/src/components/viewmodels/memberlist/MemberListViewModel.tsx
+++ b/src/components/viewmodels/memberlist/MemberListViewModel.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
index e2a32c76dbf..ade40e9b97b 100644
--- a/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
+++ b/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
index 9725c305273..daeb8d899f4 100644
--- a/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
+++ b/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx
index 93ce1ca665d..7b7531b1e9b 100644
--- a/src/components/views/rooms/MemberList/MemberListHeaderView.tsx
+++ b/src/components/views/rooms/MemberList/MemberListHeaderView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/MemberListView.tsx b/src/components/views/rooms/MemberList/MemberListView.tsx
index 549eda26ddb..8dd0a0995b5 100644
--- a/src/components/views/rooms/MemberList/MemberListView.tsx
+++ b/src/components/views/rooms/MemberList/MemberListView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
index 6d3b511e123..c0109e619bc 100644
--- a/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
+++ b/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx b/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx
index 2058f090c83..f6890cc034f 100644
--- a/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx
+++ b/src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx b/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx
index 9d3212f5e76..01ffb8a6b07 100644
--- a/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx
+++ b/src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
index 5638ed870c9..ae1cf78b3c3 100644
--- a/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
+++ b/src/components/views/rooms/MemberList/tiles/common/MemberTileLayout.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx b/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
index 18aaa13a239..855aecf626f 100644
--- a/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
+++ b/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/components/views/rooms/OverflowTileView.tsx b/src/components/views/rooms/OverflowTileView.tsx
index ea9eba6f4ca..c8254069046 100644
--- a/src/components/views/rooms/OverflowTileView.tsx
+++ b/src/components/views/rooms/OverflowTileView.tsx
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/models/rooms/PresenceState.ts b/src/models/rooms/PresenceState.ts
index 05ecba2e356..54c1c0a568b 100644
--- a/src/models/rooms/PresenceState.ts
+++ b/src/models/rooms/PresenceState.ts
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/models/rooms/RoomMember.ts b/src/models/rooms/RoomMember.ts
index 9007e78264b..850ae368b18 100644
--- a/src/models/rooms/RoomMember.ts
+++ b/src/models/rooms/RoomMember.ts
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/src/models/rooms/ThreePIDInvite.ts b/src/models/rooms/ThreePIDInvite.ts
index 84f5a87cbed..4fabd6e0972 100644
--- a/src/models/rooms/ThreePIDInvite.ts
+++ b/src/models/rooms/ThreePIDInvite.ts
@@ -1,7 +1,7 @@
 /*
 Copyright 2024 New Vector Ltd.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
index af79e81fc78..7c99c8af317 100644
--- a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
@@ -3,7 +3,7 @@ Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
index e49b642b6ee..68f33cb53a2 100644
--- a/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
@@ -3,7 +3,7 @@ Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
index 663f5e8490b..284483a8397 100644
--- a/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
@@ -2,7 +2,7 @@
  * Copyright 2024 New Vector Ltd.
  * Copyright 2023 The Matrix.org Foundation C.I.C.
  *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * 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.
  */
 
diff --git a/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
index d06fcc560f9..74c23f2199e 100644
--- a/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
@@ -2,7 +2,7 @@
 Copyright 2024 New Vector Ltd.
 Copyright 2023 The Matrix.org Foundation C.I.C.
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 
diff --git a/test/unit-tests/components/views/rooms/memberlist/common.tsx b/test/unit-tests/components/views/rooms/memberlist/common.tsx
index 77a9ca852d8..2d602356a7c 100644
--- a/test/unit-tests/components/views/rooms/memberlist/common.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/common.tsx
@@ -3,7 +3,7 @@ Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
 
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+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.
 */
 

From 0147e0471e075c2ab572b94fee60f1e4645df843 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Tue, 7 Jan 2025 00:31:31 +0530
Subject: [PATCH 20/24] Use waitFor instead of setTimeout

---
 .../views/rooms/memberlist/MemberListHeaderView-test.tsx     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
index 7c99c8af317..28d4c105a46 100644
--- a/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, fireEvent, screen } from "jest-matrix-react";
+import { act, fireEvent, screen, waitFor } from "jest-matrix-react";
 import { RoomMember, User, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { mocked } from "jest-mock";
@@ -45,8 +45,7 @@ describe("Does not render invite button in memberlist header", () => {
         act(() => {
             client.emit(RoomEvent.MyMembership, memberListRoom, KnownMembership.Join, KnownMembership.Invite);
         });
-        await new Promise((r) => setTimeout(r, 1000));
-        expect(screen.queryByRole("button", { name: "Invite" })).toBeNull();
+        await waitFor(() => expect(screen.queryByRole("button", { name: "Invite" })).toBeNull());
     });
 });
 

From 80baac2064985b81d1302d2775fc25eda29552ba Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Tue, 7 Jan 2025 00:33:09 +0530
Subject: [PATCH 21/24] Remove comment

---
 .../components/views/rooms/memberlist/MemberListView-test.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx b/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
index 68f33cb53a2..518ed4f690d 100644
--- a/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
+++ b/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
@@ -208,7 +208,6 @@ describe("MemberListView and MemberlistHeaderView", () => {
             it("by last active timestamp", async () => {
                 const { adminUsers, defaultUsers, moderatorUsers, reRender, root, memberListRoom } = rendered;
                 // Intentionally pick users that will confuse the power level sorting
-                // lastActiveAgoTs == lastPresenceTs - lastActiveAgo
                 const activeUsers = [defaultUsers[0]];
                 const semiActiveUsers = [adminUsers[0]];
                 const inactiveUsers = [...moderatorUsers, ...adminUsers.slice(1), ...defaultUsers.slice(1)];

From 9d35514cf3cb67707c1a38e2cb9fb2de633204bf Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 8 Jan 2025 20:09:02 +0530
Subject: [PATCH 22/24] Switch over from template to container hs

---
 playwright/e2e/right-panel/memberlist.spec.ts |   7 +-
 .../synapse/templates/no-presence/README.md   |   1 -
 .../templates/no-presence/homeserver.yaml     | 110 ------------------
 .../synapse/templates/no-presence/log.config  |  50 --------
 playwright/testcontainers/synapse.ts          |   4 +
 5 files changed, 10 insertions(+), 162 deletions(-)
 delete mode 100644 playwright/plugins/homeserver/synapse/templates/no-presence/README.md
 delete mode 100644 playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml
 delete mode 100644 playwright/plugins/homeserver/synapse/templates/no-presence/log.config

diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts
index 8a7e13606d1..f15501286bd 100644
--- a/playwright/e2e/right-panel/memberlist.spec.ts
+++ b/playwright/e2e/right-panel/memberlist.spec.ts
@@ -13,8 +13,13 @@ const NAME = "Alice";
 
 test.describe("Memberlist", () => {
     test.use({
+        synapseConfigOptions: {
+            presence: {
+                enabled: false,
+                include_offline_users_on_sync: false,
+            },
+        },
         displayName: NAME,
-        startHomeserverOpts: "no-presence",
         disablePresence: true,
     });
 
diff --git a/playwright/plugins/homeserver/synapse/templates/no-presence/README.md b/playwright/plugins/homeserver/synapse/templates/no-presence/README.md
deleted file mode 100644
index 9bfa7c43f86..00000000000
--- a/playwright/plugins/homeserver/synapse/templates/no-presence/README.md
+++ /dev/null
@@ -1 +0,0 @@
-A synapse configured with presence disabled
diff --git a/playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml b/playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml
deleted file mode 100644
index 686b2176935..00000000000
--- a/playwright/plugins/homeserver/synapse/templates/no-presence/homeserver.yaml
+++ /dev/null
@@ -1,110 +0,0 @@
-server_name: "localhost"
-pid_file: /data/homeserver.pid
-public_baseurl: "{{PUBLIC_BASEURL}}"
-listeners:
-    - port: 8008
-      tls: false
-      bind_addresses: ["::"]
-      type: http
-      x_forwarded: true
-
-      resources:
-          - names: [client]
-            compress: false
-
-database:
-    name: "sqlite3"
-    args:
-        database: ":memory:"
-
-log_config: "/data/log.config"
-
-rc_messages_per_second: 10000
-rc_message_burst_count: 10000
-rc_registration:
-    per_second: 10000
-    burst_count: 10000
-rc_joins:
-    local:
-        per_second: 9999
-        burst_count: 9999
-    remote:
-        per_second: 9999
-        burst_count: 9999
-rc_joins_per_room:
-    per_second: 9999
-    burst_count: 9999
-rc_3pid_validation:
-    per_second: 1000
-    burst_count: 1000
-
-rc_invites:
-    per_room:
-        per_second: 1000
-        burst_count: 1000
-    per_user:
-        per_second: 1000
-        burst_count: 1000
-
-rc_login:
-    address:
-        per_second: 10000
-        burst_count: 10000
-    account:
-        per_second: 10000
-        burst_count: 10000
-    failed_attempts:
-        per_second: 10000
-        burst_count: 10000
-
-media_store_path: "/data/media_store"
-uploads_path: "/data/uploads"
-enable_registration: true
-enable_registration_without_verification: true
-disable_msisdn_registration: false
-registration_shared_secret: "{{REGISTRATION_SECRET}}"
-report_stats: false
-macaroon_secret_key: "{{MACAROON_SECRET_KEY}}"
-form_secret: "{{FORM_SECRET}}"
-signing_key_path: "/data/localhost.signing.key"
-
-trusted_key_servers:
-    - server_name: "matrix.org"
-suppress_key_server_warning: true
-
-ui_auth:
-    session_timeout: "300s"
-
-oidc_providers:
-    - idp_id: test
-      idp_name: "OAuth test"
-      issuer: "http://localhost:{{OAUTH_SERVER_PORT}}/oauth"
-      authorization_endpoint: "http://localhost:{{OAUTH_SERVER_PORT}}/oauth/auth.html"
-      # the token endpoint receives requests from synapse, rather than the webapp, so needs to escape the docker container.
-      token_endpoint: "http://host.containers.internal:{{OAUTH_SERVER_PORT}}/oauth/token"
-      userinfo_endpoint: "http://host.containers.internal:{{OAUTH_SERVER_PORT}}/oauth/userinfo"
-      client_id: "synapse"
-      discover: false
-      scopes: ["profile"]
-      skip_verification: true
-      client_auth_method: none
-      user_mapping_provider:
-          config:
-              display_name_template: "{{ user.name }}"
-
-# Inhibit background updates as this Synapse isn't long-lived
-background_updates:
-    min_batch_size: 100000
-    sleep_duration_ms: 100000
-
-experimental_features:
-    # Needed for e2e/crypto/crypto.spec.ts > Cryptography > decryption failure
-    # messages > non-joined historical messages.
-    # Can be removed after Synapse enables it by default
-    msc4115_membership_on_events: true
-
-enable_authenticated_media: true
-
-presence:
-    enabled: false
-    include_offline_users_on_sync: false
diff --git a/playwright/plugins/homeserver/synapse/templates/no-presence/log.config b/playwright/plugins/homeserver/synapse/templates/no-presence/log.config
deleted file mode 100644
index b9123d0f5b9..00000000000
--- a/playwright/plugins/homeserver/synapse/templates/no-presence/log.config
+++ /dev/null
@@ -1,50 +0,0 @@
-# Log configuration for Synapse.
-#
-# This is a YAML file containing a standard Python logging configuration
-# dictionary. See [1] for details on the valid settings.
-#
-# Synapse also supports structured logging for machine readable logs which can
-# be ingested by ELK stacks. See [2] for details.
-#
-# [1]: https://docs.python.org/3.7/library/logging.config.html#configuration-dictionary-schema
-# [2]: https://matrix-org.github.io/synapse/latest/structured_logging.html
-
-version: 1
-
-formatters:
-    precise:
-        format: '%(asctime)s - %(name)s - %(lineno)d - %(levelname)s - %(request)s - %(message)s'
-
-handlers:
-    # A handler that writes logs to stderr. Unused by default, but can be used
-    # instead of "buffer" and "file" in the logger handlers.
-    console:
-        class: logging.StreamHandler
-        formatter: precise
-
-loggers:
-    synapse.storage.SQL:
-        # beware: increasing this to DEBUG will make synapse log sensitive
-        # information such as access tokens.
-        level: DEBUG
-
-    twisted:
-        # We send the twisted logging directly to the file handler,
-        # to work around https://github.com/matrix-org/synapse/issues/3471
-        # when using "buffer" logger. Use "console" to log to stderr instead.
-        handlers: [console]
-        propagate: false
-
-root:
-    level: DEBUG
-
-    # Write logs to the `buffer` handler, which will buffer them together in memory,
-    # then write them to a file.
-    #
-    # Replace "buffer" with "console" to log to stderr instead. (Note that you'll
-    # also need to update the configuration for the `twisted` logger above, in
-    # this case.)
-    #
-    handlers: [console]
-
-disable_existing_loggers: false
diff --git a/playwright/testcontainers/synapse.ts b/playwright/testcontainers/synapse.ts
index 46a4bcb415c..13319fb95ed 100644
--- a/playwright/testcontainers/synapse.ts
+++ b/playwright/testcontainers/synapse.ts
@@ -134,6 +134,10 @@ const DEFAULT_CONFIG = {
     experimental_features: {},
     oidc_providers: [],
     serve_server_wellknown: true,
+    presence: {
+        enabled: true,
+        include_offline_users_on_sync: true,
+    },
 };
 
 export type SynapseConfigOptions = Partial<typeof DEFAULT_CONFIG>;

From 37a6d097070ed4391c8a02afde1d29d307816732 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 8 Jan 2025 20:10:47 +0530
Subject: [PATCH 23/24] Revert unintended change

---
 playwright/element-web-test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright/element-web-test.ts b/playwright/element-web-test.ts
index af9c293a820..f15aaae3706 100644
--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@@ -112,7 +112,7 @@ export const test = base.extend<Fixtures>({
         await use(context);
     },
     disablePresence: false,
-    config: CONFIG_JSON,
+    config: {}, // We merge this atop the default CONFIG_JSON in the page fixture to make extending it easier
     page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
         await context.route(`http://localhost:8080/config.json*`, async (route) => {
             const json = {

From 2bf96cc7b08abb4aa061a7154a59c43c0a41d3a2 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 8 Jan 2025 21:17:48 +0530
Subject: [PATCH 24/24] Move config to top level

---
 playwright/e2e/right-panel/memberlist.spec.ts | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/playwright/e2e/right-panel/memberlist.spec.ts b/playwright/e2e/right-panel/memberlist.spec.ts
index f15501286bd..1275e243b6a 100644
--- a/playwright/e2e/right-panel/memberlist.spec.ts
+++ b/playwright/e2e/right-panel/memberlist.spec.ts
@@ -11,18 +11,18 @@ import { Bot } from "../../pages/bot";
 const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
-test.describe("Memberlist", () => {
-    test.use({
-        synapseConfigOptions: {
-            presence: {
-                enabled: false,
-                include_offline_users_on_sync: false,
-            },
+test.use({
+    synapseConfigOptions: {
+        presence: {
+            enabled: false,
+            include_offline_users_on_sync: false,
         },
-        displayName: NAME,
-        disablePresence: true,
-    });
+    },
+    displayName: NAME,
+    disablePresence: true,
+});
 
+test.describe("Memberlist", () => {
     test.beforeEach(async ({ app, user, page, homeserver }, testInfo) => {
         testInfo.setTimeout(testInfo.timeout + 30_000);
         const id = await app.client.createRoom({ name: ROOM_NAME });