feat(presence): presence badges, auto-idle, and Discord-style status picker

.changeset/presence-auto-idle.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+feat(presence): add auto-idle presence after configurable inactivity timeout with Discord-style status picker

.changeset/presence-sidebar-badges.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Add presence status badges to sidebar DM list and account switcher

config.json

@@ -19,6 +19,8 @@
     "enabled": true
   },
 
+  "presenceAutoIdleTimeoutMs": 300000,
+
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [

src/app/components/presence/Presence.tsx

@@ -18,6 +18,7 @@ const PresenceToColor: Record<Presence, MainColor> = {
   [Presence.Online]: 'Success',
   [Presence.Unavailable]: 'Warning',
   [Presence.Offline]: 'Secondary',
+  [Presence.Dnd]: 'Critical',
 };
 
 type PresenceBadgeProps = {

src/app/features/settings/account/Profile.tsx

@@ -46,7 +46,7 @@ import { CompactUploadCardRenderer } from '$components/upload-card';
 import { useCapabilities } from '$hooks/useCapabilities';
 import { profilesCacheAtom } from '$state/userRoomProfile';
 import { SequenceCardStyle } from '$features/settings/styles.css';
-import { useUserPresence } from '$hooks/useUserPresence';
+import { Presence, useUserPresence } from '$hooks/useUserPresence';
 import { MSC1767Text } from '$types/matrix/common';
 import { TimezoneEditor } from './TimezoneEditor';
 import { PronounEditor } from './PronounEditor';
@@ -511,7 +511,10 @@ function ProfileExtended({ profile, userId }: Readonly<ProfileProps>) {
 
   const handleSaveStatus = useCallback(
     async (newStatus: string) => {
-      const currentState = presence?.presence || 'online';
+      const currentState =
+        presence?.presence === Presence.Dnd
+          ? Presence.Online
+          : (presence?.presence ?? Presence.Online);
 
       await mx.setPresence({
         presence: currentState,

src/app/hooks/useClientConfig.ts

@@ -43,6 +43,8 @@ export type ClientConfig = {
 
   matrixToBaseUrl?: string;
   settingsLinkBaseUrl?: string;
+  /** How long (ms) without input before auto-idling presence. 0 = disabled. */
+  presenceAutoIdleTimeoutMs?: number;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);

src/app/hooks/usePresenceAutoIdle.test.tsx

@@ -0,0 +1,240 @@
+import { act, renderHook } from '@testing-library/react';
+import { Provider, useAtomValue } from 'jotai';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import { presenceAutoIdledAtom } from '$state/settings';
+import type { ReactNode } from 'react';
+import { usePresenceAutoIdle } from './usePresenceAutoIdle';
+
+// -------- mock setup --------
+
+const userListeners = new Map<string, ((...args: unknown[]) => void)[]>();
+
+const makeMockUser = () => ({
+  userId: '@alice:test',
+  presence: 'online',
+  on: vi.fn().mockImplementation((event: string, handler: (...args: unknown[]) => void) => {
+    const list = userListeners.get(event) ?? [];
+    list.push(handler);
+    userListeners.set(event, list);
+  }),
+  removeListener: vi.fn(),
+});
+
+let mockUser: ReturnType<typeof makeMockUser> | null = null;
+
+const makeMockMx = () => ({
+  getUserId: vi.fn(() => '@alice:test'),
+  getUser: vi.fn(() => mockUser),
+});
+
+let mockMx: ReturnType<typeof makeMockMx>;
+
+const wrapper = ({ children }: { children: ReactNode }) => <Provider>{children}</Provider>;
+
+// Helper to read the atom value alongside the hook under test.
+function useAutoIdledReader(
+  mx: ReturnType<typeof makeMockMx>,
+  presenceMode: string,
+  sendPresence: boolean,
+  timeoutMs: number
+) {
+  usePresenceAutoIdle(mx as any, presenceMode, sendPresence, timeoutMs);
+  return useAtomValue(presenceAutoIdledAtom);
+}
+
+// -------- lifecycle --------
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.clearAllMocks();
+  userListeners.clear();
+  mockUser = makeMockUser();
+  mockMx = makeMockMx();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+// -------- tests --------
+
+describe('usePresenceAutoIdle', () => {
+  it('sets auto-idle after the timeout elapses', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    expect(result.current).toBe(false);
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it('resets auto-idle when user activity is detected', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    // Go idle.
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    // Simulate user activity.
+    act(() => {
+      document.dispatchEvent(new Event('mousemove'));
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it('resets auto-idle when the document becomes visible again', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    const visibilityStateSpy = vi
+      .spyOn(document, 'visibilityState', 'get')
+      .mockReturnValue('visible');
+
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+    expect(result.current).toBe(false);
+
+    visibilityStateSpy.mockRestore();
+  });
+
+  it('does not go idle when presenceMode is not online', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'dnd', true, 5000), { wrapper });
+
+    act(() => {
+      vi.advanceTimersByTime(10000);
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it('does not go idle when sendPresence is false', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', false, 5000), {
+      wrapper,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(10000);
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it('does not go idle when timeoutMs is 0', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 0), { wrapper });
+
+    act(() => {
+      vi.advanceTimersByTime(10000);
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it('restarts the idle timer on activity before timeout', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    // Advance partially, then trigger activity.
+    act(() => {
+      vi.advanceTimersByTime(3000);
+    });
+    expect(result.current).toBe(false);
+
+    act(() => {
+      document.dispatchEvent(new Event('keydown'));
+    });
+
+    // Original timeout would have fired at 5000ms, but we reset.
+    act(() => {
+      vi.advanceTimersByTime(3000);
+    });
+    expect(result.current).toBe(false);
+
+    // Now the full 5000ms from last activity should trigger idle.
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it('still goes idle after the window loses focus', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    act(() => {
+      window.dispatchEvent(new Event('blur'));
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(result.current).toBe(true);
+  });
+
+  it('clears auto-idle when presenceMode changes away from online', () => {
+    const { result, rerender } = renderHook(
+      ({ mode }) => useAutoIdledReader(mockMx, mode, true, 5000),
+      { wrapper, initialProps: { mode: 'online' } }
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    rerender({ mode: 'dnd' });
+    expect(result.current).toBe(false);
+  });
+
+  it('clears auto-idle when another device sets presence to online', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    // Simulate User.presence event from another device.
+    const handlers = userListeners.get('User.presence') ?? [];
+    expect(handlers.length).toBeGreaterThan(0);
+
+    act(() => {
+      handlers.forEach((h) => h({}, { userId: '@alice:test', presence: 'online' }));
+    });
+    expect(result.current).toBe(false);
+  });
+
+  it('stops responding to focus events after cleanup', () => {
+    const { result, unmount } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    // Go idle.
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    unmount();
+
+    act(() => {
+      window.dispatchEvent(new Event('focus'));
+    });
+
+    expect(result.current).toBe(true);
+  });
+});