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
parent 582839fddb
commit bd8e116cf3
3 changed files with 191 additions and 31 deletions
@@ -3,12 +3,13 @@ import { useMatrixClient } from './useMatrixClient';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';

-const IDLE_TIMEOUT_MS = 10 * 60 * 1000; // go unavailable after 10 min of no input
-const ACTIVITY_THROTTLE_MS = 1000; // process activity events at most once per second
+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);
@@ -16,14 +17,29 @@ export function usePresenceUpdater() {

  useEffect(() => {
    const setOnline = () => mx.setPresence({ presence: 'online' }).catch(() => undefined);
-    const setUnavailable = () => mx.setPresence({ presence: 'unavailable' }).catch(() => undefined);
+    const setUnavailable = (statusMsg?: string) =>
+      mx.setPresence({ presence: 'unavailable', status_msg: statusMsg }).catch(() => undefined);
+    const setOffline = () => mx.setPresence({ presence: 'offline' }).catch(() => undefined);

-    // When the user hides presence, broadcast offline and do nothing else.
-    if (hidePresence) {
-      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(() => {
@@ -37,7 +53,6 @@ export function usePresenceUpdater() {
      if (now - lastActivityRef.current < ACTIVITY_THROTTLE_MS) return;
      lastActivityRef.current = now;

-      // Coming back from idle while the tab is visible — go back online.
      if (isIdleRef.current && !document.hidden) {
        isIdleRef.current = false;
        setOnline();
@@ -57,12 +72,9 @@ export function usePresenceUpdater() {
      }
    };

-    // Best-effort offline on page close. fetch+keepalive survives the page unload
-    // unlike a regular async call, and avoids the bfcache penalty of beforeunload.
    const handlePageHide = () => {
      const userId = mx.getUserId();
      const token = mx.getAccessToken();
-      // MatrixClient exposes baseUrl as a public property
      const baseUrl = (mx as unknown as { baseUrl: string }).baseUrl;
      if (!userId || !token || !baseUrl) return;

@@ -77,7 +89,6 @@ export function usePresenceUpdater() {
      }).catch(() => undefined);
    };

-    // Announce online immediately when the client mounts.
    setOnline();
    startIdleTimer();

@@ -92,5 +103,5 @@ export function usePresenceUpdater() {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('pagehide', handlePageHide);
    };
-  }, [mx, hidePresence]);
+  }, [mx, hidePresence, presenceStatus]);
 }
@@ -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>
@@ -45,6 +45,7 @@ export interface Settings {
  pageZoom: number;
  hideActivity: boolean;
  hidePresence: boolean;
+  presenceStatus: 'auto' | 'online' | 'idle' | 'dnd' | 'invisible';

  isPeopleDrawer: boolean;
  memberSortFilterIndex: number;
@@ -89,6 +90,7 @@ const defaultSettings: Settings = {
  pageZoom: 100,
  hideActivity: false,
  hidePresence: false,
+  presenceStatus: 'auto',

  isPeopleDrawer: true,
  memberSortFilterIndex: 0,