Make Scalene carousel editable in CMS

frontend/src/pages/settingsPage.tsx

@@ -1,4 +1,4 @@
-import { LogOut, RefreshCw } from "lucide-react"
+import { ArrowDown, ArrowUp, LogOut, Plus, RefreshCw, Trash2 } from "lucide-react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import FooterMenuEditor from "../components/FooterMenuEditor"
 import { useApiFetch } from "../hooks/useApiFetch"
@@ -14,6 +14,26 @@ type IndexStatus = {
   error?: string
 }
 
+type CarouselSlide = {
+  enabled: boolean
+  title: string
+  link_url: string
+  image_url: string
+  background_color: string
+  text_color: string
+  desktop_only: boolean
+}
+
+const emptyCarouselSlide = (): CarouselSlide => ({
+  enabled: true,
+  title: "",
+  link_url: "",
+  image_url: "",
+  background_color: "",
+  text_color: "#ffffff",
+  desktop_only: false,
+})
+
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div className="flex flex-col gap-1.5">
@@ -44,6 +64,10 @@ export default function SettingsPage() {
   const [breakingSaved, setBreakingSaved] = useState<{ enabled: boolean; text: string }>({ enabled: false, text: "" })
   const [breakingSaving, setBreakingSaving] = useState(false)
   const [breakingMessage, setBreakingMessage] = useState<string | null>(null)
+  const [carouselSlides, setCarouselSlides] = useState<CarouselSlide[]>([])
+  const [carouselSaved, setCarouselSaved] = useState<CarouselSlide[]>([])
+  const [carouselSaving, setCarouselSaving] = useState(false)
+  const [carouselMessage, setCarouselMessage] = useState<string | null>(null)
   const [mediaIndexRunning, setMediaIndexRunning] = useState(false)
   const [mediaIndexMessage, setMediaIndexMessage] = useState<string | null>(null)
   // Guards against two poll loops (mount-resume plus a click) racing each other.
@@ -99,6 +123,30 @@ export default function SettingsPage() {
     }
   }, [apiFetch])
 
+  useEffect(() => {
+    let cancelled = false
+    async function loadHomepageCarousel() {
+      try {
+        const res = await apiFetch("/v1/settings/homepage-carousel")
+        if (!res.ok) throw new Error(`Failed to load homepage carousel settings (${res.status})`)
+        const body = (await res.json()) as { slides?: CarouselSlide[] }
+        const slides = Array.isArray(body.slides) ? body.slides : []
+        if (!cancelled) {
+          setCarouselSlides(slides)
+          setCarouselSaved(slides)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setCarouselMessage(err instanceof Error ? err.message : "Failed to load homepage carousel settings")
+        }
+      }
+    }
+    loadHomepageCarousel()
+    return () => {
+      cancelled = true
+    }
+  }, [apiFetch])
+
   async function saveBreakingNews() {
     const text = breakingText.trim()
     if (breakingEnabled && !text) {
@@ -155,6 +203,61 @@ export default function SettingsPage() {
     }
   }
 
+  function updateCarouselSlide(index: number, patch: Partial<CarouselSlide>) {
+    setCarouselSlides((current) => current.map((slide, idx) => (idx === index ? { ...slide, ...patch } : slide)))
+  }
+
+  function moveCarouselSlide(index: number, direction: -1 | 1) {
+    setCarouselSlides((current) => {
+      const nextIndex = index + direction
+      if (nextIndex < 0 || nextIndex >= current.length) return current
+      const next = [...current]
+      const [slide] = next.splice(index, 1)
+      next.splice(nextIndex, 0, slide)
+      return next
+    })
+  }
+
+  function removeCarouselSlide(index: number) {
+    setCarouselSlides((current) => current.filter((_, idx) => idx !== index))
+  }
+
+  async function saveHomepageCarousel() {
+    const slides = carouselSlides.map((slide) => ({
+      ...slide,
+      title: slide.title.trim(),
+      link_url: slide.link_url.trim(),
+      image_url: slide.image_url.trim(),
+      background_color: slide.background_color.trim(),
+      text_color: slide.text_color.trim() || "#ffffff",
+    }))
+    const invalidIndex = slides.findIndex((slide) => slide.enabled && (!slide.link_url || (!slide.title && !slide.image_url)))
+    if (invalidIndex >= 0) {
+      setCarouselMessage(`Slide ${String(invalidIndex + 1)} needs a link and either a title or image`)
+      return
+    }
+
+    setCarouselSaving(true)
+    setCarouselMessage(null)
+    try {
+      const res = await apiFetch("/v1/settings/homepage-carousel", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ slides }),
+      })
+      if (!res.ok) throw new Error(`Failed to save homepage carousel settings (${res.status})`)
+      const body = (await res.json()) as { slides?: CarouselSlide[] }
+      const savedSlides = Array.isArray(body.slides) ? body.slides : []
+      setCarouselSlides(savedSlides)
+      setCarouselSaved(savedSlides)
+      setCarouselMessage("Saved")
+    } catch (err) {
+      setCarouselMessage(err instanceof Error ? err.message : "Failed to save homepage carousel settings")
+    } finally {
+      setCarouselSaving(false)
+    }
+  }
+
   async function rebuildTaxonomyCounts() {
     setTaxonomyRebuildRunning(true)
     setTaxonomyRebuildMessage(null)
@@ -243,6 +346,8 @@ export default function SettingsPage() {
     }
   }
 
+  const carouselDirty = JSON.stringify(carouselSlides) !== JSON.stringify(carouselSaved)
+
   return (
     <div className="flex flex-col gap-6 p-6">
       <div className="flex items-center justify-between">
@@ -317,6 +422,150 @@ export default function SettingsPage() {
         </div>
       </div>
 
+      <div className="rounded-xl border border-border bg-card p-6 flex flex-col gap-4">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h2 className="text-lg font-semibold text-foreground">Homepage Carousel</h2>
+            <p className="text-sm text-muted-foreground">
+              Slides shown in Scalene's Splide carousel on the public homepage.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setCarouselSlides((current) => [...current, emptyCarouselSlide()])}
+            className="inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-border text-sm text-foreground hover:bg-muted/40"
+          >
+            <Plus className="w-4 h-4" />
+            Add Slide
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-3">
+          {carouselSlides.length === 0 ? (
+            <div className="rounded-lg border border-dashed border-border px-4 py-6 text-sm text-muted-foreground">
+              No carousel slides configured.
+            </div>
+          ) : (
+            carouselSlides.map((slide, index) => (
+              <div key={index} className="rounded-lg border border-border bg-background p-4 flex flex-col gap-3">
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <label className="flex items-center gap-3 cursor-pointer select-none">
+                    <input
+                      type="checkbox"
+                      checked={slide.enabled}
+                      onChange={(e) => updateCarouselSlide(index, { enabled: e.target.checked })}
+                      className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/40"
+                    />
+                    <span className="text-sm font-semibold text-foreground">Slide {index + 1}</span>
+                  </label>
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      onClick={() => moveCarouselSlide(index, -1)}
+                      disabled={index === 0}
+                      title="Move up"
+                      className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 disabled:opacity-40"
+                    >
+                      <ArrowUp className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => moveCarouselSlide(index, 1)}
+                      disabled={index === carouselSlides.length - 1}
+                      title="Move down"
+                      className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/60 disabled:opacity-40"
+                    >
+                      <ArrowDown className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => removeCarouselSlide(index)}
+                      title="Delete"
+                      className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+                  <div className="flex flex-col gap-2">
+                    <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Title</label>
+                    <input
+                      value={slide.title}
+                      onChange={(e) => updateCarouselSlide(index, { title: e.target.value })}
+                      maxLength={160}
+                      className="w-full px-3 py-2 rounded-lg border border-border bg-card text-sm focus:outline-none focus:ring-2 focus:ring-primary/40"
+                      placeholder="Slide title"
+                    />
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Link URL</label>
+                    <input
+                      value={slide.link_url}
+                      onChange={(e) => updateCarouselSlide(index, { link_url: e.target.value })}
+                      className="w-full px-3 py-2 rounded-lg border border-border bg-card text-sm focus:outline-none focus:ring-2 focus:ring-primary/40"
+                      placeholder="/classifieds or https://..."
+                    />
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Image URL</label>
+                    <input
+                      value={slide.image_url}
+                      onChange={(e) => updateCarouselSlide(index, { image_url: e.target.value })}
+                      className="w-full px-3 py-2 rounded-lg border border-border bg-card text-sm focus:outline-none focus:ring-2 focus:ring-primary/40"
+                      placeholder="/images/banner.webp"
+                    />
+                  </div>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    <div className="flex flex-col gap-2">
+                      <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Background</label>
+                      <input
+                        value={slide.background_color}
+                        onChange={(e) => updateCarouselSlide(index, { background_color: e.target.value })}
+                        className="w-full px-3 py-2 rounded-lg border border-border bg-card text-sm focus:outline-none focus:ring-2 focus:ring-primary/40"
+                        placeholder="#275997"
+                      />
+                    </div>
+                    <div className="flex flex-col gap-2">
+                      <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Text Color</label>
+                      <input
+                        value={slide.text_color}
+                        onChange={(e) => updateCarouselSlide(index, { text_color: e.target.value })}
+                        className="w-full px-3 py-2 rounded-lg border border-border bg-card text-sm focus:outline-none focus:ring-2 focus:ring-primary/40"
+                        placeholder="#ffffff"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <label className="flex items-center gap-3 cursor-pointer select-none">
+                  <input
+                    type="checkbox"
+                    checked={slide.desktop_only}
+                    onChange={(e) => updateCarouselSlide(index, { desktop_only: e.target.checked })}
+                    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/40"
+                  />
+                  <span className="text-sm text-foreground">Hide on mobile</span>
+                </label>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={saveHomepageCarousel}
+            disabled={carouselSaving || !carouselDirty}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 disabled:opacity-60"
+          >
+            Save Carousel
+          </button>
+          {carouselMessage && <span className="text-sm text-muted-foreground">{carouselMessage}</span>}
+        </div>
+      </div>
+
       <div className="rounded-xl border border-border bg-card p-6 flex flex-col gap-4">
         <h2 className="text-lg font-semibold text-foreground">Breaking News Banner</h2>
         <p className="text-sm text-muted-foreground">