Add new e2e icon for the member tile

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);
+}

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"),

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>
+    );
+};