fix(members): show mobile badges and fresh profiles in lists (#3370)

fluxer_app/src/features/channel/components/MemberListItem.tsx

@@ -7,6 +7,7 @@ import styles from '@app/features/channel/components/MemberListItem.module.css';
 import {PreloadableUserPopout} from '@app/features/channel/components/PreloadableUserPopout';
 import Guilds from '@app/features/guild/state/Guilds';
 import {useMemberListCustomStatus} from '@app/features/member/hooks/useMemberListCustomStatus';
+import {useMemberListMobile} from '@app/features/member/hooks/useMemberListMobile';
 import {useMemberListPresence} from '@app/features/member/hooks/useMemberListPresence';
 import type {GuildMember} from '@app/features/member/models/GuildMember';
 import TypingIndicator from '@app/features/typing/state/TypingIndicator';
@@ -51,6 +52,7 @@ interface MemberListItemProps {
 	guildMember?: GuildMember;
 	status?: StatusType;
 	customStatus?: CustomStatus | null;
+	isMobile?: boolean;
 	isOwner?: boolean;
 	roleColor?: string;
 	displayName?: string;
@@ -67,6 +69,7 @@ export const MemberListItem: React.FC<MemberListItemProps> = observer((props) =>
 		guildMember,
 		status: providedStatus,
 		customStatus: providedCustomStatus,
+		isMobile: providedIsMobile,
 		isOwner = false,
 		roleColor,
 		displayName,
@@ -91,6 +94,13 @@ export const MemberListItem: React.FC<MemberListItemProps> = observer((props) =>
 	const [contextMenuOpen, setContextMenuOpen] = useState(false);
 	const contextMenuTicketRef = useRef(0);
 	const isCurrentUser = user.id === Authentication.currentUserId;
+	const hookIsMobile = useMemberListMobile({
+		guildId: guildId ?? '',
+		channelId,
+		userId: user.id,
+		enabled: guildId !== undefined && providedIsMobile === undefined && !isCurrentUser,
+	});
+	const isMobile = isCurrentUser ? undefined : (providedIsMobile ?? hookIsMobile);
 	const isTyping = TypingIndicator.isMemberListTyping(channelId, user.id, Authentication.currentUserId);
 	const handleContextMenu = useCallback(
 		(event: React.MouseEvent) => {
@@ -205,6 +215,7 @@ export const MemberListItem: React.FC<MemberListItemProps> = observer((props) =>
 								showOffline={isCurrentUser || isTyping}
 								guildId={guildId}
 								status={status}
+								isMobile={isMobile}
 								avatarUrl={memberAvatarUrl}
 								hoverAvatarUrl={memberHoverAvatarUrl}
 								mediaSize={avatarMediaSize}

fluxer_app/src/features/channel/components/bottomsheets/ChannelDetailsBottomSheetMemberList.tsx

@@ -11,6 +11,7 @@ import type {Channel} from '@app/features/channel/models/Channel';
 import type {Guild} from '@app/features/guild/models/Guild';
 import {OFFLINE_DESCRIPTOR, ONLINE_DESCRIPTOR} from '@app/features/i18n/utils/CommonMessageDescriptors';
 import {resolveMemberListCustomStatus} from '@app/features/member/hooks/useMemberListCustomStatus';
+import {resolveMemberListMobile} from '@app/features/member/hooks/useMemberListMobile';
 import {resolveMemberListPresence} from '@app/features/member/hooks/useMemberListPresence';
 import {useMemberListSubscription} from '@app/features/member/hooks/useMemberListSubscription';
 import type {GuildMember} from '@app/features/member/models/GuildMember';
@@ -118,6 +119,9 @@ const MobileMemberListItem = observer(
 		const {i18n} = useLingui();
 		const isTyping = TypingIndicator.isMemberListTyping(channelId, member.user.id, Authentication.currentUserId);
 		const status = resolveMemberListPresence({guildId: guild.id, channelId, userId: member.user.id});
+		const isMobile = member.isCurrentUser()
+			? undefined
+			: resolveMemberListMobile({guildId: guild.id, channelId, userId: member.user.id});
 		const memberListCustomStatus = resolveMemberListCustomStatus({
 			guildId: guild.id,
 			channelId,
@@ -175,6 +179,7 @@ const MobileMemberListItem = observer(
 						showOffline={member.user.id === Authentication.currentUserId || isTyping}
 						guildId={guild.id}
 						status={status}
+						isMobile={isMobile}
 						avatarUrl={avatarUrl}
 						hoverAvatarUrl={hoverAvatarUrl}
 						mediaSize={MEDIA_PROXY_AVATAR_SIZE_DEFAULT}

fluxer_app/src/features/member/hooks/useMemberListMobile.ts

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import MemberSidebar from '@app/features/member/state/MemberSidebar';
+import {reaction} from 'mobx';
+import {useEffect, useState} from 'react';
+
+interface UseMemberListMobileOptions {
+	guildId: string;
+	channelId: string;
+	userId: string;
+	enabled?: boolean;
+}
+
+export function resolveMemberListMobile({
+	guildId,
+	channelId,
+	userId,
+	enabled = true,
+}: UseMemberListMobileOptions): boolean | undefined {
+	if (!enabled) return undefined;
+	return MemberSidebar.isMobile(guildId, channelId, userId) ?? undefined;
+}
+
+export function useMemberListMobile({
+	guildId,
+	channelId,
+	userId,
+	enabled = true,
+}: UseMemberListMobileOptions): boolean | undefined {
+	const [isMobile, setIsMobile] = useState(() => resolveMemberListMobile({guildId, channelId, userId, enabled}));
+	useEffect(() => {
+		return reaction(() => resolveMemberListMobile({guildId, channelId, userId, enabled}), setIsMobile, {
+			fireImmediately: true,
+		});
+	}, [guildId, channelId, userId, enabled]);
+	return isMobile;
+}

fluxer_app/src/features/member/models/GuildMember.ts

@@ -61,6 +61,25 @@ export class GuildMember {
 		this.mentionFlags = (guildMember.mention_flags ?? 0) as MentionReplyPreference;
 	}
 
+	matches(guildMember: GuildMemberData): boolean {
+		const until = guildMember.communication_disabled_until
+			? new Date(guildMember.communication_disabled_until).getTime()
+			: null;
+		return (
+			this.nick === (guildMember.nick ?? null) &&
+			this.avatar === (guildMember.avatar ?? null) &&
+			this.banner === (guildMember.banner ?? null) &&
+			this.accentColor === (guildMember.accent_color ?? null) &&
+			this.mute === (guildMember.mute ?? false) &&
+			this.deaf === (guildMember.deaf ?? false) &&
+			this.profileFlags === (guildMember.profile_flags ?? 0) &&
+			this.mentionFlags === (guildMember.mention_flags ?? 0) &&
+			(this.communicationDisabledUntil?.getTime() ?? null) === until &&
+			this.roles.size === guildMember.roles.length &&
+			guildMember.roles.every((roleId) => this.roles.has(roleId))
+		);
+	}
+
 	isAvatarUnset(): boolean {
 		return (this.profileFlags & GuildMemberProfileFlags.AVATAR_UNSET) !== 0;
 	}

fluxer_app/src/features/member/state/GuildMembers.ts

@@ -7,6 +7,7 @@ import SelectedGuild from '@app/features/navigation/state/SelectedGuild';
 import {Logger} from '@app/features/platform/utils/AppLogger';
 import Users from '@app/features/user/state/Users';
 import type {GuildMemberData} from '@fluxer/schema/src/domains/guild/GuildMemberSchemas';
+import type {User as WireUser} from '@fluxer/schema/src/domains/user/UserResponseSchemas';
 import {makeAutoObservable} from 'mobx';
 
 type Members = Record<string, GuildMember>;
@@ -215,6 +216,19 @@ class GuildMembers {
 		this.nonMembers[guildId]?.delete(member.user.id);
 	}
 
+	hydrateOrRefresh(guildId: string, member: GuildMemberData): void {
+		const existing = this.members[guildId]?.[member.user.id];
+		if (!existing) {
+			this.hydrateIfMissing(guildId, member);
+			return;
+		}
+		Users.handleUserUpdate(member.user as WireUser);
+		if (existing.user === Users.getUser(member.user.id) && existing.matches(member)) {
+			return;
+		}
+		this.members[guildId][member.user.id] = new GuildMember(guildId, member);
+	}
+
 	handleMemberRemove(guildId: string, userId: string): void {
 		this.markAsNonMember(guildId, userId);
 		const existingMembers = this.members[guildId];

fluxer_app/src/features/member/state/MemberSidebar.ts

@@ -58,6 +58,7 @@ interface MemberListState {
 	requestedRanges: NormalizedMemberListRanges;
 	subscribedRanges: NormalizedMemberListRanges;
 	presences: Map<string, StatusType>;
+	mobileUserIds: Set<string>;
 	customStatuses: Map<string, CustomStatus | null>;
 	knownCustomStatuses: Map<string, CustomStatus | null>;
 }
@@ -69,6 +70,7 @@ interface MemberListRow {
 	member?: GuildMemberData;
 	presence?: {
 		status?: string;
+		mobile?: boolean;
 		custom_status?: GatewayCustomStatusPayload | null;
 	} | null;
 }
@@ -76,6 +78,7 @@ interface MemberListRow {
 type MemberListOperationMember = GuildMemberData & {
 	presence?: {
 		status?: string;
+		mobile?: boolean;
 		custom_status?: GatewayCustomStatusPayload | null;
 	} | null;
 };
@@ -655,6 +658,7 @@ class MemberSidebar {
 		const newRows = new Map<number, MemberListRow>();
 		const newItems = new Map<number, MemberListItem>();
 		const newPresences = new Map<string, StatusType>();
+		const newMobileUserIds = new Set<string>();
 		const newCustomStatuses = new Map<string, CustomStatus | null>();
 		const newMembersByUserId = new Map<string, GuildMemberData>();
 		const nextKnownCustomStatuses = new Map(listState.knownCustomStatuses);
@@ -704,6 +708,9 @@ class MemberSidebar {
 			const presenceStatus = this.extractPresenceFromRow(row);
 			if (presenceStatus) {
 				newPresences.set(userId, presenceStatus);
+				if (presenceStatus !== StatusTypes.OFFLINE && row.presence?.mobile === true) {
+					newMobileUserIds.add(userId);
+				}
 			}
 			if (row.presence && Object.hasOwn(row.presence, 'custom_status')) {
 				const customStatus = fromGatewayCustomStatus(row.presence.custom_status ?? null);
@@ -757,6 +764,7 @@ class MemberSidebar {
 		listState.items = newItems;
 		listState.membersByUserId = newMembersByUserId;
 		listState.presences = newPresences;
+		listState.mobileUserIds = newMobileUserIds;
 		listState.customStatuses = newCustomStatuses;
 		listState.knownCustomStatuses = nextKnownCustomStatuses;
 		listState.subscribedRanges = getHydratedMemberListRangesFromNormalized(
@@ -1183,6 +1191,14 @@ class MemberSidebar {
 		return listState.presences.get(userId) ?? null;
 	}
 
+	isMobile(guildId: string, listId: string, userId: string): boolean | null {
+		const listState = this.getList(guildId, listId);
+		if (!listState?.presences.has(userId)) {
+			return null;
+		}
+		return listState.mobileUserIds.has(userId);
+	}
+
 	getCustomStatus(guildId: string, listId: string, userId: string): CustomStatus | null | undefined {
 		const listState = this.getList(guildId, listId);
 		if (!listState) {
@@ -1262,6 +1278,7 @@ class MemberSidebar {
 				items: new Map(),
 				membersByUserId: new Map(),
 				presences: new Map(),
+				mobileUserIds: new Set(),
 				customStatuses: new Map(),
 			};
 		}
@@ -1274,10 +1291,14 @@ class MemberSidebar {
 			prunedMembersByUserId.set(item.data.userId, item.data.member);
 		}
 		const prunedPresences = new Map<string, StatusType>();
+		const prunedMobileUserIds = new Set<string>();
 		const prunedCustomStatuses = new Map<string, CustomStatus | null>();
 		for (const [userId, status] of listState.presences) {
 			if (retainedUserIds.has(userId)) {
 				prunedPresences.set(userId, status);
+				if (listState.mobileUserIds.has(userId)) {
+					prunedMobileUserIds.add(userId);
+				}
 			}
 		}
 		for (const [userId, customStatus] of listState.customStatuses) {
@@ -1302,6 +1323,7 @@ class MemberSidebar {
 			items: prunedItems,
 			membersByUserId: prunedMembersByUserId,
 			presences: prunedPresences,
+			mobileUserIds: prunedMobileUserIds,
 			customStatuses: prunedCustomStatuses,
 		};
 	}
@@ -1350,6 +1372,7 @@ class MemberSidebar {
 			requestedRanges: normalizeMemberListRanges(requestedRanges),
 			subscribedRanges: EMPTY_MEMBER_LIST_RANGES,
 			presences: new Map(),
+			mobileUserIds: new Set(),
 			customStatuses: new Map(),
 			knownCustomStatuses: new Map(),
 		};

fluxer_app/src/features/threads/components/ThreadMembersPanel.tsx

@@ -34,6 +34,7 @@ export function useThreadRosterSubscription(thread: Channel | undefined): void {
 interface RosterRow {
 	user: User;
 	status: StatusType;
+	mobile?: boolean;
 	customStatus: CustomStatus | null;
 }
 
@@ -66,7 +67,7 @@ const RosterGroup = observer(({id, label, members, thread, ownerId}: RosterGroup
 				</span>
 			</div>
 			<div className={styles.membersList} data-flx="threads.thread-members-panel.roster-group.members-list">
-				{members.map(({user, status, customStatus}) => (
+				{members.map(({user, status, mobile, customStatus}) => (
 					<MemberListItem
 						key={user.id}
 						user={user}
@@ -74,6 +75,7 @@ const RosterGroup = observer(({id, label, members, thread, ownerId}: RosterGroup
 						guildId={thread.guildId}
 						guildMember={thread.guildId ? (GuildMembers.getMember(thread.guildId, user.id) ?? undefined) : undefined}
 						status={status}
+						isMobile={mobile}
 						customStatus={customStatus}
 						isOwner={user.id === ownerId}
 						disableBackdrop={true}
@@ -95,7 +97,7 @@ function resolveMembers(guildId: string | undefined, roster: ReadonlyArray<Threa
 			const status = LocalPresence.getStatus();
 			members.push({user, status, customStatus: isOfflineStatus(status) ? null : LocalPresence.customStatus});
 		} else {
-			members.push({user, status: entry.status, customStatus: entry.customStatus});
+			members.push({user, status: entry.status, mobile: entry.mobile, customStatus: entry.customStatus});
 		}
 	}
 	members.sort((a, b) =>

fluxer_app/src/features/threads/state/ChannelThreads.test.ts

@@ -53,7 +53,7 @@ vi.mock('@app/features/ui/commands/ContextMenuCommands', () => ({close: vi.fn()}
 vi.mock('@app/features/ui/commands/PopoutCommands', () => ({closeAll: vi.fn()}));
 vi.mock('@app/features/guild/state/Guilds', () => ({default: {getGuild: () => ({ownerId: 'owner', mfaLevel: 0})}}));
 vi.mock('@app/features/member/state/GuildMembers', () => ({
-	default: {getMember: () => null, hydrateIfMissing: () => {}},
+	default: {getMember: () => null, hydrateOrRefresh: () => {}},
 }));
 vi.mock('@app/features/permissions/state/Permission', () => ({
 	default: {
@@ -616,7 +616,7 @@ describe('thread roster', () => {
 		const release = ThreadRoster.subscribe(GUILD, THREAD_A);
 		ThreadRoster.handleListUpdate(
 			listUpdate([
-				{user_id: ONLINE, presence: {status: 'online', afk: false, mobile: false, custom_status: null}},
+				{user_id: ONLINE, presence: {status: 'online', afk: false, mobile: true, custom_status: null}},
 				{
 					user_id: IDLE,
 					presence: {
@@ -630,14 +630,15 @@ describe('thread roster', () => {
 			]),
 		);
 		expect(ThreadRoster.getMembers(THREAD_A)).toEqual([
-			{userId: ONLINE, joinTimestamp: null, status: 'online', customStatus: null},
+			{userId: ONLINE, joinTimestamp: null, status: 'online', mobile: true, customStatus: null},
 			{
 				userId: IDLE,
 				joinTimestamp: null,
 				status: 'idle',
+				mobile: false,
 				customStatus: expect.objectContaining({text: 'im spooky goop', emojiName: 'nahua_smug'}),
 			},
-			{userId: OFFLINE, joinTimestamp: null, status: 'offline', customStatus: null},
+			{userId: OFFLINE, joinTimestamp: null, status: 'offline', mobile: false, customStatus: null},
 		]);
 		release();
 	});
@@ -652,7 +653,7 @@ describe('thread roster', () => {
 		);
 		ThreadRoster.handleListUpdate(listUpdate([{user_id: ONLINE, presence: {status: 'dnd'}}]));
 		expect(ThreadRoster.getMembers(THREAD_A)).toEqual([
-			{userId: ONLINE, joinTimestamp: null, status: 'dnd', customStatus: null},
+			{userId: ONLINE, joinTimestamp: null, status: 'dnd', mobile: false, customStatus: null},
 		]);
 		release();
 		ThreadRoster.handleListUpdate(listUpdate([{user_id: ONLINE, presence: {status: 'online'}}]));

fluxer_app/src/features/threads/state/ThreadRoster.ts

@@ -20,7 +20,11 @@ export interface ThreadMemberListPayload {
 		join_timestamp: string | null;
 		flags: number;
 		member: GuildMemberData | null;
-		presence?: {status?: string | null; custom_status?: GatewayCustomStatusPayload | null} | null;
+		presence?: {
+			status?: string | null;
+			mobile?: boolean;
+			custom_status?: GatewayCustomStatusPayload | null;
+		} | null;
 	}>;
 }
 
@@ -28,6 +32,7 @@ export interface ThreadRosterMember {
 	readonly userId: string;
 	readonly joinTimestamp: string | null;
 	readonly status: StatusType;
+	readonly mobile: boolean;
 	readonly customStatus: CustomStatus | null;
 }
 
@@ -78,13 +83,14 @@ class ThreadRoster {
 		const members: Array<ThreadRosterMember> = [];
 		for (const entry of payload.members) {
 			if (entry.member) {
-				GuildMembers.hydrateIfMissing(payload.guild_id, entry.member);
+				GuildMembers.hydrateOrRefresh(payload.guild_id, entry.member);
 			}
 			const status = normalizeStatus(entry.presence?.status);
 			members.push({
 				userId: entry.user_id,
 				joinTimestamp: entry.join_timestamp,
 				status,
+				mobile: !isOfflineStatus(status) && entry.presence?.mobile === true,
 				customStatus: isOfflineStatus(status) ? null : fromGatewayCustomStatus(entry.presence?.custom_status),
 			});
 		}

fluxer_app/src/features/ui/components/StatusAwareAvatar.tsx

@@ -26,6 +26,7 @@ export interface StatusAwareAvatarProps {
 	guildId?: string | null;
 	mediaSize?: MediaProxyImageSize;
 	status?: string | null;
+	isMobile?: boolean;
 	animateStatusCutout?: boolean;
 }
 
@@ -54,6 +55,7 @@ export const StatusAwareAvatar: React.FC<StatusAwareAvatarProps> = observer(
 		guildId,
 		mediaSize,
 		status: externalStatus,
+		isMobile: externalIsMobile,
 		animateStatusCutout,
 	}) => {
 		if (!user) {
@@ -66,7 +68,7 @@ export const StatusAwareAvatar: React.FC<StatusAwareAvatarProps> = observer(
 		} else if (externalStatus == null) {
 			status = getStatusWithTransientFallback(user.id);
 		}
-		const isMobile = shouldDisablePresence ? false : Presence.isMobile(user.id);
+		const isMobile = shouldDisablePresence ? false : (externalIsMobile ?? Presence.isMobile(user.id));
 		return (
 			<Avatar
 				user={user}