Implement new memberlist design with MVVM architecture (#28874)

* Add new e2e icon for the member tile

* Add new presence icon for member tile

* Implement new member tile

* Implement memberlist view model

* Implement new memberlist header view

* Support the new memberlist in Diasambiguated profile

1. Use MemberInfo instead of RoomMember
2. CSS changes to reflect the new design

* Implement new memberlist view

* 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.

* Remove old code

* Add/remove css files from _components.pcss

* Increase minimum width as per design

* Actually use the new memberlist view

* Fix broken jest tests

* Add jest tests

* Playwright: Make it possible to disable presence

* Add playwright tests

* Fix lint error

* Undo translation changes that must be done via localazy

* Update license header

* Use waitFor instead of setTimeout

* Remove comment

* Switch over from template to container hs

* Revert unintended change

* Move config to top level

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 OR LicenseRef-Element-Commercial
+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();
+    });
+});