ruby_cms 0.2.1.0 → 1.0.0

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/inline_rich_editor_controller.js

@@ -0,0 +1,157 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Standalone inline rich-text field editor — produces the same light HTML as the
+// visual editor (bold / italic / colour / size via cb-* classes). Writes sanitized
+// HTML into a hidden <input> so it submits with the form. No links, no images, no Trix.
+//
+// Markup:
+//   <div data-controller="admin--inline-rich-editor">
+//     <button data-cmd="bold"   data-action="admin--inline-rich-editor#bold">…</button>
+//     <button data-color="cb-fg-cobalt" data-action="admin--inline-rich-editor#color">…</button>
+//     <button data-size="cb-size-lg"    data-action="admin--inline-rich-editor#size">…</button>
+//     <div contenteditable data-admin--inline-rich-editor-target="editor"
+//          data-action="input->…#onInput paste->…#onPaste keydown->…#onKeydown
+//                       keyup->…#updateToolbarState mouseup->…#updateToolbarState"></div>
+//     <input type="hidden" name="…[content]" data-admin--inline-rich-editor-target="input">
+//   </div>
+export default class extends Controller {
+  static targets = ["editor", "input"]
+
+  ALLOWED = { STRONG: 1, B: 1, EM: 1, I: 1, BR: 1, SPAN: 1 }
+  CB_PREFIXES = ["cb-fg-", "cb-size-"]
+
+  connect() {
+    this.editorTarget.innerHTML = this.inputTarget.value || ""
+    try { document.execCommand("styleWithCSS", false, false) } catch (_e) { /* noop */ }
+    this.updateToolbarState()
+  }
+
+  // Toolbar buttons fire on mousedown + preventDefault so the editor keeps its selection.
+  bold(event) { if (event) event.preventDefault(); this.exec("bold") }
+  italic(event) { if (event) event.preventDefault(); this.exec("italic") }
+
+  exec(cmd) {
+    this.editorTarget.focus()
+    document.execCommand(cmd)
+    this.sync()
+    this.updateToolbarState()
+  }
+
+  color(event) { if (event) event.preventDefault(); this.applyClass(event.currentTarget.dataset.color || "", "cb-fg-") }
+  size(event) { if (event) event.preventDefault(); this.applyClass(event.currentTarget.dataset.size || "", "cb-size-") }
+
+  applyClass(cls, prefix) {
+    this.editorTarget.focus()
+    const sel = window.getSelection()
+    if (!sel || sel.rangeCount === 0) return
+    let range = sel.getRangeAt(0)
+    if (range.collapsed || !this.editorTarget.contains(range.commonAncestorContainer)) return
+
+    this.clearPrefixInRange(range, prefix)
+
+    if (cls) {
+      range = window.getSelection().getRangeAt(0)
+      const span = document.createElement("span")
+      span.className = cls
+      try {
+        span.appendChild(range.extractContents())
+        range.insertNode(span)
+        const nr = document.createRange()
+        nr.selectNodeContents(span)
+        sel.removeAllRanges()
+        sel.addRange(nr)
+      } catch (_e) { /* awkward selection boundary; skip */ }
+    }
+    this.sync()
+    this.updateToolbarState()
+  }
+
+  clearPrefixInRange(range, prefix) {
+    Array.from(this.editorTarget.querySelectorAll(`span[class*="${prefix}"]`)).forEach(span => {
+      if (!range.intersectsNode(span)) return
+      span.className = (span.className || "").split(/\s+/).filter(c => !c.startsWith(prefix)).join(" ")
+      if (!span.className.trim()) this.unwrap(span)
+    })
+  }
+
+  unwrap(node) {
+    const parent = node.parentNode
+    if (!parent) return
+    while (node.firstChild) parent.insertBefore(node.firstChild, node)
+    parent.removeChild(node)
+  }
+
+  onInput() { this.sync() }
+
+  onPaste(event) {
+    event.preventDefault()
+    const text = (event.clipboardData || window.clipboardData).getData("text/plain")
+    document.execCommand("insertText", false, text)
+    this.sync()
+  }
+
+  onKeydown(event) {
+    const mod = event.metaKey || event.ctrlKey
+    if (mod && event.key.toLowerCase() === "b") { event.preventDefault(); this.bold() }
+    else if (mod && event.key.toLowerCase() === "i") { event.preventDefault(); this.italic() }
+  }
+
+  sync() { this.inputTarget.value = this.sanitizedHtml() }
+
+  sanitizedHtml() {
+    const tmp = document.createElement("div")
+    tmp.innerHTML = this.editorTarget.innerHTML
+    this.clean(tmp)
+    return tmp.innerHTML.trim()
+  }
+
+  clean(node) {
+    Array.from(node.childNodes).forEach(child => {
+      if (child.nodeType === Node.TEXT_NODE) return
+      if (child.nodeType !== Node.ELEMENT_NODE) { child.remove(); return }
+
+      this.clean(child)
+
+      if (!this.ALLOWED[child.tagName]) { this.unwrap(child); return }
+
+      Array.from(child.attributes).forEach(attr => {
+        if (attr.name !== "class") child.removeAttribute(attr.name)
+      })
+
+      if (child.tagName === "SPAN") {
+        const keep = (child.className || "").split(/\s+/)
+          .filter(c => this.CB_PREFIXES.some(p => c.startsWith(p)))
+        if (keep.length) child.className = keep.join(" ")
+        else this.unwrap(child)
+      }
+    })
+  }
+
+  updateToolbarState() {
+    const sel = window.getSelection()
+    const inEditor = sel && sel.rangeCount && this.editorTarget.contains(sel.anchorNode)
+    const setActive = (el, on) => el && el.classList.toggle("cb-active", !!on)
+
+    this.element.querySelectorAll("[data-cmd]").forEach(btn => {
+      let on = false
+      try { on = inEditor && document.queryCommandState(btn.dataset.cmd) } catch (_e) { /* noop */ }
+      setActive(btn, on)
+    })
+
+    const classes = inEditor ? this.ancestorClasses(sel.anchorNode) : []
+    const activeColor = classes.find(c => c.startsWith("cb-fg-")) || ""
+    const activeSize = classes.find(c => c.startsWith("cb-size-")) || ""
+    this.element.querySelectorAll("[data-color]").forEach(b => setActive(b, inEditor && (b.dataset.color || "") === activeColor))
+    this.element.querySelectorAll("[data-size]").forEach(b => setActive(b, inEditor && (b.dataset.size || "") === activeSize))
+  }
+
+  ancestorClasses(node) {
+    const out = []
+    let el = node && node.nodeType === Node.TEXT_NODE ? node.parentElement : node
+    while (el && el !== this.editorTarget) {
+      if (el.classList) out.push(...el.classList)
+      el = el.parentElement
+    }
+    return out
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/media_selection_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Tracks which media tiles the user has selected and toggles the bulk action
+// bar. The Verwijderen button posts a form-encoded DELETE with the selected
+// ids back to bulk_delete_admin_media_assets_path.
+//
+// Targets:
+//   bar      — the .bulk-bar element (starts with [hidden])
+//   count    — <span> showing the selected count
+//   checkbox — every per-tile selection toggle (data-id attribute = asset id)
+export default class extends Controller {
+  static targets = ["bar", "count", "checkbox"]
+  static values  = { bulkDeleteUrl: String }
+
+  initialize() {
+    this.selected = new Set()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const button = event.currentTarget
+    const id = button.dataset.id
+    if (!id) return
+
+    if (this.selected.has(id)) {
+      this.selected.delete(id)
+      this.#setVisualState(button, false)
+    } else {
+      this.selected.add(id)
+      this.#setVisualState(button, true)
+    }
+    this.#refresh()
+  }
+
+  destroy(event) {
+    event?.preventDefault()
+    if (this.selected.size === 0) return
+    if (!confirm(`Weet je zeker dat je ${this.selected.size} bestand(en) wilt verwijderen?`)) return
+
+    const form = document.createElement("form")
+    form.method = "POST"
+    form.action = this.bulkDeleteUrlValue
+    form.style.display = "none"
+
+    const append = (name, value) => {
+      const input = document.createElement("input")
+      input.type = "hidden"
+      input.name = name
+      input.value = value
+      form.appendChild(input)
+    }
+
+    append("_method", "delete")
+    const token = document.querySelector('meta[name="csrf-token"]')?.content
+    if (token) append("authenticity_token", token)
+    this.selected.forEach((id) => append("item_ids[]", id))
+
+    document.body.appendChild(form)
+    form.submit()
+  }
+
+  #setVisualState(button, on) {
+    button.dataset.on = on ? "true" : "false"
+    const icon = button.querySelector("[data-admin--media-selection-target='checkboxIcon']")
+    if (icon) icon.hidden = !on
+    const tile = button.closest(".media-tile")
+    if (tile) tile.dataset.selected = on ? "true" : "false"
+  }
+
+  #refresh() {
+    const n = this.selected.size
+    if (this.hasCountTarget) this.countTarget.textContent = String(n)
+    if (this.hasBarTarget) this.barTarget.hidden = n === 0
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/media_uploader_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Opens a hidden <input type="file"> and auto-submits the wrapping form once
+// the user picks file(s). Pairs with the "Upload" header button in
+// app/views/admin/media_assets/index.html.erb.
+//
+// Targets:
+//   form  — the <form> that wraps the hidden file input
+//   input — the hidden <input type="file">
+export default class extends Controller {
+  static targets = ["form", "input"]
+
+  open(event) {
+    event?.preventDefault()
+    this.inputTarget.click()
+  }
+
+  submit() {
+    if (this.inputTarget.files && this.inputTarget.files.length > 0) {
+      this.formTarget.requestSubmit()
+    }
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/mobile_menu_controller.js

@@ -0,0 +1,125 @@
+import { Controller } from "@hotwired/stimulus"
+
+const MOBILE_MAX = 1023
+
+// Connects to data-controller="admin--mobile-menu"
+export default class extends Controller {
+  static targets = ["sidebar", "overlay"]
+
+  connect() {
+    this._onResize = () => this.syncOutsideClickListener()
+    this._onTurboLoad = () => this.closeIfMobile()
+    this._outsideClickHandler = null
+
+    window.addEventListener("resize", this._onResize)
+    document.addEventListener("turbo:load", this._onTurboLoad)
+    this.syncOutsideClickListener()
+    this.syncSidebarForViewport()
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this._onResize)
+    document.removeEventListener("turbo:load", this._onTurboLoad)
+    this.removeOutsideClickListener()
+  }
+
+  syncOutsideClickListener() {
+    this.removeOutsideClickListener()
+    if (typeof window === "undefined" || window.innerWidth > MOBILE_MAX) return
+
+    this._outsideClickHandler = (event) => this.handleOutsideClick(event)
+    document.addEventListener("click", this._outsideClickHandler)
+  }
+
+  removeOutsideClickListener() {
+    if (!this._outsideClickHandler) return
+    document.removeEventListener("click", this._outsideClickHandler)
+    this._outsideClickHandler = null
+  }
+
+  closeIfMobile() {
+    if (typeof window === "undefined" || window.innerWidth > MOBILE_MAX) return
+    this.close()
+  }
+
+  syncSidebarForViewport() {
+    if (!this.hasSidebarTarget || typeof window === "undefined") return
+
+    if (window.innerWidth > MOBILE_MAX) {
+      // Let desktop classes control positioning.
+      this.sidebarTarget.style.removeProperty("transform")
+      // Fallback for hosts missing responsive Tailwind variants in compiled CSS.
+      this.sidebarTarget.style.position = "static"
+      this.sidebarTarget.style.top = "auto"
+      this.sidebarTarget.style.right = "auto"
+      this.sidebarTarget.style.bottom = "auto"
+      this.sidebarTarget.style.left = "auto"
+      this.sidebarTarget.style.maxWidth = "14rem"
+      this.sidebarTarget.style.boxShadow = "none"
+      this.sidebarTarget.dataset.open = "true"
+      if (this.hasOverlayTarget) this.overlayTarget.classList.add("hidden")
+      return
+    }
+
+    // Mobile default: closed sheet.
+    this.sidebarTarget.style.removeProperty("position")
+    this.sidebarTarget.style.removeProperty("top")
+    this.sidebarTarget.style.removeProperty("right")
+    this.sidebarTarget.style.removeProperty("bottom")
+    this.sidebarTarget.style.removeProperty("left")
+    this.sidebarTarget.style.removeProperty("max-width")
+    this.sidebarTarget.style.removeProperty("box-shadow")
+    this.close()
+  }
+
+  isOpen() {
+    if (!this.hasSidebarTarget) return false
+    if (this.sidebarTarget.dataset.open === "true") return true
+    if (this.sidebarTarget.classList.contains("translate-x-0")) return true
+    return this.sidebarTarget.style.transform === "translateX(0%)"
+  }
+
+  toggle() {
+    this.isOpen() ? this.close() : this.open()
+  }
+
+  close() {
+    if (this.hasSidebarTarget) {
+      this.sidebarTarget.dataset.open = "false"
+      this.sidebarTarget.classList.remove("translate-x-0")
+      this.sidebarTarget.classList.add("-translate-x-full")
+      this.sidebarTarget.style.transform = "translateX(-100%)"
+    }
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.add("hidden")
+    }
+  }
+
+  open() {
+    if (this.hasSidebarTarget) {
+      this.sidebarTarget.dataset.open = "true"
+      this.sidebarTarget.classList.remove("-translate-x-full")
+      this.sidebarTarget.classList.add("translate-x-0")
+      this.sidebarTarget.style.transform = "translateX(0%)"
+    }
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.classList.remove("hidden")
+    }
+  }
+
+  handleOutsideClick(event) {
+    if (typeof window !== "undefined" && window.innerWidth > MOBILE_MAX) {
+      return
+    }
+    if (!this.isOpen()) {
+      return
+    }
+
+    // Don't close if clicking inside sidebar or toggle button
+    if (this.sidebarTarget.contains(event.target) || this.element.contains(event.target)) {
+      return
+    }
+
+    this.close()
+  }
+}

data/lib/generators/ruby_cms/templates/javascript/controllers/admin/nav_order_sortable_controller.js

@@ -0,0 +1,296 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Module-level drag state — shared so an item can move between the two lists.
+const DRAG = { item: null, source: null }
+
+// Makes the nav order list sortable via native HTML5 drag and drop.
+// Supports drag within a list AND drag across the two lists (main ↔ settings),
+// renaming the hidden_field so the saved order reflects the new section.
+export default class extends Controller {
+  static values = {
+    settingsUrl: { type: String, default: "/admin/settings/nav_order" }
+  }
+
+  connect() {
+    this.list = this.element
+    this.items = () => Array.from(this.list.querySelectorAll(":scope > [draggable='true']"))
+    this.boundDragstart = this.dragstart.bind(this)
+    this.boundDragend = this.dragend.bind(this)
+    this.boundDragover = this.dragover.bind(this)
+    this.boundDrop = this.drop.bind(this)
+    this.boundDragleave = this.dragleave.bind(this)
+    this.boundListDragover = this.listDragover.bind(this)
+    this.boundListDrop = this.listDrop.bind(this)
+    this.list.addEventListener("dragover", this.boundListDragover)
+    this.list.addEventListener("drop", this.boundListDrop)
+    this.list.addEventListener("dragleave", this.boundDragleave)
+    this.items().forEach((item) => {
+      item.addEventListener("dragstart", this.boundDragstart)
+      item.addEventListener("dragend", this.boundDragend)
+      item.addEventListener("dragover", this.boundDragover)
+      item.addEventListener("dragleave", this.boundDragleave)
+      item.addEventListener("drop", this.boundDrop)
+    })
+  }
+
+  disconnect() {
+    this.removeIndicator()
+    this.list.removeEventListener("dragover", this.boundListDragover)
+    this.list.removeEventListener("drop", this.boundListDrop)
+    this.list.removeEventListener("dragleave", this.boundDragleave)
+    this.items().forEach((item) => {
+      item.removeEventListener("dragstart", this.boundDragstart)
+      item.removeEventListener("dragend", this.boundDragend)
+      item.removeEventListener("dragover", this.boundDragover)
+      item.removeEventListener("dragleave", this.boundDragleave)
+      item.removeEventListener("drop", this.boundDrop)
+    })
+  }
+
+  getIndicator() {
+    if (!this._indicator) {
+      this._indicator = document.createElement("div")
+      this._indicator.setAttribute("data-nav-order-indicator", "")
+      this._indicator.className = "h-0.5 w-full bg-blue-500 flex-shrink-0 pointer-events-none"
+      this._indicator.setAttribute("aria-hidden", "true")
+    }
+    return this._indicator
+  }
+
+  removeIndicator() {
+    this._indicator?.remove()
+    this._indicator = null
+    this.dropIndex = null
+    this.items().forEach((item) => item.classList.remove("ring-2", "ring-inset", "ring-blue-400"))
+  }
+
+  placeIndicator(insertIndex) {
+    const items = this.items()
+    if (insertIndex < 0 || insertIndex > items.length) return
+    const indicator = this.getIndicator()
+    if (insertIndex >= items.length) {
+      this.list.appendChild(indicator)
+    } else {
+      this.list.insertBefore(indicator, items[insertIndex])
+    }
+    this.dropIndex = insertIndex
+  }
+
+  dragleave(e) {
+    if (e.currentTarget.getAttribute && e.currentTarget.getAttribute("draggable") === "true") {
+      e.currentTarget.classList.remove("ring-2", "ring-inset", "ring-blue-400")
+    }
+    const list = this.list
+    const related = e.relatedTarget
+    if (!related || !list.contains(related)) {
+      this.removeIndicator()
+    }
+  }
+
+  dragstart(e) {
+    // Drag started on a draggable inside us (e.g. a nested group child). HTML5
+    // dragstart bubbles, so without this guard the outer group <li>'s listener
+    // would overwrite DRAG.item with the parent and break the move.
+    if (e.target !== e.currentTarget) return
+    DRAG.item = e.currentTarget
+    DRAG.source = this
+    e.dataTransfer.effectAllowed = "move"
+    try {
+      e.dataTransfer.setData("text/plain", e.currentTarget.dataset.key || "")
+    } catch (_) {}
+    e.currentTarget.classList.add("opacity-50")
+  }
+
+  dragend(e) {
+    e.currentTarget.classList.remove("opacity-50")
+    DRAG.item = null
+    DRAG.source = null
+    this.removeIndicator()
+    this.cleanupIndicators()
+  }
+
+  // True when the event originated inside a sortable list other than ours
+  // (e.g. our outer list sees bubbled events from a nested group <ul>).
+  eventInsideNestedList(e) {
+    const nested = e.target.closest("[data-controller~='admin--nav-order-sortable']")
+    return nested && nested !== this.list
+  }
+
+  listDragover(e) {
+    if (!DRAG.item) return
+    if (this.eventInsideNestedList(e)) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    const items = this.items()
+    if (!items.length) {
+      // empty list: indicator at top
+      const indicator = this.getIndicator()
+      if (!this.list.contains(indicator)) this.list.appendChild(indicator)
+      this.dropIndex = 0
+      return
+    }
+    const last = items[items.length - 1]
+    const lastRect = last.getBoundingClientRect()
+    if (e.clientY > lastRect.bottom) {
+      this.placeIndicator(items.length)
+      return
+    }
+    const first = items[0]
+    const firstRect = first.getBoundingClientRect()
+    if (e.clientY < firstRect.top + firstRect.height / 2) {
+      this.placeIndicator(0)
+    }
+  }
+
+  listDrop(e) {
+    if (this.eventInsideNestedList(e)) return
+    e.preventDefault()
+    const dragged = DRAG.item
+    if (!dragged || this.dropIndex == null) return
+    this.placeDragged(dragged, this.dropIndex)
+    this.fixHiddenFieldNames()
+    DRAG.item = null
+    DRAG.source = null
+    this.removeIndicator()
+    this.cleanupIndicators()
+    this.saveOrder()
+  }
+
+  dragover(e) {
+    if (!DRAG.item) return
+    if (this.eventInsideNestedList(e)) return
+    e.preventDefault()
+    e.dataTransfer.dropEffect = "move"
+    const target = e.currentTarget
+    if (target === DRAG.item) return
+    const items = this.items()
+    const index = items.indexOf(target)
+    if (index === -1) return
+    const rect = target.getBoundingClientRect()
+    const mid = rect.top + rect.height / 2
+    const insertIndex = e.clientY < mid ? index : index + 1
+    this.placeIndicator(insertIndex)
+  }
+
+  drop(e) {
+    if (this.eventInsideNestedList(e)) return
+    e.preventDefault()
+    const dragged = DRAG.item
+    if (!dragged) return
+    if (dragged === e.currentTarget) return
+    this.placeDragged(dragged, this.dropIndex)
+    this.fixHiddenFieldNames()
+    DRAG.item = null
+    DRAG.source = null
+    this.removeIndicator()
+    this.cleanupIndicators()
+    this.saveOrder()
+  }
+
+  cleanupIndicators() {
+    document.querySelectorAll("[data-nav-order-indicator]").forEach((el) => el.remove())
+  }
+
+  placeDragged(dragged, dropIndex) {
+    // Guard: can't drop a node into one of its own descendants.
+    if (dragged.contains(this.list)) return
+    const allItems = this.items()
+    // dropIndex was computed against the full items() list (incl. dragged).
+    // After we remove dragged from consideration, indices shift if dragged was before drop.
+    const draggedIndexInThisList = allItems.indexOf(dragged)
+    let adjustedIndex = dropIndex
+    if (draggedIndexInThisList !== -1 && draggedIndexInThisList < dropIndex) {
+      adjustedIndex = dropIndex - 1
+    }
+    const itemsExcludingDragged = allItems.filter((i) => i !== dragged)
+    const insertBefore = adjustedIndex != null ? itemsExcludingDragged[adjustedIndex] : null
+    if (insertBefore && insertBefore !== dragged && !dragged.contains(insertBefore)) {
+      this.list.insertBefore(dragged, insertBefore)
+    } else if (!insertBefore) {
+      this.list.appendChild(dragged)
+    }
+  }
+
+  // After a cross-list drop, any top-level hidden_field inside the moved item must use
+  // the target list's name (nav_order_main[] vs nav_order_bottom[]).
+  // Group sublists (data-list-type="group") have their own per-group input names — leave alone.
+  fixHiddenFieldNames() {
+    const type = this.list.dataset.listType
+    if (type === "group") return
+    const targetName = type === "main" ? "nav_order_main[]" : "nav_order_bottom[]"
+    // Two layouts:
+    //   - link item: <li><...><input name="nav_order_main[]"></li>   (input is direct child)
+    //   - group item: <li><div><input name="nav_order_main[]"></div><ul>...</ul></li>
+    // Cover both with `:scope > input` and `:scope > div > input`.
+    // CRITICAL: do NOT touch inputs inside a group's nested <ul data-list-type="group"> —
+    // those are per-group child orders and share neither name.
+    this.items().forEach((item) => {
+      const inputs = [
+        ...item.querySelectorAll(":scope > input[name='nav_order_main[]'], :scope > input[name='nav_order_bottom[]']"),
+        ...item.querySelectorAll(":scope > div > input[name='nav_order_main[]'], :scope > div > input[name='nav_order_bottom[]']")
+      ]
+      inputs.forEach((input) => { input.name = targetName })
+    })
+  }
+
+  saveOrder() {
+    const form = this.element.closest("form")
+    if (!form) return
+    const mainList = form.querySelector("[data-list-type='main']")
+    const bottomList = form.querySelector("[data-list-type='bottom']")
+    // Collect from each top-level <li>. For links the hidden field is a direct child of <li>;
+    // for groups it sits inside the group's <div>. Descendant selector covers both
+    // — children inside a group's nested <ul> use the per-group input name so they don't match here.
+    const mainOrder = mainList
+      ? Array.from(mainList.querySelectorAll(":scope > [draggable='true']"))
+        .map((li) => li.querySelector("input[name='nav_order_main[]']"))
+        .filter(Boolean)
+        .map((i) => i.value)
+      : []
+    const bottomOrder = bottomList
+      ? Array.from(bottomList.querySelectorAll(":scope > [draggable='true']"))
+        .map((li) => li.querySelector("input[name='nav_order_bottom[]']"))
+        .filter(Boolean)
+        .map((i) => i.value)
+      : []
+    // Collect each group's child order, keyed by its data-group-key.
+    const groups = {}
+    form.querySelectorAll("[data-list-type='group']").forEach((groupList) => {
+      const key = groupList.dataset.groupKey
+      if (!key) return
+      const childKeys = Array.from(groupList.querySelectorAll(":scope > [draggable='true']")).map((li) => li.dataset.key).filter(Boolean)
+      groups[key] = childKeys
+    })
+    const url = this.settingsUrlValue || "/admin/settings/nav_order"
+    const csrf = document.querySelector('meta[name="csrf-token"]')
+    fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": csrf ? csrf.content : "",
+        Accept: "application/json"
+      },
+      body: JSON.stringify({
+        tab: "navigation",
+        nav_order_main: mainOrder,
+        nav_order_bottom: bottomOrder,
+        nav_order_groups: groups
+      })
+    })
+      .then((res) => (res.ok ? res.json() : Promise.reject(res)))
+      .then(() => {
+        this.showToast("Order saved.", "success")
+      })
+      .catch(() => this.showToast("Failed to save order.", "error"))
+  }
+
+  showToast(message, type = "info") {
+    const toast = document.createElement("div")
+    toast.className = `fixed top-4 right-4 z-50 rounded-lg px-4 py-2.5 text-sm font-medium text-white shadow-lg ${
+      type === "success" ? "bg-emerald-600" : type === "error" ? "bg-red-600" : "bg-gray-800"
+    }`
+    toast.textContent = message
+    document.body.appendChild(toast)
+    setTimeout(() => toast.remove(), 2500)
+  }
+}