Files
cinny/src/app/hooks/usePresenceUpdater.ts
T
jared 7d223d8d45 feat: Discord-style presence status selector
Adds a manual presence picker to the sidebar user avatar. Clicking the
avatar opens a popout menu with Online, Idle, Do Not Disturb, Invisible,
and Auto (activity-based) options. The selected status is shown as a
colored badge on the avatar and stored in settings (survives reloads).

usePresenceUpdater now short-circuits for manual states and only runs
the full activity-tracking logic in Auto mode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-30 23:29:29 -04:00

108 lines
3.6 KiB
TypeScript

import { useEffect, useRef } from 'react';
import { useMatrixClient } from './useMatrixClient';
import { useSetting } from '../state/hooks/settings';
import { settingsAtom } from '../state/settings';
const IDLE_TIMEOUT_MS = 10 * 60 * 1000;
const ACTIVITY_THROTTLE_MS = 1000;
export function usePresenceUpdater() {
const mx = useMatrixClient();
const [hidePresence] = useSetting(settingsAtom, 'hidePresence');
const [presenceStatus] = useSetting(settingsAtom, 'presenceStatus');
const idleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
const isIdleRef = useRef(false);
const lastActivityRef = useRef(0);
useEffect(() => {
const setOnline = () => mx.setPresence({ presence: 'online' }).catch(() => undefined);
const setUnavailable = (statusMsg?: string) =>
mx.setPresence({ presence: 'unavailable', status_msg: statusMsg }).catch(() => undefined);
const setOffline = () => mx.setPresence({ presence: 'offline' }).catch(() => undefined);
// Manual presence overrides — no activity tracking needed.
if (hidePresence || presenceStatus === 'invisible') {
setOffline();
return undefined;
}
if (presenceStatus === 'online') {
setOnline();
return undefined;
}
if (presenceStatus === 'idle') {
setUnavailable();
return undefined;
}
if (presenceStatus === 'dnd') {
setUnavailable('dnd');
return undefined;
}
// presenceStatus === 'auto' — original activity-tracking behavior.
const startIdleTimer = () => {
clearTimeout(idleTimerRef.current);
idleTimerRef.current = window.setTimeout(() => {
isIdleRef.current = true;
setUnavailable();
}, IDLE_TIMEOUT_MS);
};
const handleActivity = () => {
const now = Date.now();
if (now - lastActivityRef.current < ACTIVITY_THROTTLE_MS) return;
lastActivityRef.current = now;
if (isIdleRef.current && !document.hidden) {
isIdleRef.current = false;
setOnline();
}
startIdleTimer();
};
const handleVisibilityChange = () => {
if (document.hidden) {
clearTimeout(idleTimerRef.current);
setUnavailable();
} else {
isIdleRef.current = false;
lastActivityRef.current = Date.now();
setOnline();
startIdleTimer();
}
};
const handlePageHide = () => {
const userId = mx.getUserId();
const token = mx.getAccessToken();
const baseUrl = (mx as unknown as { baseUrl: string }).baseUrl;
if (!userId || !token || !baseUrl) return;
fetch(`${baseUrl}/_matrix/client/v3/presence/${encodeURIComponent(userId)}/status`, {
method: 'PUT',
headers: {
Authorization: `Bearer ${token}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({ presence: 'offline' }),
keepalive: true,
}).catch(() => undefined);
};
setOnline();
startIdleTimer();
const activityEvents = ['mousemove', 'keydown', 'touchstart', 'click', 'scroll'] as const;
activityEvents.forEach((e) => window.addEventListener(e, handleActivity, { passive: true }));
document.addEventListener('visibilitychange', handleVisibilityChange);
window.addEventListener('pagehide', handlePageHide);
return () => {
clearTimeout(idleTimerRef.current);
activityEvents.forEach((e) => window.removeEventListener(e, handleActivity));
document.removeEventListener('visibilitychange', handleVisibilityChange);
window.removeEventListener('pagehide', handlePageHide);
};
}, [mx, hidePresence, presenceStatus]);
}