rose-ash/blog/sx/settings.sx

;; Blog settings panel components (features, markets, associated entries)

(defcomp ~blog-features-form (&key features-url calendar-checked market-checked hs-trigger)
  (form :sx-put features-url :sx-target "#features-panel" :sx-swap "outerHTML"
    :sx-headers "{\"Content-Type\": \"application/json\"}" :sx-encoding "json" :class "space-y-3"
    (label :class "flex items-center gap-3 cursor-pointer"
      (input :type "checkbox" :name "calendar" :value "true" :checked calendar-checked
        :class "h-5 w-5 rounded border-stone-300 text-blue-600 focus:ring-blue-500"
        :_ hs-trigger)
      (span :class "text-sm text-stone-700"
        (i :class "fa fa-calendar text-blue-600 mr-1")
        " Calendar \u2014 enable event booking on this page"))
    (label :class "flex items-center gap-3 cursor-pointer"
      (input :type "checkbox" :name "market" :value "true" :checked market-checked
        :class "h-5 w-5 rounded border-stone-300 text-green-600 focus:ring-green-500"
        :_ hs-trigger)
      (span :class "text-sm text-stone-700"
        (i :class "fa fa-shopping-bag text-green-600 mr-1")
        " Market \u2014 enable product catalog on this page"))))

(defcomp ~blog-sumup-form (&key sumup-url merchant-code placeholder sumup-configured checkout-prefix)
  (div :class "mt-4 pt-4 border-t border-stone-100"
    (~sumup-settings-form :update-url sumup-url :merchant-code merchant-code
      :placeholder placeholder :sumup-configured sumup-configured
      :checkout-prefix checkout-prefix :panel-id "features-panel")))

(defcomp ~blog-features-panel (&key form sumup)
  (div :id "features-panel" :class "space-y-4 p-4 bg-white rounded-lg border border-stone-200"
    (h3 :class "text-lg font-semibold text-stone-800" "Page Features")
    form sumup))

;; Markets panel

(defcomp ~blog-market-item (&key name slug delete-url confirm-text)
  (li :class "flex items-center justify-between p-3 bg-stone-50 rounded"
    (div (span :class "font-medium" name)
      (span :class "text-stone-400 text-sm ml-2" (str "/" slug "/")))
    (button :sx-delete delete-url :sx-target "#markets-panel" :sx-swap "outerHTML"
      :sx-confirm confirm-text :class "text-red-600 hover:text-red-800 text-sm" "Delete")))

(defcomp ~blog-markets-list (&key items)
  (ul :class "space-y-2 mb-4" items))

(defcomp ~blog-markets-empty ()
  (p :class "text-stone-500 mb-4 text-sm" "No markets yet."))

(defcomp ~blog-markets-panel (&key list create-url)
  (div :id "markets-panel"
    (h3 :class "text-lg font-semibold mb-3" "Markets")
    list
    (form :sx-post create-url :sx-target "#markets-panel" :sx-swap "outerHTML" :class "flex gap-2"
      (input :type "text" :name "name" :placeholder "Market name" :required ""
        :class "flex-1 border border-stone-300 rounded px-3 py-1.5 text-sm")
      (button :type "submit"
        :class "bg-stone-800 text-white px-4 py-1.5 rounded text-sm hover:bg-stone-700" "Create"))))

;; ---------------------------------------------------------------------------
;; Data-driven composition defcomps — replace Python render_* functions
;; ---------------------------------------------------------------------------

;; Features panel composition — replaces render_features_panel
(defcomp ~blog-features-panel-content (&key features-url calendar-checked market-checked
                                            show-sumup sumup-url merchant-code placeholder
                                            sumup-configured checkout-prefix)
  (~blog-features-panel
    :form (~blog-features-form
      :features-url features-url
      :calendar-checked calendar-checked
      :market-checked market-checked
      :hs-trigger "on change trigger submit on closest <form/>")
    :sumup (when show-sumup
      (~blog-sumup-form
        :sumup-url sumup-url
        :merchant-code merchant-code
        :placeholder placeholder
        :sumup-configured sumup-configured
        :checkout-prefix checkout-prefix))))

;; Markets panel composition — replaces render_markets_panel
(defcomp ~blog-markets-panel-content (&key markets create-url)
  (~blog-markets-panel
    :list (if (empty? (or markets (list)))
      (~blog-markets-empty)
      (~blog-markets-list
        :items (map (lambda (m)
          (~blog-market-item
            :name (get m "name")
            :slug (get m "slug")
            :delete-url (get m "delete_url")
            :confirm-text (str "Delete market '" (get m "name") "'?")))
          (or markets (list)))))
    :create-url create-url))

;; Associated entries

(defcomp ~blog-entry-image (&key src title)
  (if src (img :src src :alt title :class "w-8 h-8 rounded-full object-cover flex-shrink-0")
    (div :class "w-8 h-8 rounded-full bg-stone-200 flex-shrink-0")))

(defcomp ~blog-associated-entry (&key confirm-text toggle-url hx-headers img name date-str)
  (button :type "button"
    :class "w-full text-left p-3 rounded border bg-green-50 border-green-300 transition hover:bg-green-100"
    :data-confirm "" :data-confirm-title "Remove entry?"
    :data-confirm-text confirm-text :data-confirm-icon "warning"
    :data-confirm-confirm-text "Yes, remove it"
    :data-confirm-cancel-text "Cancel" :data-confirm-event "confirmed"
    :sx-post toggle-url :sx-trigger "confirmed"
    :sx-target "#associated-entries-list" :sx-swap "outerHTML"
    :sx-headers hx-headers
    :_ "on htmx:afterRequest trigger entryToggled on body"
    (div :class "flex items-center justify-between gap-3"
      img
      (div :class "flex-1"
        (div :class "font-medium text-sm" name)
        (div :class "text-xs text-stone-600 mt-1" date-str))
      (i :class "fa fa-times-circle text-green-600 text-lg flex-shrink-0"))))

(defcomp ~blog-associated-entries-content (&key items)
  (div :class "space-y-1" items))

(defcomp ~blog-associated-entries-empty ()
  (div :class "text-sm text-stone-400"
    "No entries associated yet. Browse calendars below to add entries."))

(defcomp ~blog-associated-entries-panel (&key content)
  (div :id "associated-entries-list" :class "border rounded-lg p-4 bg-white"
    (h3 :class "text-lg font-semibold mb-4" "Associated Entries")
    content))