refactor: Introduce useBoardBackgroundSettings hook for managing board background settings with persistence

- Refactored BoardBackgroundModal to utilize the new useBoardBackgroundSettings hook, improving code organization and reusability.
- Updated methods for setting board background, card opacity, column opacity, and other settings to include server persistence.
- Enhanced error handling and user feedback with toast notifications for successful and failed operations.
- Added keyboard shortcut support for selecting folders in FileBrowserDialog, improving user experience.
- Improved KanbanCard component layout and added dropdown menu for editing and viewing model information.

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

@@ -0,0 +1,182 @@
+import { useCallback } from "react";
+import { useAppStore } from "@/store/app-store";
+import { getHttpApiClient } from "@/lib/http-api-client";
+import { toast } from "sonner";
+
+/**
+ * Hook for managing board background settings with automatic persistence to server
+ */
+export function useBoardBackgroundSettings() {
+  const store = useAppStore();
+  const httpClient = getHttpApiClient();
+
+  // Helper to persist settings to server
+  const persistSettings = useCallback(
+    async (projectPath: string, settingsToUpdate: Record<string, unknown>) => {
+      try {
+        const result = await httpClient.settings.updateProject(
+          projectPath,
+          {
+            boardBackground: settingsToUpdate,
+          }
+        );
+
+        if (!result.success) {
+          console.error("Failed to persist settings:", result.error);
+          toast.error("Failed to save settings");
+        }
+      } catch (error) {
+        console.error("Failed to persist settings:", error);
+        toast.error("Failed to save settings");
+      }
+    },
+    [httpClient]
+  );
+
+  // Get current background settings for a project
+  const getCurrentSettings = useCallback(
+    (projectPath: string) => {
+      const current = store.boardBackgroundByProject[projectPath];
+      return current || {
+        imagePath: null,
+        cardOpacity: 100,
+        columnOpacity: 100,
+        columnBorderEnabled: true,
+        cardGlassmorphism: true,
+        cardBorderEnabled: true,
+        cardBorderOpacity: 100,
+        hideScrollbar: false,
+      };
+    },
+    [store.boardBackgroundByProject]
+  );
+
+  // Persisting wrappers for store actions
+  const setBoardBackground = useCallback(
+    async (projectPath: string, imagePath: string | null) => {
+      // Get current settings first
+      const current = getCurrentSettings(projectPath);
+
+      // Prepare the updated settings
+      const toUpdate = {
+        ...current,
+        imagePath,
+        imageVersion: imagePath ? Date.now() : undefined,
+      };
+
+      // Update local store
+      store.setBoardBackground(projectPath, imagePath);
+
+      // Persist to server
+      await persistSettings(projectPath, toUpdate);
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardOpacity = useCallback(
+    async (projectPath: string, opacity: number) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardOpacity(projectPath, opacity);
+      await persistSettings(projectPath, { ...current, cardOpacity: opacity });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setColumnOpacity = useCallback(
+    async (projectPath: string, opacity: number) => {
+      const current = getCurrentSettings(projectPath);
+      store.setColumnOpacity(projectPath, opacity);
+      await persistSettings(projectPath, { ...current, columnOpacity: opacity });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setColumnBorderEnabled = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setColumnBorderEnabled(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        columnBorderEnabled: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardGlassmorphism = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardGlassmorphism(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        cardGlassmorphism: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardBorderEnabled = useCallback(
+    async (projectPath: string, enabled: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardBorderEnabled(projectPath, enabled);
+      await persistSettings(projectPath, {
+        ...current,
+        cardBorderEnabled: enabled,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setCardBorderOpacity = useCallback(
+    async (projectPath: string, opacity: number) => {
+      const current = getCurrentSettings(projectPath);
+      store.setCardBorderOpacity(projectPath, opacity);
+      await persistSettings(projectPath, {
+        ...current,
+        cardBorderOpacity: opacity,
+      });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const setHideScrollbar = useCallback(
+    async (projectPath: string, hide: boolean) => {
+      const current = getCurrentSettings(projectPath);
+      store.setHideScrollbar(projectPath, hide);
+      await persistSettings(projectPath, { ...current, hideScrollbar: hide });
+    },
+    [store, persistSettings, getCurrentSettings]
+  );
+
+  const clearBoardBackground = useCallback(
+    async (projectPath: string) => {
+      store.clearBoardBackground(projectPath);
+      // Clear the boardBackground settings
+      await persistSettings(projectPath, {
+        imagePath: null,
+        imageVersion: undefined,
+        cardOpacity: 100,
+        columnOpacity: 100,
+        columnBorderEnabled: true,
+        cardGlassmorphism: true,
+        cardBorderEnabled: true,
+        cardBorderOpacity: 100,
+        hideScrollbar: false,
+      });
+    },
+    [store, persistSettings]
+  );
+
+  return {
+    setBoardBackground,
+    setCardOpacity,
+    setColumnOpacity,
+    setColumnBorderEnabled,
+    setCardGlassmorphism,
+    setCardBorderEnabled,
+    setCardBorderOpacity,
+    setHideScrollbar,
+    clearBoardBackground,
+    getCurrentSettings,
+  };
+}