feat(presence): configurable idle timeout setting

Author: Just-Insane

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

@@ -483,7 +483,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"
@@ -494,6 +494,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"
@@ -872,6 +882,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

@@ -73,6 +73,7 @@ export interface Settings {
   isWidgetDrawer: boolean;
   memberSortFilterIndex: number;
   enterForNewline: boolean;
+  isMarkdown: boolean;
   editorToolbar: boolean;
   composerToolbarOpen: boolean;
   messageLayout: MessageLayout;
@@ -127,6 +128,7 @@ export interface Settings {
   // Sable features!
   sendPresence: boolean;
   autoIdlePresence: boolean;
+  presenceIdleTimeoutMins: number;
   showRoomMessagePreview: boolean;
   mobileGestures: boolean;
   rightSwipeAction: RightSwipeAction;
@@ -197,6 +199,7 @@ export const defaultSettings: Settings = {
   isWidgetDrawer: false,
   memberSortFilterIndex: 0,
   enterForNewline: false,
+  isMarkdown: true,
   editorToolbar: false,
   composerToolbarOpen: false,
   messageLayout: 0,
@@ -252,6 +255,7 @@ export const defaultSettings: Settings = {
   // Sable features!
   sendPresence: true,
   autoIdlePresence: true,
+  presenceIdleTimeoutMins: 5,
   showRoomMessagePreview: true,
   mobileGestures: true,
   rightSwipeAction: RightSwipeAction.Reply,