add presence badge in member list

Potential performance issues:
- In large rooms, we should only update the presence for the users shown in the scrollcontainer

src/app/features/room/MembersDrawer.tsx

@@ -59,6 +59,8 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { AvatarPresence, PresenceBadge } from '../../components/presence';
 
 type MemberDrawerHeaderProps = {
   room: Room;
@@ -125,6 +127,7 @@ function MemberItem({
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
     : undefined;
+  const presence = useUserPresence(member.userId)
 
   return (
     <MenuItem
@@ -135,6 +138,10 @@ function MemberItem({
       radii="400"
       onClick={onClick}
       before={
+        <AvatarPresence
+          badge={
+            presence && <PresenceBadge presence={presence.presence} status={presence.status} size="200" />
+          }>
           <Avatar size="200">
             <UserAvatar
               userId={member.userId}
@@ -143,6 +150,7 @@ function MemberItem({
               renderFallback={() => <Icon size="50" src={Icons.User} filled />}
             />
           </Avatar>
+        </AvatarPresence>
       }
       after={
         typing && (
@@ -346,8 +354,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         }}
                         after={<Icon size="50" src={Icons.Cross} />}
                       >
-                        <Text size="B300">{`${result.items.length || 'No'} ${
+                        <Text size="B300">{`${result.items.length || 'No'} ${result.items.length === 1 ? 'Result' : 'Results'
-                          result.items.length === 1 ? 'Result' : 'Results'
                           }`}</Text>
                       </Chip>
                     )