feat: sync saved example images path with backend on path update. Fixes #250

static/css/components/card.css

@@ -254,13 +254,15 @@
 
 /* New styles for hover reveal mode */
 .hover-reveal .card-header,
-.hover-reveal .card-footer {
+.hover-reveal .card-footer,
+.hover-reveal .recipe-indicator {
     opacity: 0;
     transition: opacity 0.2s ease;
 }
 
 .hover-reveal .lora-card:hover .card-header,
-.hover-reveal .lora-card:hover .card-footer {
+.hover-reveal .lora-card:hover .card-footer,
+.hover-reveal .lora-card:hover .recipe-indicator {
     opacity: 1;
 }
 

static/js/managers/ExampleImagesManager.js

@@ -69,6 +69,30 @@ class ExampleImagesManager {
                 pathInput.value = savedPath;
                 // Enable download button if path is set
                 this.updateDownloadButtonState(true);
+                
+                // Sync the saved path with the backend
+                try {
+                    const response = await fetch('/api/settings', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            example_images_path: savedPath
+                        })
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    
+                    const data = await response.json();
+                    if (!data.success) {
+                        console.error('Failed to sync example images path with backend:', data.error);
+                    }
+                } catch (error) {
+                    console.error('Failed to sync saved path with backend:', error);
+                }
             } else {
                 // Disable download button if no path is set
                 this.updateDownloadButtonState(false);