ruby_cms 0.2.1.1 → 1.0.1

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

@@ -0,0 +1,509 @@
+<%
+  nav_main_rows   = ruby_cms_nav_sidebar_rows(section: :main)
+  nav_bottom_rows = ruby_cms_nav_sidebar_rows(section: :settings)
+  nav_item_entries = @active_tab == "navigation" ? @entries_for_tab.reject { |e| e.key.to_s == "nav_order" } : []
+  nav_sub = params[:nav_sub].to_s.presence || "order"
+  entries_for_grid = (@active_tab == "navigation" || @active_tab == "overview") ? [] : @entries_for_tab
+  is_navigation = @active_tab == "navigation"
+  is_overview   = @active_tab == "overview"
+  settings_url = admin_settings_path
+  nav_order_url = admin_settings_nav_order_path
+
+  rail_categories = [ "overview" ] + @categories
+%>
+
+<%= AdminPage do %>
+<%= AdminPageHeader(
+  title: t("ruby_cms.admin.settings.title", default: "Settings"),
+  subtitle: is_overview ? "Systeem en configuratie overzicht." : settings_tab_description(@active_tab).presence || settings_tab_label(@active_tab),
+  breadcrumbs: [
+    { label: t("ruby_cms.admin.breadcrumb.admin", default: "Admin"), url: admin_root_path },
+    { label: t("ruby_cms.admin.settings.title", default: "Settings") }
+  ]
+) %>
+
+<div class="min-w-0 overflow-hidden bg-white">
+  <div class="flex min-w-0 flex-col lg:flex-row lg:h-[min(100vh-10rem,64rem)]">
+
+    <%# ─────────── Left rail (v2) ─────────── %>
+    <aside class="max-w-full shrink-0 border-b border-[#e9e4d4] bg-[#faf8f3] min-w-0 lg:w-60 lg:border-b-0 lg:border-r flex flex-col">
+      <div class="p-2.5 lg:flex-1 lg:overflow-y-auto">
+        <%# Search box %>
+        <div class="mb-2.5 flex items-center gap-2 px-2.5 py-1.5 rounded-md border border-[#e9e4d4] bg-white">
+          <svg class="h-3.5 w-3.5 text-[#a8a29e] flex-shrink-0" 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>
+          <input
+            type="text"
+            autocomplete="off"
+            placeholder="Zoek instelling…"
+            class="flex-1 border-0 bg-transparent text-[12.5px] text-[#1c1917] placeholder:text-[#a8a29e] focus:outline-none"
+            data-controller="admin--settings-rail-search"
+            data-action="input->admin--settings-rail-search#filter">
+        </div>
+
+        <%# Overview entry %>
+        <% overview_active = is_overview %>
+        <%= link_to admin_settings_path(tab: "overview"),
+            data: { settings_rail_label: "overview" },
+            class: [
+              "group flex items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] leading-snug transition-colors no-underline",
+              overview_active ? "bg-white text-[#1c1917] font-medium ring-1 ring-[#e9e4d4] shadow-sm" : "text-[#57534e] hover:bg-white/70 hover:text-[#1c1917]"
+            ].join(" ") do %>
+          <span class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md <%= overview_active ? "bg-blue-50 text-blue-600 border border-blue-100" : "text-[#78716c]" %>">
+            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <%= settings_rail_icon_svg("overview") %>
+            </svg>
+          </span>
+          <span class="min-w-0 flex-1 truncate">Overzicht</span>
+        <% end %>
+
+        <%# Section header %>
+        <p class="mt-3 mb-1 px-2.5 text-[10.5px] font-semibold uppercase tracking-[0.08em] text-[#a8a29e]">
+          Categorieën
+        </p>
+
+        <nav class="flex flex-col gap-0.5" aria-label="Settings categories">
+          <% @categories.each do |category| %>
+            <% category_s = category.to_s %>
+            <% active = (@active_tab.to_s == category_s) %>
+            <%= link_to admin_settings_path(tab: category_s),
+                data: { settings_rail_label: settings_tab_label(category_s).to_s.downcase },
+                class: [
+                  "group flex items-center gap-2.5 rounded-md px-2.5 py-2 text-[13px] leading-snug transition-colors no-underline",
+                  active ? "bg-white text-[#1c1917] font-medium ring-1 ring-[#e9e4d4] shadow-sm" : "text-[#57534e] hover:bg-white/70 hover:text-[#1c1917]"
+                ].join(" ") do %>
+              <span class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md <%= active ? "bg-blue-50 text-blue-600 border border-blue-100" : "text-[#78716c]" %>">
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <%= settings_rail_icon_svg(category_s) %>
+                </svg>
+              </span>
+              <span class="min-w-0 flex-1 truncate"><%= settings_tab_label(category_s) %></span>
+            <% end %>
+          <% end %>
+        </nav>
+      </div>
+    </aside>
+
+    <%# ─────────── Right content ─────────── %>
+    <div class="flex min-w-0 flex-1 flex-col bg-white min-h-0">
+
+      <% if is_overview %>
+        <%# ───────── OVERVIEW PANE ───────── %>
+        <div class="flex min-h-0 flex-1 flex-col overflow-y-auto px-6 py-5 gap-4">
+
+          <%# Status row %>
+          <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-2.5">
+            <% maintenance = ActiveModel::Type::Boolean.new.cast(RubyCms::Settings.get(:maintenance_mode, default: false)) %>
+            <% site_tone   = maintenance ? "amber" : "green" %>
+            <%= link_to admin_settings_path(tab: "general"),
+                class: "flex items-center gap-3 px-3.5 py-3 bg-white border border-[#e9e4d4] rounded-lg hover:bg-[#faf8f3] transition-colors no-underline min-w-0 #{site_tone == 'amber' ? 'ring-1 ring-amber-100' : ''}" do %>
+              <span class="w-9 h-9 flex-shrink-0 rounded-[10px] grid place-items-center <%= site_tone == "amber" ? "bg-amber-50 text-amber-700" : "bg-green-50 text-green-700" %>">
+                <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <% if maintenance %>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M4.93 19h14.14c1.54 0 2.5-1.67 1.73-3L13.73 4a2 2 0 00-3.46 0L3.2 16c-.77 1.33.19 3 1.73 3z" />
+                  <% else %>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  <% end %>
+                </svg>
+              </span>
+              <div class="flex-1 min-w-0">
+                <div class="text-[11px] text-[#78716c] font-medium">Site status</div>
+                <div class="text-[16px] font-semibold tracking-[-0.01em] text-[#1c1917] mt-0.5"><%= maintenance ? "Maintenance" : "Live" %></div>
+                <div class="text-[11.5px] text-[#a8a29e] truncate"><%= Rails.env %> omgeving</div>
+              </div>
+              <svg class="w-3.5 h-3.5 text-[#a8a29e]" 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>
+            <% end %>
+
+            <% db_ok = (ActiveRecord::Base.connection.active? rescue false) %>
+            <div class="flex items-center gap-3 px-3.5 py-3 bg-white border border-[#e9e4d4] rounded-lg min-w-0 <%= db_ok ? "" : "ring-1 ring-red-100" %>">
+              <span class="w-9 h-9 flex-shrink-0 rounded-[10px] grid place-items-center <%= db_ok ? "bg-green-50 text-green-700" : "bg-red-50 text-red-700" %>">
+                <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2 4 3 8 3s8-1 8-3V7" />
+                  <ellipse cx="12" cy="7" rx="8" ry="3" stroke-width="2" />
+                </svg>
+              </span>
+              <div class="flex-1 min-w-0">
+                <div class="text-[11px] text-[#78716c] font-medium">Database</div>
+                <div class="text-[16px] font-semibold tracking-[-0.01em] text-[#1c1917] mt-0.5"><%= db_ok ? "Verbonden" : "Onbereikbaar" %></div>
+                <div class="text-[11.5px] text-[#a8a29e] truncate"><%= @system_info[:db] %></div>
+              </div>
+            </div>
+
+            <% analytics_visible = RubyCms::SettingsRegistry.entries.values.any? { |e| e.category.to_s == "analytics" } %>
+            <%= link_to admin_settings_path(tab: "analytics"),
+                class: "flex items-center gap-3 px-3.5 py-3 bg-white border border-[#e9e4d4] rounded-lg hover:bg-[#faf8f3] transition-colors no-underline min-w-0" do %>
+              <span class="w-9 h-9 flex-shrink-0 rounded-[10px] grid place-items-center bg-blue-50 text-blue-700">
+                <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+              </span>
+              <div class="flex-1 min-w-0">
+                <div class="text-[11px] text-[#78716c] font-medium">Analytics</div>
+                <div class="text-[16px] font-semibold tracking-[-0.01em] text-[#1c1917] mt-0.5"><%= analytics_visible ? "Actief" : "Uit" %></div>
+                <div class="text-[11.5px] text-[#a8a29e] truncate"><%= RubyCms::Settings.get(:analytics_default_period, default: "week") %> default</div>
+              </div>
+              <svg class="w-3.5 h-3.5 text-[#a8a29e]" 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>
+            <% end %>
+
+            <%= link_to admin_settings_path(tab: "navigation"),
+                class: "flex items-center gap-3 px-3.5 py-3 bg-white border border-[#e9e4d4] rounded-lg hover:bg-[#faf8f3] transition-colors no-underline min-w-0" do %>
+              <span class="w-9 h-9 flex-shrink-0 rounded-[10px] grid place-items-center bg-green-50 text-green-700">
+                <svg class="w-[18px] h-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <%= settings_rail_icon_svg("navigation") %>
+                </svg>
+              </span>
+              <div class="flex-1 min-w-0">
+                <div class="text-[11px] text-[#78716c] font-medium">Navigatie</div>
+                <div class="text-[16px] font-semibold tracking-[-0.01em] text-[#1c1917] mt-0.5"><%= (nav_main_rows.size + nav_bottom_rows.size) %> items</div>
+                <div class="text-[11.5px] text-[#a8a29e] truncate">Volgorde + zichtbaarheid</div>
+              </div>
+              <svg class="w-3.5 h-3.5 text-[#a8a29e]" 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>
+            <% end %>
+          </div>
+
+          <%# Two-column lower %>
+          <div class="grid grid-cols-1 xl:grid-cols-[1.4fr_1fr] gap-3.5">
+
+            <%# Recent changes panel %>
+            <div class="rounded-xl border border-[#e9e4d4] bg-white overflow-hidden">
+              <div class="flex items-start justify-between px-3.5 py-3 border-b border-[#e9e4d4]">
+                <div>
+                  <p class="text-[13px] font-semibold text-[#1c1917] m-0">Recente wijzigingen</p>
+                  <p class="text-[11.5px] text-[#78716c] m-0 mt-0.5">Laatste aanpassingen aan settings.</p>
+                </div>
+              </div>
+              <div class="px-0 py-1">
+                <% if @recent_changes.any? %>
+                  <% @recent_changes.each_with_index do |pref, i| %>
+                    <% entry = RubyCms::SettingsRegistry.fetch(pref.key) %>
+                    <% target_cat = entry&.category&.to_s %>
+                    <% label = entry ? setting_label(entry) : pref.key.to_s.humanize %>
+                    <div class="flex items-start gap-2.5 px-3.5 py-2.5 <%= "border-t border-[#e9e4d4]" unless i.zero? %>">
+                      <div class="w-6 h-6 rounded-[6px] grid place-items-center text-[11px] font-bold flex-shrink-0"
+                           style="background: linear-gradient(135deg, #ddd6fe, #c4b5fd); color: #4c1d95;">
+                        <%= ((current_user_cms&.email_address || "?").to_s.first || "?").upcase %>
+                      </div>
+                      <div class="flex-1 min-w-0">
+                        <div class="text-[13px] font-medium text-[#1c1917]"><%= label %></div>
+                        <div class="flex items-center gap-1.5 text-[11px] text-[#78716c] mt-0.5 flex-wrap">
+                          <span class="font-mono text-[10.5px] px-1.5 py-px rounded bg-[#faf8f3] border border-[#e9e4d4] text-[#57534e]"><%= "#{pref.category}.#{pref.key}" %></span>
+                          <span>·</span>
+                          <span><%= time_ago_in_words(pref.updated_at) %> geleden</span>
+                        </div>
+                      </div>
+                      <% if target_cat %>
+                        <%= link_to admin_settings_path(tab: target_cat),
+                            class: "w-6 h-6 rounded grid place-items-center text-[#a8a29e] hover:bg-[#faf8f3] hover:text-[#1c1917] no-underline flex-shrink-0",
+                            aria: { label: "Open" } do %>
+                          <svg class="w-[13px] h-[13px]" 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>
+                        <% end %>
+                      <% end %>
+                    </div>
+                  <% end %>
+                <% else %>
+                  <p class="m-0 px-3.5 py-6 text-center text-[12px] text-[#78716c]">Nog geen wijzigingen.</p>
+                <% end %>
+              </div>
+            </div>
+
+            <%# System info panel %>
+            <div class="rounded-xl border border-[#e9e4d4] bg-white overflow-hidden">
+              <div class="flex items-start justify-between px-3.5 py-3 border-b border-[#e9e4d4]">
+                <div>
+                  <p class="text-[13px] font-semibold text-[#1c1917] m-0">Systeem</p>
+                  <p class="text-[11.5px] text-[#78716c] m-0 mt-0.5">Versie- en omgevingsinformatie.</p>
+                </div>
+              </div>
+              <div class="px-3.5 py-2">
+                <% rows = [
+                  [ "Omgeving",    @system_info[:env],      "Hosting-omgeving", { tone: (@system_info[:env] == "production" ? "green" : "amber"), badge: @system_info[:env].upcase } ],
+                  [ "Rails",       @system_info[:rails],    "production" ],
+                  [ "Ruby",        @system_info[:ruby],     "bundled" ],
+                  [ "Database",    @system_info[:db],       nil ],
+                  [ "Cache",       @system_info[:cache],    "geconfigureerd" ],
+                  [ "Registry",    "#{@system_info[:registry]} settings", "geregistreerd" ],
+                  [ "Preferences", "#{@system_info[:prefs]} opgeslagen",  "in database" ]
+                ] %>
+                <% rows.each_with_index do |(label, value, sub, meta), i| %>
+                  <div class="grid grid-cols-[100px_1fr] gap-3 items-start py-2 <%= "border-t border-[#e9e4d4]" unless i.zero? %>">
+                    <div class="text-[11.5px] text-[#78716c] font-medium"><%= label %></div>
+                    <div>
+                      <div class="flex items-center gap-2 text-[13px] text-[#1c1917]">
+                        <span><%= value %></span>
+                        <% if meta&.dig(:badge) %>
+                          <% tone = meta[:tone] || "neutral" %>
+                          <% tone_classes = case tone
+                             when "green" then "bg-green-50 text-green-700 border-green-100"
+                             when "amber" then "bg-amber-50 text-amber-700 border-amber-100"
+                             else              "bg-[#faf8f3] text-[#57534e] border-[#e9e4d4]"
+                             end %>
+                          <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[10.5px] font-medium border <%= tone_classes %>">
+                            <% if tone == "green" %><span class="w-1.5 h-1.5 rounded-full bg-green-500"></span><% end %>
+                            <%= meta[:badge] %>
+                          </span>
+                        <% end %>
+                      </div>
+                      <% if sub %><div class="text-[11px] text-[#a8a29e] mt-0.5"><%= sub %></div><% end %>
+                    </div>
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+          <%# Quick links %>
+          <div class="rounded-xl border border-[#e9e4d4] bg-white overflow-hidden">
+            <div class="px-3.5 py-3 border-b border-[#e9e4d4]">
+              <p class="text-[13px] font-semibold text-[#1c1917] m-0">Snel naar…</p>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-1.5 p-3">
+              <% @categories.each do |category| %>
+                <% category_s = category.to_s %>
+                <%= link_to admin_settings_path(tab: category_s),
+                    class: "flex items-center gap-2.5 p-2.5 rounded-lg border border-transparent hover:bg-[#faf8f3] hover:border-[#e9e4d4] transition-colors no-underline text-left min-w-0" do %>
+                  <span class="w-8 h-8 rounded-lg grid place-items-center bg-[#faf8f3] text-[#57534e] flex-shrink-0">
+                    <svg class="w-[15px] h-[15px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <%= settings_rail_icon_svg(category_s) %>
+                    </svg>
+                  </span>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-[13px] font-semibold text-[#1c1917] truncate"><%= settings_tab_label(category_s) %></div>
+                    <div class="text-[11.5px] text-[#78716c] truncate mt-px"><%= settings_category_short_desc(category_s) %></div>
+                  </div>
+                  <svg class="w-3.5 h-3.5 text-[#a8a29e] flex-shrink-0" 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>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+      <% elsif is_navigation %>
+        <%# ───────── NAVIGATION PANE (unchanged behavior, lighter chrome) ───────── %>
+        <div class="border-b border-[#e9e4d4] px-6 py-5">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 class="text-[18px] font-semibold tracking-[-0.015em] text-[#1c1917] m-0">
+                <%= t("ruby_cms.admin.settings.navigation_title", default: "Navigation") %>
+              </h2>
+              <p class="mt-1 text-[13px] text-[#78716c] m-0">
+                <%= t("ruby_cms.admin.settings.navigation_hint", default: "Reorder items or choose what appears in the sidebar.") %>
+              </p>
+            </div>
+            <div class="inline-flex max-w-full shrink-0 flex-wrap gap-0.5 rounded-md bg-[#faf8f3] border border-[#e9e4d4] p-0.5 sm:flex-nowrap">
+              <%= link_to admin_settings_path(tab: "navigation", nav_sub: "order"),
+                  class: "px-3 py-1 text-[12.5px] font-medium no-underline transition-all #{nav_sub == 'order' ? 'bg-white text-[#1c1917] shadow-sm ring-1 ring-[#e9e4d4] rounded-[5px]' : 'text-[#57534e] hover:text-[#1c1917]'}" do %>
+                <%= t("ruby_cms.admin.settings.nav_order_tab", default: "Order") %>
+              <% end %>
+              <%= link_to admin_settings_path(tab: "navigation", nav_sub: "items"),
+                  class: "px-3 py-1 text-[12.5px] font-medium no-underline transition-all #{nav_sub == 'items' ? 'bg-white text-[#1c1917] shadow-sm ring-1 ring-[#e9e4d4] rounded-[5px]' : 'text-[#57534e] hover:text-[#1c1917]'}" do %>
+                <%= t("ruby_cms.admin.settings.nav_items_tab", default: "Visibility") %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex min-h-0 flex-1 flex-col overflow-y-auto px-6 py-5">
+          <% if nav_sub == "order" %>
+            <%= form_with url: settings_url, method: :patch, local: true, html: { id: "nav_order_form", class: "flex flex-1 flex-col space-y-6", data: { turbo: false } } do %>
+              <%= hidden_field_tag :tab, "navigation" %>
+              <div class="grid flex-1 gap-6 lg:grid-cols-2">
+                <% [
+                  [ "main", nav_main_rows, t("ruby_cms.nav.main", default: "Main") ],
+                  [ "bottom", nav_bottom_rows, t("ruby_cms.nav.settings", default: "Settings") ]
+                ].each do |list_type, rows, heading| %>
+                  <div>
+                    <div class="mb-2 flex items-baseline justify-between gap-2">
+                      <h3 class="text-[10.5px] font-semibold uppercase tracking-[0.06em] text-[#a8a29e]"><%= heading %></h3>
+                      <span class="text-[11.5px] text-[#a8a29e]"><%= t("ruby_cms.admin.settings.drag_hint", default: "Drag to reorder") %></span>
+                    </div>
+                    <ul class="divide-y divide-[#e9e4d4] rounded-lg border border-[#e9e4d4] bg-white"
+                        data-list-type="<%= list_type %>"
+                        data-controller="admin--nav-order-sortable"
+                        data-admin--nav-order-sortable-settings-url-value="<%= nav_order_url %>">
+                      <% rows.each do |row| %>
+                        <% if row[:type] == :link %>
+                          <% entry = row[:entry] %>
+                          <li class="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-[#faf8f3]" data-key="<%= entry[:key] %>" draggable="true">
+                            <span class="cursor-grab select-none text-[#a8a29e]" aria-hidden="true">⋮⋮</span>
+                            <% if entry[:icon].present? %>
+                              <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[#e9e4d4] bg-white text-[#78716c]">
+                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                  <%= ruby_cms_safe_svg_fragment(entry[:icon]) %>
+                                </svg>
+                              </span>
+                            <% end %>
+                            <span class="min-w-0 flex-1 text-[13px] font-medium text-[#1c1917]"><%= entry[:label] %></span>
+                            <%= hidden_field_tag "nav_order_#{list_type}[]", entry[:key], id: nil %>
+                          </li>
+                        <% else %>
+                          <% group = row[:group]; children = row[:children] || [] %>
+                          <li class="px-3 py-2.5" data-key="<%= group[:key] %>" draggable="true">
+                            <div class="flex items-center gap-3">
+                              <span class="cursor-grab select-none text-[#a8a29e]" aria-hidden="true">⋮⋮</span>
+                              <% if group[:icon].present? %>
+                                <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-600">
+                                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <%= ruby_cms_safe_svg_fragment(group[:icon]) %>
+                                  </svg>
+                                </span>
+                              <% end %>
+                              <span class="min-w-0 flex-1 text-[13px] font-semibold text-[#1c1917]"><%= group[:label] %></span>
+                              <span class="text-[10.5px] font-mono text-[#a8a29e]"><%= children.size %></span>
+                              <%= hidden_field_tag "nav_order_#{list_type}[]", group[:key], id: nil %>
+                            </div>
+                            <ul class="mt-2 ml-5 pl-3 border-l border-[#e9e4d4] space-y-0.5 min-h-[1.5rem]"
+                                data-list-type="group"
+                                data-group-key="<%= group[:key] %>"
+                                data-controller="admin--nav-order-sortable"
+                                data-admin--nav-order-sortable-settings-url-value="<%= nav_order_url %>">
+                              <% children.each do |child| %>
+                                <li class="flex items-center gap-2 py-1 px-2 rounded hover:bg-[#faf8f3]" data-key="<%= child[:key] %>" draggable="true">
+                                  <span class="cursor-grab select-none text-[#a8a29e] text-[11px]" aria-hidden="true">⋮⋮</span>
+                                  <% if child[:icon].present? %>
+                                    <span class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-[#78716c]">
+                                      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                        <%= ruby_cms_safe_svg_fragment(child[:icon]) %>
+                                      </svg>
+                                    </span>
+                                  <% end %>
+                                  <span class="min-w-0 flex-1 text-[12.5px] text-[#57534e]"><%= child[:label] %></span>
+                                  <%= hidden_field_tag "nav_order_group_#{group[:key]}[]", child[:key], id: nil %>
+                                </li>
+                              <% end %>
+                            </ul>
+                          </li>
+                        <% end %>
+                      <% end %>
+                    </ul>
+                  </div>
+                <% end %>
+              </div>
+
+              <p class="rounded-lg border border-dashed border-[#e9e4d4] bg-[#faf8f3] px-3 py-2.5 text-[12.5px] text-[#78716c]">
+                <%= t("ruby_cms.admin.settings.nav_order_hint", default: "Changes save automatically when you move an item.") %>
+              </p>
+            <% end %>
+          <% else %>
+            <%# Visibility list %>
+            <% if nav_item_entries.any? %>
+              <ul class="divide-y divide-[#e9e4d4] overflow-hidden rounded-lg border border-[#e9e4d4] bg-white">
+                <% nav_item_entries.each do |entry| %>
+                  <% icon_frag = settings_nav_visibility_icon(entry) %>
+                  <li class="flex items-center gap-3 px-3 py-2.5 transition-colors hover:bg-[#faf8f3] sm:gap-4 sm:px-4">
+                    <% if icon_frag.present? %>
+                      <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-[#e9e4d4] bg-white text-[#78716c]">
+                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                          <%= ruby_cms_safe_svg_fragment(icon_frag) %>
+                        </svg>
+                      </span>
+                    <% else %>
+                      <span class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-dashed border-[#e9e4d4] bg-[#faf8f3] text-[11px] font-semibold uppercase text-[#78716c]">
+                        <%= setting_label(entry).to_s.first(2) %>
+                      </span>
+                    <% end %>
+                    <div class="min-w-0 flex-1">
+                      <span class="block text-[13px] font-medium text-[#1c1917]"><%= setting_label(entry) %></span>
+                      <% if entry.description.present? %>
+                        <span class="mt-0.5 block text-[12px] leading-relaxed text-[#78716c]"><%= entry.description %></span>
+                      <% end %>
+                    </div>
+                    <div class="shrink-0">
+                      <%= render_setting_field(entry: entry, value: @values[entry.key], tab: @active_tab) %>
+                    </div>
+                  </li>
+                <% end %>
+              </ul>
+            <% else %>
+              <p class="rounded-lg border border-dashed border-[#e9e4d4] bg-[#faf8f3] py-10 text-center text-[12.5px] text-[#78716c]">
+                <%= t("ruby_cms.admin.settings.no_nav_items", default: "No items to configure here.") %>
+              </p>
+            <% end %>
+          <% end %>
+        </div>
+
+      <% else %>
+        <%# ───────── CATEGORY PANE (v2 styling: meta on left, input on right) ───────── %>
+        <div class="border-b border-[#e9e4d4] px-6 pt-5 pb-4">
+          <h2 class="text-[18px] font-semibold tracking-[-0.015em] text-[#1c1917] m-0"><%= settings_tab_label(@active_tab) %></h2>
+          <% if settings_tab_description(@active_tab).present? %>
+            <p class="text-[13px] text-[#78716c] m-0 mt-1"><%= settings_tab_description(@active_tab) %></p>
+          <% end %>
+        </div>
+
+        <div class="flex min-h-0 flex-1 flex-col overflow-y-auto px-6 py-5">
+          <% if entries_for_grid.any? %>
+            <%= form_with url: settings_url, method: :patch, local: true, data: { turbo: false }, class: "flex flex-1 flex-col" do %>
+              <%= hidden_field_tag :tab, @active_tab %>
+              <div class="flex flex-col">
+                <% entries_for_grid.each_with_index do |entry, idx| %>
+                  <% input_id = "pref_#{entry.key}" %>
+                  <div class="grid grid-cols-1 md:grid-cols-[minmax(0,1.6fr)_minmax(220px,1fr)] gap-4 md:gap-6 py-3.5 <%= "border-t border-[#e9e4d4]" unless idx.zero? %>">
+                    <div class="min-w-0">
+                      <div class="flex items-center gap-2.5 mb-1">
+                        <%= label_tag input_id, setting_label(entry), class: "text-[13.5px] font-semibold text-[#1c1917] m-0" %>
+                      </div>
+                      <% if entry.description.present? %>
+                        <p class="text-[12.5px] text-[#57534e] leading-snug m-0 mb-1.5"><%= entry.description %></p>
+                      <% end %>
+                      <div class="flex items-center gap-1.5 text-[11px] text-[#a8a29e] flex-wrap">
+                        <span class="font-mono text-[10.5px] px-1.5 py-px rounded bg-[#faf8f3] border border-[#e9e4d4] text-[#57534e]"><%= entry.key %></span>
+                        <span>·</span>
+                        <span><%= entry.type.to_s %></span>
+                        <% if (updated_at = @pref_updated_at[entry.key.to_s]) %>
+                          <span>·</span>
+                          <span>gewijzigd <%= time_ago_in_words(updated_at) %> geleden</span>
+                        <% end %>
+                      </div>
+                    </div>
+                    <div class="flex items-center gap-2 md:justify-self-stretch">
+                      <div class="flex-1 min-w-0">
+                        <%= render_setting_field(entry: entry, value: @values[entry.key], tab: @active_tab) %>
+                      </div>
+                    </div>
+                  </div>
+                <% end %>
+              </div>
+
+              <div class="mt-5 flex items-center justify-between gap-3 border-t border-[#e9e4d4] pt-3.5">
+                <p class="text-[12px] text-[#78716c] m-0">
+                  <%= t("ruby_cms.admin.settings.save_hint", default: "Toggles autosave; text fields need Save.") %>
+                </p>
+                <%= submit_tag t("ruby_cms.admin.settings.save_changes", default: "Save changes"),
+                    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 cursor-pointer border-0" %>
+              </div>
+            <% end %>
+          <% else %>
+            <p class="flex-1 rounded-lg border border-dashed border-[#e9e4d4] bg-[#faf8f3] py-12 text-center text-[12.5px] text-[#78716c]">
+              <%= t("ruby_cms.admin.settings.no_settings", default: "Nothing to configure in this section yet.") %>
+            </p>
+          <% end %>
+        </div>
+
+        <%# Subtle reset row %>
+        <%
+          reset_path_opts = { tab: @active_tab }
+          reset_path_opts[:nav_sub] = params[:nav_sub].presence if @active_tab.to_s == "navigation"
+        %>
+        <div class="border-t border-[#e9e4d4] bg-[#faf8f3] px-6 py-3">
+          <div class="flex items-center justify-between gap-3">
+            <p class="text-[12px] text-[#78716c] m-0">
+              <%= t("ruby_cms.admin.settings.reset_inline_hint", default: "Restore factory defaults (all sections).") %>
+            </p>
+            <%= form_with url: admin_settings_reset_defaults_path(reset_path_opts),
+                method: :post,
+                local: true,
+                data: { turbo: false, turbo_confirm: t("ruby_cms.admin.settings.reset_confirm", default: "Reset all settings to default values?") },
+                class: "shrink-0" do %>
+              <%= button_tag type: :submit,
+                  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 cursor-pointer" do %>
+                <%= t("ruby_cms.admin.settings.reset_defaults_short", default: "Reset defaults") %>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>
+<% end %>

data/lib/generators/ruby_cms/templates/views/admin/shared/_add_button.html.erb

@@ -0,0 +1,15 @@
+<% color ||= "emerald" %>
+<% color_classes = {
+  "emerald" => "bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500",
+  "purple" => "bg-purple-600 hover:bg-purple-700 focus:ring-purple-500",
+  "blue" => "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500",
+  "indigo" => "bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500",
+  "orange" => "bg-orange-600 hover:bg-orange-700 focus:ring-orange-500"
+} %>
+<% button_class = "inline-flex items-center px-2 py-2 border border-transparent text-sm font-medium rounded-lg text-white #{color_classes[color.to_s] || color_classes['emerald']} focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors" %>
+
+<%= link_to path, class: button_class 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 6v6m0 0v6m0-6h6m-6 0H6"></path>
+  </svg>
+<% end %>