Skip to content

fix(presence): show presence dot in account switcher, DM sidebar, and members drawer #826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Just-Insane wants to merge 1 commit into from
Closed

fix(presence): show presence dot in account switcher, DM sidebar, and members drawer #826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/features/room/MembersDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
import classNames from 'classnames';

import { AvatarPresence, PresenceBadge } from '$components/presence';
import { useUserPresence } from '$hooks/useUserPresence';
import { Presence, useUserPresence } from '$hooks/useUserPresence';
import { useMatrixClient } from '$hooks/useMatrixClient';
import { UseStateProvider } from '$components/UseStateProvider';
import type { SearchItemStrGetter, UseAsyncSearchOptions } from '$hooks/useAsyncSearch';
Expand Down Expand Up @@ -150,7 +150,7 @@ function MemberItem({
>
<AvatarPresence
badge={
presence && presence.lastActiveTs !== 0 ? (
presence && presence.presence !== Presence.Offline ? (
<PresenceBadge presence={presence.presence} size="200" />
) : undefined
}
Expand Down
36 changes: 24 additions & 12 deletions src/app/pages/client/sidebar/AccountSwitcherTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ import { createLogger } from '$utils/debug';
import { createDebugLogger } from '$utils/debugLogger';
import { useClientConfig } from '$hooks/useClientConfig';
import { UnreadBadge, UnreadBadgeCenter } from '$components/unread-badge';
import { Presence, useUserPresence } from '$hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '$components/presence';

const log = createLogger('AccountSwitcherTab');
const debugLog = createDebugLogger('AccountSwitcherTab');
Expand Down Expand Up @@ -174,6 +176,7 @@ export function AccountSwitcherTab() {
? (mxcUrlToHttp(mx, activeProfile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
: undefined;
const activeDisplayName = activeProfile.displayName;
const myPresence = useUserPresence(myUserId);

const sessionProfiles = useSessionProfiles(sessions);

Expand Down Expand Up @@ -269,19 +272,28 @@ export function AccountSwitcherTab() {
<SidebarItem active={!!menuAnchor}>
<SidebarItemTooltip tooltip={label}>
{(triggerRef) => (
<SidebarAvatar
as="button"
ref={triggerRef}
onClick={handleToggle}
outlined={sessions.length > 1}
<AvatarPresence
badge={
myPresence &&
myPresence.presence !== Presence.Offline && (
<PresenceBadge presence={myPresence.presence} size="200" />
)
}
>
<UserAvatar
userId={activeSession.userId}
src={activeAvatarUrl}
alt={label}
renderFallback={() => <Text size="H4">{nameInitials(label)}</Text>}
/>
</SidebarAvatar>
<SidebarAvatar
as="button"
ref={triggerRef}
onClick={handleToggle}
outlined={sessions.length > 1}
>
<UserAvatar
userId={activeSession.userId}
src={activeAvatarUrl}
alt={label}
renderFallback={() => <Text size="H4">{nameInitials(label)}</Text>}
/>
</SidebarAvatar>
</AvatarPresence>
)}
</SidebarItemTooltip>
{(totalBackgroundUnread > 0 || anyBackgroundHighlight) && (
Expand Down
21 changes: 18 additions & 3 deletions src/app/pages/client/sidebar/DirectDMsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import { getCanonicalAliasOrRoomId, mxcUrlToHttp } from '$utils/matrix';
import { useSelectedRoom } from '$hooks/router/useSelectedRoom';
import { useGroupDMMembers } from '$hooks/useGroupDMMembers';
import { useSidebarDirectRoomIds } from './useSidebarDirectRoomIds';
import { Presence, useUserPresence } from '$hooks/useUserPresence';
import { AvatarPresence, PresenceBadge } from '$components/presence';
import * as css from './DirectDMsList.css';

const MAX_GROUP_MEMBERS = 3;
Expand All @@ -44,6 +46,9 @@ function DMItem({ room, selected }: DMItemProps) {
// Check if this is a group DM (more than 2 members)
const isGroupDM = room.getJoinedMemberCount() > 2;

const dmUserId = !isGroupDM ? room.getAvatarFallbackMember()?.userId : undefined;
const dmPresence = useUserPresence(dmUserId ?? '');

// Get member info for group DMs using m.direct and profile API (doesn't require full room state)
// Members are sorted by who last sent messages (most recent first)
const groupMembers = useGroupDMMembers(mx, room, MAX_GROUP_MEMBERS);
Expand Down Expand Up @@ -135,9 +140,19 @@ function DMItem({ room, selected }: DMItemProps) {
<SidebarItem active={selected}>
<SidebarItemTooltip tooltip={room.name}>
{(triggerRef) => (
<SidebarAvatar as="button" ref={triggerRef} outlined onClick={handleClick} size="400">
{renderAvatar()}
</SidebarAvatar>
<AvatarPresence
badge={
!isGroupDM &&
dmPresence &&
dmPresence.presence !== Presence.Offline && (
<PresenceBadge presence={dmPresence.presence} size="200" />
)
}
>
<SidebarAvatar as="button" ref={triggerRef} outlined onClick={handleClick} size="400">
{renderAvatar()}
</SidebarAvatar>
</AvatarPresence>
)}
</SidebarItemTooltip>
{unread && (unread.total > 0 || unread.highlight > 0) && (
Expand Down
Loading