giles
c1ad6fd8d4
Move rendering logic from Python for-loops building sx_call strings into SX defcomp components that use map/lambda over data dicts. Python now serializes display data into plain dicts and passes them via a single sx_call; the SX layer handles iteration and conditional rendering. Covers orders (rows, items, calendar, tickets), federation (timeline, search, actors, profile activities), and blog (cards, pages, filters, snippets, menu items, tag groups, page search, nav OOB). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
246 lines
13 KiB
Plaintext
246 lines
13 KiB
Plaintext
;; Blog admin panel components
|
|
|
|
(defcomp ~blog-cache-panel (&key clear-url csrf)
|
|
(div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"
|
|
(div :class "flex flex-col md:flex-row gap-3 items-start"
|
|
(form :sx-post clear-url :sx-trigger "submit" :sx-target "#cache-status" :sx-swap "innerHTML"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(button :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" :type "submit" "Clear cache"))
|
|
(div :id "cache-status" :class "py-2"))))
|
|
|
|
(defcomp ~blog-snippets-panel (&key list)
|
|
(div :class "max-w-4xl mx-auto p-6"
|
|
(div :class "mb-6 flex justify-between items-center"
|
|
(h1 :class "text-3xl font-bold" "Snippets"))
|
|
(div :id "snippets-list" list)))
|
|
|
|
(defcomp ~blog-snippet-visibility-select (&key patch-url hx-headers options cls)
|
|
(select :name "visibility" :sx-patch patch-url :sx-target "#snippets-list" :sx-swap "innerHTML"
|
|
:sx-headers hx-headers :class "text-sm border border-stone-300 rounded px-2 py-1"
|
|
options))
|
|
|
|
(defcomp ~blog-snippet-option (&key value selected label)
|
|
(option :value value :selected selected label))
|
|
|
|
(defcomp ~blog-snippet-row (&key name owner badge-cls visibility extra)
|
|
(div :class "flex items-center gap-4 p-4 hover:bg-stone-50 transition"
|
|
(div :class "flex-1 min-w-0"
|
|
(div :class "font-medium truncate" name)
|
|
(div :class "text-xs text-stone-500" owner))
|
|
(span :class (str "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium " badge-cls) visibility)
|
|
extra))
|
|
|
|
(defcomp ~blog-snippets-list (&key rows)
|
|
(div :class "bg-white rounded-lg shadow" (div :class "divide-y" rows)))
|
|
|
|
(defcomp ~blog-menu-items-panel (&key new-url list)
|
|
(div :class "max-w-4xl mx-auto p-6"
|
|
(div :class "mb-6 flex justify-end items-center"
|
|
(button :type "button" :sx-get new-url :sx-target "#menu-item-form" :sx-swap "innerHTML"
|
|
:class "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
|
(i :class "fa fa-plus") " Add Menu Item"))
|
|
(div :id "menu-item-form" :class "mb-6")
|
|
(div :id "menu-items-list" list)))
|
|
|
|
(defcomp ~blog-menu-item-row (&key img label slug sort-order edit-url delete-url confirm-text hx-headers)
|
|
(div :class "flex items-center gap-4 p-4 hover:bg-stone-50 transition"
|
|
(div :class "text-stone-400 cursor-move" (i :class "fa fa-grip-vertical"))
|
|
img
|
|
(div :class "flex-1 min-w-0"
|
|
(div :class "font-medium truncate" label)
|
|
(div :class "text-xs text-stone-500 truncate" slug))
|
|
(div :class "text-sm text-stone-500" (str "Order: " sort-order))
|
|
(div :class "flex gap-2 flex-shrink-0"
|
|
(button :type "button" :sx-get edit-url :sx-target "#menu-item-form" :sx-swap "innerHTML"
|
|
:class "px-3 py-1 text-sm bg-stone-200 hover:bg-stone-300 rounded"
|
|
(i :class "fa fa-edit") " Edit")
|
|
(~delete-btn :url delete-url :trigger-target "#menu-items-list"
|
|
:title "Delete menu item?" :text confirm-text
|
|
:sx-headers hx-headers))))
|
|
|
|
(defcomp ~blog-menu-items-list (&key rows)
|
|
(div :class "bg-white rounded-lg shadow" (div :class "divide-y" rows)))
|
|
|
|
;; Tag groups admin
|
|
|
|
(defcomp ~blog-tag-groups-create-form (&key create-url csrf)
|
|
(form :method "post" :action create-url :class "border rounded p-4 bg-white space-y-3"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(h3 :class "text-sm font-semibold text-stone-700" "New Group")
|
|
(div :class "flex flex-col sm:flex-row gap-3"
|
|
(input :type "text" :name "name" :placeholder "Group name" :required "" :class "flex-1 border rounded px-3 py-2 text-sm")
|
|
(input :type "text" :name "colour" :placeholder "#colour" :class "w-28 border rounded px-3 py-2 text-sm")
|
|
(input :type "number" :name "sort_order" :placeholder "Order" :value "0" :class "w-20 border rounded px-3 py-2 text-sm"))
|
|
(input :type "text" :name "feature_image" :placeholder "Image URL (optional)" :class "w-full border rounded px-3 py-2 text-sm")
|
|
(button :type "submit" :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" "Create")))
|
|
|
|
(defcomp ~blog-tag-group-icon-image (&key src name)
|
|
(img :src src :alt name :class "h-8 w-8 rounded-full object-cover border border-stone-300 flex-shrink-0"))
|
|
|
|
(defcomp ~blog-tag-group-icon-color (&key style initial)
|
|
(div :class "h-8 w-8 rounded-full text-xs font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0"
|
|
:style style initial))
|
|
|
|
(defcomp ~blog-tag-group-li (&key icon edit-href name slug sort-order)
|
|
(li :class "border rounded p-3 bg-white flex items-center gap-3"
|
|
icon
|
|
(div :class "flex-1"
|
|
(a :href edit-href :class "font-medium text-stone-800 hover:underline" name)
|
|
(span :class "text-xs text-stone-500 ml-2" slug))
|
|
(span :class "text-xs text-stone-500" (str "order: " sort-order))))
|
|
|
|
(defcomp ~blog-tag-groups-list (&key items)
|
|
(ul :class "space-y-2" items))
|
|
|
|
(defcomp ~blog-unassigned-tag (&key name)
|
|
(span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200 rounded" name))
|
|
|
|
(defcomp ~blog-unassigned-tags (&key heading spans)
|
|
(div :class "border-t pt-4"
|
|
(h3 :class "text-sm font-semibold text-stone-700 mb-2" heading)
|
|
(div :class "flex flex-wrap gap-2" spans)))
|
|
|
|
(defcomp ~blog-tag-groups-main (&key form groups unassigned)
|
|
(div :class "max-w-2xl mx-auto px-4 py-6 space-y-8"
|
|
form groups unassigned))
|
|
|
|
;; Tag group edit
|
|
|
|
(defcomp ~blog-tag-checkbox (&key tag-id checked img name)
|
|
(label :class "flex items-center gap-2 px-2 py-1 hover:bg-stone-50 rounded text-sm cursor-pointer"
|
|
(input :type "checkbox" :name "tag_ids" :value tag-id :checked checked :class "rounded border-stone-300")
|
|
img (span name)))
|
|
|
|
(defcomp ~blog-tag-checkbox-image (&key src)
|
|
(img :src src :alt "" :class "h-4 w-4 rounded-full object-cover"))
|
|
|
|
(defcomp ~blog-tag-group-edit-form (&key save-url csrf name colour sort-order feature-image tags)
|
|
(form :method "post" :action save-url :class "border rounded p-4 bg-white space-y-4"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(div :class "space-y-3"
|
|
(div (label :class "block text-xs font-medium text-stone-600 mb-1" "Name")
|
|
(input :type "text" :name "name" :value name :required "" :class "w-full border rounded px-3 py-2 text-sm"))
|
|
(div :class "flex gap-3"
|
|
(div :class "flex-1" (label :class "block text-xs font-medium text-stone-600 mb-1" "Colour")
|
|
(input :type "text" :name "colour" :value colour :placeholder "#hex" :class "w-full border rounded px-3 py-2 text-sm"))
|
|
(div :class "w-24" (label :class "block text-xs font-medium text-stone-600 mb-1" "Order")
|
|
(input :type "number" :name "sort_order" :value sort-order :class "w-full border rounded px-3 py-2 text-sm")))
|
|
(div (label :class "block text-xs font-medium text-stone-600 mb-1" "Feature Image URL")
|
|
(input :type "text" :name "feature_image" :value feature-image :placeholder "https://..." :class "w-full border rounded px-3 py-2 text-sm")))
|
|
(div (label :class "block text-xs font-medium text-stone-600 mb-2" "Assign Tags")
|
|
(div :class "grid grid-cols-1 sm:grid-cols-2 gap-1 max-h-64 overflow-y-auto border rounded p-2"
|
|
tags))
|
|
(div :class "flex gap-3"
|
|
(button :type "submit" :class "border rounded px-4 py-2 bg-stone-800 text-white text-sm" "Save"))))
|
|
|
|
(defcomp ~blog-tag-group-delete-form (&key delete-url csrf)
|
|
(form :method "post" :action delete-url :class "border-t pt-4"
|
|
:onsubmit "return confirm('Delete this tag group? Tags will not be deleted.')"
|
|
(input :type "hidden" :name "csrf_token" :value csrf)
|
|
(button :type "submit" :class "border rounded px-4 py-2 bg-red-600 text-white text-sm" "Delete Group")))
|
|
|
|
(defcomp ~blog-tag-group-edit-main (&key edit-form delete-form)
|
|
(div :class "max-w-2xl mx-auto px-4 py-6 space-y-6"
|
|
edit-form delete-form))
|
|
|
|
;; Data-driven snippets list (replaces Python _snippets_sx loop)
|
|
(defcomp ~blog-snippets-from-data (&key snippets user-id is-admin csrf badge-colours)
|
|
(~blog-snippets-list
|
|
:rows (<> (map (lambda (s)
|
|
(let* ((s-id (get s "id"))
|
|
(s-name (get s "name"))
|
|
(s-uid (get s "user_id"))
|
|
(s-vis (get s "visibility"))
|
|
(owner (if (= s-uid user-id) "You" (str "User #" s-uid)))
|
|
(badge-cls (or (get badge-colours s-vis) "bg-stone-200 text-stone-700"))
|
|
(extra (<>
|
|
(when is-admin
|
|
(~blog-snippet-visibility-select
|
|
:patch-url (get s "patch_url")
|
|
:hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
|
|
:options (<>
|
|
(~blog-snippet-option :value "private" :selected (= s-vis "private") :label "private")
|
|
(~blog-snippet-option :value "shared" :selected (= s-vis "shared") :label "shared")
|
|
(~blog-snippet-option :value "admin" :selected (= s-vis "admin") :label "admin"))
|
|
:cls "text-sm border border-stone-300 rounded px-2 py-1"))
|
|
(when (or (= s-uid user-id) is-admin)
|
|
(~delete-btn :url (get s "delete_url") :trigger-target "#snippets-list"
|
|
:title "Delete snippet?"
|
|
:text (str "Delete \u201c" s-name "\u201d?")
|
|
:sx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}")
|
|
:cls "px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0")))))
|
|
(~blog-snippet-row :name s-name :owner owner :badge-cls badge-cls
|
|
:visibility s-vis :extra extra)))
|
|
(or snippets (list))))))
|
|
|
|
;; Data-driven menu items list (replaces Python _menu_items_list_sx loop)
|
|
(defcomp ~blog-menu-items-from-data (&key items csrf)
|
|
(~blog-menu-items-list
|
|
:rows (<> (map (lambda (item)
|
|
(let* ((img (~img-or-placeholder :src (get item "feature_image") :alt (get item "label")
|
|
:size-cls "w-12 h-12 rounded-full object-cover flex-shrink-0")))
|
|
(~blog-menu-item-row
|
|
:img img :label (get item "label") :slug (get item "slug")
|
|
:sort-order (get item "sort_order") :edit-url (get item "edit_url")
|
|
:delete-url (get item "delete_url")
|
|
:confirm-text (str "Remove " (get item "label") " from the menu?")
|
|
:hx-headers (str "{\"X-CSRFToken\": \"" csrf "\"}"))))
|
|
(or items (list))))))
|
|
|
|
;; Data-driven tag groups main (replaces Python _tag_groups_main_panel_sx loops)
|
|
(defcomp ~blog-tag-groups-from-data (&key groups unassigned-tags csrf create-url)
|
|
(~blog-tag-groups-main
|
|
:form (~blog-tag-groups-create-form :create-url create-url :csrf csrf)
|
|
:groups (if (empty? (or groups (list)))
|
|
(~empty-state :message "No tag groups yet." :cls "text-stone-500 text-sm")
|
|
(~blog-tag-groups-list
|
|
:items (<> (map (lambda (g)
|
|
(let* ((icon (if (get g "feature_image")
|
|
(~blog-tag-group-icon-image :src (get g "feature_image") :name (get g "name"))
|
|
(~blog-tag-group-icon-color :style (get g "style") :initial (get g "initial")))))
|
|
(~blog-tag-group-li :icon icon :edit-href (get g "edit_href")
|
|
:name (get g "name") :slug (get g "slug") :sort-order (get g "sort_order"))))
|
|
groups))))
|
|
:unassigned (when (not (empty? (or unassigned-tags (list))))
|
|
(~blog-unassigned-tags
|
|
:heading (str "Unassigned Tags (" (len unassigned-tags) ")")
|
|
:spans (<> (map (lambda (t)
|
|
(~blog-unassigned-tag :name (get t "name")))
|
|
unassigned-tags))))))
|
|
|
|
;; Data-driven tag group edit (replaces Python _tag_groups_edit_main_panel_sx loop)
|
|
(defcomp ~blog-tag-checkboxes-from-data (&key tags)
|
|
(<> (map (lambda (t)
|
|
(~blog-tag-checkbox
|
|
:tag-id (get t "tag_id") :checked (get t "checked")
|
|
:img (when (get t "feature_image") (~blog-tag-checkbox-image :src (get t "feature_image")))
|
|
:name (get t "name")))
|
|
(or tags (list)))))
|
|
|
|
;; Preview panel components
|
|
|
|
(defcomp ~blog-preview-panel (&key sections)
|
|
(div :class "max-w-4xl mx-auto px-4 py-6 space-y-4"
|
|
(style "
|
|
.sx-pretty, .json-pretty { font-family: monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
|
|
.sx-list, .json-obj, .json-arr { display: block; }
|
|
.sx-paren { color: #64748b; }
|
|
.sx-sym { color: #0369a1; }
|
|
.sx-kw { color: #7c3aed; }
|
|
.sx-str { color: #15803d; }
|
|
.sx-num { color: #c2410c; }
|
|
.sx-bool { color: #b91c1c; font-weight: 600; }
|
|
.json-brace, .json-bracket { color: #64748b; }
|
|
.json-key { color: #7c3aed; }
|
|
.json-str { color: #15803d; }
|
|
.json-num { color: #c2410c; }
|
|
.json-lit { color: #b91c1c; font-weight: 600; }
|
|
.json-field { display: block; }
|
|
")
|
|
sections))
|
|
|
|
(defcomp ~blog-preview-section (&key title content)
|
|
(details :class "border rounded bg-white"
|
|
(summary :class "cursor-pointer px-4 py-3 font-medium text-sm bg-stone-100 hover:bg-stone-200 select-none" title)
|
|
(div :class "p-4 overflow-x-auto text-xs" content)))
|