Refresh static image slots from the website catalog.

The dashboard can import and drop slots from the live site instead of creating them by hand.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/WebsiteStaticImagesPage.module.css

@@ -78,3 +78,20 @@
   background-size: var(--select-arrow-size);
   cursor: pointer;
 }
+
+.headerTools {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.spin {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

apps/business/src/pages/WebsiteStaticImagesPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
-import { Pencil, Trash2 } from 'lucide-react'
+import { Pencil, RefreshCw, Trash2 } from 'lucide-react'
 import {
   AddWebsiteSliderSlideModal,
   type WebsiteSliderSlideFormData,
@@ -23,6 +23,7 @@ import {
   deleteWebsiteStaticImageSlot,
   listWebsiteStaticImageSlots,
   staticImageItemsToPayload,
+  syncWebsiteStaticImageSlots,
   updateWebsiteStaticImageSlot,
 } from '../services/websiteStaticImageService'
 import type {
@@ -79,6 +80,7 @@ export function WebsiteStaticImagesPage() {
   const [slots, setSlots] = useState<WebsiteStaticImageSlot[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [isSaving, setIsSaving] = useState(false)
+  const [isSyncing, setIsSyncing] = useState(false)
   const [error, setError] = useState('')
   const [pageKey, setPageKey] = useState('home')
   const [editSlot, setEditSlot] = useState<WebsiteStaticImageSlot | null>(null)
@@ -117,6 +119,33 @@ export function WebsiteStaticImagesPage() {
     }
   }
 
+  async function handleRefreshSlots() {
+    setIsSyncing(true)
+    setError('')
+
+    try {
+      const result = await syncWebsiteStaticImageSlots()
+      setSlots(result.items)
+      showToast(
+        result.created > 0 || result.deleted > 0
+          ? t('website.staticImages.toastRefreshed', {
+              created: result.created,
+              deleted: result.deleted,
+            })
+          : t('website.staticImages.toastRefreshedNone'),
+        'success',
+      )
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError(t('website.staticImages.errorRefresh'))
+      }
+    } finally {
+      setIsSyncing(false)
+    }
+  }
+
   function replaceSlot(updated: WebsiteStaticImageSlot) {
     setSlots((prev) => prev.map((entry) => (entry.id === updated.id ? updated : entry)))
   }
@@ -285,23 +314,36 @@ export function WebsiteStaticImagesPage() {
             {t('website.staticImages.subtitle', { domain })}
           </p>
         </div>
-        {pageOptions.length > 1 ? (
-          <div className={styles.pageSelect}>
-            <label htmlFor="static-images-page">{t('website.staticImages.page')}</label>
-            <select
-              id="static-images-page"
-              value={pageKey}
-              onChange={(e) => setPageKey(e.target.value)}
-              disabled={isLoading}
+        <div className={styles.headerTools}>
+          <Tooltip label={t('website.staticImages.refresh')}>
+            <button
+              type="button"
+              className={controlStyles.controlBtn}
+              onClick={() => void handleRefreshSlots()}
+              disabled={isLoading || isSaving || isSyncing}
+              aria-label={t('website.staticImages.refresh')}
             >
-              {pageOptions.map((option) => (
-                <option key={option} value={option}>
-                  {staticImagePageLabel(option, t)}
-                </option>
-              ))}
-            </select>
-          </div>
-        ) : null}
+              <RefreshCw size={16} className={isSyncing ? styles.spin : undefined} />
+            </button>
+          </Tooltip>
+          {pageOptions.length > 1 ? (
+            <div className={styles.pageSelect}>
+              <label htmlFor="static-images-page">{t('website.staticImages.page')}</label>
+              <select
+                id="static-images-page"
+                value={pageKey}
+                onChange={(e) => setPageKey(e.target.value)}
+                disabled={isLoading || isSyncing}
+              >
+                {pageOptions.map((option) => (
+                  <option key={option} value={option}>
+                    {staticImagePageLabel(option, t)}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : null}
+        </div>
       </div>
 
       {error && <p className={specialStyles.error}>{error}</p>}