feat(presence): restore Discord-style presence picker and presenceMode setting

The feat/presence-auto-idle branch (PR SableClient#672) was replaced by feat/presence
(PR SableClient#689) without porting the picker, presenceMode setting, DND mode, or
usePresenceAutoIdle hook. Restore from the 29e4076 tip still in the
local object store.

- appEvents: refactor to multi-subscriber Set pattern (supports multiple
  listeners on onVisibilityChange/onVisibilityHidden)
- settings: add presenceMode ('online'|'unavailable'|'dnd'|'offline'),
  default 'online'; add ephemeral presenceAutoIdledAtom
- usePresenceAutoIdle: new hook — inactivity timer, activity reset,
  appEvents visibility integration, multi-device sync via User.presence
- usePresenceAutoIdle.test.tsx: 10 unit tests covering all branches
- ClientNonUIFeatures: PresenceFeature now uses presenceMode + autoIdled
  to broadcast the correct presence state; DND sends status_msg='dnd'
- AccountSwitcherTab: own badge driven from presenceMode settings state
  (not SDK User.presence which MSC4186 servers never echo back); adds
  Status section to account menu with Online/Idle/DND/Invisible picker

Author: Just-Insane

src/app/hooks/useAppVisibility.ts

@@ -24,9 +24,9 @@ export function useAppVisibility(mx: MatrixClient | undefined) {
         `App visibility changed: ${isVisible ? 'visible (foreground)' : 'hidden (background)'}`,
         { visibilityState: document.visibilityState }
       );
-      appEvents.onVisibilityChange?.(isVisible);
+      appEvents.emitVisibilityChange(isVisible);
       if (!isVisible) {
-        appEvents.onVisibilityHidden?.();
+        appEvents.emitVisibilityHidden();
       }
     };
 
@@ -49,9 +49,7 @@ export function useAppVisibility(mx: MatrixClient | undefined) {
       togglePusher(mx, clientConfig, isVisible, usePushNotifications, pushSubAtom, true);
     };
 
-    appEvents.onVisibilityChange = handleVisibilityForNotifications;
-    return () => {
-      appEvents.onVisibilityChange = null;
-    };
+    const unsub = appEvents.onVisibilityChange(handleVisibilityForNotifications);
+    return unsub;
   }, [mx, clientConfig, usePushNotifications, pushSubAtom]);
 }

src/app/hooks/usePresenceAutoIdle.test.tsx

@@ -0,0 +1,226 @@
+import { act, renderHook } from '@testing-library/react';
+import { Provider, useAtomValue } from 'jotai';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
+import { usePresenceAutoIdle } from './usePresenceAutoIdle';
+import { presenceAutoIdledAtom } from '$state/settings';
+import { appEvents } from '$utils/appEvents';
+import type { ReactNode } from 'react';
+
+// -------- mock setup --------
+
+const userListeners = new Map<string, ((...args: unknown[]) => void)[]>();
+
+const makeMockUser = () => ({
+  userId: '@alice:test',
+  presence: 'online',
+  on: vi
+    .fn<(event: string, handler: (...args: unknown[]) => void) => void>()
+    .mockImplementation((event: string, handler: (...args: unknown[]) => void) => {
+      const list = userListeners.get(event) ?? [];
+      list.push(handler);
+      userListeners.set(event, list);
+    }),
+  removeListener: vi.fn<() => void>(),
+});
+
+let mockUser: ReturnType<typeof makeMockUser> | null = null;
+
+const makeMockMx = () => ({
+  getUserId: vi.fn<() => string>(() => '@alice:test'),
+  getUser: vi.fn<() => ReturnType<typeof makeMockUser> | null>(() => 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
+) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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 app becomes visible via appEvents', () => {
+    const { result } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    // Simulate app returning to foreground.
+    act(() => {
+      appEvents.emitVisibilityChange(true);
+    });
+    expect(result.current).toBe(false);
+  });
+
+  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('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('unsubscribes from appEvents.onVisibilityChange on cleanup', () => {
+    const { result, unmount } = renderHook(() => useAutoIdledReader(mockMx, 'online', true, 5000), {
+      wrapper,
+    });
+
+    // Go idle.
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+    expect(result.current).toBe(true);
+
+    unmount();
+
+    // After unmount, emitting visibility change should have no effect.
+    // (No error thrown means the handler was properly unsubscribed.)
+    act(() => {
+      appEvents.emitVisibilityChange(true);
+    });
+  });
+});

src/app/hooks/usePresenceAutoIdle.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useSetAtom } from 'jotai';
+import { type MatrixClient, UserEvent, type UserEventHandlerMap } from '$types/matrix-sdk';
+import { presenceAutoIdledAtom } from '$state/settings';
+import { appEvents } from '$utils/appEvents';
+import { createDebugLogger } from '$utils/debugLogger';
+
+const debugLog = createDebugLogger('PresenceAutoIdle');
+const ACTIVITY_EVENTS = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'wheel'] as const;
+
+/**
+ * Automatically transitions presence to idle after a configurable inactivity
+ * timeout, and clears the idle state when activity is detected.
+ *
+ * Also subscribes to the Matrix `User.presence` event so that if another device
+ * sets you back to `online`, the auto-idle state is cleared here too (multi-device
+ * sync).
+ *
+ * Note: On iOS Safari PWA, background tab throttling may delay or prevent the
+ * inactivity timer from firing reliably. The feature degrades gracefully — presence
+ * will eventually update when the tab regains focus.
+ */
+export function usePresenceAutoIdle(
+  mx: MatrixClient,
+  presenceMode: string,
+  sendPresence: boolean,
+  timeoutMs: number
+): void {
+  const setAutoIdled = useSetAtom(presenceAutoIdledAtom);
+  const autoIdledRef = useRef(false);
+  const timerRef = useRef<number | undefined>(undefined);
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== undefined) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = undefined;
+    }
+  }, []);
+
+  // Inactivity timer: go idle after timeoutMs without user input.
+  useEffect(() => {
+    const shouldAutoIdle = presenceMode === 'online' && sendPresence && timeoutMs > 0;
+    if (!shouldAutoIdle) {
+      clearTimer();
+      if (autoIdledRef.current) {
+        autoIdledRef.current = false;
+        setAutoIdled(false);
+      }
+      return undefined;
+    }
+
+    const goIdle = () => {
+      debugLog.info('general', 'Inactivity timeout — auto-idling');
+      autoIdledRef.current = true;
+      setAutoIdled(true);
+    };
+
+    const handleActivity = () => {
+      clearTimer();
+      if (autoIdledRef.current) {
+        debugLog.info('general', 'Activity detected — clearing auto-idle');
+        autoIdledRef.current = false;
+        setAutoIdled(false);
+      }
+      timerRef.current = window.setTimeout(goIdle, timeoutMs);
+    };
+
+    // Start the initial timer.
+    timerRef.current = window.setTimeout(goIdle, timeoutMs);
+    ACTIVITY_EVENTS.forEach((ev) =>
+      document.addEventListener(ev, handleActivity, { passive: true })
+    );
+
+    // When the app returns to the foreground, treat it as activity so the user
+    // isn't shown as idle the moment they switch back to the tab/PWA.
+    const unsubVisibility = appEvents.onVisibilityChange((isVisible: boolean) => {
+      if (isVisible) handleActivity();
+    });
+
+    return () => {
+      ACTIVITY_EVENTS.forEach((ev) => document.removeEventListener(ev, handleActivity));
+      clearTimer();
+      unsubVisibility();
+    };
+  }, [clearTimer, presenceMode, sendPresence, setAutoIdled, timeoutMs]);
+
+  // Multi-device sync: if another device sets us back to online, clear auto-idle.
+  useEffect(() => {
+    if (!sendPresence) return undefined;
+    const myUserId = mx.getUserId();
+    if (!myUserId) return undefined;
+    const user = mx.getUser(myUserId);
+    if (!user) return undefined;
+
+    const handlePresence: UserEventHandlerMap[UserEvent.Presence] = (_event, u) => {
+      if (u.userId !== myUserId) return;
+      if (u.presence === 'online' && autoIdledRef.current) {
+        debugLog.info('general', 'Remote device set Online — clearing auto-idle');
+        autoIdledRef.current = false;
+        setAutoIdled(false);
+      }
+    };
+
+    user.on(UserEvent.Presence, handlePresence);
+    return () => {
+      user.removeListener(UserEvent.Presence, handlePresence);
+    };
+  }, [mx, sendPresence, setAutoIdled]);
+}