refactor(ui): migrate remaining components to React Query

- Migrate workspace-picker-modal to useWorkspaceDirectories query
- Migrate session-manager to useSessions query
- Migrate git-diff-panel to useGitDiffs query
- Migrate prompt-list to useIdeationPrompts query
- Migrate spec-view hooks to useSpecFile query and spec mutations
- Migrate use-board-background-settings to useProjectSettings query
- Migrate use-guided-prompts to useIdeationPrompts query
- Migrate use-project-settings-loader to React Query
- Complete React Query migration across all components

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/ui/src/hooks/use-project-settings-loader.ts

@@ -1,11 +1,13 @@
 import { useEffect, useRef } from 'react';
 import { useAppStore } from '@/store/app-store';
-import { getHttpApiClient } from '@/lib/http-api-client';
+import { useProjectSettings } from '@/hooks/queries';
 
 /**
  * Hook that loads project settings from the server when the current project changes.
  * This ensures that settings like board backgrounds are properly restored when
  * switching between projects or restarting the app.
+ *
+ * Uses React Query for data fetching with automatic caching.
  */
 export function useProjectSettingsLoader() {
   const currentProject = useAppStore((state) => state.currentProject);
@@ -24,93 +26,84 @@ export function useProjectSettingsLoader() {
     (state) => state.setAutoDismissInitScriptIndicator
   );
 
-  const loadingRef = useRef<string | null>(null);
-  const currentProjectRef = useRef<string | null>(null);
+  const appliedProjectRef = useRef<string | null>(null);
 
+  // Fetch project settings with React Query
+  const { data: settings } = useProjectSettings(currentProject?.path);
+
+  // Apply settings when data changes
   useEffect(() => {
-    currentProjectRef.current = currentProject?.path ?? null;
-
-    if (!currentProject?.path) {
+    if (!currentProject?.path || !settings) {
       return;
     }
 
-    // Prevent loading the same project multiple times
-    if (loadingRef.current === currentProject.path) {
+    // Prevent applying the same settings multiple times
+    if (appliedProjectRef.current === currentProject.path) {
       return;
     }
 
-    loadingRef.current = currentProject.path;
-    const requestedProjectPath = currentProject.path;
+    appliedProjectRef.current = currentProject.path;
+    const projectPath = currentProject.path;
 
-    const loadProjectSettings = async () => {
-      try {
-        const httpClient = getHttpApiClient();
-        const result = await httpClient.settings.getProject(requestedProjectPath);
+    const bg = settings.boardBackground;
 
-        // Race condition protection: ignore stale results if project changed
-        if (currentProjectRef.current !== requestedProjectPath) {
-          return;
-        }
+    // Apply boardBackground if present
+    if (bg?.imagePath) {
+      setBoardBackground(projectPath, bg.imagePath);
+    }
 
-        if (result.success && result.settings) {
-          const bg = result.settings.boardBackground;
+    // Settings map for cleaner iteration
+    const settingsMap = {
+      cardOpacity: setCardOpacity,
+      columnOpacity: setColumnOpacity,
+      columnBorderEnabled: setColumnBorderEnabled,
+      cardGlassmorphism: setCardGlassmorphism,
+      cardBorderEnabled: setCardBorderEnabled,
+      cardBorderOpacity: setCardBorderOpacity,
+      hideScrollbar: setHideScrollbar,
+    } as const;
 
-          // Apply boardBackground if present
-          if (bg?.imagePath) {
-            setBoardBackground(requestedProjectPath, bg.imagePath);
-          }
-
-          // Settings map for cleaner iteration
-          const settingsMap = {
-            cardOpacity: setCardOpacity,
-            columnOpacity: setColumnOpacity,
-            columnBorderEnabled: setColumnBorderEnabled,
-            cardGlassmorphism: setCardGlassmorphism,
-            cardBorderEnabled: setCardBorderEnabled,
-            cardBorderOpacity: setCardBorderOpacity,
-            hideScrollbar: setHideScrollbar,
-          } as const;
-
-          // Apply all settings that are defined
-          for (const [key, setter] of Object.entries(settingsMap)) {
-            const value = bg?.[key as keyof typeof bg];
-            if (value !== undefined) {
-              (setter as (path: string, val: typeof value) => void)(requestedProjectPath, value);
-            }
-          }
-
-          // Apply worktreePanelVisible if present
-          if (result.settings.worktreePanelVisible !== undefined) {
-            setWorktreePanelVisible(requestedProjectPath, result.settings.worktreePanelVisible);
-          }
-
-          // Apply showInitScriptIndicator if present
-          if (result.settings.showInitScriptIndicator !== undefined) {
-            setShowInitScriptIndicator(
-              requestedProjectPath,
-              result.settings.showInitScriptIndicator
-            );
-          }
-
-          // Apply defaultDeleteBranch if present
-          if (result.settings.defaultDeleteBranch !== undefined) {
-            setDefaultDeleteBranch(requestedProjectPath, result.settings.defaultDeleteBranch);
-          }
-
-          // Apply autoDismissInitScriptIndicator if present
-          if (result.settings.autoDismissInitScriptIndicator !== undefined) {
-            setAutoDismissInitScriptIndicator(
-              requestedProjectPath,
-              result.settings.autoDismissInitScriptIndicator
-            );
-          }
-        }
-      } catch (error) {
-        console.error('Failed to load project settings:', error);
-        // Don't show error toast - just log it
+    // Apply all settings that are defined
+    for (const [key, setter] of Object.entries(settingsMap)) {
+      const value = bg?.[key as keyof typeof bg];
+      if (value !== undefined) {
+        (setter as (path: string, val: typeof value) => void)(projectPath, value);
       }
-    };
+    }
 
-    loadProjectSettings();
-  }, [currentProject?.path]);
+    // Apply worktreePanelVisible if present
+    if (settings.worktreePanelVisible !== undefined) {
+      setWorktreePanelVisible(projectPath, settings.worktreePanelVisible);
+    }
+
+    // Apply showInitScriptIndicator if present
+    if (settings.showInitScriptIndicator !== undefined) {
+      setShowInitScriptIndicator(projectPath, settings.showInitScriptIndicator);
+    }
+
+    // Apply defaultDeleteBranchWithWorktree if present
+    if (settings.defaultDeleteBranchWithWorktree !== undefined) {
+      setDefaultDeleteBranch(projectPath, settings.defaultDeleteBranchWithWorktree);
+    }
+
+    // Apply autoDismissInitScriptIndicator if present
+    if (settings.autoDismissInitScriptIndicator !== undefined) {
+      setAutoDismissInitScriptIndicator(projectPath, settings.autoDismissInitScriptIndicator);
+    }
+  }, [
+    currentProject?.path,
+    settings,
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    setWorktreePanelVisible,
+    setShowInitScriptIndicator,
+    setDefaultDeleteBranch,
+    setAutoDismissInitScriptIndicator,
+  ]);
 }