railspress-engine 0.1.2 → 1.2.0

data/app/views/railspress/admin/posts/show.html.erb

@@ -1,34 +1,70 @@
 <div class="rp-page-header">
   <div>
     <h1 class="rp-page-title"><%= @post.title %></h1>
-    <div class="rp-post-meta">
-      <span class="rp-badge rp-badge--<%= @post.status %>"><%= @post.status.titleize %></span>
-      <% if @post.category %>
-        <span><%= @post.category.name %></span>
-      <% end %>
-      <% if authors_enabled? && @post.author %>
-        <span>by <%= @post.author.public_send(Railspress.author_display_method) %></span>
-      <% end %>
-      <span><%= @post.created_at.strftime("%b %d, %Y") %></span>
-    </div>
+    <% if authors_enabled? && @post.author %>
+      <p class="rp-byline">by <%= @post.author.public_send(Railspress.author_display_method) %></p>
+    <% end %>
   </div>
   <div class="rp-page-actions">
+    <% if @post.live? %>
+      <%= link_to "View", "#{Railspress.blog_path}/#{@post.slug}", class: "rp-btn rp-btn--secondary", target: "_blank" %>
+    <% end %>
     <%= link_to "Edit", edit_admin_post_path(@post), class: "rp-btn rp-btn--primary" %>
     <%= link_to "Back", admin_posts_path, class: "rp-btn rp-btn--secondary" %>
   </div>
 </div>
 
-<% if @post.tags.any? %>
-  <div class="rp-tag-list rp-post-tags">
-    <% @post.tags.each do |tag| %>
-      <span class="rp-tag"><%= tag.name %></span>
-    <% end %>
+<div class="rp-post-meta-card">
+  <div class="rp-meta-item">
+    <span class="rp-meta-label">Status</span>
+    <span class="rp-badge rp-badge--<%= @post.display_status %>"><%= @post.display_status.titleize %></span>
   </div>
-<% end %>
+  <% if @post.published_at %>
+    <div class="rp-meta-item">
+      <span class="rp-meta-label">Published</span>
+      <span class="rp-meta-value"><%= @post.published_at.strftime("%b %d, %Y at %l:%M %p") %></span>
+    </div>
+  <% end %>
+  <div class="rp-meta-item">
+    <span class="rp-meta-label">Created</span>
+    <span class="rp-meta-value"><%= @post.created_at.strftime("%b %d, %Y") %></span>
+  </div>
+  <div class="rp-meta-item">
+    <span class="rp-meta-label">Updated</span>
+    <span class="rp-meta-value"><%= @post.updated_at.strftime("%b %d, %Y") %></span>
+  </div>
+  <div class="rp-meta-item">
+    <span class="rp-meta-label">Reading Time</span>
+    <span class="rp-meta-value"><%= @post.reading_time_display %> min</span>
+  </div>
+  <% if @post.category || @post.tags.any? %>
+    <div class="rp-meta-row">
+      <% if @post.category %>
+        <div class="rp-meta-item">
+          <span class="rp-meta-label">Category</span>
+          <span class="rp-meta-value"><%= @post.category.name %></span>
+        </div>
+      <% end %>
+      <% if @post.tags.any? %>
+        <div class="rp-meta-item rp-meta-item--tags">
+          <span class="rp-meta-label">Tags</span>
+          <div class="rp-tag-list">
+            <% @post.tags.each do |tag| %>
+              <span class="rp-tag"><%= tag.name %></span>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>
 
-<% if header_images_enabled? && @post.header_image.attached? %>
-  <div class="rp-header-image">
-    <%= image_tag main_app.url_for(@post.header_image.variant(resize_to_limit: [1200, 630])), class: "rp-header-image-full" %>
+<% if post_images_enabled? && @post.header_image.attached? %>
+  <div class="rp-image-section-card">
+    <%= render "railspress/admin/shared/image_section_compact",
+          record: @post,
+          attachment_name: :header_image,
+          label: "Main Image" %>
   </div>
 <% end %>
 

data/app/views/railspress/admin/prototypes/image_section.html.erb

@@ -0,0 +1,42 @@
+<h1 class="rp-page-title rp-page-title--standalone">Image Section Prototype</h1>
+
+<p class="rp-hint" style="margin-bottom: var(--rp-space-xl); max-width: 700px;">
+  <strong>Purpose:</strong> Iterate on the main image section UI/UX.
+  This uses real CSS and Stimulus controllers with mock data.
+</p>
+
+<div class="rp-card rp-card--padded" style="max-width: 800px;">
+  <h2 style="font-size: 1rem; margin-bottom: var(--rp-space-lg); color: var(--rp-text-muted);">
+    State 1: Image Exists (Compact View)
+  </h2>
+
+  <%= render "railspress/admin/shared/image_section_v2",
+        has_image: true,
+        image_url: @mock_image_url,
+        filename: @mock_filename,
+        filesize: @mock_filesize,
+        focal_point: @mock_focal_point,
+        contexts: @contexts,
+        label: "Main Image" %>
+</div>
+
+<div class="rp-card rp-card--padded" style="max-width: 800px; margin-top: var(--rp-space-xl);">
+  <h2 style="font-size: 1rem; margin-bottom: var(--rp-space-lg); color: var(--rp-text-muted);">
+    State 2: No Image (Upload Prompt)
+  </h2>
+
+  <%= render "railspress/admin/shared/image_section_v2",
+        has_image: false,
+        label: "Main Image" %>
+</div>
+
+<div style="margin-top: var(--rp-space-2xl); padding: var(--rp-space-lg); background: var(--rp-bg); border: 1px solid var(--rp-border); border-radius: var(--rp-radius);">
+  <h3 style="font-size: 0.875rem; margin-bottom: var(--rp-space-md);">Implementation Notes</h3>
+  <ul style="font-size: 0.875rem; color: var(--rp-text-muted); padding-left: var(--rp-space-lg); margin: 0;">
+    <li>Stimulus controller handles expand/collapse (no server round-trip)</li>
+    <li>Clicking compact view or Edit button expands the editor</li>
+    <li>Done button collapses back to compact view</li>
+    <li>Focal point picker reuses existing <code>railspress--focal-point</code> controller</li>
+    <li>CSS animations for smooth transitions</li>
+  </ul>
+</div>

data/app/views/railspress/admin/shared/_dropzone.html.erb

@@ -0,0 +1,84 @@
+<%#
+  Dropzone Partial
+  ================
+  A drag-and-drop file upload component with progress indicator.
+
+  Required locals:
+    form - The Rails form builder
+    field_name - Symbol for the attachment field (e.g., :header_image)
+
+  Optional locals:
+    accept - MIME types to accept (default: "image/*")
+    max_size - Max file size in bytes (default: 10MB)
+    prompt - Text prompt to display (default: "Drag image here or click to browse")
+    hint - Hint text below prompt (default: "PNG, JPG, WebP up to 10MB")
+
+  Example:
+    render "railspress/admin/shared/dropzone",
+           form: form, field_name: :header_image, prompt: "Drop featured image here"
+%>
+
+<% accept ||= "image/*" %>
+<% max_size ||= 10 * 1024 * 1024 %>
+<% prompt ||= "Drag image here or click to browse" %>
+<% hint ||= "PNG, JPG, WebP up to 10MB" %>
+
+<div data-controller="railspress--dropzone"
+     data-railspress--dropzone-url-value="<%= main_app.rails_direct_uploads_path %>"
+     data-railspress--dropzone-accept-value="<%= accept %>"
+     data-railspress--dropzone-max-size-value="<%= max_size %>"
+     data-action="drop->railspress--dropzone#drop
+                  dragover->railspress--dropzone#dragover
+                  dragleave->railspress--dropzone#dragleave"
+     class="rp-dropzone">
+
+  <%# Hidden file input %>
+  <%= form.file_field field_name,
+        accept: accept,
+        class: "rp-sr-only",
+        data: {
+          railspress__dropzone_target: "input",
+          action: "change->railspress--dropzone#change"
+        } %>
+
+  <%# Hidden field for signed_id (populated after upload) %>
+  <input type="hidden"
+         name="<%= form.object_name %>[<%= field_name %>]"
+         data-railspress--dropzone-target="signedId">
+
+  <%# Drop area %>
+  <div data-railspress--dropzone-target="dropArea" class="rp-dropzone__area">
+    <svg class="rp-dropzone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+      <circle cx="8.5" cy="8.5" r="1.5"/>
+      <polyline points="21 15 16 10 5 21"/>
+    </svg>
+    <p class="rp-dropzone__prompt" data-railspress--dropzone-target="prompt">
+      <strong><%= prompt.split.first %></strong> <%= prompt.split[1..].join(" ") %>
+    </p>
+    <p class="rp-dropzone__hint"><%= hint %></p>
+  </div>
+
+  <%# Preview (shown after file selected) %>
+  <div data-railspress--dropzone-target="preview" class="rp-dropzone__preview" hidden>
+    <img data-railspress--dropzone-target="previewImage" class="rp-dropzone__preview-image" alt="">
+    <button type="button"
+            class="rp-dropzone__remove rp-btn rp-btn--ghost rp-btn--sm"
+            data-action="railspress--dropzone#remove">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+      Remove
+    </button>
+  </div>
+
+  <%# Progress indicator %>
+  <div data-railspress--dropzone-target="progress" class="rp-dropzone__progress" hidden>
+    <div class="rp-dropzone__progress-bar" data-railspress--dropzone-target="progressBar"></div>
+    <span class="rp-dropzone__progress-text" data-railspress--dropzone-target="progressText">0%</span>
+  </div>
+
+  <%# Error message %>
+  <div data-railspress--dropzone-target="error" class="rp-dropzone__error" hidden></div>
+</div>

data/app/views/railspress/admin/shared/_focal_point_editor.html.erb

@@ -0,0 +1,102 @@
+<%#
+  Focal Point Editor Partial
+  ==========================
+  An interactive focal point picker with live previews.
+
+  Required locals:
+    form - The Rails form builder
+    record - The record with HasFocalPoint concern
+    attachment_name - Symbol for the attachment (e.g., :header_image)
+
+  Optional locals:
+    contexts - Array of context configs for previews (default: Railspress.image_contexts)
+
+  Example:
+    render "railspress/admin/shared/focal_point_editor",
+           form: form, record: @post, attachment_name: :header_image
+%>
+
+<% contexts ||= Railspress.image_contexts %>
+<% focal_point = record.focal_point(attachment_name) %>
+<% attachment = record.send(attachment_name) %>
+
+<div data-controller="railspress--focal-point"
+     data-railspress--focal-point-x-value="<%= focal_point[:x] %>"
+     data-railspress--focal-point-y-value="<%= focal_point[:y] %>"
+     class="rp-focal-editor">
+
+  <div class="rp-focal-editor__layout">
+    <%# Source image with crosshair %>
+    <div class="rp-focal-editor__source">
+      <div class="rp-focal-editor__image-wrap"
+           data-action="click->railspress--focal-point#pick
+                        touchstart->railspress--focal-point#touch"
+           tabindex="0"
+           data-action="keydown->railspress--focal-point#keydown">
+        <% if attachment.attached? %>
+          <%= image_tag main_app.url_for(attachment.variant(resize_to_limit: [1200, 800])),
+                data: { railspress__focal_point_target: "image" },
+                class: "rp-focal-editor__image",
+                alt: "Source image for focal point selection" %>
+        <% end %>
+        <div data-railspress--focal-point-target="crosshair"
+             class="rp-focal-editor__crosshair"
+             style="left: <%= focal_point[:x] * 100 %>%; top: <%= focal_point[:y] * 100 %>%;"></div>
+      </div>
+
+      <div class="rp-focal-editor__hint">
+        <span>Click to set focal point</span>
+        <span class="rp-focal-editor__coords" data-railspress--focal-point-target="coordsDisplay">
+          <%= "#{(focal_point[:x] * 100).round}%, #{(focal_point[:y] * 100).round}%" %>
+        </span>
+      </div>
+
+      <div class="rp-focal-editor__actions">
+        <button type="button"
+                class="rp-btn rp-btn--outline rp-btn--sm"
+                data-action="railspress--focal-point#reset">
+          Reset to Center
+        </button>
+      </div>
+    </div>
+
+    <%# Live previews %>
+    <% if contexts.any? %>
+      <div class="rp-focal-editor__previews">
+        <span class="rp-focal-editor__previews-title">Live Preview</span>
+
+        <% contexts.each do |name, config| %>
+          <% aspect = config[:aspect] %>
+          <% aspect_ratio = aspect.is_a?(Array) ? "#{aspect[0]} / #{aspect[1]}" : aspect %>
+          <% ratio_label = aspect.is_a?(Array) ? "#{aspect[0]}:#{aspect[1]}" : aspect.to_s %>
+
+          <div class="rp-focal-editor__preview">
+            <div class="rp-focal-editor__preview-image" style="aspect-ratio: <%= aspect_ratio %>;">
+              <% if attachment.attached? %>
+                <%= image_tag main_app.url_for(attachment.variant(resize_to_limit: [400, 300])),
+                      data: { railspress__focal_point_target: "preview" },
+                      style: record.image_css_for(name, attachment_name),
+                      alt: "#{name.to_s.titleize} preview" %>
+              <% end %>
+            </div>
+            <div class="rp-focal-editor__preview-label">
+              <span class="rp-focal-editor__preview-name"><%= name.to_s.titleize %></span>
+              <span class="rp-focal-editor__preview-ratio"><%= ratio_label %></span>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <%# Hidden inputs for form submission via nested attributes %>
+  <% association_name = :"#{attachment_name}_focal_point" %>
+  <%= form.fields_for association_name, record.send(association_name) do |fp| %>
+    <%= fp.hidden_field :focal_x,
+          value: focal_point[:x],
+          data: { railspress__focal_point_target: "xInput" } %>
+    <%= fp.hidden_field :focal_y,
+          value: focal_point[:y],
+          data: { railspress__focal_point_target: "yInput" } %>
+  <% end %>
+</div>

data/app/views/railspress/admin/shared/_image_section.html.erb

@@ -0,0 +1,159 @@
+<%#
+  Image Section Partial
+  =====================
+  Complete image upload and focal point editing section.
+  Shows compact view with Edit button; expands to full editor.
+
+  Required locals:
+    form - The Rails form builder
+    record - The record with HasFocalPoint concern
+    attachment_name - Symbol for the attachment (e.g., :header_image)
+
+  Optional locals:
+    label - Section label (default: "Main Image")
+    contexts - Array of context configs for previews
+    show_advanced - Show per-context overrides (default: false)
+
+  Example:
+    render "railspress/admin/shared/image_section",
+           form: form, record: @post, attachment_name: :header_image
+%>
+
+<% label ||= "Main Image" %>
+<% contexts ||= Railspress.image_contexts %>
+<% show_advanced ||= false %>
+<% attachment = record.send(attachment_name) %>
+<% has_image = attachment.attached? && attachment.blob&.persisted? %>
+
+<div class="rp-image-section">
+  <div class="rp-image-section__label">
+    <label class="rp-label"><%= label %></label>
+  </div>
+
+  <% if has_image %>
+    <%# Compact view (default, collapsed state) %>
+    <details class="rp-image-section__details">
+      <summary class="rp-image-section__compact">
+        <div class="rp-image-section__thumb">
+          <%= image_tag main_app.url_for(attachment.variant(resize_to_limit: [120, 80])),
+                style: record.focal_point_css(attachment_name),
+                alt: "" %>
+        </div>
+        <div class="rp-image-section__info">
+          <span class="rp-image-section__filename"><%= attachment.filename %></span>
+          <span class="rp-image-section__meta">
+            <%= number_to_human_size(attachment.byte_size) %>
+          </span>
+          <% if record.has_focal_point?(attachment_name) %>
+            <span class="rp-image-section__focal-indicator">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                <circle cx="12" cy="12" r="3"/>
+                <path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/>
+              </svg>
+              Focal point set
+            </span>
+          <% end %>
+        </div>
+        <div class="rp-image-section__toggle">
+          <span class="rp-btn rp-btn--outline rp-btn--sm">Edit</span>
+        </div>
+      </summary>
+
+      <%# Expanded editor %>
+      <div class="rp-image-section__editor">
+        <div class="rp-image-section__editor-header">
+          <span class="rp-image-section__editor-title"><%= label %> Settings</span>
+          <div class="rp-image-section__editor-actions">
+            <label class="rp-btn rp-btn--outline rp-btn--sm">
+              Change
+              <%= form.file_field attachment_name,
+                    accept: "image/*",
+                    class: "rp-sr-only",
+                    direct_upload: true %>
+            </label>
+            <label class="rp-checkbox-inline rp-btn rp-btn--outline rp-btn--sm">
+              <%= form.check_box :"remove_#{attachment_name}", {}, "1", "0" %>
+              Remove
+            </label>
+          </div>
+        </div>
+
+        <div class="rp-image-section__editor-body">
+          <%= render "railspress/admin/shared/focal_point_editor",
+                form: form,
+                record: record,
+                attachment_name: attachment_name,
+                contexts: contexts %>
+
+          <% if show_advanced && contexts.any? %>
+            <details class="rp-advanced-section">
+              <summary class="rp-advanced-toggle">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                  <polyline points="6 9 12 15 18 9"/>
+                </svg>
+                Advanced: Per-context image overrides
+              </summary>
+
+              <div class="rp-advanced-content">
+                <p class="rp-hint">Override specific contexts with custom crops or separate images.</p>
+
+                <div class="rp-context-overrides">
+                  <% contexts.each do |name, config| %>
+                    <% override = record.image_override(name, attachment_name) %>
+                    <% has_override = record.has_image_override?(name, attachment_name) %>
+
+                    <div class="rp-context-override">
+                      <div class="rp-context-override__header">
+                        <span class="rp-context-override__name"><%= name.to_s.titleize %></span>
+                        <span class="rp-context-override__badge <%= 'rp-context-override__badge--custom' if has_override %>">
+                          <%= has_override ? override[:type].titleize : "Using focal" %>
+                        </span>
+                      </div>
+
+                      <div class="rp-context-override__preview" style="aspect-ratio: <%= config[:aspect].is_a?(Array) ? "#{config[:aspect][0]} / #{config[:aspect][1]}" : config[:aspect] %>;">
+                        <% context_image = record.image_for(name, attachment_name) %>
+                        <% if context_image.respond_to?(:variant) %>
+                          <%= image_tag main_app.url_for(context_image.variant(resize_to_limit: [400, 300])),
+                                style: record.image_css_for(name, attachment_name),
+                                alt: "" %>
+                        <% elsif context_image.respond_to?(:url) %>
+                          <%= image_tag main_app.url_for(context_image),
+                                style: record.image_css_for(name, attachment_name),
+                                alt: "" %>
+                        <% end %>
+                      </div>
+
+                      <div class="rp-context-override__actions">
+                        <% if has_override %>
+                          <button type="button" class="rp-btn rp-btn--outline rp-btn--sm" style="flex:1;">
+                            Change
+                          </button>
+                          <button type="button" class="rp-btn rp-btn--outline rp-btn--sm" style="flex:1;">
+                            Use Focal
+                          </button>
+                        <% else %>
+                          <button type="button" class="rp-btn rp-btn--outline rp-btn--sm" style="flex:1;">
+                            Custom Crop
+                          </button>
+                          <button type="button" class="rp-btn rp-btn--outline rp-btn--sm" style="flex:1;">
+                            Upload
+                          </button>
+                        <% end %>
+                      </div>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+            </details>
+          <% end %>
+        </div>
+      </div>
+    </details>
+  <% else %>
+    <%# No image - show dropzone %>
+    <%= render "railspress/admin/shared/dropzone",
+          form: form,
+          field_name: attachment_name,
+          prompt: "Click to upload #{label.downcase}" %>
+  <% end %>
+</div>

data/app/views/railspress/admin/shared/_image_section_compact.html.erb

@@ -0,0 +1,90 @@
+<%#
+  Image Section Compact View
+  ==========================
+  Shows thumbnail, filename, and Edit button.
+  Clicking Edit loads the editor via Turbo Frame.
+
+  Required locals:
+    record - The record with HasFocalPoint concern
+    attachment_name - Symbol for the attachment (e.g., :header_image)
+
+  Optional locals:
+    label - Section label (default: "Main Image")
+    flash_message - Success message to display
+    contexts - Hash of context configs (for editor URL)
+%>
+
+<% label ||= "Main Image" %>
+<% flash_message ||= nil %>
+<% contexts ||= Railspress.image_contexts %>
+<% attachment = record.send(attachment_name) %>
+<% has_image = attachment.attached? && attachment.blob&.persisted? %>
+<% frame_id = dom_id(record, "image_section_#{attachment_name}") %>
+
+<%# Build editor URL based on record type (can be overridden via editor_url local) %>
+<%
+  editor_url ||= nil
+  unless editor_url
+    if record.is_a?(Railspress::Post)
+      editor_url = image_editor_admin_post_path(record, attachment: attachment_name)
+    elsif record.is_a?(Railspress::ContentElement)
+      editor_url = image_editor_admin_content_element_path(record)
+    else
+      entity_type = record.class.railspress_config.route_key
+      editor_url = admin_entity_image_editor_path(entity_type: entity_type, id: record.id, attachment: attachment_name)
+    end
+  end
+%>
+
+<%= content_tag "turbo-frame", id: frame_id do %>
+  <div class="rp-image-section">
+    <div class="rp-image-section__label">
+      <label class="rp-label"><%= label %></label>
+    </div>
+
+    <% if flash_message %>
+      <div class="rp-flash rp-flash--success" style="margin-bottom: var(--rp-space-sm);">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+          <path d="M20 6L9 17l-5-5"/>
+        </svg>
+        <%= flash_message %>
+      </div>
+    <% end %>
+
+    <% if has_image %>
+      <div class="rp-image-section__details">
+        <div class="rp-image-section__compact">
+          <div class="rp-image-section__preview">
+            <%= image_tag main_app.url_for(attachment.variant(resize_to_limit: [800, 450])),
+                  style: record.focal_point_css(attachment_name),
+                  alt: "" %>
+            <div class="rp-image-section__overlay">
+              <%= link_to editor_url, class: "rp-btn", data: { turbo_frame: frame_id } do %>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16" style="margin-right: 6px;">
+                  <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
+                  <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
+                </svg>
+                Edit
+              <% end %>
+            </div>
+          </div>
+        </div>
+        <% if record.has_focal_point?(attachment_name) %>
+          <div class="rp-image-section__footer">
+            <span class="rp-image-section__focal-indicator">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                <circle cx="12" cy="12" r="3"/>
+                <path d="M12 2v4m0 12v4m10-10h-4M6 12H2"/>
+              </svg>
+              Focal point set
+            </span>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="rp-image-section__empty">
+        <p class="rp-hint">No image attached.</p>
+      </div>
+    <% end %>
+  </div>
+<% end %>