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 (
+
+ {label}
+
+ }
+ >
+ {(ref) => (
+
+
+
+ )}
+
+ );
+}
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) {
/>
-
+
+ {showEncryption && }
{userId !== myUserId && (
- )
+ <>
+ {showEncryption && (
+
+ )}
+ {server && (
+
+
+
+ )}
+ >
}
/>
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 (
-
- {label}
-
- }
- >
- {(ref) => (
-
-
-
- )}
-
- );
-}
-
function MemberItem({
mx,
useAuthentication,