From 3f4c90f56af010e00969658085eede28515dc9c1 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sat, 23 May 2026 20:13:08 -0400
Subject: [PATCH] feat: show presence status badges in member list panels

Add online/offline/idle presence dots next to verification shields in
both the room members drawer and the common-settings members list.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/features/common-settings/members/Members.tsx | 9 +++++++++
 src/app/features/room/MembersDrawer.tsx              | 6 ++++++
 2 files changed, 15 insertions(+)

diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 37fe57c02..89c63c28b 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -58,6 +58,14 @@ import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { getMouseEventCords } from '../../../utils/dom';
 import { useCrossSigningActive } from '../../../hooks/useCrossSigning';
 import { MemberVerificationBadge } from '../../../components/MemberVerificationBadge';
+import { useUserPresence } from '../../../hooks/useUserPresence';
+import { PresenceBadge } from '../../../components/presence';
+
+function MemberPresenceBadge({ userId }: { userId: string }) {
+  const presence = useUserPresence(userId);
+  if (!presence) return null;
+  return <PresenceBadge presence={presence.presence} status={presence.status} size="300" />;
+}
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -333,6 +341,7 @@ export function Members({ requestClose }: MembersProps) {
                             useAuthentication={useAuthentication}
                             after={
                               <>
+                                <MemberPresenceBadge userId={tagOrMember.userId} />
                                 {showEncryption && (
                                   <MemberVerificationBadge userId={tagOrMember.userId} />
                                 )}
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 426505666..29ae8f30e 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -61,6 +61,8 @@ import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/use
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useCrossSigningActive } from '../../hooks/useCrossSigning';
 import { MemberVerificationBadge } from '../../components/MemberVerificationBadge';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { PresenceBadge } from '../../components/presence';
 
 type MemberDrawerHeaderProps = {
   room: Room;
@@ -131,6 +133,7 @@ function MemberItem({
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
     : undefined;
+  const presence = useUserPresence(member.userId);
 
   return (
     <MenuItem
@@ -152,6 +155,9 @@ function MemberItem({
       }
       after={
         <>
+          {presence && (
+            <PresenceBadge presence={presence.presence} status={presence.status} size="300" />
+          )}
           {showEncryption && <MemberVerificationBadge userId={member.userId} />}
           {typing && (
             <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>