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>
This commit is contained in:
@@ -1,5 +1,19 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Text } from 'folds';
|
||||
import {
|
||||
Badge,
|
||||
Box,
|
||||
Icon,
|
||||
Icons,
|
||||
Menu,
|
||||
MenuItem,
|
||||
PopOut,
|
||||
RectCords,
|
||||
Text,
|
||||
color,
|
||||
config,
|
||||
toRem,
|
||||
} from 'folds';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
|
||||
import { UserAvatar } from '../../../components/user-avatar';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
@@ -9,39 +23,172 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { Settings } from '../../../features/settings';
|
||||
import { useUserProfile } from '../../../hooks/useUserProfile';
|
||||
import { Modal500 } from '../../../components/Modal500';
|
||||
import { useSetting } from '../../../state/hooks/settings';
|
||||
import { settingsAtom } from '../../../state/settings';
|
||||
|
||||
type PresenceOption = {
|
||||
id: 'auto' | 'online' | 'idle' | 'dnd' | 'invisible';
|
||||
label: string;
|
||||
dotColor: string;
|
||||
soft?: boolean;
|
||||
};
|
||||
|
||||
const PRESENCE_OPTIONS: PresenceOption[] = [
|
||||
{ id: 'online', label: 'Online', dotColor: color.Success.Main },
|
||||
{ id: 'idle', label: 'Idle', dotColor: color.Warning.Main },
|
||||
{ id: 'dnd', label: 'Do Not Disturb', dotColor: color.Critical.Main },
|
||||
{ id: 'invisible', label: 'Invisible', dotColor: color.Secondary.Main, soft: true },
|
||||
{ id: 'auto', label: 'Auto (activity-based)', dotColor: color.Primary.Main },
|
||||
];
|
||||
|
||||
function PresenceDot({ option, size = 10 }: { option: PresenceOption; size?: number }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
borderRadius: '50%',
|
||||
background: option.soft ? 'transparent' : option.dotColor,
|
||||
border: option.soft ? `2px solid ${option.dotColor}` : undefined,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function presenceVariant(status: string): 'Success' | 'Warning' | 'Critical' | 'Secondary' {
|
||||
if (status === 'online') return 'Success';
|
||||
if (status === 'idle') return 'Warning';
|
||||
if (status === 'dnd') return 'Critical';
|
||||
return 'Secondary';
|
||||
}
|
||||
|
||||
export function SettingsTab() {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const userId = mx.getUserId()!;
|
||||
const profile = useUserProfile(userId);
|
||||
const [presenceStatus, setPresenceStatus] = useSetting(settingsAtom, 'presenceStatus');
|
||||
|
||||
const [settings, setSettings] = useState(false);
|
||||
const [menuAnchor, setMenuAnchor] = useState<RectCords>();
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
|
||||
const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
|
||||
const avatarUrl = profile.avatarUrl
|
||||
? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
|
||||
: undefined;
|
||||
|
||||
const openSettings = () => setSettings(true);
|
||||
const closeSettings = () => setSettings(false);
|
||||
const currentOption =
|
||||
PRESENCE_OPTIONS.find((o) => o.id === presenceStatus) ?? PRESENCE_OPTIONS[4];
|
||||
|
||||
const closeMenu = () => setMenuAnchor(undefined);
|
||||
|
||||
return (
|
||||
<SidebarItem active={settings}>
|
||||
<SidebarItemTooltip tooltip="User Settings">
|
||||
{(triggerRef) => (
|
||||
<SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
|
||||
<UserAvatar
|
||||
userId={userId}
|
||||
src={avatarUrl}
|
||||
renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
|
||||
/>
|
||||
</SidebarAvatar>
|
||||
)}
|
||||
</SidebarItemTooltip>
|
||||
{settings && (
|
||||
<Modal500 requestClose={closeSettings}>
|
||||
<Settings requestClose={closeSettings} />
|
||||
<SidebarItem active={settingsOpen || !!menuAnchor}>
|
||||
<PopOut
|
||||
anchor={menuAnchor}
|
||||
position="Right"
|
||||
align="End"
|
||||
content={
|
||||
<FocusTrap
|
||||
focusTrapOptions={{
|
||||
initialFocus: false,
|
||||
onDeactivate: closeMenu,
|
||||
clickOutsideDeactivates: true,
|
||||
}}
|
||||
>
|
||||
<Menu variant="Surface" style={{ padding: config.space.S100, minWidth: toRem(210) }}>
|
||||
<Box direction="Column" gap="100">
|
||||
<Box style={{ padding: `${config.space.S100} ${config.space.S200}` }}>
|
||||
<Text size="L400" style={{ opacity: 0.6 }}>
|
||||
Set Status
|
||||
</Text>
|
||||
</Box>
|
||||
{PRESENCE_OPTIONS.map((option) => (
|
||||
<MenuItem
|
||||
key={option.id}
|
||||
size="300"
|
||||
variant={option.id === presenceStatus ? 'Primary' : 'Surface'}
|
||||
radii="300"
|
||||
before={<PresenceDot option={option} />}
|
||||
after={
|
||||
option.id === presenceStatus ? (
|
||||
<Icon size="100" src={Icons.Check} />
|
||||
) : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
setPresenceStatus(option.id);
|
||||
closeMenu();
|
||||
}}
|
||||
>
|
||||
<Text size="T300">{option.label}</Text>
|
||||
</MenuItem>
|
||||
))}
|
||||
<div
|
||||
style={{
|
||||
height: 1,
|
||||
background: 'var(--border-surface-variant)',
|
||||
margin: `${config.space.S100} 0`,
|
||||
}}
|
||||
/>
|
||||
<MenuItem
|
||||
size="300"
|
||||
variant="Surface"
|
||||
radii="300"
|
||||
before={<Icon size="100" src={Icons.Setting} />}
|
||||
onClick={() => {
|
||||
closeMenu();
|
||||
setSettingsOpen(true);
|
||||
}}
|
||||
>
|
||||
<Text size="T300">User Settings</Text>
|
||||
</MenuItem>
|
||||
</Box>
|
||||
</Menu>
|
||||
</FocusTrap>
|
||||
}
|
||||
>
|
||||
<SidebarItemTooltip tooltip={`${displayName} — ${currentOption.label}`}>
|
||||
{(triggerRef) => (
|
||||
<SidebarAvatar
|
||||
as="button"
|
||||
ref={triggerRef}
|
||||
onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
|
||||
setMenuAnchor(e.currentTarget.getBoundingClientRect())
|
||||
}
|
||||
>
|
||||
<div style={{ position: 'relative', display: 'inline-flex' }}>
|
||||
<UserAvatar
|
||||
userId={userId}
|
||||
src={avatarUrl}
|
||||
renderFallback={() => <Text size="H4">{nameInitials(displayName)}</Text>}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: -1,
|
||||
right: -1,
|
||||
background: 'var(--bg-surface)',
|
||||
borderRadius: '50%',
|
||||
padding: 2,
|
||||
lineHeight: 0,
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
size="200"
|
||||
variant={presenceVariant(presenceStatus)}
|
||||
fill={presenceStatus === 'invisible' ? 'Soft' : 'Solid'}
|
||||
radii="Pill"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarAvatar>
|
||||
)}
|
||||
</SidebarItemTooltip>
|
||||
</PopOut>
|
||||
{settingsOpen && (
|
||||
<Modal500 requestClose={() => setSettingsOpen(false)}>
|
||||
<Settings requestClose={() => setSettingsOpen(false)} />
|
||||
</Modal500>
|
||||
)}
|
||||
</SidebarItem>
|
||||
|
||||
Reference in New Issue
Block a user