From 161b9bb75e0360f315c9cd9d46214739d71e39a0 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 23 May 2026 12:53:33 -0400
Subject: [PATCH] feat: extend verification badge to user profile and settings
 members list

Extract MemberVerificationBadge into a shared component and render it in:
- UserRoomProfile: shield badge beside the display name on the profile card
- common-settings Members: badge next to each member in the room/space
  settings members page (accessible from the lobby)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/MemberVerificationBadge.tsx    | 35 +++++++++++++++++++
 .../user-profile/UserRoomProfile.tsx          |  7 +++-
 .../common-settings/members/Members.tsx       | 19 +++++++---
 src/app/features/room/MembersDrawer.tsx       | 30 +---------------
 4 files changed, 56 insertions(+), 35 deletions(-)
 create mode 100644 src/app/components/MemberVerificationBadge.tsx

diff --git a/src/app/components/MemberVerificationBadge.tsx b/src/app/components/MemberVerificationBadge.tsx
new file mode 100644
index 000000000..2a206532d
--- /dev/null
+++ b/src/app/components/MemberVerificationBadge.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
+
+type MemberVerificationBadgeProps = {
+  userId: string;
+};
+
+export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
+  const vs = useUserVerifiedStatus(userId);
+  if (vs === 'unknown') return null;
+  const color =
+    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
+  const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
+  return (
+    <TooltipProvider
+      position="Top"
+      tooltip={
+        <Tooltip>
+          <Text size="T200">{label}</Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <span
+          ref={ref}
+          title={label}
+          style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
+        >
+          <Icon size="100" src={Icons.ShieldUser} style={{ color }} />
+        </span>
+      )}
+    </TooltipProvider>
+  );
+}
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 78d201ec6..c5652a746 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -10,6 +10,8 @@ import { usePowerLevels } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
 import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
+import { useCrossSigningActive } from '../../hooks/useCrossSigning';
+import { MemberVerificationBadge } from '../MemberVerificationBadge';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
 import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
@@ -28,6 +30,7 @@ type UserRoomProfileProps = {
 };
 export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const mx = useMatrixClient();
+  const crossSigningActive = useCrossSigningActive();
   const useAuthentication = useMediaAuthentication();
   const navigate = useNavigate();
   const closeUserRoomProfile = useCloseUserRoomProfile();
@@ -35,6 +38,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   const ignored = ignoredUsers.includes(userId);
 
   const room = useRoom();
+  const showEncryption = room.hasEncryptionStateEvent() && crossSigningActive;
   const powerLevels = usePowerLevels(room);
   const creators = useRoomCreators(room);
 
@@ -76,8 +80,9 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
       />
       <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
         <Box direction="Column" gap="400">
-          <Box gap="400" alignItems="Start">
+          <Box gap="400" alignItems="Center">
             <UserHeroName displayName={displayName} userId={userId} />
+            {showEncryption && <MemberVerificationBadge userId={userId} />}
             {userId !== myUserId && (
               <Box shrink="No">
                 <Button
diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index e8682c6f9..d3ec7e167 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -56,6 +56,8 @@ import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { getMouseEventCords } from '../../../utils/dom';
+import { useCrossSigningActive } from '../../../hooks/useCrossSigning';
+import { MemberVerificationBadge } from '../../../components/MemberVerificationBadge';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -79,6 +81,8 @@ export function Members({ requestClose }: MembersProps) {
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
   const members = useRoomMembers(mx, room.roomId);
+  const crossSigningActive = useCrossSigningActive();
+  const showEncryption = room.hasEncryptionStateEvent() && crossSigningActive;
   const fetchingMembers = members.length < room.getJoinedMemberCount();
   const openProfile = useOpenUserRoomProfile();
   const profileUser = useUserRoomProfileState();
@@ -328,11 +332,16 @@ export function Members({ requestClose }: MembersProps) {
                             member={tagOrMember}
                             useAuthentication={useAuthentication}
                             after={
-                              server && (
-                                <Box as="span" shrink="No" alignSelf="End">
-                                  <ServerBadge server={server} fill="None" />
-                                </Box>
-                              )
+                              <>
+                                {showEncryption && (
+                                  <MemberVerificationBadge userId={tagOrMember.userId} />
+                                )}
+                                {server && (
+                                  <Box as="span" shrink="No" alignSelf="End">
+                                    <ServerBadge server={server} fill="None" />
+                                  </Box>
+                                )}
+                              </>
                             }
                           />
                         </div>
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 5946ec628..b7eb06c1c 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -60,7 +60,7 @@ import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useCrossSigningActive } from '../../hooks/useCrossSigning';
-import { useUserVerifiedStatus } from '../../hooks/useUserVerifiedStatus';
+import { MemberVerificationBadge } from '../../components/MemberVerificationBadge';
 
 type MemberDrawerHeaderProps = {
   room: Room;
@@ -115,34 +115,6 @@ type MemberItemProps = {
   showEncryption?: boolean;
 };
 
-function MemberVerificationBadge({ userId }: { userId: string }) {
-  const vs = useUserVerifiedStatus(userId);
-  if (vs === 'unknown') return null;
-  const color =
-    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
-  const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
-  return (
-    <TooltipProvider
-      position="Top"
-      tooltip={
-        <Tooltip>
-          <Text size="T200">{label}</Text>
-        </Tooltip>
-      }
-    >
-      {(ref) => (
-        <span
-          ref={ref}
-          title={label}
-          style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
-        >
-          <Icon size="50" src={Icons.ShieldUser} style={{ color }} />
-        </span>
-      )}
-    </TooltipProvider>
-  );
-}
-
 function MemberItem({
   mx,
   useAuthentication,