Private
Public Access
ksmithandClaude Sonnet 5
7ef6cfca65
Every avatar in the app (chat messages, room member list, your own avatar in the top bar/profile, the admin user list, the room-invite search) now shows a green/red presence dot. Also adds a global "Appear offline" toggle in the account menu, letting a user lurk in a room undetected -- it overrides the real connection state everywhere, not per-room. Backend: new GlobalPresence (backend/app/ws/global_presence.py), a cross-instance Redis-backed connection tracker parallel to the existing per-room Presence, incremented/decremented on WS connect/ disconnect. A new users.appear_offline column (migration f0f6e494454a) always wins over actual connection state when computing displayed status. RoomMemberRead gained a computed `status` field; add_member/change_member_role/list_room_members all compute it via a shared _member_status() helper. Connect/disconnect and profile updates (display_name, avatar, appear_offline) all broadcast member_updated to every room the user belongs to, reusing the broadcast infrastructure from the earlier avatar-staleness fix, so chat surfaces update live with no new WS envelope type needed. A new GET /api/users/online gives the admin list and user-search a snapshot (deliberately not live -- see backend/app/routers/users.py) for surfaces where "accurate as of page load" is good enough. Frontend: UserAvatar renders an optional status dot; every call site threads status/appear_offline through from whichever data source it already has (room members, the current user, or the new online-ids snapshot for admin/search). 4 new backend tests (backend/tests/test_presence.py); existing broadcast-adjacent WS tests updated to tolerate the new member_updated noise on connect. Verified end-to-end in the browser with two real users: presence dot flips live on connect/disconnect via the existing room-broadcast channel, and the lurk toggle correctly forces offline while still connected. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { accentForIndex, initials } from '../lib/avatar'
|
|
import './UserAvatar.css'
|
|
|
|
interface UserAvatarProps {
|
|
username: string
|
|
colorIndex: number
|
|
size?: number
|
|
avatarUrl?: string | null
|
|
// undefined -- no presence data for this context (e.g. a bot), don't
|
|
// render a dot at all, rather than guessing.
|
|
status?: 'online' | 'offline'
|
|
}
|
|
|
|
export function UserAvatar({ username, colorIndex, size = 28, avatarUrl, status }: UserAvatarProps) {
|
|
const dotSize = Math.max(8, Math.round(size * 0.32))
|
|
const dot = status && (
|
|
<span
|
|
className={`user-avatar-status-dot user-avatar-status-dot-${status}`}
|
|
style={{ width: dotSize, height: dotSize }}
|
|
aria-label={status === 'online' ? 'Online' : 'Offline'}
|
|
title={status === 'online' ? 'Online' : 'Offline'}
|
|
/>
|
|
)
|
|
|
|
if (avatarUrl) {
|
|
return (
|
|
<span className="user-avatar-wrap" style={{ width: size, height: size }}>
|
|
<img
|
|
src={avatarUrl}
|
|
alt=""
|
|
className="user-avatar user-avatar-img"
|
|
style={{ width: size, height: size }}
|
|
/>
|
|
{dot}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span className="user-avatar-wrap" style={{ width: size, height: size }}>
|
|
<div
|
|
className="user-avatar"
|
|
style={{ width: size, height: size, background: accentForIndex(colorIndex) }}
|
|
>
|
|
{initials(username)}
|
|
</div>
|
|
{dot}
|
|
</span>
|
|
)
|
|
}
|