ruby_cms 0.2.1.1 → 1.0.0

data/lib/generators/ruby_cms/templates/views/admin/content_blocks/_form.html.erb

@@ -0,0 +1,79 @@
+<%= form_with model: @content_block,
+              url: admin_content_blocks_path,
+              method: :post,
+              id: "content-block-form",
+              data: { turbo: false } do |f| %>
+  <div class="p-4 sm:p-6 space-y-6">
+    <% if @content_block.errors.any? %>
+      <div class="rounded-lg border border-destructive/30 bg-destructive/5 p-4">
+        <div class="flex gap-3">
+          <svg class="size-5 text-destructive shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+          <div>
+            <p class="text-sm font-medium text-destructive"><%= t("ruby_cms.admin.content_blocks.errors_title", default: "Corrigeer de volgende fouten:") %></p>
+            <ul class="mt-1.5 text-sm text-destructive/80 list-disc list-inside">
+              <% @content_block.errors.full_messages.each do |message| %>
+                <li><%= message %></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+      <div>
+        <%= f.label :key, "Sleutel", class: RubyUI::AdminResourceCard::LABEL_CLASS %>
+        <%= f.text_field :key,
+            class: "#{RubyUI::AdminResourceCard::INPUT_CLASS} font-mono",
+            placeholder: "homepage_hero_title",
+            name: "content_block[key]" %>
+        <p class="<%= RubyUI::AdminResourceCard::HINT_CLASS %>">Unieke verwijzing, bv. <code class="font-mono">homepage_hero_title</code>. Niet meer te wijzigen.</p>
+      </div>
+
+      <div>
+        <%= f.label :locale, "Taal", class: RubyUI::AdminResourceCard::LABEL_CLASS %>
+        <%= f.select :locale,
+            I18n.available_locales.map { |l| [ ruby_cms_locale_display_name(l), l.to_s ] },
+            { include_blank: t("ruby_cms.admin.content_blocks.select_locale", default: "Kies taal") },
+            { class: RubyUI::AdminResourceCard::INPUT_CLASS, name: "content_block[locale]" } %>
+      </div>
+
+      <div>
+        <%= f.label :title, "Titel", class: RubyUI::AdminResourceCard::LABEL_CLASS %>
+        <%= f.text_field :title, class: RubyUI::AdminResourceCard::INPUT_CLASS %>
+      </div>
+
+      <div>
+        <%= f.label :content_type, "Type", class: RubyUI::AdminResourceCard::LABEL_CLASS %>
+        <%= f.select :content_type, ::ContentBlock::CONTENT_TYPES, {}, class: RubyUI::AdminResourceCard::INPUT_CLASS %>
+        <p class="<%= RubyUI::AdminResourceCard::HINT_CLASS %>"><strong>rich_text</strong> geeft een opmaak-editor (vet, cursief, kleur, grootte).</p>
+      </div>
+    </div>
+
+    <div>
+      <%= f.label :content, "Inhoud", class: RubyUI::AdminResourceCard::LABEL_CLASS %>
+      <% if @content_block.content_type == "rich_text" %>
+        <%= render "admin/content_blocks/rich_field", name: "content_block[content]", value: @content_block.content.to_s %>
+        <p class="<%= RubyUI::AdminResourceCard::HINT_CLASS %>">Opmaak: vet, cursief, kleur en grootte — net als de visuele editor.</p>
+      <% else %>
+        <%= f.text_area :content, rows: 6, class: "#{RubyUI::AdminResourceCard::INPUT_CLASS} resize-y" %>
+        <p class="<%= RubyUI::AdminResourceCard::HINT_CLASS %>">Kies type <strong>rich_text</strong> en sla op voor de opmaak-editor.</p>
+      <% end %>
+    </div>
+
+    <label class="inline-flex items-center gap-3 cursor-pointer">
+      <%= f.check_box :published, class: "size-4 rounded border-border text-primary focus:ring-primary/30 cursor-pointer" %>
+      <span class="text-sm font-medium text-foreground"><%= t("ruby_cms.admin.content_blocks.published", default: "Gepubliceerd") %></span>
+    </label>
+  </div>
+
+  <div class="<%= RubyUI::AdminResourceCard::ACTIONS_CLASS %>">
+    <%= link_to t("ruby_cms.admin.common.cancel", default: "Annuleren"),
+        admin_content_blocks_path,
+        class: RubyUI::AdminResourceCard::CANCEL_CLASS %>
+    <%= f.submit t("ruby_cms.admin.content_blocks.create", default: "Contentblok aanmaken"),
+        class: RubyUI::AdminResourceCard::SUBMIT_CLASS %>
+  </div>
+<% end %>

data/lib/generators/ruby_cms/templates/views/admin/content_blocks/_rich_field.html.erb

@@ -0,0 +1,44 @@
+<%# Inline rich-text editor — same light formatting as the visual editor.
+    Locals: name (form field name), value (current HTML). %>
+<div data-controller="admin--inline-rich-editor"
+     class="rounded-lg border border-[#e9e4d4] bg-white overflow-hidden focus-within:border-blue-400 focus-within:ring-2 focus-within:ring-blue-500/20 transition-colors">
+  <div class="flex flex-wrap items-center gap-1 px-2 py-1.5 border-b border-[#e9e4d4] bg-[#faf8f3]">
+    <button type="button" title="Vet (Cmd+B)" data-cmd="bold"
+            data-action="mousedown->admin--inline-rich-editor#bold" tabindex="-1"
+            class="cb-tool w-7 h-7 grid place-items-center rounded-md text-[13px] font-bold text-[#1c1917] hover:bg-white">B</button>
+    <button type="button" title="Cursief (Cmd+I)" data-cmd="italic"
+            data-action="mousedown->admin--inline-rich-editor#italic" tabindex="-1"
+            class="cb-tool w-7 h-7 grid place-items-center rounded-md text-[13px] italic text-[#1c1917] hover:bg-white">I</button>
+
+    <span class="w-px h-5 bg-[#e9e4d4] mx-1"></span>
+
+    <% [["cb-fg-cobalt", "#2D5BFF", "Cobalt"], ["cb-fg-accent", "#B14A2C", "Terracotta"],
+        ["cb-fg-ok", "#4D6E2B", "Groen"], ["cb-fg-muted", "#6b7280", "Gedempt"]].each do |cls, hex, label| %>
+      <button type="button" title="<%= label %>" data-color="<%= cls %>"
+              data-action="mousedown->admin--inline-rich-editor#color" tabindex="-1"
+              class="cb-tool w-7 h-7 grid place-items-center rounded-md text-[13px] font-bold hover:bg-white" style="color: <%= hex %>">A</button>
+    <% end %>
+    <button type="button" title="Standaardkleur" data-color=""
+            data-action="mousedown->admin--inline-rich-editor#color" tabindex="-1"
+            class="cb-tool w-7 h-7 grid place-items-center rounded-md text-[13px] font-bold text-[#1c1917] hover:bg-white">A</button>
+
+    <span class="w-px h-5 bg-[#e9e4d4] mx-1"></span>
+
+    <button type="button" title="Normaal" data-size=""
+            data-action="mousedown->admin--inline-rich-editor#size" tabindex="-1"
+            class="cb-tool h-7 px-2 grid place-items-center rounded-md text-[12px] text-[#1c1917] hover:bg-white">A</button>
+    <button type="button" title="Groot" data-size="cb-size-lg"
+            data-action="mousedown->admin--inline-rich-editor#size" tabindex="-1"
+            class="cb-tool h-7 px-2 grid place-items-center rounded-md text-[15px] font-semibold text-[#1c1917] hover:bg-white">A</button>
+    <button type="button" title="Extra groot" data-size="cb-size-xl"
+            data-action="mousedown->admin--inline-rich-editor#size" tabindex="-1"
+            class="cb-tool h-7 px-2 grid place-items-center rounded-md text-[18px] font-bold text-[#1c1917] hover:bg-white">A</button>
+  </div>
+
+  <div contenteditable="true"
+       data-admin--inline-rich-editor-target="editor"
+       data-action="input->admin--inline-rich-editor#onInput paste->admin--inline-rich-editor#onPaste keydown->admin--inline-rich-editor#onKeydown keyup->admin--inline-rich-editor#updateToolbarState mouseup->admin--inline-rich-editor#updateToolbarState"
+       class="cb-editor min-h-[140px] px-3 py-2.5 text-[14px] leading-relaxed text-[#1c1917] focus:outline-none"></div>
+
+  <%= hidden_field_tag name, value, data: { "admin--inline-rich-editor-target": "input" } %>
+</div>

data/lib/generators/ruby_cms/templates/views/admin/content_blocks/_row.html.erb

@@ -0,0 +1,60 @@
+<% content_block = local_assigns[:content_block] || local_assigns[:item] %>
+<% block = content_block.respond_to?(:content_block) ? content_block.content_block : content_block %>
+<% locale = content_block.respond_to?(:locale) ? content_block.locale : block.locale %>
+<% title = content_block.respond_to?(:title) ? content_block.title : block.title %>
+<% content_type = content_block.respond_to?(:content_type) ? content_block.content_type : block.content_type %>
+<% published = content_block.respond_to?(:published?) ? content_block.published? : block.published? %>
+<td data-column="key" class="py-1.5 px-3 align-middle">
+  <span class="inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[12px] font-medium bg-[#faf8f3] text-[#1c1917] border border-[#e9e4d4]"><%= block.key %></span>
+</td>
+<td data-column="locale" class="py-1.5 px-3 align-middle">
+  <span class="font-mono text-[11.5px] uppercase text-[#78716c]"><%= locale %></span>
+</td>
+<td data-column="title" class="py-1.5 px-3 align-middle text-[13px] text-[#1c1917] truncate max-w-[300px]"><%= title %></td>
+<td data-column="type" class="py-1.5 px-3 align-middle">
+  <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium border bg-blue-50 text-blue-700 border-blue-100 whitespace-nowrap"><%= content_type %></span>
+</td>
+<td data-column="published" class="py-1.5 px-3 align-middle">
+  <% if published %>
+    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium border bg-green-50 text-green-700 border-green-100 whitespace-nowrap">
+      <span class="w-1.5 h-1.5 rounded-full bg-green-600"></span>
+      <%= t("admin.pages.common.published", default: "Gepubliceerd") %>
+    </span>
+  <% else %>
+    <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium border bg-amber-50 text-amber-700 border-amber-100 whitespace-nowrap">
+      <span class="w-1.5 h-1.5 rounded-full bg-amber-600"></span>
+      <%= t("admin.pages.common.draft", default: "Concept") %>
+    </span>
+  <% end %>
+</td>
+<td class="py-1.5 px-3 align-middle text-right w-10">
+  <div class="inline-flex items-center justify-end" onclick="event.stopPropagation()">
+    <%= render RubyUI::DropdownMenu.new do %>
+      <%= render RubyUI::DropdownMenuTrigger.new do %>
+        <%= Button(variant: :ghost, size: :sm, icon: true, type: :button, aria_label: "Acties") do %>
+          <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="M12 5v.01M12 12v.01M12 19v.01" /></svg>
+        <% end %>
+      <% end %>
+      <%= render RubyUI::DropdownMenuContent.new do %>
+        <%= render RubyUI::DropdownMenuLabel.new { t("admin.pages.common.actions", default: "Acties") } %>
+        <%= render RubyUI::DropdownMenuItem.new(href: edit_admin_content_block_path(block), data: { turbo_frame: "_top" }) { t("admin.pages.common.edit", default: "Bewerk") } %>
+        <%= render RubyUI::DropdownMenuSeparator.new %>
+        <%= render RubyUI::DropdownMenuItem.new(class: "text-red-600 hover:!bg-red-50", data: { turbo_method: :delete, turbo_confirm: "Delete this content block? This cannot be undone.", turbo_frame: "_top" }, href: admin_content_block_path(block)) { t("admin.bulk_action_table.delete_selected", default: "Verwijderen") } %>
+      <% end %>
+    <% end %>
+  </div>
+  <template data-ruby-ui--context-menu-target="content">
+    <div role="menu" class="z-50 min-w-[180px] outline-none overflow-hidden rounded-md border border-[#e9e4d4] bg-white p-1 text-[#1c1917] shadow-md">
+      <div class="px-2 py-1 text-[10.5px] font-semibold uppercase tracking-[0.06em] text-[#a8a29e]"><%= t("admin.pages.common.actions", default: "Acties") %></div>
+      <a href="<%= edit_admin_content_block_path(block) %>" data-turbo-frame="_top" role="menuitem" class="flex items-center gap-2 px-2 py-1.5 rounded-sm text-[13px] hover:bg-[#faf8f3] cursor-pointer no-underline text-[#1c1917]">
+        <svg class="w-3.5 h-3.5 text-[#78716c]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+        <%= t("admin.pages.common.edit", default: "Bewerk") %>
+      </a>
+      <div class="h-px bg-[#e9e4d4] my-1"></div>
+      <a href="<%= admin_content_block_path(block) %>" data-turbo-method="delete" data-turbo-frame="_top" data-turbo-confirm="Delete this content block? This cannot be undone." role="menuitem" class="flex items-center gap-2 px-2 py-1.5 rounded-sm text-[13px] text-red-600 hover:bg-red-50 cursor-pointer no-underline">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+        <%= t("admin.bulk_action_table.delete_selected", default: "Verwijderen") %>
+      </a>
+    </div>
+  </template>
+</td>

data/lib/generators/ruby_cms/templates/views/admin/content_blocks/index.html.erb

@@ -0,0 +1,84 @@
+<%
+  bulk_action_buttons = []
+  begin
+    bulk_publish_url = bulk_publish_admin_content_blocks_path
+    bulk_action_buttons << {
+      name: "publish",
+      label: "Publish Selected",
+      url: bulk_publish_url,
+      confirm: "Are you sure you want to publish the selected content blocks?"
+    }
+  rescue NoMethodError, ActionController::UrlGenerationError
+  end
+
+  begin
+    bulk_unpublish_url = bulk_unpublish_admin_content_blocks_path
+    bulk_action_buttons << {
+      name: "unpublish",
+      label: "Unpublish Selected",
+      url: bulk_unpublish_url,
+      confirm: "Are you sure you want to unpublish the selected content blocks?"
+    }
+  rescue NoMethodError, ActionController::UrlGenerationError
+  end
+
+  begin
+    bulk_delete_url = bulk_delete_admin_content_blocks_path
+  rescue NoMethodError, ActionController::UrlGenerationError
+    bulk_delete_url = nil
+  end
+
+  content_block_total = (@pagination && @pagination[:total_count]) || (@content_blocks || []).size
+%>
+
+<%= AdminPage do %>
+  <%= AdminPageHeader(
+    title: t("ruby_cms.admin.nav.content_blocks", default: "Content blocks"),
+    subtitle: pluralize(content_block_total, "content block"),
+    breadcrumbs: [
+      { label: t("admin.pages.common.admin", default: "Admin"), url: admin_root_path },
+      { label: t("ruby_cms.admin.nav.content_blocks", default: "Content blocks") }
+    ]
+  ) do %>
+    <%= link_to new_admin_content_block_path, class: "inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-blue-600 text-white text-[12.5px] font-medium hover:bg-blue-700 transition-colors no-underline", data: { turbo_frame: "_top" } do %>
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6" /></svg>
+      New content block
+    <% end %>
+  <% end %>
+  <%= render partial: "admin/shared/data_table", locals: {
+    id: "admin_table_content",
+    search_url: admin_content_blocks_path,
+    search_param: :q,
+    search_placeholder: t("ruby_cms.admin.content_blocks.search_placeholder", default: "Zoek op key, titel of inhoud…"),
+    columns_toggle: [
+      { key: :key,       label: "Key" },
+      { key: :locale,    label: "Locale" },
+      { key: :title,     label: "Title" },
+      { key: :type,      label: "Type" },
+      { key: :published, label: "Published" }
+    ],
+    headers: [
+      { key: :key,       label: "Key",       width: "200px" },
+      { key: :locale,    label: "Locale",    width: "80px" },
+      { key: :title,     label: "Title" },
+      { key: :type,      label: "Type",      width: "120px" },
+      { key: :published, label: "Published", width: "120px" },
+      { key: :actions,   label: "", actions: true, width: "40px", align: :right }
+    ],
+    bulk_actions: bulk_action_buttons.map { |b| { label: b[:label], url: b[:url], method: (b[:method] || :patch), confirm: b[:confirm] } },
+    bulk_delete_url: bulk_delete_url,
+    collection: @content_blocks || [],
+    row_partial: "admin/content_blocks/row",
+    row_click_url: ->(item) { admin_content_block_path(item.respond_to?(:content_block) ? item.content_block : item) },
+    empty_state: {
+      title: t("ruby_cms.admin.content_blocks.no_results", default: "Geen content blocks"),
+      description: t("ruby_cms.admin.content_blocks.empty_description", default: "Maak je eerste content block aan."),
+      primary_label: "New content block",
+      primary_href: new_admin_content_block_path,
+      icon: "document"
+    },
+    pagination: @pagination,
+    pagination_path: admin_content_blocks_path,
+    preserved_query: { q: params[:q] }.compact
+  } %>
+<% end %>

data/lib/generators/ruby_cms/templates/views/admin/content_blocks/new.html.erb

@@ -0,0 +1,18 @@
+<%= AdminPage do %>
+  <%= AdminPageHeader(
+    title: t("ruby_cms.admin.content_blocks.new_title", default: "Nieuw contentblok"),
+    breadcrumbs: [
+      { label: t("ruby_cms.admin.nav.admin", default: "Admin"), url: admin_root_path },
+      { label: t("ruby_cms.admin.nav.content_blocks", default: "Contentblokken"), url: admin_content_blocks_path },
+      { label: t("ruby_cms.admin.content_blocks.new_title", default: "Nieuw contentblok") }
+    ]
+  ) do %>
+    <%= link_to admin_content_blocks_path,
+        class: "inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-white border border-[#e9e4d4] text-[#1c1917] text-[12.5px] font-medium hover:bg-[#faf8f3] transition-colors no-underline" do %>
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
+      <%= t("ruby_cms.admin.common.list", default: "Lijst") %>
+    <% end %>
+  <% end %>
+
+  <%= render "form" %>
+<% end %>

data/{app/views/ruby_cms → lib/generators/ruby_cms/templates/views}/admin/content_blocks/show.html.erb

@@ -1,42 +1,46 @@
-<%= render RubyCms::Admin::AdminPageHeader.new(
+<%= AdminPage do %>
+<%= AdminPageHeader(
   title: @content_block.key,
   subtitle: ruby_cms_locale_display_name(@content_block.locale),
   breadcrumbs: [
-    { label: t("ruby_cms.admin.nav.admin", default: "Admin"), url: ruby_cms_admin_root_path },
-    { label: t("ruby_cms.admin.nav.content_blocks", default: "Content Blocks"), url: ruby_cms_admin_content_blocks_path },
+    { label: t("ruby_cms.admin.nav.admin", default: "Admin"), url: admin_root_path },
+    { label: t("ruby_cms.admin.nav.content_blocks", default: "Contentblokken"), url: admin_content_blocks_path },
     { label: @content_block.key }
   ]
 ) do %>
   <% if @content_block.published? %>
-    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full border bg-emerald-100 text-emerald-700 border-emerald-200">Published</span>
+    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full border bg-emerald-100 text-emerald-700 border-emerald-200">Gepubliceerd</span>
   <% else %>
-    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full border bg-muted text-muted-foreground border-border/60">Draft</span>
+    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full border bg-muted text-muted-foreground border-border/60">Concept</span>
   <% end %>
 
-  <%= link_to ruby_cms_admin_content_block_path(@content_block),
-      data: { turbo_method: :delete, turbo_confirm: t("ruby_cms.admin.content_blocks.confirm_delete", default: "Are you sure?") },
+  <%= link_to admin_content_block_path(@content_block),
+      data: {
+        turbo_method: :delete,
+        turbo_confirm: t("ruby_cms.admin.content_blocks.confirm_delete", default: "Are you sure?"),
+        confirm: t("ruby_cms.admin.content_blocks.confirm_delete", default: "Are you sure?")
+      },
       class: "inline-flex items-center justify-center size-8 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors" do %>
     <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
     </svg>
   <% end %>
 <% end %>
 
 <%= form_with model: @content_block,
-              url: ruby_cms_admin_content_block_path(@content_block),
+              url: admin_content_block_path(@content_block),
               method: :patch,
               id: "content-block-form",
               data: { turbo: false } do |f| %>
-  <div class="<%= RubyCms::Admin::AdminResourceCard::CARD_CLASS %>">
-    <div class="<%= RubyCms::Admin::AdminResourceCard::GRID_CLASS %>"
-         data-controller="ruby-cms--locale-tabs">
+    <div class="<%= RubyUI::AdminResourceCard::GRID_CLASS %>"
+         data-controller="admin--locale-tabs">
       <%# ── Form Fields (Left 2/3) ── %>
-      <div class="<%= RubyCms::Admin::AdminResourceCard::MAIN_CLASS %>">
+      <div class="<%= RubyUI::AdminResourceCard::MAIN_CLASS %>">
         <% if @content_block.errors.any? %>
           <div class="rounded-lg border border-destructive/30 bg-destructive/5 p-4">
             <div class="flex gap-3">
               <svg class="size-5 text-destructive shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
               </svg>
               <div>
                 <p class="text-sm font-medium text-destructive"><%= t("ruby_cms.admin.content_blocks.errors_title", default: "Please fix the following errors:") %></p>
@@ -53,16 +57,16 @@
         <%# ── Key & Content Type ── %>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
           <div>
-            <label class="<%= RubyCms::Admin::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.key", default: "Key") %></label>
+            <label class="<%= RubyUI::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.key", default: "Key") %></label>
             <span class="block text-sm font-mono text-foreground py-2"><%= @content_block.key %></span>
             <%= f.hidden_field :key, name: nil, value: @content_block.key %>
           </div>
 
           <div>
-            <label class="<%= RubyCms::Admin::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.content_type", default: "Content Type") %></label>
+            <label class="<%= RubyUI::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.content_type", default: "Content Type") %></label>
             <%= select_tag "content_block[content_type]",
                 options_for_select(::ContentBlock::CONTENT_TYPES, @content_block.content_type),
-                class: RubyCms::Admin::AdminResourceCard::INPUT_CLASS %>
+                class: RubyUI::AdminResourceCard::INPUT_CLASS %>
           </div>
         </div>
 
@@ -89,12 +93,12 @@
                         aria-selected="<%= idx == 0 ? "true" : "false" %>"
                         aria-controls="locale-panel-<%= locale_s %>"
                         id="locale-tab-<%= locale_s %>"
-                        data-ruby-cms--locale-tabs-target="tab"
+                        data-admin--locale-tabs-target="tab"
                         data-panel-id="locale-panel-<%= locale_s %>"
                         data-locale-label="<%= ruby_cms_locale_display_name(locale_s) %>"
                         data-active-classes="<%= tab_active %>"
                         data-inactive-classes="<%= tab_inactive %>"
-                        data-action="click->ruby-cms--locale-tabs#switchTab"
+                        data-action="click->admin--locale-tabs#switchTab"
                         class="px-3 py-1.5 rounded-md text-xs font-medium border-none cursor-pointer transition-colors <%= idx == 0 ? tab_active : tab_inactive %>">
                   <%= ruby_cms_locale_display_name(locale_s) %>
                 </button>
@@ -105,35 +109,35 @@
               <div id="locale-panel-<%= locale_s %>"
                    role="tabpanel"
                    aria-labelledby="locale-tab-<%= locale_s %>"
-                   class="p-5 <%= idx > 0 ? 'hidden' : '' %>"
+                   class="p-5 <%= idx > 0 ? "hidden" : "" %>"
                    data-locale-panel>
 
                 <%= hidden_field_tag "content_block[locales][#{locale_s}][locale]", locale_s %>
 
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label class="<%= RubyCms::Admin::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.title", default: "Title") %></label>
+                    <label class="<%= RubyUI::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.title", default: "Title") %></label>
                     <%= text_field_tag "content_block[locales][#{locale_s}][title]",
                                        block.title,
-                                       class: RubyCms::Admin::AdminResourceCard::INPUT_CLASS %>
+                                       autocomplete: "off",
+                                       class: RubyUI::AdminResourceCard::INPUT_CLASS %>
                   </div>
 
+                  <% is_rich = @content_block.content_type == "rich_text" %>
                   <div class="sm:col-span-2">
-                    <label class="<%= RubyCms::Admin::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.content", default: "Content") %></label>
-                    <%= text_area_tag "content_block[locales][#{locale_s}][content]",
-                                      block.content,
-                                      rows: 5,
-                                      class: "#{RubyCms::Admin::AdminResourceCard::INPUT_CLASS} resize-y" %>
+                    <label class="<%= RubyUI::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.content", default: "Inhoud") %></label>
+                    <% if is_rich %>
+                      <%= render "admin/content_blocks/rich_field",
+                          name: "content_block[locales][#{locale_s}][content]",
+                          value: (block.content.presence || rich_content_body_html_for_view(block)).to_s %>
+                      <p class="<%= RubyUI::AdminResourceCard::HINT_CLASS %>">Opmaak: vet, cursief, kleur en grootte — net als de visuele editor.</p>
+                    <% else %>
+                      <%= text_area_tag "content_block[locales][#{locale_s}][content]",
+                                        block.content,
+                                        rows: 5,
+                                        class: "#{RubyUI::AdminResourceCard::INPUT_CLASS} resize-y" %>
+                    <% end %>
                   </div>
-
-                  <% if ::ContentBlock.respond_to?(:action_text_available?) && ::ContentBlock.action_text_available? && block.persisted? && block.respond_to?(:rich_content) %>
-                    <div class="sm:col-span-2">
-                      <label class="<%= RubyCms::Admin::AdminResourceCard::LABEL_CLASS %>"><%= t("ruby_cms.admin.content_blocks.rich_content", default: "Rich Content") %></label>
-                      <%= rich_text_area_tag "content_block[locales][#{locale_s}][rich_content]",
-                                             block.rich_content.present? ? block.rich_content.to_s : "",
-                                             class: "rounded-lg border border-border bg-background text-sm shadow-sm focus:outline-none" %>
-                    </div>
-                  <% end %>
                 </div>
               </div>
             <% end %>
@@ -142,35 +146,35 @@
       </div>
 
       <%# ── Details Sidebar (Right 1/3) ── %>
-      <div class="<%= RubyCms::Admin::AdminResourceCard::SIDEBAR_CLASS %>">
+      <div class="<%= RubyUI::AdminResourceCard::SIDEBAR_CLASS %>">
         <div>
-          <h3 class="<%= RubyCms::Admin::AdminResourceCard::SECTION_TITLE_CLASS %>">Details</h3>
+          <h3 class="<%= RubyUI::AdminResourceCard::SECTION_TITLE_CLASS %>">Details</h3>
           <dl class="space-y-4">
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">ID</dt>
-              <dd class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_VALUE_CLASS %> font-mono"><%= @content_block.id %></dd>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">ID</dt>
+              <dd class="<%= RubyUI::AdminResourceCard::DETAIL_VALUE_CLASS %> font-mono"><%= @content_block.id %></dd>
             </div>
 
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Key</dt>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Key</dt>
               <dd class="mt-1">
                 <code class="text-xs bg-muted px-2 py-1 rounded-md font-mono text-foreground"><%= @content_block.key %></code>
               </dd>
             </div>
 
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Locale</dt>
-              <dd class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_VALUE_CLASS %>"
-                  data-ruby-cms--locale-tabs-target="localeLabel"><%= ruby_cms_locale_display_name(@content_block.locale) %></dd>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Locale</dt>
+              <dd class="<%= RubyUI::AdminResourceCard::DETAIL_VALUE_CLASS %>"
+                  data-admin--locale-tabs-target="localeLabel"><%= ruby_cms_locale_display_name(@content_block.locale) %></dd>
             </div>
 
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Type</dt>
-              <dd class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= @content_block.content_type %></dd>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Type</dt>
+              <dd class="<%= RubyUI::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= @content_block.content_type %></dd>
             </div>
 
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Status</dt>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Status</dt>
               <dd class="mt-1">
                 <% if @content_block.published? %>
                   <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-200">Published</span>
@@ -183,31 +187,31 @@
         </div>
 
         <div class="border-t border-border/60 pt-5">
-          <h3 class="<%= RubyCms::Admin::AdminResourceCard::SECTION_TITLE_CLASS %> mb-3">Timestamps</h3>
+          <h3 class="<%= RubyUI::AdminResourceCard::SECTION_TITLE_CLASS %> mb-3">Timestamps</h3>
           <dl class="space-y-4">
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Created</dt>
-              <dd class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= @content_block.created_at.strftime("%b %d, %Y") %></dd>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Created</dt>
+              <dd class="<%= RubyUI::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= @content_block.created_at.strftime("%b %d, %Y") %></dd>
             </div>
 
             <div>
-              <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Last Updated</dt>
-              <dd class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= @content_block.updated_at.strftime("%b %d, %Y") %></dd>
+              <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Last Updated</dt>
+              <dd class="<%= RubyUI::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= @content_block.updated_at.strftime("%b %d, %Y") %></dd>
             </div>
 
             <% if @content_block.updated_by.present? %>
               <div>
-                <dt class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_LABEL_CLASS %>">Updated By</dt>
-                <dd class="<%= RubyCms::Admin::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= ruby_cms_user_display(@content_block.updated_by) %></dd>
+                <dt class="<%= RubyUI::AdminResourceCard::DETAIL_LABEL_CLASS %>">Updated By</dt>
+                <dd class="<%= RubyUI::AdminResourceCard::DETAIL_VALUE_CLASS %>"><%= ruby_cms_user_display(@content_block.updated_by) %></dd>
               </div>
             <% end %>
           </dl>
         </div>
 
         <div class="border-t border-border/60 pt-5">
-          <h3 class="<%= RubyCms::Admin::AdminResourceCard::SECTION_TITLE_CLASS %> mb-3">Versiegeschiedenis</h3>
+          <h3 class="<%= RubyUI::AdminResourceCard::SECTION_TITLE_CLASS %> mb-3">Versiegeschiedenis</h3>
           <%= link_to "Bekijk alle versies",
-              ruby_cms_admin_content_block_versions_path(@content_block),
+              admin_content_block_versions_path(@content_block),
               class: "inline-flex items-center gap-2 text-sm text-primary hover:underline" %>
           <% if @content_block.respond_to?(:versions) && @content_block.versions.any? %>
             <p class="text-xs text-muted-foreground mt-2">
@@ -219,7 +223,7 @@
         <%# ── Preview per locale ── %>
         <% if @blocks_by_locale.present? && @blocks_by_locale.values.any? { |b| b.title.present? || b.content_body.present? } %>
           <div class="border-t border-border/60 pt-5">
-            <h3 class="<%= RubyCms::Admin::AdminResourceCard::SECTION_TITLE_CLASS %> mb-3">Content Preview</h3>
+            <h3 class="<%= RubyUI::AdminResourceCard::SECTION_TITLE_CLASS %> mb-3">Content Preview</h3>
             <div class="space-y-3">
               <% @blocks_by_locale.each do |locale_s, block| %>
                 <% next if block.title.blank? && block.content_body.blank? %>
@@ -240,9 +244,11 @@
     </div>
 
     <%# ── Actions Footer ── %>
-    <div class="<%= RubyCms::Admin::AdminResourceCard::ACTIONS_CLASS %>">
-      <%= link_to t("ruby_cms.admin.common.cancel", default: "Cancel"), ruby_cms_admin_content_blocks_path, class: RubyCms::Admin::AdminResourceCard::CANCEL_CLASS %>
-      <%= f.submit t("ruby_cms.admin.common.save", default: "Save Changes"), class: RubyCms::Admin::AdminResourceCard::SUBMIT_CLASS %>
+    <div class="<%= RubyUI::AdminResourceCard::ACTIONS_CLASS %>">
+      <%= link_to t("ruby_cms.admin.common.cancel", default: "Annuleren"), admin_content_blocks_path, class: RubyUI::AdminResourceCard::CANCEL_CLASS %>
+      <%= f.submit t("ruby_cms.admin.common.save", default: "Wijzigingen opslaan"), class: RubyUI::AdminResourceCard::SUBMIT_CLASS %>
     </div>
-  </div>
+
+  <%= render "audits" %>
+<% end %>
 <% end %>