lean_cms 0.2.12

data/app/views/lean_cms/settings/edit.html.erb

@@ -0,0 +1,384 @@
+<div class="max-w-4xl">
+  <div class="mb-8">
+    <h1 class="text-3xl font-bold text-gray-900">CMS Settings</h1>
+    <p class="text-gray-600 mt-2">Configure your Lean CMS preferences</p>
+  </div>
+
+  <!-- Content Sync -->
+  <div class="bg-white rounded-lg shadow-sm border <%= content_locked? ? 'border-amber-300' : 'border-gray-200' %> p-6 mb-6">
+    <div class="flex items-start justify-between">
+      <div>
+        <h2 class="text-xl font-semibold text-gray-900 mb-1">Content Sync</h2>
+        <p class="text-sm text-gray-600">Lock content editing while syncing the database between environments.</p>
+      </div>
+      <% if content_locked? %>
+        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold bg-amber-100 text-amber-800 border border-amber-300">
+          <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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+          </svg>
+          Locked
+        </span>
+      <% else %>
+        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800 border border-green-300">
+          <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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/>
+          </svg>
+          Unlocked
+        </span>
+      <% end %>
+    </div>
+
+    <% if content_locked? %>
+      <% lock_info = content_lock_info %>
+      <div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800">
+        <div><span class="font-medium">Reason:</span> <%= lock_info[:reason] %></div>
+        <% if lock_info[:locked_at].present? %>
+          <div class="mt-1"><span class="font-medium">Locked:</span> <%= Time.parse(lock_info[:locked_at]).strftime('%b %-d at %-I:%M %p') %></div>
+        <% end %>
+      </div>
+      <div class="mt-4">
+        <%= button_to 'Unlock Content', lean_cms_unlock_content_path, method: :post,
+              class: "px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white font-semibold rounded-lg transition-colors" %>
+      </div>
+    <% else %>
+      <div class="mt-4">
+        <%= form_with url: lean_cms_lock_content_path, method: :post, class: "flex items-end gap-3" do |lf| %>
+          <div class="flex-1">
+            <%= lf.label :reason, "Reason (optional)", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= lf.text_field :reason, placeholder: "e.g. Syncing database for new feature",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 outline-none" %>
+          </div>
+          <%= lf.submit "Lock Content", class: "px-4 py-2 bg-gray-800 hover:bg-gray-900 text-white font-semibold rounded-lg transition-colors cursor-pointer" %>
+        <% end %>
+      </div>
+      <div class="mt-4 pt-4 border-t border-gray-100">
+        <p class="text-xs text-gray-500 font-medium mb-2">Sync workflow from your terminal:</p>
+        <pre class="bg-gray-50 border border-gray-200 rounded p-3 text-xs text-gray-700 overflow-x-auto"><code>bin/rails lean_cms:sync:start   # lock + pull prod DB
+# make changes locally
+bin/rails lean_cms:sync:finish  # push DB + unlock</code></pre>
+      </div>
+    <% end %>
+  </div>
+
+  <%= form_with url: lean_cms_settings_path, method: :patch, multipart: true, class: "space-y-6" do |f| %>
+
+    <!-- Display Options -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 class="text-xl font-semibold text-gray-900 mb-4">Display Options</h2>
+
+      <div class="space-y-4" data-controller="settings-inline-edit-sync">
+        <!-- In-Context Editing Toggle -->
+        <div class="flex items-start">
+          <div class="flex items-center h-5">
+            <%= check_box_tag 'in_context_editing', '1', @in_context_editing_enabled,
+                class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2",
+                data: { 
+                  settings_inline_edit_sync_target: "checkbox",
+                  action: "change->settings-inline-edit-sync#toggle"
+                } %>
+          </div>
+          <div class="ml-3">
+            <label for="in_context_editing" class="font-medium text-gray-900">
+              Enable In-Context Editing
+            </label>
+            <p class="text-sm text-gray-600 mt-1">
+              Show edit overlays when hovering over sections on the frontend. This allows you to quickly jump to the edit page for any section directly from the website. Changes here sync with the toggle in the admin bar.
+            </p>
+          </div>
+        </div>
+
+        <!-- Show Blog Toggle -->
+        <div class="flex items-start">
+          <div class="flex items-center h-5">
+            <%= check_box_tag 'show_blog', '1', @show_blog_enabled,
+                class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2" %>
+          </div>
+          <div class="ml-3 flex-1">
+            <label for="show_blog" class="font-medium text-gray-900">
+              Show Blog
+            </label>
+            <p class="text-sm text-gray-600 mt-1">
+              Display the Blog link in navigation. 
+              <span class="font-semibold"><%= @blog_count %> published <%= 'post'.pluralize(@blog_count) %></span>
+              <%= link_to "Manage", lean_cms_posts_path(content_type: 'blog'), 
+                  class: "text-[#b82025] hover:underline ml-2", target: "_blank" %>
+            </p>
+            <div class="ml-7 mt-3 space-y-3 pl-3 border-l-2 border-gray-200">
+              <%= label_tag :blog_title, "Page Title", class: "block text-sm font-medium text-gray-700 mb-1" %>
+              <%= text_field_tag :blog_title, @blog_title,
+                  placeholder: "Our Blog",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+              <%= label_tag :blog_subtitle, "Subtitle", class: "block text-sm font-medium text-gray-700 mb-1 mt-2" %>
+              <%= text_field_tag :blog_subtitle, @blog_subtitle,
+                  placeholder: "Insights, updates, and stories from Custom Assembly Services",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+            </div>
+          </div>
+        </div>
+
+        <!-- Show Portfolio Toggle -->
+        <div class="flex items-start">
+          <div class="flex items-center h-5">
+            <%= check_box_tag 'show_portfolio', '1', @show_portfolio_enabled,
+                class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2" %>
+          </div>
+          <div class="ml-3 flex-1">
+            <label for="show_portfolio" class="font-medium text-gray-900">
+              Show Portfolio
+            </label>
+            <p class="text-sm text-gray-600 mt-1">
+              Display the Portfolio link in navigation. 
+              <span class="font-semibold"><%= @portfolio_count %> published <%= 'item'.pluralize(@portfolio_count) %></span>
+              <%= link_to "Manage", lean_cms_posts_path(content_type: 'portfolio'), 
+                  class: "text-[#b82025] hover:underline ml-2", target: "_blank" %>
+            </p>
+            <div class="ml-7 mt-3 space-y-3 pl-3 border-l-2 border-gray-200">
+              <%= label_tag :portfolio_title, "Page Title", class: "block text-sm font-medium text-gray-700 mb-1" %>
+              <%= text_field_tag :portfolio_title, @portfolio_title,
+                  placeholder: "Our Portfolio",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+              <%= label_tag :portfolio_subtitle, "Subtitle", class: "block text-sm font-medium text-gray-700 mb-1 mt-2" %>
+              <%= text_field_tag :portfolio_subtitle, @portfolio_subtitle,
+                  placeholder: "Showcasing our industrial assembly and installation projects",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Branding -->
+    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <h2 class="text-xl font-semibold text-gray-900 mb-4">Branding</h2>
+      <p class="text-sm text-gray-600 mb-4">The favicon shown in browser tabs for the public site. Leave blank to use the Lean CMS sloth as the default. Recommended: a 32×32 or 64×64 PNG (or .ico).</p>
+
+      <div class="flex items-center gap-4">
+        <% if (current_favicon = LeanCms::Setting.site_favicon_url) %>
+          <img src="<%= current_favicon %>" alt="Current favicon" class="w-12 h-12 border border-gray-200 rounded">
+          <div class="flex-1">
+            <%= label_tag :site_favicon, "Replace favicon", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= file_field_tag :site_favicon, accept: "image/png,image/x-icon,image/svg+xml", class: "block text-sm text-gray-700" %>
+          </div>
+          <label class="flex items-center gap-2 text-sm text-gray-700">
+            <%= check_box_tag :remove_site_favicon, "1", false, class: "w-4 h-4 rounded border-gray-300" %>
+            Remove
+          </label>
+        <% else %>
+          <img src="<%= asset_path("lean_cms/sloth-favicon-32.png") %>" alt="Default favicon" class="w-12 h-12 border border-gray-200 rounded">
+          <div class="flex-1">
+            <%= label_tag :site_favicon, "Upload custom favicon", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= file_field_tag :site_favicon, accept: "image/png,image/x-icon,image/svg+xml", class: "block text-sm text-gray-700" %>
+            <p class="text-xs text-gray-500 mt-1">Currently using the Lean CMS sloth.</p>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Site Information -->
+    <div id="site-info" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 scroll-mt-6">
+      <h2 class="text-xl font-semibold text-gray-900 mb-4">Site Information</h2>
+      <p class="text-sm text-gray-600 mb-4">This information is used across the site including the contact page, footer, and schema markup.</p>
+
+      <% address = LeanCms::Setting.site_address_data %>
+      <div class="space-y-4">
+        <!-- Address Fields -->
+        <div>
+          <%= label_tag :site_street1, "Street Address", class: "block text-sm font-medium text-gray-700 mb-1" %>
+          <%= text_field_tag :site_street1, address['street1'],
+              placeholder: "1234 Industrial Parkway",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+        </div>
+
+        <div>
+          <%= label_tag :site_street2, "Street Address 2", class: "block text-sm font-medium text-gray-700 mb-1" %>
+          <%= text_field_tag :site_street2, address['street2'],
+              placeholder: "Suite 100 (optional)",
+              class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+        </div>
+
+        <div class="grid grid-cols-6 gap-4">
+          <div class="col-span-3">
+            <%= label_tag :site_city, "City", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= text_field_tag :site_city, address['city'],
+                placeholder: "Green Bay",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          </div>
+
+          <div class="col-span-2">
+            <%= label_tag :site_state, "State", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= text_field_tag :site_state, address['state'],
+                placeholder: "WI",
+                maxlength: 2,
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none uppercase" %>
+          </div>
+
+          <div class="col-span-1">
+            <%= label_tag :site_zip, "ZIP", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= text_field_tag :site_zip, address['zip'],
+                placeholder: "54304",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          </div>
+        </div>
+
+        <!-- Phone and Email -->
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <%= label_tag :site_phone, "Phone", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= text_field_tag :site_phone, LeanCms::Setting.site_phone,
+                placeholder: "(920) 555-0100",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          </div>
+
+          <div>
+            <%= label_tag :site_email, "Email", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= email_field_tag :site_email, LeanCms::Setting.site_email,
+                placeholder: "info@example.com",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Business Hours -->
+    <div id="business-hours" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 scroll-mt-6"
+         data-controller="dynamic-list"
+         data-dynamic-list-max-value="10">
+      <h2 class="text-xl font-semibold text-gray-900 mb-4">Business Hours</h2>
+      <p class="text-sm text-gray-600 mb-4">Add your business hours. Each row can have its own day label (e.g., "Monday - Thursday", "Friday", etc.).</p>
+
+      <div data-dynamic-list-target="list" class="space-y-3">
+        <% hours = LeanCms::Setting.business_hours['hours'] %>
+        <% hours = [{ 'label' => '', 'value' => '' }] if hours.empty? %>
+        <% hours.each do |hour| %>
+          <div data-list-item class="flex gap-3 items-center">
+            <%= text_field_tag "business_hours_labels[]", hour['label'],
+                placeholder: "e.g., Monday - Friday",
+                class: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+            <%= text_field_tag "business_hours_values[]", hour['value'],
+                placeholder: "e.g., 8:00 AM - 5:00 PM",
+                class: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+            <button type="button" data-action="dynamic-list#remove"
+                    class="p-2 text-gray-400 hover:text-red-500 transition-colors">
+              <svg class="w-5 h-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>
+            </button>
+          </div>
+        <% end %>
+      </div>
+
+      <button type="button" data-action="dynamic-list#add"
+              class="mt-3 inline-flex items-center text-sm font-medium text-[#b82025] hover:text-[#a01c20] transition-colors">
+        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+        </svg>
+        Add Hours Row
+      </button>
+
+      <template data-dynamic-list-target="template">
+        <div data-list-item class="flex gap-3 items-center">
+          <%= text_field_tag "business_hours_labels[]", "",
+              placeholder: "e.g., Monday - Friday",
+              class: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <%= text_field_tag "business_hours_values[]", "",
+              placeholder: "e.g., 8:00 AM - 5:00 PM",
+              class: "flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none" %>
+          <button type="button" data-action="dynamic-list#remove"
+                  class="p-2 text-gray-400 hover:text-red-500 transition-colors">
+            <svg class="w-5 h-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>
+          </button>
+        </div>
+      </template>
+
+      <div class="mt-4 pt-4 border-t border-gray-200">
+        <%= label_tag :business_hours_note, "Additional Note", class: "block text-sm font-medium text-gray-700 mb-1" %>
+        <%= text_area_tag :business_hours_note, LeanCms::Setting.business_hours['note'],
+            rows: 2,
+            placeholder: "e.g., Emergency services available 24/7 for existing clients.",
+            class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none resize-none" %>
+      </div>
+    </div>
+
+    <!-- Privacy & Compliance -->
+    <div id="privacy-compliance" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 scroll-mt-6">
+      <h2 class="text-xl font-semibold text-gray-900 mb-4">Privacy & Compliance</h2>
+
+      <div class="space-y-4">
+        <!-- Cookie Consent Toggle -->
+        <div class="flex items-start">
+          <div class="flex items-center h-5">
+            <%= hidden_field_tag 'cookie_consent_enabled', '1' if @cookie_consent_forced_on %>
+            <%= check_box_tag 'cookie_consent_enabled', '1', @cookie_consent_enabled,
+                disabled: @cookie_consent_forced_on,
+                class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2 #{'opacity-60 cursor-not-allowed' if @cookie_consent_forced_on}" %>
+          </div>
+          <div class="ml-3 flex-1">
+            <label for="cookie_consent_enabled" class="font-medium text-gray-900">
+              Enable Cookie Consent Banner
+            </label>
+            <p class="text-sm text-gray-600 mt-1">
+              Show a GDPR/CCPA cookie consent banner at the bottom of the site. Visitors can accept all, reject optional cookies, or manage preferences.
+            </p>
+            <% if @cookie_consent_forced_on %>
+              <p class="text-sm text-amber-700 mt-2 font-medium">
+                Cookie consent cannot be disabled while Google Analytics is enabled.
+              </p>
+            <% end %>
+            <div class="ml-7 mt-3 space-y-3 pl-3 border-l-2 border-gray-200">
+              <%= label_tag :cookie_consent_message, "Banner Message", class: "block text-sm font-medium text-gray-700 mb-1" %>
+              <%= text_area_tag :cookie_consent_message, @cookie_consent_message,
+                  rows: 3,
+                  placeholder: "We use cookies to improve your experience and analyze site traffic. You can choose which cookies to allow.",
+                  class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none resize-none" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Analytics -->
+    <div id="analytics" class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 scroll-mt-6" data-controller="toggle-fields">
+      <h2 class="text-xl font-semibold text-gray-900 mb-4">Analytics</h2>
+
+      <div class="flex items-start">
+        <div class="flex items-center h-5">
+          <%= check_box_tag 'google_analytics_enabled', '1', @google_analytics_enabled,
+              class: "w-4 h-4 text-[#b82025] bg-gray-100 border-gray-300 rounded focus:ring-[#b82025] focus:ring-2",
+              data: { action: "change->toggle-fields#toggle" } %>
+        </div>
+        <div class="ml-3 flex-1">
+          <label for="google_analytics_enabled" class="font-medium text-gray-900">
+            Enable Google Analytics 4
+          </label>
+          <p class="text-sm text-gray-600 mt-1">
+            Track page views and events with Google Analytics 4. Enabling GA4 will automatically enable the Cookie Consent banner and it cannot be disabled while GA is active.
+          </p>
+          <div data-toggle-fields-target="fields" class="<%= 'hidden' unless @google_analytics_enabled %> mt-4 pt-4 border-t border-gray-200 space-y-3">
+            <%= label_tag :google_analytics_id, "Measurement ID", class: "block text-sm font-medium text-gray-700 mb-1" %>
+            <%= text_field_tag :google_analytics_id, @google_analytics_id,
+                placeholder: "G-XXXXXXXXXX",
+                pattern: "G-[A-Z0-9]+",
+                title: "Must start with G- followed by alphanumeric characters",
+                class: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#b82025]/20 focus:border-[#b82025] outline-none font-mono" %>
+            <p class="text-xs text-gray-500">
+              Find this in your GA4 property under Admin → Data Streams → your stream. Must start with <code class="bg-gray-100 px-1 rounded">G-</code>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Save Button -->
+    <div class="flex items-center justify-between pt-4">
+      <div class="text-sm text-gray-600">
+        Changes take effect immediately after saving
+      </div>
+      <div class="flex items-center gap-3">
+        <%= link_to "Cancel", lean_cms_root_path, class: "px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" %>
+        <%= f.submit "Save Settings", class: "px-6 py-2 bg-[#b82025] hover:bg-[#a01c20] text-white font-semibold rounded-lg transition-colors cursor-pointer" %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/lean_cms/shared/_admin_bar.html.erb

@@ -0,0 +1,85 @@
+<% return unless respond_to?(:current_user) && current_user&.has_any_cms_permission? %>
+
+<%# Trix base + Action Text overrides. Required so the field-editor modal's
+    rich_text toolbar renders as styled buttons rather than plain inline
+    text. Gated on the same has_any_cms_permission? check as the bar so
+    the stylesheet only loads for signed-in editors. %>
+<%= stylesheet_link_tag "actiontext", "data-turbo-track": "reload" %>
+
+<div class="fixed top-0 left-0 right-0 bg-gray-900 text-white py-2 px-6 text-sm z-[60]"
+     data-controller="inline-edit-toggle">
+  <div class="container mx-auto max-w-5xl flex items-center justify-between">
+    <div class="flex items-center gap-4">
+      <span class="text-gray-400">Logged in as:</span>
+      <span class="font-medium"><%= current_user.email_address %></span>
+    </div>
+    <div class="flex items-center gap-3">
+      <!-- Inline Editing Toggle -->
+      <div class="flex items-center gap-2 px-3 py-1.5 bg-gray-800 rounded">
+        <label for="inline-edit-toggle" class="flex items-center gap-2 cursor-pointer">
+          <svg class="w-4 h-4 text-gray-400" 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>
+          <span class="text-gray-300">Inline Editing</span>
+        </label>
+        <label for="inline-edit-toggle" class="relative cursor-pointer">
+          <input type="checkbox"
+                 id="inline-edit-toggle"
+                 data-inline-edit-toggle-target="checkbox"
+                 data-action="change->inline-edit-toggle#toggle"
+                 class="sr-only peer">
+          <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
+        </label>
+      </div>
+
+      <%= link_to LeanCms.docs_url, target: "_blank", rel: "noopener",
+            title: "Documentation",
+            class: "flex items-center gap-2 px-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded transition-colors" 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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093V14m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span>Help</span>
+      <% end %>
+
+      <%= link_to lean_cms_root_path,
+            style: "background-color: #{LeanCms.primary_color};",
+            class: "flex items-center gap-2 px-4 py-1.5 rounded transition-colors hover:brightness-95" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+        </svg>
+        Admin Dashboard
+      <% end %>
+      <%= button_to lean_cms_login_path, method: :delete,
+            class: "cursor-pointer flex items-center gap-2 px-4 py-1.5 bg-gray-700 hover:bg-gray-600 rounded transition-colors" 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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+        </svg>
+        Sign Out
+      <% end %>
+    </div>
+  </div>
+</div>
+
+<!-- CMS field-editor modal. The inline-edit pencil icons (rendered into
+     editable regions by the inline-edit Stimulus controller) dispatch
+     window.cms:open-field-editor, which this modal controller listens for
+     and fetches the editor form via XHR into `content`. Without this DOM
+     present, clicks on the pencils fire the event but no controller is
+     attached anywhere to handle it. -->
+<div data-controller="field-editor-modal"
+     data-field-editor-modal-target="modal"
+     class="cms-modal hidden fixed inset-0 z-[10000] flex items-center justify-center">
+  <!-- Backdrop. Closing on backdrop-click is wired here directly so it
+       fires even though the panel below intercepts clicks within it. -->
+  <div class="absolute inset-0 bg-black opacity-50"
+       data-action="click->field-editor-modal#close"></div>
+
+  <div class="relative bg-white rounded-lg shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
+    <div data-field-editor-modal-target="loader" class="p-12 text-center">
+      <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      <p class="mt-4 text-gray-600">Loading editor...</p>
+    </div>
+    <div data-field-editor-modal-target="content" class="p-8"></div>
+  </div>
+</div>

data/app/views/lean_cms/shared/_header.html.erb

@@ -0,0 +1,86 @@
+<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
+  <div class="flex items-center">
+    <h1 class="text-lg font-semibold text-gray-900">
+      <%= content_for?(:page_title) ? yield(:page_title) : 'Dashboard' %>
+    </h1>
+  </div>
+
+  <div class="flex items-center space-x-4">
+    <% if current_user&.can_edit_blog? %>
+      <!-- Quick Actions -->
+      <%= link_to new_lean_cms_post_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white transition-colors hover:opacity-90 cursor-pointer", style: "background-color: var(--cms-primary);" do %>
+        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+        </svg>
+        New Post
+      <% end %>
+    <% end %>
+
+    <!-- Help -->
+    <%= link_to LeanCms.docs_url,
+          target: "_blank", rel: "noopener",
+          title: "Lean CMS documentation",
+          class: "p-2 text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-[var(--cms-primary)] focus:ring-offset-2 rounded-lg transition-colors" do %>
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093V14m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>
+      <span class="sr-only">Help</span>
+    <% end %>
+
+    <!-- Notifications Bell -->
+    <%= render 'lean_cms/shared/notifications_bell' if LeanCms::NotificationSetting.instance.in_app_enabled? %>
+
+    <!-- User Menu -->
+    <div class="relative" x-data="{ open: false }">
+      <button @click="open = !open" class="flex items-center space-x-3 text-sm focus:outline-none cursor-pointer">
+        <div class="flex-shrink-0">
+          <div class="h-8 w-8 rounded-full flex items-center justify-center text-white text-sm font-medium" style="background-color: var(--cms-primary);">
+            <%= current_user.email_address[0].upcase %>
+          </div>
+        </div>
+        <div class="hidden md:block text-left">
+          <p class="text-sm font-medium text-gray-900">
+            <%= current_user.respond_to?(:display_name) ? current_user.display_name : current_user.email_address.split("@").first %>
+          </p>
+          <p class="text-xs text-gray-500">
+            <%= current_user.respond_to?(:permissions_summary) ? current_user.permissions_summary : current_user.email_address %>
+          </p>
+        </div>
+        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+        </svg>
+      </button>
+
+      <!-- Dropdown Menu -->
+      <div x-show="open" @click.away="open = false" x-cloak class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
+        <%= link_to root_path, target: "_blank", class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" do %>
+          <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+          </svg>
+          View Site
+        <% end %>
+        <% if current_user.can_access_settings? %>
+          <div class="border-t border-gray-200 my-1"></div>
+          <%= link_to lean_cms_settings_path, class: "flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer" do %>
+            <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+            </svg>
+            Settings
+          <% end %>
+        <% end %>
+        <div class="border-t border-gray-200 my-1"></div>
+        <%= button_to lean_cms_session_path, method: :delete, class: "w-full flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left cursor-pointer" do %>
+          <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+          </svg>
+          Sign Out
+        <% end %>
+      </div>
+    </div>
+  </div>
+</header>
+
+<style>
+  [x-cloak] { display: none !important; }
+</style>

data/app/views/lean_cms/shared/_notifications_bell.html.erb

@@ -0,0 +1,84 @@
+<%
+  # Host User models don't have to ship a `notifications` association — the
+  # bell hides itself when they don't, which lets hosts that don't want
+  # Noticed integration opt out by just leaving the association off.
+  return unless current_user.respond_to?(:notifications)
+  unread_count = current_user.notifications.unread.count
+  recent_notifications = current_user.notifications.unread.limit(5).order(created_at: :desc)
+%>
+<div class="relative" x-data="{ open: false }" data-controller="notifications">
+  <button @click="open = !open" class="relative p-2 text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-[#b82025] focus:ring-offset-2 rounded-lg transition-colors">
+    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+    </svg>
+    <% if unread_count > 0 %>
+      <span class="absolute top-0 right-0 block h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center font-bold" style="font-size: 10px;">
+        <%= unread_count > 9 ? '9+' : unread_count %>
+      </span>
+    <% end %>
+  </button>
+
+  <!-- Dropdown -->
+  <div x-show="open" 
+       @click.away="open = false" 
+       x-cloak
+       class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg border border-gray-200 z-50 max-h-96 overflow-hidden flex flex-col">
+    <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+      <h3 class="text-sm font-semibold text-gray-900">Notifications</h3>
+      <% if unread_count > 0 %>
+        <%= button_to mark_all_as_read_lean_cms_notifications_path, 
+            method: :patch,
+            class: "text-xs text-[#b82025] hover:text-[#a01c20] font-medium",
+            data: { turbo_frame: "_top" } do %>
+          Mark all as read
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="overflow-y-auto flex-1">
+      <% if recent_notifications.any? %>
+        <div class="divide-y divide-gray-200">
+          <% recent_notifications.each do |notification| %>
+            <%= link_to lean_cms_notification_path(notification), 
+                class: "block px-4 py-3 hover:bg-gray-50 transition-colors",
+                data: { turbo_frame: "_top" } do %>
+              <div class="flex items-start">
+                <div class="flex-shrink-0">
+                  <div class="h-2 w-2 rounded-full bg-[#b82025] mt-2"></div>
+                </div>
+                <div class="ml-3 flex-1 min-w-0">
+                  <p class="text-sm font-medium text-gray-900 truncate">
+                    <%= notification.params[:title] || 'Contact Form Submission' %>
+                  </p>
+                  <p class="text-xs text-gray-500 mt-1">
+                    <%= notification.params[:message] || notification.message %>
+                  </p>
+                  <p class="text-xs text-gray-400 mt-1">
+                    <%= time_ago_in_words(notification.created_at) %> ago
+                  </p>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      <% else %>
+        <div class="px-4 py-8 text-center">
+          <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+          </svg>
+          <p class="mt-2 text-sm text-gray-500">No new notifications</p>
+        </div>
+      <% end %>
+    </div>
+
+    <% if unread_count > 5 %>
+      <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
+        <%= link_to lean_cms_notifications_path, 
+            class: "block text-center text-sm font-medium text-[#b82025] hover:text-[#a01c20]",
+            data: { turbo_frame: "_top" } do %>
+          View all notifications
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>