ruby_cms 0.2.1.0 → 1.0.0

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

@@ -0,0 +1,189 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Command palette (⌘K / Ctrl+K). Filters nav entries client-side, navigates via Turbo.
+//
+// Listens for ⌘K / Ctrl+K globally and on the `admin:open-command-palette`
+// custom event. Closes on ESC or backdrop click. Arrow keys navigate, Enter
+// picks. Recent picks persisted in localStorage.
+export default class extends Controller {
+  static targets = ["backdrop", "input", "list", "count", "entriesJson"]
+
+  connect() {
+    this.active = 0
+    this.results = []
+    this.recents = this.loadRecents()
+    this.entries = this.loadEntries()
+  }
+
+  loadEntries() {
+    if (!this.hasEntriesJsonTarget) return []
+    const el = this.entriesJsonTarget
+    // A <template>'s nodes live in .content, so .textContent is empty — read innerHTML.
+    const raw = el.tagName === "TEMPLATE"
+      ? (el.innerHTML || el.content?.textContent || "")
+      : (el.textContent || "")
+    try { return JSON.parse(raw || "[]") } catch (_) { return [] }
+  }
+
+  open(event) {
+    if (event) event.preventDefault()
+    this.backdropTarget.hidden = false
+    this.inputTarget.value = ""
+    this.refresh()
+    requestAnimationFrame(() => this.inputTarget.focus())
+  }
+
+  close() {
+    this.backdropTarget.hidden = true
+  }
+
+  stop(event) {
+    event.stopPropagation()
+  }
+
+  onWindowKey(event) {
+    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+      event.preventDefault()
+      this.backdropTarget.hidden ? this.open() : this.close()
+      return
+    }
+    if (event.key === "Escape" && !this.backdropTarget.hidden) {
+      this.close()
+    }
+  }
+
+  onInputKey(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.active = Math.min(this.results.length - 1, this.active + 1)
+      this.render()
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this.active = Math.max(0, this.active - 1)
+      this.render()
+    } else if (event.key === "Enter") {
+      event.preventDefault()
+      this.pick(this.results[this.active])
+    }
+  }
+
+  filter() {
+    this.active = 0
+    this.refresh()
+  }
+
+  refresh() {
+    const q = this.inputTarget.value.trim().toLowerCase()
+    const all = this.entries || []
+    if (!q) {
+      const recents = this.recents.map(id => all.find(e => e.id === id)).filter(Boolean)
+      const remaining = all.filter(e => !this.recents.includes(e.id)).slice(0, 12)
+      this.results = [
+        ...recents.map(e => ({ ...e, group: "Recent" })),
+        ...remaining
+      ]
+    } else {
+      this.results = all
+        .map(e => ({ e, s: this.score(e, q) }))
+        .filter(x => x.s > 0)
+        .sort((a, b) => b.s - a.s)
+        .slice(0, 50)
+        .map(x => x.e)
+    }
+    this.render()
+  }
+
+  score(entry, q) {
+    const label = (entry.label || "").toLowerCase()
+    if (label.startsWith(q)) return 3
+    if (label.includes(q))   return 2
+    if ((entry.id || "").toLowerCase().includes(q)) return 1
+    return 0
+  }
+
+  render() {
+    if (this.results.length === 0) {
+      const q = this.inputTarget.value.trim()
+      this.listTarget.innerHTML = `
+        <div class="px-6 py-10 text-center text-[#78716c]">
+          <div class="inline-flex w-10 h-10 rounded-full bg-[#faf8f3] items-center justify-center mb-2">
+            <svg class="w-5 h-5 text-[#a8a29e]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
+          </div>
+          <div class="text-[13px] font-medium text-[#1c1917]">Geen resultaten${q ? ` voor "${this.escape(q)}"` : ""}</div>
+        </div>
+      `
+      this.countTarget.textContent = "0 resultaten"
+      return
+    }
+
+    let lastGroup = null
+    let html = ""
+    this.results.forEach((entry, idx) => {
+      if (entry.group !== lastGroup) {
+        if (lastGroup !== null) html += `</div>`
+        html += `<div class="px-2 pt-2"><div class="px-2 pb-1 text-[10.5px] font-semibold uppercase tracking-wider text-[#a8a29e]">${this.escape(entry.group || "Resultaten")}</div>`
+        lastGroup = entry.group
+      }
+      const isActive = idx === this.active
+      html += `
+        <button type="button"
+                data-action="click->admin--command-palette#pickIndex mouseenter->admin--command-palette#hover"
+                data-index="${idx}"
+                class="w-full flex items-center gap-3 px-2.5 py-2 rounded-md text-left text-[13px] ${isActive ? "bg-blue-50 text-blue-700" : "text-[#1c1917] hover:bg-[#faf8f3]"}">
+          <span class="inline-flex w-5 h-5 items-center justify-center text-[#78716c] flex-shrink-0">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
+          </span>
+          <span class="flex-1 truncate">${this.escape(entry.label || entry.id)}</span>
+          <span class="text-[11px] text-[#a8a29e]">${this.escape(entry.group === "Recent" ? "Recent" : "Open")}</span>
+        </button>
+      `
+    })
+    html += `</div>`
+    this.listTarget.innerHTML = html
+    this.countTarget.textContent = `${this.results.length} resultaten`
+
+    const activeEl = this.listTarget.querySelector(`[data-index="${this.active}"]`)
+    if (activeEl) activeEl.scrollIntoView({ block: "nearest" })
+  }
+
+  pickIndex(event) {
+    const idx = parseInt(event.currentTarget.dataset.index, 10)
+    this.pick(this.results[idx])
+  }
+
+  hover(event) {
+    const idx = parseInt(event.currentTarget.dataset.index, 10)
+    if (!isNaN(idx) && idx !== this.active) {
+      this.active = idx
+      this.render()
+    }
+  }
+
+  pick(entry) {
+    if (!entry) return
+    this.recents = [entry.id, ...this.recents.filter(id => id !== entry.id)].slice(0, 6)
+    this.saveRecents()
+    this.close()
+    if (entry.command) {
+      window.dispatchEvent(new CustomEvent("ve:command", { detail: entry.command }))
+    } else if (entry.url) {
+      window.Turbo ? window.Turbo.visit(entry.url) : (window.location.href = entry.url)
+    }
+  }
+
+  loadRecents() {
+    try {
+      const raw = localStorage.getItem("rubycms.cmdk.recents")
+      if (raw) return JSON.parse(raw)
+    } catch (_) {}
+    return []
+  }
+
+  saveRecents() {
+    try { localStorage.setItem("rubycms.cmdk.recents", JSON.stringify(this.recents)) } catch (_) {}
+  }
+
+  escape(s) {
+    return String(s).replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]))
+  }
+}

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

@@ -0,0 +1,300 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "search",
+    "categoryBtn",
+    "cmdBtn",
+    "noResults",
+    "terminal",
+    "runForm",
+    "runBtn",
+    "runningPill",
+    "paramControl",
+    "paramInput",
+    "history",
+    "lastRun",
+  ];
+
+  static values = {
+    runUrl: String,
+    active: String,
+    category: { type: String, default: "all" },
+  };
+
+  connect() {
+    this.applyFilter();
+  }
+
+  // ── Filtering ──────────────────────────────────────────────────
+  filter() {
+    this.applyFilter();
+  }
+
+  filterCategory(event) {
+    const cat = event.currentTarget.dataset.category || "all";
+    this.categoryValue = cat;
+    this.categoryBtnTargets.forEach((b) => {
+      b.dataset.active = String(b.dataset.category === cat);
+    });
+    this.applyFilter();
+  }
+
+  applyFilter() {
+    const q = (this.hasSearchTarget ? this.searchTarget.value : "")
+      .toLowerCase()
+      .trim();
+    const cat = this.categoryValue;
+    let visible = 0;
+    this.cmdBtnTargets.forEach((btn) => {
+      const inCat = cat === "all" || btn.dataset.category === cat;
+      const inSearch =
+        !q ||
+        (btn.dataset.label || "").includes(q) ||
+        (btn.dataset.rake || "").includes(q) ||
+        (btn.dataset.description || "").includes(q);
+      const show = inCat && inSearch;
+      btn.classList.toggle("hidden", !show);
+      if (show) visible += 1;
+    });
+    if (this.hasNoResultsTarget) {
+      this.noResultsTarget.classList.toggle("hidden", visible > 0);
+    }
+  }
+
+  // ── Selection ──────────────────────────────────────────────────
+  select(event) {
+    const key = event.currentTarget.dataset.key;
+    if (!key || key === this.activeValue) return;
+    const url = new URL(window.location.href);
+    url.searchParams.set("active", key);
+    window.location.href = url.toString();
+  }
+
+  // ── Param controls ────────────────────────────────────────────
+  toggleParam(event) {
+    const btn = event.currentTarget;
+    const next = btn.dataset.on !== "true";
+    btn.dataset.on = String(next);
+    btn.setAttribute("aria-pressed", String(next));
+    const knob = btn.querySelector("[data-on]");
+    if (knob) knob.dataset.on = String(next);
+    this.writeParam(btn.dataset.param, next ? "1" : "0");
+  }
+
+  changeParam(event) {
+    const el = event.currentTarget;
+    this.writeParam(el.dataset.param, el.value);
+  }
+
+  writeParam(paramKey, value) {
+    this.paramInputTargets.forEach((input) => {
+      if (input.dataset.param === paramKey) input.value = value;
+    });
+  }
+
+  // ── Run ───────────────────────────────────────────────────────
+  async run(event) {
+    event.preventDefault();
+    if (!this.hasRunFormTarget) return;
+    const form = this.runFormTarget;
+    const url = this.runUrlValue;
+    const token = document.querySelector('meta[name="csrf-token"]')?.content;
+
+    this.setRunning(true);
+    this.appendLine("ok", `→ ${this.cliPreview(form)}`);
+
+    try {
+      const formData = new FormData(form);
+      const response = await fetch(url, {
+        method: "POST",
+        headers: { Accept: "application/json", "X-CSRF-Token": token || "" },
+        body: formData,
+      });
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        this.appendLine("err", data.error || `Request failed (${response.status})`);
+        return;
+      }
+      this.printOutput(data.command_output || "");
+      this.recordRun(data.run);
+    } catch (e) {
+      this.appendLine("err", e?.message || String(e));
+    } finally {
+      this.setRunning(false);
+    }
+  }
+
+  setRunning(running) {
+    if (this.hasRunBtnTarget) {
+      this.runBtnTarget.disabled = running;
+      const play = this.runBtnTarget.querySelector(".js-icon-play");
+      const spin = this.runBtnTarget.querySelector(".js-icon-spin");
+      const lblRun = this.runBtnTarget.querySelector(".js-label-run");
+      const lblRunning = this.runBtnTarget.querySelector(".js-label-running");
+      play?.classList.toggle("hidden", running);
+      spin?.classList.toggle("hidden", !running);
+      lblRun?.classList.toggle("hidden", running);
+      lblRunning?.classList.toggle("hidden", !running);
+    }
+    if (this.hasRunningPillTarget) {
+      this.runningPillTarget.classList.toggle("hidden", !running);
+    }
+  }
+
+  cliPreview(form) {
+    const key = form.querySelector("input[name='key']")?.value || "";
+    const flags = [];
+    form
+      .querySelectorAll("input[name^='command_params[']")
+      .forEach((el) => {
+        const m = el.name.match(/command_params\[(.+)\]/);
+        if (!m) return;
+        const k = m[1];
+        const v = el.value;
+        if (v === "0" || v === "" || v === "false") return;
+        if (v === "1" || v === "true") flags.push(`--${k}`);
+        else flags.push(`--${k}=${v}`);
+      });
+    return `rake ${key} ${flags.join(" ")}`.trim();
+  }
+
+  printOutput(text) {
+    if (!this.hasTerminalTarget) return;
+    const t = this.terminalTarget;
+    t.innerHTML = "";
+    const lines = String(text).split(/\r?\n/);
+    for (const line of lines) {
+      const span = document.createElement("span");
+      span.className = this.classifyLine(line);
+      span.textContent = line;
+      t.appendChild(span);
+      t.appendChild(document.createTextNode("\n"));
+    }
+    t.scrollTop = t.scrollHeight;
+  }
+
+  appendLine(kind, text) {
+    if (!this.hasTerminalTarget) return;
+    const t = this.terminalTarget;
+    if (t.innerHTML.trim().startsWith("<span class=\"text-stone-500\">#")) {
+      t.innerHTML = "";
+    }
+    const span = document.createElement("span");
+    span.className =
+      kind === "ok"
+        ? "text-green-400"
+        : kind === "warn"
+        ? "text-amber-400"
+        : kind === "err"
+        ? "text-red-400"
+        : "text-stone-200";
+    span.textContent = text;
+    t.appendChild(span);
+    t.appendChild(document.createTextNode("\n"));
+    t.scrollTop = t.scrollHeight;
+  }
+
+  classifyLine(line) {
+    if (/^\(exit 0\)/.test(line)) return "text-green-400";
+    if (/^\(exit /.test(line)) return "text-red-400";
+    if (/^\$\s/.test(line)) return "text-blue-300";
+    if (/^\s*✓|\bsuccess\b|\bOK\b/i.test(line)) return "text-green-400";
+    if (/^\s*!|\bwarn/i.test(line)) return "text-amber-300";
+    if (/error|failed|fatal/i.test(line)) return "text-red-400";
+    return "text-stone-200";
+  }
+
+  clearOutput() {
+    if (!this.hasTerminalTarget) return;
+    this.terminalTarget.innerHTML =
+      '<span class="text-stone-500"># Output geleegd.</span>';
+  }
+
+  async copyOutput() {
+    if (!this.hasTerminalTarget) return;
+    try {
+      await navigator.clipboard.writeText(this.terminalTarget.innerText);
+    } catch (_) {}
+  }
+
+  recordRun(run) {
+    if (!run || !this.hasHistoryTarget) return;
+    const ok = run.status === "ok";
+    const durMs = Number(run.duration_ms || 0);
+    const dur =
+      durMs < 1000
+        ? `${durMs}ms`
+        : durMs < 60000
+        ? `${(durMs / 1000).toFixed(2)}s`
+        : `${Math.floor(durMs / 60000)}m ${Math.floor((durMs % 60000) / 1000)}s`;
+    const row = document.createElement("div");
+    row.className =
+      "px-4 py-2.5 flex items-center gap-3 border-b border-[#f5efde] last:border-b-0";
+    row.innerHTML = `
+      <span class="w-2 h-2 rounded-full flex-shrink-0 ${
+        ok
+          ? "bg-green-600 shadow-[0_0_0_3px_rgba(34,197,94,0.15)]"
+          : "bg-red-600 shadow-[0_0_0_3px_rgba(239,68,68,0.18)]"
+      }"></span>
+      <div class="flex-1 min-w-0 flex flex-col">
+        <span class="text-[12.5px] text-[#1c1917] truncate">${
+          ok ? "Succesvol" : "Mislukt"
+        }</span>
+        <span class="text-[11px] text-[#a8a29e] truncate">${escapeHtml(
+          run.ran_by || ""
+        )} · zojuist · ${dur}</span>
+      </div>
+      <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10.5px] font-medium ring-1 ring-inset ${
+        ok
+          ? "bg-green-50 text-green-700 ring-green-200"
+          : "bg-red-50 text-red-700 ring-red-200"
+      }">
+        <span class="w-1.5 h-1.5 rounded-full ${
+          ok ? "bg-green-600" : "bg-red-600"
+        }"></span>${ok ? "OK" : "Failed"}
+      </span>`;
+    // Remove empty-state if present
+    const empty = this.historyTarget.querySelector(".text-center");
+    if (empty) empty.parentElement.removeChild(empty);
+    this.historyTarget.insertBefore(row, this.historyTarget.firstChild);
+
+    // Update the "Last run" meta strip
+    if (this.hasLastRunTarget) {
+      this.lastRunTarget.innerHTML = `
+        <span>zojuist</span>
+        <span class="inline-flex items-center gap-1 px-1.5 py-px rounded text-[10.5px] font-medium ring-1 ring-inset ${
+          ok
+            ? "bg-green-50 text-green-700 ring-green-200"
+            : "bg-red-50 text-red-700 ring-red-200"
+        }">
+          <span class="w-1.5 h-1.5 rounded-full ${
+            ok ? "bg-green-600" : "bg-red-600"
+          }"></span>${ok ? "OK" : "Failed"}
+        </span>`;
+    }
+
+    // Update status dot on the sidebar list
+    const sideBtn = this.cmdBtnTargets.find(
+      (b) => b.dataset.key === run.command_key
+    );
+    if (sideBtn) {
+      const dot = sideBtn.querySelector("span.mt-1\\.5");
+      if (dot) {
+        dot.className = `mt-1.5 inline-block w-2 h-2 rounded-full flex-shrink-0 ${
+          ok
+            ? "bg-green-600 shadow-[0_0_0_3px_rgba(34,197,94,0.15)]"
+            : "bg-red-600 shadow-[0_0_0_3px_rgba(239,68,68,0.18)]"
+        }`;
+      }
+    }
+  }
+}
+
+function escapeHtml(s) {
+  return String(s)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

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

@@ -0,0 +1,167 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["panel", "list"]
+    static values = {
+        contentBlockId: Number
+    }
+
+    connect() {
+        this.isOpen = false
+    }
+
+    async toggle() {
+        if (this.isOpen) {
+            this.close()
+        } else {
+            await this.open()
+        }
+    }
+
+    async open() {
+        if (!this.contentBlockIdValue) return
+
+        try {
+            const response = await fetch(
+                `/admin/content_blocks/${this.contentBlockIdValue}/versions.json`,
+                { headers: { "Accept": "application/json" } }
+            )
+            if (!response.ok) throw new Error("Failed to fetch versions")
+
+            const versions = await response.json()
+            this.renderVersions(versions)
+            this.panelTarget.classList.remove("hidden")
+            this.isOpen = true
+        } catch (error) {
+            console.error("Error loading version history:", error)
+        }
+    }
+
+    close() {
+        this.panelTarget.classList.add("hidden")
+        this.isOpen = false
+    }
+
+    renderVersions(versions) {
+        if (!versions.length) {
+            this.listTarget.innerHTML = `<p class="text-[12px] text-gray-500 p-4 text-center">Geen versies gevonden.</p>`
+            return
+        }
+
+        this.listTarget.innerHTML = versions.map((v, i) => this.renderVersionCard(v, i === 0)).join("")
+    }
+
+    renderVersionCard(v, isCurrent) {
+        const eventBadge = this.eventBadge(v.event)
+        const preview = v.content_preview ? this.escape(v.content_preview) : "<em class='text-gray-400'>leeg</em>"
+        const diffHtml = this.renderDiff(v.diff || {})
+        const currentPill = isCurrent
+            ? `<span class="inline-flex items-center px-1.5 py-0 rounded text-[9.5px] font-semibold bg-blue-600 text-white">CURRENT</span>`
+            : ""
+
+        return `
+      <details class="group border-b border-gray-100 last:border-0" ${isCurrent ? "open" : ""}>
+        <summary class="cursor-pointer list-none px-3 py-2.5 hover:bg-white flex items-center gap-2">
+          <span class="text-[11px] font-mono font-semibold text-gray-700 w-8">v${v.version_number}</span>
+          ${eventBadge}
+          ${currentPill}
+          <span class="text-[11.5px] text-gray-700 flex-1 truncate ml-1">${this.escape(v.user)}</span>
+          <span class="text-[11px] text-gray-400 font-mono whitespace-nowrap">${this.escape(v.created_at)}</span>
+          <span class="text-[11px] text-gray-400 ml-1 transform transition-transform group-open:rotate-90">›</span>
+        </summary>
+        <div class="px-3 pb-3 pt-1">
+          ${diffHtml}
+          <div class="mt-2 rounded-md border border-gray-200 bg-white px-2.5 py-2">
+            <div class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-1">Snapshot</div>
+            <div class="text-[12px] text-gray-700 whitespace-pre-wrap break-words">${preview}</div>
+          </div>
+          ${isCurrent ? "" : `
+            <div class="mt-2 flex justify-end">
+              <button type="button"
+                      data-action="click->admin--content-block-history#rollback"
+                      data-version-id="${v.id}"
+                      class="inline-flex items-center gap-1 h-7 px-2.5 rounded-md bg-blue-600 text-white text-[11.5px] font-medium hover:bg-blue-700">
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
+                Herstel naar v${v.version_number}
+              </button>
+            </div>
+          `}
+        </div>
+      </details>
+    `
+    }
+
+    renderDiff(diff) {
+        const fields = Object.keys(diff)
+        if (fields.length === 0) {
+            return `<div class="text-[11px] text-gray-400 italic">Geen wijzigingen t.o.v. vorige versie.</div>`
+        }
+        return `
+      <div class="space-y-2">
+        ${fields.map(f => {
+            const change = diff[f] || {}
+            const oldVal = (change.old || "").toString()
+            const newVal = (change.new || "").toString()
+            return `
+            <div class="rounded-md border border-gray-200 overflow-hidden">
+              <div class="px-2.5 py-1 bg-gray-50 border-b border-gray-200">
+                <span class="text-[10.5px] font-mono font-semibold text-gray-600">${this.escape(f)}</span>
+              </div>
+              <div class="grid grid-cols-2 divide-x divide-gray-200">
+                <div class="px-2.5 py-1.5 bg-red-50/50">
+                  <div class="text-[9.5px] uppercase tracking-wider text-red-600 font-semibold mb-0.5">Was</div>
+                  <div class="text-[11.5px] text-gray-800 whitespace-pre-wrap break-words">${oldVal ? this.escape(oldVal) : "<em class='text-gray-400'>leeg</em>"}</div>
+                </div>
+                <div class="px-2.5 py-1.5 bg-green-50/50">
+                  <div class="text-[9.5px] uppercase tracking-wider text-green-700 font-semibold mb-0.5">Nu</div>
+                  <div class="text-[11.5px] text-gray-800 whitespace-pre-wrap break-words">${newVal ? this.escape(newVal) : "<em class='text-gray-400'>leeg</em>"}</div>
+                </div>
+              </div>
+            </div>
+          `
+        }).join("")}
+      </div>
+    `
+    }
+
+    eventBadge(event) {
+        const tones = {
+            create: "bg-green-50 text-green-700 border-green-100",
+            update: "bg-blue-50 text-blue-700 border-blue-100",
+            rollback: "bg-amber-50 text-amber-700 border-amber-100",
+            publish: "bg-green-50 text-green-700 border-green-100",
+            unpublish: "bg-gray-50 text-gray-700 border-gray-200",
+            visual_editor: "bg-purple-50 text-purple-700 border-purple-100"
+        }
+        const cls = tones[event] || "bg-gray-50 text-gray-700 border-gray-200"
+        return `<span class="inline-flex items-center px-1.5 py-0 rounded-full text-[9.5px] font-medium border ${cls}">${this.escape(event)}</span>`
+    }
+
+    escape(s) {
+        return String(s).replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]))
+    }
+
+    async rollback(event) {
+        const versionId = event.currentTarget.dataset.versionId
+        if (!confirm("Weet je zeker dat je deze versie wilt herstellen?")) return
+
+        try {
+            const response = await fetch(
+                `/admin/content_blocks/${this.contentBlockIdValue}/versions/${versionId}/rollback`,
+                {
+                    method: "POST",
+                    headers: {
+                        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content,
+                        "Accept": "application/json"
+                    }
+                }
+            )
+            if (!response.ok) throw new Error("Rollback failed")
+
+            window.location.reload()
+        } catch (error) {
+            console.error("Rollback error:", error)
+            alert("Rollback mislukt")
+        }
+    }
+}

data/{app/javascript/controllers/ruby_cms → lib/generators/ruby_cms/templates/javascript/controllers/admin}/flash_messages_controller.js

@@ -1,6 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="ruby-cms--flash-messages"
+// Connects to data-controller="admin--flash-messages"
 export default class extends Controller {
   static targets = ["message"]