jared
cf839e7345
Avatar decorations: useAvatarDecoration cached ALL profile-field fetch failures as "no decoration" permanently for the session. The member list and timeline mount many avatars at once, so one rate-limited (429) burst would wipe everyone's decoration until a full reload. Now only a genuine 404 (field unset) is cached; transient errors retry on the next mount. Saved Messages panel — full redesign to match the canonical MembersDrawer: - co-located BookmarksPanel.css.ts: toRem(266) + max-width:750px full-screen media query, replacing the old position:absolute/zIndex:100 mobile "modal" that had no backdrop or escape - variant="Background" header; room avatars on each item (was a generic hash) - priority tokens replace all raw opacity hacks; 3px borderLeft accent removed - Escape-to-close; multi-line preview is now a proper folds Button (N38) Media Gallery (N12): moved fixed positioning + width into MediaGallery.css.ts using toRem(320) + a full-screen media query; border/header use config tokens; added Escape-to-close on the panel (previously only the lightbox handled it). Presence (SettingsTab / useUserPresence): - N16: wrap presence-dot trigger in TooltipProvider; replace undefined --bg-surface with color.Background.Container - N17: add escapeDeactivates + isKeyForward/isKeyBackward to the FocusTrap - N19: align reader labels (usePresenceLabel) to the setter vocabulary (Online/Idle/Offline) so a chosen status matches the tooltip others see Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { User, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
|
|
import { useMatrixClient } from './useMatrixClient';
|
|
|
|
export enum Presence {
|
|
Online = 'online',
|
|
Unavailable = 'unavailable',
|
|
Offline = 'offline',
|
|
}
|
|
|
|
export type UserPresence = {
|
|
presence: Presence;
|
|
status?: string;
|
|
active: boolean;
|
|
lastActiveTs?: number;
|
|
};
|
|
|
|
const getUserPresence = (user: User): UserPresence => ({
|
|
presence: user.presence as Presence,
|
|
status: user.presenceStatusMsg,
|
|
active: user.currentlyActive,
|
|
lastActiveTs: user.getLastActiveTs(),
|
|
});
|
|
|
|
export const useUserPresence = (userId: string): UserPresence | undefined => {
|
|
const mx = useMatrixClient();
|
|
const user = mx.getUser(userId);
|
|
|
|
const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined));
|
|
|
|
useEffect(() => {
|
|
// Subscribe on mx (MatrixClient) rather than on individual User objects.
|
|
// User objects have a default 10-listener limit; the same user can appear
|
|
// in many components simultaneously (avatars, member list, etc.) and
|
|
// per-user subscription causes MaxListenersExceededWarning at 11+.
|
|
const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => {
|
|
if (u.userId === user?.userId) {
|
|
setPresence(getUserPresence(u));
|
|
}
|
|
};
|
|
mx.on(UserEvent.Presence, updatePresence);
|
|
mx.on(UserEvent.CurrentlyActive, updatePresence);
|
|
mx.on(UserEvent.LastPresenceTs, updatePresence);
|
|
return () => {
|
|
mx.removeListener(UserEvent.Presence, updatePresence);
|
|
mx.removeListener(UserEvent.CurrentlyActive, updatePresence);
|
|
mx.removeListener(UserEvent.LastPresenceTs, updatePresence);
|
|
};
|
|
}, [mx, user]);
|
|
|
|
return presence;
|
|
};
|
|
|
|
export const usePresenceLabel = (): Record<Presence, string> =>
|
|
useMemo(
|
|
// Keep this vocabulary aligned with the status setter (PresencePicker in
|
|
// SettingsTab.tsx): online -> "Online", unavailable -> "Idle". Previously
|
|
// these read "Active"/"Busy"/"Away", so a user who set "Idle" showed as
|
|
// "Busy" to others.
|
|
() => ({
|
|
[Presence.Online]: 'Online',
|
|
[Presence.Unavailable]: 'Idle',
|
|
[Presence.Offline]: 'Offline',
|
|
}),
|
|
[],
|
|
);
|