diff --git a/apps/app/src/components/dialogs/board-background-modal.tsx b/apps/app/src/components/dialogs/board-background-modal.tsx index f22ac280..1d52e54c 100644 --- a/apps/app/src/components/dialogs/board-background-modal.tsx +++ b/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 => { return new Promise((resolve, reject) => { diff --git a/apps/app/src/components/views/board-view.tsx b/apps/app/src/components/views/board-view.tsx index 8302cc7a..a0e45a36 100644 --- a/apps/app/src/components/views/board-view.tsx +++ b/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", diff --git a/apps/app/src/store/app-store.ts b/apps/app/src/store/app-store.ts index c7d24da1..1acc5bd8 100644 --- a/apps/app/src/store/app-store.ts +++ b/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()( [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()( [projectPath]: { ...existing, imagePath: null, // Only clear the image, preserve other settings + imageVersion: undefined, // Clear version when clearing image }, }, });