Gaboule/chat
1
0
Fork 0
Code Issues Pull requests Activity

add presence badge in member list

Browse source 
Potential performance issues:
- In large rooms, we should only update the presence for the users shown in the scrollcontainer
This commit is contained in:
anavoi 2025-08-27 12:10:36 +02:00
commit 2a30d18bd0
1 changed files with 18 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/app/features/room/MembersDrawer.tsx
View file

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