feat: enhance background image handling with cache-busting

- Added a cache-busting query parameter to the background image URL to ensure the browser reloads the image when updated.
- Updated the AppState to include an optional imageVersion property for managing image updates.
- Modified the BoardBackgroundModal and BoardView components to utilize the new imageVersion for dynamic image loading.

apps/app/src/components/dialogs/board-background-modal.tsx

@@ -90,14 +90,22 @@ export function BoardBackgroundModal({
     if (currentProject && backgroundSettings.imagePath) {
       const serverUrl =
         process.env.NEXT_PUBLIC_SERVER_URL || "http://localhost:3008";
+      // Add cache-busting query parameter to force browser to reload image
+      const cacheBuster = backgroundSettings.imageVersion
+        ? `&v=${backgroundSettings.imageVersion}`
+        : `&v=${Date.now()}`;
       const imagePath = `${serverUrl}/api/fs/image?path=${encodeURIComponent(
         backgroundSettings.imagePath
-      )}&projectPath=${encodeURIComponent(currentProject.path)}`;
+      )}&projectPath=${encodeURIComponent(currentProject.path)}${cacheBuster}`;
       setPreviewImage(imagePath);
     } else {
       setPreviewImage(null);
     }
-  }, [currentProject, backgroundSettings.imagePath]);
+  }, [
+    currentProject,
+    backgroundSettings.imagePath,
+    backgroundSettings.imageVersion,
+  ]);
 
   const fileToBase64 = (file: File): Promise<string> => {
     return new Promise((resolve, reject) => {

apps/app/src/components/views/board-view.tsx

@@ -1999,7 +1999,11 @@ export function BoardView() {
                   backgroundSettings.imagePath
                 )}&projectPath=${encodeURIComponent(
                   currentProject?.path || ""
-                )})`,
+                )}${
+                  backgroundSettings.imageVersion
+                    ? `&v=${backgroundSettings.imageVersion}`
+                    : ""
+                })`,
                 backgroundSize: "cover",
                 backgroundPosition: "center",
                 backgroundRepeat: "no-repeat",

apps/app/src/store/app-store.ts

@@ -372,6 +372,7 @@ export interface AppState {
     string,
     {
       imagePath: string | null; // Path to background image in .automaker directory
+      imageVersion?: number; // Timestamp to bust browser cache when image is updated
       cardOpacity: number; // Opacity of cards (0-100)
       columnOpacity: number; // Opacity of columns (0-100)
       columnBorderEnabled: boolean; // Whether to show column borders
@@ -1316,6 +1317,8 @@ export const useAppStore = create<AppState & AppActions>()(
             [projectPath]: {
               ...existing,
               imagePath,
+              // Update imageVersion timestamp to bust browser cache when image changes
+              imageVersion: imagePath ? Date.now() : undefined,
             },
           },
         });
@@ -1516,6 +1519,7 @@ export const useAppStore = create<AppState & AppActions>()(
             [projectPath]: {
               ...existing,
               imagePath: null, // Only clear the image, preserve other settings
+              imageVersion: undefined, // Clear version when clearing image
             },
           },
         });