fix(mobile): make shelf preference toggles race-safe

Author: PixPMusic

apps/mobile/src/features/home/HomeScreen.tsx

@@ -55,6 +55,7 @@ import {
   THREAD_LIST_V2_SETTLED_PAGE_COUNT,
   type ThreadListV2ListItem,
 } from "../threads/threadListV2";
+import { useThreadListV2ShelfPreferences } from "../threads/use-thread-list-v2-shelf-preferences";
 import type { HomeListFilterMenuEnvironment } from "./home-list-filter-menu";
 import {
   buildHomeListLayout,
@@ -555,26 +556,13 @@ export function HomeScreen(props: HomeScreenProps) {
     () => setSettledVisibleCount((count) => count + THREAD_LIST_V2_SETTLED_PAGE_COUNT),
     [],
   );
-  const snoozedShelfExpanded =
-    AsyncResult.isSuccess(preferencesResult) &&
-    preferencesResult.value.threadListV2SnoozedShelfExpanded === true;
-  const toggleSnoozedShelf = useCallback(
-    () =>
-      savePreferences({
-        threadListV2SnoozedShelfExpanded: !snoozedShelfExpanded,
-      }),
-    [savePreferences, snoozedShelfExpanded],
-  );
-  const settledShelfExpanded =
-    !AsyncResult.isSuccess(preferencesResult) ||
-    preferencesResult.value.threadListV2SettledShelfExpanded !== false;
-  const toggleSettledShelf = useCallback(
-    () =>
-      savePreferences({
-        threadListV2SettledShelfExpanded: !settledShelfExpanded,
-      }),
-    [savePreferences, settledShelfExpanded],
-  );
+  const {
+    loaded: shelfPreferencesLoaded,
+    settledShelfExpanded,
+    snoozedShelfExpanded,
+    toggleSettledShelf,
+    toggleSnoozedShelf,
+  } = useThreadListV2ShelfPreferences();
   // now is quantized to the minute and ticks so the inactivity auto-settle
   // boundary is actually crossed while the app stays open (mirrors web);
   // without a clock dependency the partition memoizes a frozen "now".
@@ -773,6 +761,7 @@ export function HomeScreen(props: HomeScreenProps) {
         return (
           <ThreadListV2SnoozedShelfHeader
             count={item.count}
+            disabled={!shelfPreferencesLoaded}
             expanded={item.expanded}
             onToggle={toggleSnoozedShelf}
           />
@@ -782,6 +771,7 @@ export function HomeScreen(props: HomeScreenProps) {
         return (
           <ThreadListV2SettledShelfHeader
             count={item.count}
+            disabled={!shelfPreferencesLoaded}
             expanded={item.expanded}
             onToggle={toggleSettledShelf}
           />
@@ -875,6 +865,7 @@ export function HomeScreen(props: HomeScreenProps) {
       props.onSelectThread,
       props.savedConnectionsById,
       serverConfigs,
+      shelfPreferencesLoaded,
       settlementEnvironmentIds,
       snoozeEnvironmentIds,
       threadListV2Items,

apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx

@@ -9,8 +9,7 @@ import {
 } from "@t3tools/client-runtime/state/thread-search";
 import { LegendList } from "@legendapp/list/react-native";
 import type { MenuAction } from "@react-native-menu/menu";
-import { useAtomSet, useAtomValue } from "@effect/atom-react";
-import { AsyncResult } from "effect/unstable/reactivity";
+import { useAtomValue } from "@effect/atom-react";
 import type { EnvironmentId } from "@t3tools/contracts";
 import { sortPinnedThreadsByOrderKey } from "@t3tools/client-runtime/state/thread-sort";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
@@ -30,9 +29,9 @@ import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { scopedProjectKey, scopedThreadKey } from "../../lib/scopedEntities";
 import { useThemeColor } from "../../lib/useThemeColor";
 import { useProjects, useThreadShells } from "../../state/entities";
-import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import { useThreadSearch } from "../../state/queries";
 import { useThreadListV2Enabled } from "./use-thread-list-v2-enabled";
+import { useThreadListV2ShelfPreferences } from "./use-thread-list-v2-shelf-preferences";
 import { environmentServerConfigsAtom } from "../../state/server";
 import { usePendingNewTasks } from "../../state/use-pending-new-tasks";
 import { useWorkspaceState } from "../../state/workspace";
@@ -191,8 +190,6 @@ function NativeSidebarContainer(props: ThreadNavigationSidebarProps) {
 function ThreadNavigationSidebarPane(
   props: ThreadNavigationSidebarProps & { readonly nativeChrome: boolean },
 ) {
-  const preferencesResult = useAtomValue(mobilePreferencesAtom);
-  const savePreferences = useAtomSet(updateMobilePreferencesAtom);
   const insets = useSafeAreaInsets();
   const colorScheme = useColorScheme() === "dark" ? "dark" : "light";
   const projects = useProjects();
@@ -449,26 +446,13 @@ function ThreadNavigationSidebarPane(
     () => setSettledVisibleCount((count) => count + THREAD_LIST_V2_SETTLED_PAGE_COUNT),
     [],
   );
-  const snoozedShelfExpanded =
-    AsyncResult.isSuccess(preferencesResult) &&
-    preferencesResult.value.threadListV2SnoozedShelfExpanded === true;
-  const toggleSnoozedShelf = useCallback(
-    () =>
-      savePreferences({
-        threadListV2SnoozedShelfExpanded: !snoozedShelfExpanded,
-      }),
-    [savePreferences, snoozedShelfExpanded],
-  );
-  const settledShelfExpanded =
-    !AsyncResult.isSuccess(preferencesResult) ||
-    preferencesResult.value.threadListV2SettledShelfExpanded !== false;
-  const toggleSettledShelf = useCallback(
-    () =>
-      savePreferences({
-        threadListV2SettledShelfExpanded: !settledShelfExpanded,
-      }),
-    [savePreferences, settledShelfExpanded],
-  );
+  const {
+    loaded: shelfPreferencesLoaded,
+    settledShelfExpanded,
+    snoozedShelfExpanded,
+    toggleSettledShelf,
+    toggleSnoozedShelf,
+  } = useThreadListV2ShelfPreferences();
   // now ticks per minute so the inactivity auto-settle boundary is actually
   // crossed while the pane stays open; without a clock dependency the
   // partition memoizes a frozen "now".
@@ -1000,6 +984,7 @@ function ThreadNavigationSidebarPane(
           return (
             <ThreadListV2SnoozedShelfHeader
               count={item.count}
+              disabled={!shelfPreferencesLoaded}
               expanded={item.expanded}
               onToggle={toggleSnoozedShelf}
               pane="sidebar"
@@ -1009,6 +994,7 @@ function ThreadNavigationSidebarPane(
           return (
             <ThreadListV2SettledShelfHeader
               count={item.count}
+              disabled={!shelfPreferencesLoaded}
               expanded={item.expanded}
               onToggle={toggleSettledShelf}
               pane="sidebar"
@@ -1129,6 +1115,7 @@ function ThreadNavigationSidebarPane(
       props.width,
       savedConnectionsById,
       serverConfigs,
+      shelfPreferencesLoaded,
       threadSearchMatchByKey,
       settleThread,
       settlementEnvironmentIds,

apps/mobile/src/features/threads/thread-list-v2-items.tsx

@@ -115,6 +115,7 @@ const SNOOZE_ACCENT_DARK = "#60a5fa";
 
 export const ThreadListV2SnoozedShelfHeader = memo(function ThreadListV2SnoozedShelfHeader(props: {
   readonly count: number;
+  readonly disabled?: boolean;
   readonly expanded: boolean;
   readonly onToggle: () => void;
   readonly pane?: "screen" | "sidebar";
@@ -127,11 +128,12 @@ export const ThreadListV2SnoozedShelfHeader = memo(function ThreadListV2SnoozedS
       }
       accessibilityLabel={props.count === 1 ? "1 snoozed thread" : `${props.count} snoozed threads`}
       accessibilityRole="button"
-      accessibilityState={{ expanded: props.expanded }}
+      accessibilityState={{ disabled: props.disabled, expanded: props.expanded }}
       className={cn(
         "mb-1.5 mt-4 flex-row items-center gap-2.5",
         props.pane === "sidebar" ? "px-3" : "px-5",
       )}
+      disabled={props.disabled}
       onPress={props.onToggle}
       style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
     >
@@ -151,6 +153,7 @@ export const ThreadListV2SnoozedShelfHeader = memo(function ThreadListV2SnoozedS
 
 export const ThreadListV2SettledShelfHeader = memo(function ThreadListV2SettledShelfHeader(props: {
   readonly count: number;
+  readonly disabled?: boolean;
   readonly expanded: boolean;
   readonly onToggle: () => void;
   readonly pane?: "screen" | "sidebar";
@@ -163,11 +166,12 @@ export const ThreadListV2SettledShelfHeader = memo(function ThreadListV2SettledS
       }
       accessibilityLabel={props.count === 1 ? "1 settled thread" : `${props.count} settled threads`}
       accessibilityRole="button"
-      accessibilityState={{ expanded: props.expanded }}
+      accessibilityState={{ disabled: props.disabled, expanded: props.expanded }}
       className={cn(
         "mb-1.5 mt-4 flex-row items-center gap-2.5",
         props.pane === "sidebar" ? "px-3" : "px-5",
       )}
+      disabled={props.disabled}
       onPress={props.onToggle}
       style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
     >

apps/mobile/src/features/threads/use-thread-list-v2-shelf-preferences.ts

@@ -0,0 +1,45 @@
+import { useAtomSet, useAtomValue } from "@effect/atom-react";
+import { AsyncResult } from "effect/unstable/reactivity";
+import { useCallback, useRef } from "react";
+
+import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
+
+/**
+ * Shared persisted shelf state for the compact Home list and iPad sidebar.
+ * Refs advance before persistence starts so consecutive presses always toggle
+ * the latest value, even if React has not rendered the optimistic patch yet.
+ */
+export function useThreadListV2ShelfPreferences() {
+  const preferencesResult = useAtomValue(mobilePreferencesAtom);
+  const savePreferences = useAtomSet(updateMobilePreferencesAtom);
+  const loaded = AsyncResult.isSuccess(preferencesResult);
+  const snoozedShelfExpanded =
+    loaded && preferencesResult.value.threadListV2SnoozedShelfExpanded === true;
+  const settledShelfExpanded =
+    !loaded || preferencesResult.value.threadListV2SettledShelfExpanded !== false;
+  const snoozedShelfExpandedRef = useRef(snoozedShelfExpanded);
+  const settledShelfExpandedRef = useRef(settledShelfExpanded);
+  snoozedShelfExpandedRef.current = snoozedShelfExpanded;
+  settledShelfExpandedRef.current = settledShelfExpanded;
+
+  const toggleSnoozedShelf = useCallback(() => {
+    if (!loaded) return;
+    const expanded = !snoozedShelfExpandedRef.current;
+    snoozedShelfExpandedRef.current = expanded;
+    savePreferences({ threadListV2SnoozedShelfExpanded: expanded });
+  }, [loaded, savePreferences]);
+  const toggleSettledShelf = useCallback(() => {
+    if (!loaded) return;
+    const expanded = !settledShelfExpandedRef.current;
+    settledShelfExpandedRef.current = expanded;
+    savePreferences({ threadListV2SettledShelfExpanded: expanded });
+  }, [loaded, savePreferences]);
+
+  return {
+    loaded,
+    settledShelfExpanded,
+    snoozedShelfExpanded,
+    toggleSettledShelf,
+    toggleSnoozedShelf,
+  } as const;
+}