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>

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,