feat(presence): configurable idle timeout setting

Author: Just-Insane

src/app/features/settings/general/General.tsx

@@ -474,7 +474,7 @@ function Editor({ isMobile }: Readonly<{ isMobile: boolean }>) {
           <SettingTile
             title="Auto-Idle"
             focusId="auto-idle-presence"
-            description="Automatically appear unavailable after 5 minutes of inactivity or when the app isn't active."
+            description="Automatically appear unavailable after a period of inactivity or when the app isn't active."
             after={
               <Switch
                 variant="Primary"
@@ -485,6 +485,16 @@ function Editor({ isMobile }: Readonly<{ isMobile: boolean }>) {
           />
         </SequenceCard>
       )}
+      {sendPresence && autoIdlePresence && (
+        <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+          <SettingTile
+            title="Idle Timeout"
+            focusId="presence-idle-timeout"
+            description="Minutes of inactivity before appearing unavailable."
+            after={<PresenceIdleTimeoutInput />}
+          />
+        </SequenceCard>
+      )}
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Room Message Preview"
@@ -863,6 +873,52 @@ function EmojiSelectorThresholdInput() {
   );
 }
 
+function PresenceIdleTimeoutInput() {
+  const [idleTimeoutMins, setIdleTimeoutMins] = useSetting(settingsAtom, 'presenceIdleTimeoutMins');
+  const [inputValue, setInputValue] = useState(idleTimeoutMins.toString());
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const val = evt.target.value;
+    setInputValue(val);
+    const parsed = Number.parseInt(val, 10);
+    if (!Number.isNaN(parsed) && parsed >= 1 && parsed <= 60) {
+      setIdleTimeoutMins(parsed);
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (isKeyHotkey('escape', evt)) {
+      evt.stopPropagation();
+      setInputValue(idleTimeoutMins.toString());
+      (evt.target as HTMLInputElement).blur();
+    }
+    if (isKeyHotkey('enter', evt)) {
+      (evt.target as HTMLInputElement).blur();
+    }
+  };
+
+  return (
+    <Box alignItems="Center" gap="200">
+      <Input
+        style={{ width: toRem(80) }}
+        variant={Number.parseInt(inputValue, 10) === idleTimeoutMins ? 'Secondary' : 'Success'}
+        size="300"
+        radii="300"
+        type="number"
+        min="1"
+        max="60"
+        value={inputValue}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        outlined
+      />
+      <Text size="T200" priority="300">
+        min
+      </Text>
+    </Box>
+  );
+}
+
 function Calls() {
   const [alwaysShowCallButton, setAlwaysShowCallButton] = useSetting(
     settingsAtom,

src/app/hooks/useUserPresence.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
-import type { User, UserEventHandlerMap } from '$types/matrix-sdk';
-import { UserEvent } from '$types/matrix-sdk';
+import type { MatrixEvent, User, UserEventHandlerMap } from '$types/matrix-sdk';
+import { ClientEvent, UserEvent } from '$types/matrix-sdk';
 import { useMatrixClient } from './useMatrixClient';
 
 export enum Presence {
@@ -31,7 +31,21 @@ export const useUserPresence = (userId: string): UserPresence | undefined => {
   useEffect(() => {
     if (!user) {
       setPresence(undefined);
-      return undefined;
+
+      // When the user isn't in the SDK store yet (e.g., presence arrived before
+      // any membership event), listen on the client for incoming events so we
+      // can re-evaluate once a presence event for this user is stored.
+      const handleEvent = (event: MatrixEvent) => {
+        if (event.getType() !== 'm.presence') return;
+        const sender = event.getSender();
+        if (sender !== userId) return;
+        const latestUser = mx.getUser(userId);
+        if (latestUser) setPresence(getUserPresence(latestUser));
+      };
+      mx.on(ClientEvent.Event, handleEvent);
+      return () => {
+        mx.removeListener(ClientEvent.Event, handleEvent);
+      };
     }
     setPresence(getUserPresence(user));
     const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (e, u) => {
@@ -48,7 +62,7 @@ export const useUserPresence = (userId: string): UserPresence | undefined => {
       user.removeListener(UserEvent.CurrentlyActive, updatePresence);
       user.removeListener(UserEvent.LastPresenceTs, updatePresence);
     };
-  }, [user]);
+  }, [mx, user, userId]);
 
   return presence;
 };

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -845,6 +845,7 @@ function PresenceFeature() {
   const mx = useMatrixClient();
   const [sendPresence] = useSetting(settingsAtom, 'sendPresence');
   const [autoIdlePresence] = useSetting(settingsAtom, 'autoIdlePresence');
+  const [presenceIdleTimeoutMins] = useSetting(settingsAtom, 'presenceIdleTimeoutMins');
 
   useEffect(() => {
     // Classic sync: set_presence query param on every /sync poll.
@@ -859,12 +860,12 @@ function PresenceFeature() {
     }
   }, [mx, sendPresence]);
 
-  // Auto-idle: set presence to unavailable after 5 minutes of inactivity or
+  // Auto-idle: set presence to unavailable after inactivity or
   // when the tab is hidden, and restore online on activity.
   useEffect(() => {
     if (!sendPresence || !autoIdlePresence) return undefined;
 
-    const IDLE_TIMEOUT_MS = 5 * 60 * 1000;
+    const IDLE_TIMEOUT_MS = Math.max(1, presenceIdleTimeoutMins) * 60 * 1000;
     let idleTimer: ReturnType<typeof setTimeout> | undefined;
     let isIdle = false;
 
@@ -915,7 +916,7 @@ function PresenceFeature() {
         mx.setPresence({ presence: 'online' }).catch(() => {});
       }
     };
-  }, [mx, sendPresence, autoIdlePresence]);
+  }, [mx, sendPresence, autoIdlePresence, presenceIdleTimeoutMins]);
 
   return null;
 }

src/app/state/settings.ts

@@ -1,4 +1,4 @@
-import { atom, type WritableAtom } from 'jotai';
+import { atom } from 'jotai';
 import { mobileOrTablet } from '$utils/user-agent';
 
 const STORAGE_KEY = 'settings';
@@ -23,36 +23,6 @@ export enum CaptionPosition {
 }
 export type JumboEmojiSize = 'none' | 'extraSmall' | 'small' | 'normal' | 'large' | 'extraLarge';
 
-export type ThemeRemoteFavorite = {
-  fullUrl: string;
-  displayName: string;
-  basename: string;
-  kind: 'light' | 'dark';
-  pinned?: boolean;
-  importedLocal?: boolean;
-};
-
-export type ThemeRemoteTweakFavorite = {
-  fullUrl: string;
-  displayName: string;
-  basename: string;
-  pinned?: boolean;
-  importedLocal?: boolean;
-};
-
-/** Custom profile card hero colors: which brightness schemes to honor. */
-export type RenderUserCardsMode = 'both' | 'light' | 'dark' | 'none';
-
-export function shouldApplyUserHeroCards(
-  mode: RenderUserCardsMode,
-  brightness: string | undefined
-): boolean {
-  if (mode === 'none') return false;
-  if (mode === 'both') return true;
-  if (brightness !== 'light' && brightness !== 'dark') return false;
-  return brightness === mode;
-}
-
 export interface Settings {
   themeId?: string;
   useSystemTheme: boolean;
@@ -64,6 +34,8 @@ export interface Settings {
   arboriumDarkTheme?: string;
   saturationLevel?: number;
   uniformIcons: boolean;
+  isMarkdown: boolean;
+  editorToolbar: boolean;
   twitterEmoji: boolean;
   pageZoom: number;
   hideActivity: boolean;
@@ -113,7 +85,6 @@ export interface Settings {
   showPronouns: boolean;
   parsePronouns: boolean;
   renderGlobalNameColors: boolean;
-  renderUserCards: RenderUserCardsMode;
   filterPronounsBasedOnLanguage?: boolean;
   filterPronounsLanguages?: string[];
   renderRoomColors: boolean;
@@ -124,6 +95,7 @@ export interface Settings {
   // Sable features!
   sendPresence: boolean;
   autoIdlePresence: boolean;
+  presenceIdleTimeoutMins: number;
   showRoomMessagePreview: boolean;
   mobileGestures: boolean;
   rightSwipeAction: RightSwipeAction;
@@ -153,26 +125,9 @@ export interface Settings {
 
   // furry stuff
   renderAnimals: boolean;
-
-  // theme catalog
-  themeCatalogOnboardingDone: boolean;
-  themeRemoteFavorites: ThemeRemoteFavorite[];
-  themeRemoteCatalogEnabled: boolean;
-  themeChatSableWidgetsEnabled: boolean;
-  themeChatAutoPreviewApprovedUrls: boolean;
-  themeChatAutoPreviewAnyUrl: boolean;
-  themeRemoteManualFullUrl?: string;
-  themeRemoteLightFullUrl?: string;
-  themeRemoteDarkFullUrl?: string;
-  themeRemoteManualKind?: 'light' | 'dark';
-  themeRemoteLightKind?: 'light' | 'dark';
-  themeRemoteDarkKind?: 'light' | 'dark';
-  themeMigrationDismissed: boolean;
-  themeRemoteTweakFavorites: ThemeRemoteTweakFavorite[];
-  themeRemoteEnabledTweakFullUrls: string[];
 }
 
-export const defaultSettings: Settings = {
+const defaultSettings: Settings = {
   themeId: undefined,
   useSystemTheme: true,
   lightThemeId: undefined,
@@ -183,6 +138,8 @@ export const defaultSettings: Settings = {
   arboriumDarkTheme: 'dracula',
   saturationLevel: 100,
   uniformIcons: false,
+  isMarkdown: true,
+  editorToolbar: false,
   twitterEmoji: true,
   pageZoom: 100,
   hideActivity: false,
@@ -235,7 +192,6 @@ export const defaultSettings: Settings = {
   showPronouns: true,
   parsePronouns: true,
   renderGlobalNameColors: true,
-  renderUserCards: 'both',
   renderRoomColors: true,
   renderRoomFonts: true,
   captionPosition: CaptionPosition.Below,
@@ -244,6 +200,7 @@ export const defaultSettings: Settings = {
   // Sable features!
   sendPresence: true,
   autoIdlePresence: true,
+  presenceIdleTimeoutMins: 5,
   showRoomMessagePreview: true,
   mobileGestures: true,
   rightSwipeAction: RightSwipeAction.Reply,
@@ -273,23 +230,6 @@ export const defaultSettings: Settings = {
 
   // furry stuff
   renderAnimals: true,
-
-  // theme catalog
-  themeCatalogOnboardingDone: false,
-  themeRemoteFavorites: [],
-  themeRemoteCatalogEnabled: false,
-  themeChatSableWidgetsEnabled: true,
-  themeChatAutoPreviewApprovedUrls: true,
-  themeChatAutoPreviewAnyUrl: false,
-  themeRemoteManualFullUrl: undefined,
-  themeRemoteLightFullUrl: undefined,
-  themeRemoteDarkFullUrl: undefined,
-  themeRemoteManualKind: undefined,
-  themeRemoteLightKind: undefined,
-  themeRemoteDarkKind: undefined,
-  themeMigrationDismissed: false,
-  themeRemoteTweakFavorites: [],
-  themeRemoteEnabledTweakFullUrls: [],
 };
 
 export const getSettings = () => {
@@ -307,34 +247,14 @@ export const getSettings = () => {
     }
     delete parsed.monochromeMode;
 
-    if (typeof parsed.renderUserCards === 'boolean') {
-      parsed.renderUserCards = parsed.renderUserCards ? 'both' : 'none';
-    } else if (
-      parsed.renderUserCards !== 'both' &&
-      parsed.renderUserCards !== 'light' &&
-      parsed.renderUserCards !== 'dark' &&
-      parsed.renderUserCards !== 'none'
-    ) {
-      parsed.renderUserCards = 'both';
-    }
-
-    const parsedRecord = parsed as Record<string, unknown>;
-    if (
-      typeof parsedRecord.themeChatAutoPreviewAnyUrl !== 'boolean' &&
-      typeof parsedRecord.themeChatPreviewAnyUrl === 'boolean'
-    ) {
-      parsedRecord.themeChatAutoPreviewAnyUrl = parsedRecord.themeChatPreviewAnyUrl;
-    }
-    delete parsedRecord.themeChatPreviewAnyUrl;
-    delete parsedRecord.themeChatPreviewApprovedCatalogOnly;
-
     return {
       ...defaultSettings,
       ...(parsed as Settings),
     };
   } catch {
     return defaultSettings;
   }
+};
 
 export const setSettings = (settings: Settings) => {
   try {
@@ -347,11 +267,8 @@ export const setSettings = (settings: Settings) => {
 const baseSettings = atom(getSettings());
 export const settingsAtom = atom<Settings, [Settings], undefined>(
   (get) => get(baseSettings),
-  (_get, set, update) => {
-    (set as (atom: WritableAtom<Settings, [Settings], void>, val: Settings) => void)(
-      baseSettings as WritableAtom<Settings, [Settings], void>,
-      update
-    );
+  (get, set, update) => {
+    set(baseSettings, update);
     setSettings(update);
   }
 );