feat(ui): enhance BoardBackgroundModal with local state management for opacity sliders

- Implemented local state for card, column, and card border opacity during slider dragging to improve user experience.
- Added useEffect to sync local state with store settings when not dragging.
- Updated handlers to commit changes to the store and persist settings upon slider release.
- Adjusted UI to reflect local state values for opacity sliders, ensuring immediate feedback during adjustments.

apps/ui/src/hooks/mutations/use-settings-mutations.ts

@@ -39,6 +39,9 @@ export function useUpdateGlobalSettings(options: UpdateGlobalSettingsOptions = {
   return useMutation({
     mutationFn: async (settings: Record<string, unknown>) => {
       const api = getElectronAPI();
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
       // Use updateGlobal for partial updates
       const result = await api.settings.updateGlobal(settings);
       if (!result.success) {
@@ -66,33 +69,43 @@ export function useUpdateGlobalSettings(options: UpdateGlobalSettingsOptions = {
  * @param projectPath - Optional path to the project (can also pass via mutation variables)
  * @returns Mutation for updating project settings
  */
+interface ProjectSettingsWithPath {
+  projectPath: string;
+  settings: Record<string, unknown>;
+}
+
 export function useUpdateProjectSettings(projectPath?: string) {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (
-      variables:
-        | Record<string, unknown>
-        | { projectPath: string; settings: Record<string, unknown> }
-    ) => {
+    mutationFn: async (variables: Record<string, unknown> | ProjectSettingsWithPath) => {
       // Support both call patterns:
       // 1. useUpdateProjectSettings(projectPath) then mutate(settings)
       // 2. useUpdateProjectSettings() then mutate({ projectPath, settings })
       let path: string;
       let settings: Record<string, unknown>;
 
-      if ('projectPath' in variables && 'settings' in variables) {
+      if (
+        typeof variables === 'object' &&
+        'projectPath' in variables &&
+        'settings' in variables &&
+        typeof variables.projectPath === 'string' &&
+        typeof variables.settings === 'object'
+      ) {
         path = variables.projectPath;
-        settings = variables.settings;
+        settings = variables.settings as Record<string, unknown>;
       } else if (projectPath) {
         path = projectPath;
-        settings = variables;
+        settings = variables as Record<string, unknown>;
       } else {
         throw new Error('Project path is required');
       }
 
       const api = getElectronAPI();
-      const result = await api.settings.setProject(path, settings);
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.updateProject(path, settings);
       if (!result.success) {
         throw new Error(result.error || 'Failed to update project settings');
       }
@@ -122,9 +135,12 @@ export function useSaveCredentials() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (credentials: Record<string, string>) => {
+    mutationFn: async (credentials: { anthropic?: string; google?: string; openai?: string }) => {
       const api = getElectronAPI();
-      const result = await api.settings.setCredentials(credentials);
+      if (!api.settings) {
+        throw new Error('Settings API not available');
+      }
+      const result = await api.settings.updateCredentials({ apiKeys: credentials });
       if (!result.success) {
         throw new Error(result.error || 'Failed to save credentials');
       }

apps/ui/src/hooks/use-board-background-settings.ts

@@ -5,6 +5,10 @@ import { useUpdateProjectSettings } from '@/hooks/mutations';
 /**
  * Hook for managing board background settings with automatic persistence to server.
  * Uses React Query mutation for server persistence with automatic error handling.
+ *
+ * For sliders, the modal uses local state during dragging and calls:
+ * - setCardOpacity/setColumnOpacity/setCardBorderOpacity to update store on commit
+ * - persistSettings directly to save to server on commit
  */
 export function useBoardBackgroundSettings() {
   const store = useAppStore();
@@ -65,22 +69,20 @@ export function useBoardBackgroundSettings() {
     [store, persistSettings, getCurrentSettings]
   );
 
+  // Update store (called on slider commit to update the board view)
   const setCardOpacity = useCallback(
-    async (projectPath: string, opacity: number) => {
-      const current = getCurrentSettings(projectPath);
+    (projectPath: string, opacity: number) => {
       store.setCardOpacity(projectPath, opacity);
-      await persistSettings(projectPath, { ...current, cardOpacity: opacity });
     },
-    [store, persistSettings, getCurrentSettings]
+    [store]
   );
 
+  // Update store (called on slider commit to update the board view)
   const setColumnOpacity = useCallback(
-    async (projectPath: string, opacity: number) => {
-      const current = getCurrentSettings(projectPath);
+    (projectPath: string, opacity: number) => {
       store.setColumnOpacity(projectPath, opacity);
-      await persistSettings(projectPath, { ...current, columnOpacity: opacity });
     },
-    [store, persistSettings, getCurrentSettings]
+    [store]
   );
 
   const setColumnBorderEnabled = useCallback(
@@ -119,16 +121,12 @@ export function useBoardBackgroundSettings() {
     [store, persistSettings, getCurrentSettings]
   );
 
+  // Update store (called on slider commit to update the board view)
   const setCardBorderOpacity = useCallback(
-    async (projectPath: string, opacity: number) => {
-      const current = getCurrentSettings(projectPath);
+    (projectPath: string, opacity: number) => {
       store.setCardBorderOpacity(projectPath, opacity);
-      await persistSettings(projectPath, {
-        ...current,
-        cardBorderOpacity: opacity,
-      });
     },
-    [store, persistSettings, getCurrentSettings]
+    [store]
   );
 
   const setHideScrollbar = useCallback(
@@ -170,5 +168,6 @@ export function useBoardBackgroundSettings() {
     setHideScrollbar,
     clearBoardBackground,
     getCurrentSettings,
+    persistSettings,
   };
 }