lato_cms 3.0.13 → 3.1.1

data/app/models/lato_cms/page.rb

@@ -77,6 +77,46 @@ module LatoCms
       true
     end
 
+    # Translates a component's free-text fields (see
+    # LatoCms::PageField::TRANSLATABLE_FIELD_TYPES) into this page's own
+    # locale via the configured LLM, in one batched call, overwriting their
+    # values in place. Used by PagesController#clone_component_action's
+    # "Clone & translate" option, as the async half run via
+    # LatoCms::TranslateComponentFieldsJob (a Lato::Operation): the fields
+    # themselves are already cloned by the time this runs, synchronously,
+    # so a failure here never loses the clone, only the translation. Raises
+    # on failure (LLM unreachable, malformed/short response) rather than
+    # swallowing it, since the admin is watching the operation's progress
+    # and a silent no-op would misreport success.
+    def translate_component_fields!(template_component_id)
+      targets = fields.where(template_component_id: template_component_id).reject(&:repeater_order?)
+        .select { |f| LatoCms::PageField::TRANSLATABLE_FIELD_TYPES.include?(f.field_type) && f.value.present? }
+      return if targets.empty?
+
+      content = LatoCms::LlmClient.chat(messages: [{ role: 'user', content: self.class.translate_fields_prompt(targets, locale) }])
+      translated = self.class.parse_translated_field_values(content, targets.size)
+      raise "The LLM response couldn't be parsed into #{targets.size} translated value(s)" if translated.blank?
+
+      targets.each_with_index { |field, index| field.update_column(:value, translated[index]) if translated[index].present? }
+    end
+
+    def self.translate_fields_prompt(fields, target_locale)
+      "Translate each string in this JSON array into #{target_locale} (language code). Preserve any HTML " \
+      "tags exactly as-is, translate only the visible text. Respond with a JSON array of the same length " \
+      "and in the same order, translated strings only, no markdown, no explanation.\n\n#{fields.map(&:value).to_json}"
+    end
+
+    def self.parse_translated_field_values(content, expected_count)
+      return [] if content.blank?
+
+      parsed = JSON.parse(content[/\[.*\]/m] || content)
+      return [] unless parsed.is_a?(Array) && parsed.size == expected_count
+
+      parsed.map(&:to_s)
+    rescue JSON::ParserError
+      []
+    end
+
     def template
       LatoCms::TemplateManager.find_template(template_id)
     end

data/app/models/lato_cms/page_field.rb

@@ -2,13 +2,24 @@ module LatoCms
   class PageField < ApplicationRecord
     belongs_to :page, class_name: 'LatoCms::Page'
 
-    has_many_attached :files
+    has_many :page_field_media, -> { order(:position) }, class_name: 'LatoCms::PageFieldMedia', dependent: :destroy
+    has_many :media, through: :page_field_media, class_name: 'LatoCms::Media'
+
+    ATTACHMENT_FIELD_TYPES = %w[file image video gallery].freeze
+
+    # Field types that hold free-form text, used to decide what a
+    # "clone & translate" (see PagesController#clone_component_fields) sends
+    # to the LLM. Everything else (select/multiselect options, booleans,
+    # numbers, dates, colors, json, custom) is either a fixed choice or
+    # structured data that translation would corrupt.
+    TRANSLATABLE_FIELD_TYPES = %w[string textarea text].freeze
 
     validates :template_id, presence: true
     validates :template_component_id, presence: true
     validates :component_id, presence: true
     validates :field_id, presence: true
     validates :field_id, uniqueness: { scope: [:page_id, :template_component_id] }
+    validate :media_present_if_required
 
     REPEATER_ORDER_FIELD_ID = "__repeater_order".freeze
 
@@ -75,36 +86,22 @@ module LatoCms
       field_config&.dig('settings') || {}
     end
 
-    # A video field stores two attachments in `files`: the video itself and an
-    # optional auto-generated poster image. Content type is the discriminator,
-    # so no extra column or naming convention is needed.
-    def video_attachment
-      files.find { |file| file.content_type.to_s.start_with?("video/") }
-    end
-
-    def poster_attachment
-      files.find { |file| file.content_type.to_s.start_with?("image/") }
-    end
+    # Reconciles this field's media references to match the given ordered list
+    # of media ids: creates missing join rows, destroys removed ones, and
+    # updates `position` to match the given order. Callers must tenant-scope
+    # ids before calling this (see PagesController#assign_media_field).
+    def replace_media!(media_ids)
+      ids = Array(media_ids).reject(&:blank?).map(&:to_s).uniq
 
-    # Generates a poster image from the video via Active Storage previews
-    # (ffmpeg) and attaches it alongside the video. Best effort: any failure is
-    # logged and the video keeps working without a poster.
-    def generate_video_poster!
-      video = video_attachment
-      return unless video
-      return if poster_attachment
-
-      unless video.previewable?
-        Rails.logger.warn("LatoCms: video preview unavailable (ffmpeg missing?) for attachment #{video.id}, skipping poster generation")
-        return
+      transaction do
+        existing = page_field_media.index_by { |pfm| pfm.media_id.to_s }
+        (existing.keys - ids).each { |stale_id| existing[stale_id].destroy }
+        ids.each_with_index do |media_id, index|
+          (existing[media_id] || page_field_media.build(media_id: media_id)).update!(position: index)
+        end
       end
 
-      preview = video.preview(resize_to_limit: [1280, 720]).processed
-      preview.image.blob.open do |file|
-        files.attach(io: file, filename: "#{video.filename.base}_poster.jpg", content_type: preview.image.blob.content_type)
-      end
-    rescue StandardError => e
-      Rails.logger.warn("LatoCms: failed to generate video poster for field #{id}: #{e.message}")
+      page_field_media.reset
     end
 
     def as_json(_options = {})
@@ -121,18 +118,15 @@ module LatoCms
 
       case field_type
       when 'file'
-        result[:attachments] = files.map { |f| attachment_as_json(f) }
+        result[:attachments] = media.map { |m| media_as_json(m) }
       when 'image'
-        attached = files.first
-        result[:attachments] = attached ? [attachment_as_json(attached, with_variants: true)] : []
+        attached = media.first
+        result[:attachments] = attached ? [media_as_json(attached, with_variants: true)] : []
       when 'video'
-        attached = video_attachment
-        result[:attachments] = attached ? [video_attachment_as_json(attached)] : []
+        attached = media.first
+        result[:attachments] = attached ? [video_media_as_json(attached)] : []
       when 'gallery'
-        order = value ? (JSON.parse(value) rescue []) : []
-        all_files = files.to_a
-        ordered = order.any? ? all_files.sort_by { |f| order.index(f.id.to_s) || Float::INFINITY } : all_files
-        result[:attachments] = ordered.map { |f| attachment_as_json(f, with_variants: true) }
+        result[:attachments] = media.map { |m| media_as_json(m, with_variants: true) }
       else
         result[:value] = parsed_value
       end
@@ -142,58 +136,36 @@ module LatoCms
 
     private
 
-    def attachment_as_json(attachment, with_variants: false)
+    def media_as_json(m, with_variants: false)
       json = {
-        id: attachment.id,
-        filename: attachment.filename.to_s,
-        content_type: attachment.content_type,
-        byte_size: attachment.byte_size,
-        url: Rails.application.routes.url_helpers.rails_blob_path(attachment, only_path: true)
+        media_id: m.id,
+        name: m.name,
+        alt_text: m.alt_text(page.locale),
+        filename: m.filename,
+        content_type: m.file.attached? ? m.file.content_type : nil,
+        byte_size: m.file.attached? ? m.file.byte_size : nil,
+        url: m.url
       }
-      json[:sizes] = attachment_variant_urls(attachment) if with_variants
+      json[:sizes] = m.variant_urls(field_settings['sizes']) if with_variants
       json
     end
 
-    # Video attachment json gains a `poster_url` key (nil until the poster job
+    # Video media json gains a `poster_url` key (nil until the poster job
     # runs) so API consumers get video and poster URLs in a single object.
-    def video_attachment_as_json(attachment)
-      poster = poster_attachment
-      attachment_as_json(attachment).merge(
-        poster_url: poster && Rails.application.routes.url_helpers.rails_blob_path(poster, only_path: true)
-      )
+    def video_media_as_json(m)
+      media_as_json(m).merge(poster_url: m.poster_url)
     end
 
-    # Builds a map of { size_name => variant_url } from the field's `settings.sizes`.
-    # Variants are processed lazily by Active Storage on first request to their URL.
-    def attachment_variant_urls(attachment)
-      sizes = field_settings['sizes']
-      return {} if sizes.blank? || !sizes.respond_to?(:each_pair) || !attachment.variable?
-
-      url_helpers = Rails.application.routes.url_helpers
-      sizes.each_with_object({}) do |(name, opts), acc|
-        transformation = variant_transformation(opts)
-        next if transformation.blank?
-
-        variant = attachment.variant(transformation)
-        acc[name] = url_helpers.rails_representation_path(variant, only_path: true)
-      end
-    rescue StandardError => e
-      Rails.logger.error("LatoCms: Failed to build image variants for attachment #{attachment.id}: #{e.message}")
-      {}
-    end
+    # A field can only see this validation once media presence is a real
+    # association (unlike direct attachments, which used to require a
+    # controller-level backstop after save). A brand new required field is
+    # saved once, unvalidated, to get an id before media can be attached, then
+    # saved again (validated) once media is in place — see
+    # PagesController#save_field.
+    def media_present_if_required
+      return unless ATTACHMENT_FIELD_TYPES.include?(field_type) && field_required?
 
-    # Maps a size config (width/height/resize) to an Active Storage variant transformation.
-    # resize modes: "limit" (default, scale down only), "fit" (scale to fit), "fill" (crop to exact size).
-    def variant_transformation(opts)
-      opts = {} unless opts.respond_to?(:[])
-      dimensions = [opts['width'] || opts[:width], opts['height'] || opts[:height]]
-      return nil if dimensions.compact.empty?
-
-      case (opts['resize'] || opts[:resize] || 'limit').to_s
-      when 'fill' then { resize_to_fill: dimensions }
-      when 'fit' then { resize_to_fit: dimensions }
-      else { resize_to_limit: dimensions }
-      end
+      errors.add(:base, I18n.t('lato_cms.field_required_attachment_error')) if page_field_media.reload.empty?
     end
 
     def parse_value

data/app/models/lato_cms/page_field_media.rb

@@ -0,0 +1,8 @@
+module LatoCms
+  class PageFieldMedia < ApplicationRecord
+    belongs_to :page_field, class_name: 'LatoCms::PageField'
+    belongs_to :media, class_name: 'LatoCms::Media'
+
+    validates :media_id, uniqueness: { scope: :page_field_id }
+  end
+end

data/app/views/lato_cms/media/_form_create.html.erb

@@ -0,0 +1,20 @@
+<% media ||= LatoCms::Media.new %>
+
+<%= turbo_frame_tag dom_id(media, 'form') do %>
+  <%= form_with model: media, url: lato_cms.media_create_action_path, data: { turbo_frame: '_self', controller: 'lato-form' } do |form| %>
+    <%= lato_form_notices class: %w[mb-3] %>
+    <%= lato_form_errors media, class: %w[mb-3] %>
+
+    <%# Name/alt text are edited afterwards from this same list's "edit"
+        action — they default to the filename on upload, so there's nothing
+        to fill in here beyond the file itself. %>
+    <div class="mb-3">
+      <%= lato_form_item_label form, :file %>
+      <%= lato_form_item_input_file_dropzone form, :file %>
+    </div>
+
+    <div class="d-flex justify-content-end">
+      <%= lato_form_submit form, t('lato_cms.media_create_cta'), class: %w[btn-success] %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/lato_cms/media/_form_update.html.erb

@@ -0,0 +1,60 @@
+<% media ||= LatoCms::Media.new %>
+
+<%= turbo_frame_tag dom_id(media, 'form') do %>
+  <%= form_with model: media, url: lato_cms.media_update_action_path(media), method: :patch, data: { turbo_frame: '_self', controller: 'lato-form lato-cms-reload-on-modal-close' } do |form| %>
+    <%= lato_form_notices class: %w[mb-3] %>
+    <%= lato_form_errors media, class: %w[mb-3] %>
+
+    <div class="mb-3 d-flex align-items-center gap-2">
+      <%= lato_cms_media_thumb(media, size: 64) %>
+      <span class="text-muted small"><%= media.filename %></span>
+    </div>
+
+    <div class="mb-3">
+      <%= lato_form_item_label form, :name %>
+      <%= lato_form_item_input_text form, :name, required: true %>
+    </div>
+
+    <% if media.image? %>
+      <div class="mb-3">
+        <div class="d-flex align-items-center justify-content-between">
+          <label class="form-label mb-0"><%= t('lato_cms.media_alt_text') %></label>
+          <% if LatoCms.config.llm_configured? %>
+            <%= link_to t('lato_cms.media_alt_text_regenerate'), lato_cms.media_regenerate_alt_text_action_path(media),
+              class: 'btn btn-sm btn-outline-secondary',
+              data: {
+                lato_action_target: 'trigger',
+                turbo_method: :post,
+                turbo_frame: 'lato_operation',
+                turbo_confirm: t('lato_cms.media_alt_text_regenerate_confirm'),
+                action_title: t('lato_cms.media_alt_text_regenerate')
+              } %>
+          <% end %>
+        </div>
+
+        <ul class="nav nav-tabs">
+          <% LatoCms.config.locales.each_with_index do |locale, index| %>
+            <li class="nav-item">
+              <button class="nav-link <%= 'active' if index.zero? %>" data-bs-toggle="tab"
+                data-bs-target="#<%= dom_id(media, "alt_text_#{locale}_pane") %>" type="button">
+                <%= locale_to_flag(locale) %> <%= locale.to_s.upcase %>
+              </button>
+            </li>
+          <% end %>
+        </ul>
+
+        <div class="tab-content border border-top-0 rounded-bottom p-3">
+          <% LatoCms.config.locales.each_with_index do |locale, index| %>
+            <div class="tab-pane fade <%= 'show active' if index.zero? %>" id="<%= dom_id(media, "alt_text_#{locale}_pane") %>">
+              <%= lato_form_item_input_text form, :"alt_text_#{locale}" %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="d-flex justify-content-end">
+      <%= lato_form_submit form, t('lato_cms.cta_update'), class: %w[btn-success] %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/lato_cms/media/create.html.erb

@@ -0,0 +1,13 @@
+<%= lato_page_head t('lato_cms.media_create_title'), [
+  { label: t('lato_cms.media_index_title'), path: lato_cms.media_path },
+  { label: t('lato_cms.media_create_title') }
+] %>
+
+<div class="card mb-4">
+  <div class="card-header">
+    <h2 class="fs-4 mb-0"><%= t('lato_cms.media_create_title') %></h2>
+  </div>
+  <div class="card-body">
+    <%= render 'lato_cms/media/form_create', media: @media %>
+  </div>
+</div>

data/app/views/lato_cms/media/index.html.erb

@@ -0,0 +1,22 @@
+<%= lato_page_head t('lato_cms.media_index_title'), [{ label: t('lato_cms.media_index_title') }] %>
+
+<div class="card">
+  <div class="card-body">
+    <%= lato_index @media,
+      custom_actions: {
+        create: {
+          path: lato_cms.media_create_path,
+          icon: 'bi bi-plus',
+          title: t('lato_cms.media_create_cta'),
+          data: {
+            controller: 'lato-tooltip',
+            lato_action_target: 'trigger',
+            turbo_frame: dom_id(LatoCms::Media.new, 'form'),
+            action_title: t('lato_cms.media_create_title')
+          }
+        }
+      },
+      pagination_options: [12, 24, 48, 96]
+    %>
+  </div>
+</div>

data/app/views/lato_cms/media/picker_action.html.erb

@@ -0,0 +1,98 @@
+<% multiple = ActiveModel::Type::Boolean.new.cast(params[:multiple]) %>
+
+<%= turbo_frame_tag params[:frame_id] do %>
+  <div data-controller="lato-cms-media-picker"
+       data-lato-cms-media-picker-multiple-value="<%= multiple %>"
+       data-lato-cms-media-picker-selected-label-value="<%= t('lato_cms.media_picker_selected_label') %>">
+
+    <ul class="nav nav-tabs mb-3">
+      <li class="nav-item">
+        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#lato-cms-media-picker-browse" type="button">
+          <%= t('lato_cms.media_picker_tab_browse') %>
+        </button>
+      </li>
+      <li class="nav-item">
+        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#lato-cms-media-picker-upload" type="button">
+          <%= t('lato_cms.media_picker_tab_upload') %>
+        </button>
+      </li>
+    </ul>
+
+    <div class="tab-content">
+      <div class="tab-pane fade show active" id="lato-cms-media-picker-browse">
+        <%= form_with url: lato_cms.media_picker_action_path, method: :get, data: { turbo_frame: params[:frame_id] } do %>
+          <%= hidden_field_tag :frame_id, params[:frame_id] %>
+          <%= hidden_field_tag :multiple, multiple %>
+          <div class="d-flex gap-2 mb-3">
+            <div class="btn-group">
+              <%= link_to t('lato_cms.media_type_all'), lato_cms.media_picker_action_path(frame_id: params[:frame_id], multiple: multiple, q: params[:q]),
+                class: "btn btn-sm #{params[:type].blank? ? 'btn-primary' : 'btn-outline-secondary'}", data: { turbo_frame: params[:frame_id] } %>
+              <% %w[image video file].each do |type| %>
+                <%= link_to t("lato_cms.media_type_#{type}"), lato_cms.media_picker_action_path(frame_id: params[:frame_id], multiple: multiple, type: type, q: params[:q]),
+                  class: "btn btn-sm #{params[:type] == type ? 'btn-primary' : 'btn-outline-secondary'}", data: { turbo_frame: params[:frame_id] } %>
+              <% end %>
+            </div>
+            <%= text_field_tag :q, params[:q], class: 'form-control form-control-sm', placeholder: t('lato_cms.media_search_placeholder') %>
+            <button type="submit" class="btn btn-sm btn-outline-primary"><i class="bi bi-search"></i></button>
+          </div>
+        <% end %>
+
+        <% if @media.empty? %>
+          <div class="text-center text-muted py-5">
+            <i class="bi bi-images fs-1 d-block mb-2"></i>
+            <%= t('lato_cms.media_picker_empty') %>
+          </div>
+        <% else %>
+          <div class="lato-cms-media-picker__grid mb-3" data-lato-cms-media-picker-target="grid">
+            <% @media.each do |media| %>
+              <div class="lato-cms-media-picker__item"
+                   data-media-id="<%= media.id %>"
+                   data-media-name="<%= media.name %>"
+                   data-media-thumb="<%= media.thumbnail_url %>"
+                   data-media-url="<%= media.url %>"
+                   data-media-poster-url="<%= media.poster_url %>"
+                   data-media-type="<%= media.media_type %>"
+                   data-action="click->lato-cms-media-picker#select"
+                   data-lato-cms-media-picker-target="item">
+                <%= lato_cms_media_thumb(media, size: 100) %>
+                <span class="small text-truncate d-block"><%= media.name %></span>
+              </div>
+            <% end %>
+          </div>
+
+          <%= paginate @media, param_name: :page %>
+        <% end %>
+
+        <% if multiple %>
+          <div class="d-flex justify-content-between align-items-center mt-2">
+            <span data-lato-cms-media-picker-target="selectedCount">0 <%= t('lato_cms.media_picker_selected_label') %></span>
+            <button type="button" class="btn btn-primary" data-action="lato-cms-media-picker#confirm" data-lato-cms-media-picker-target="confirmButton" disabled>
+              <%= t('lato_cms.media_picker_confirm') %>
+            </button>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="tab-pane fade" id="lato-cms-media-picker-upload">
+        <div data-lato-cms-media-picker-target="uploadNotice"></div>
+        <%# Name/alt text are intentionally not collected here: they default
+            to the filename on upload and are only ever edited afterwards
+            from the Media library's own edit form.
+            `model:` (not `scope: :media`) so the form binds to a real new
+            record — `scope:` alone falls back to the controller's `@media`
+            (the browse tab's paginated collection), and an
+            ActiveRecord::Relation delegates an unrecognized `#name` call to
+            its model class, silently pre-filling a `:name` field with the
+            literal string "LatoCms::Media" (bit us once already here). %>
+        <%= form_with model: LatoCms::Media.new, url: lato_cms.media_create_action_path, data: {
+          lato_cms_media_picker_target: 'uploadForm', action: 'submit->lato-cms-media-picker#upload'
+        } do |form| %>
+          <%= lato_form_item_input_file_dropzone form, :file, accept: { 'image' => 'image/*', 'video' => 'video/*' }[params[:type]] %>
+          <div class="d-flex justify-content-end">
+            <button type="submit" class="btn btn-success"><%= t('lato_cms.media_upload_cta') %></button>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/lato_cms/media/update.html.erb

@@ -0,0 +1,13 @@
+<%= lato_page_head t('lato_cms.media_update_title'), [
+  { label: t('lato_cms.media_index_title'), path: lato_cms.media_path },
+  { label: t('lato_cms.media_update_title') }
+] %>
+
+<div class="card mb-4">
+  <div class="card-header">
+    <h2 class="fs-4 mb-0"><%= t('lato_cms.media_update_title') %></h2>
+  </div>
+  <div class="card-body">
+    <%= render 'lato_cms/media/form_update', media: @media %>
+  </div>
+</div>

data/app/views/lato_cms/pages/_component_accordion.html.erb

@@ -64,6 +64,21 @@
                       <%= locale_to_flag(sibling.locale) %> <%= t('lato_cms.component_clone_from', lang: sibling.locale.upcase) %>
                     <% end %>
                   </li>
+                  <% if LatoCms.config.llm_configured? %>
+                    <li>
+                      <%= link_to lato_cms.pages_clone_component_action_path(page, tc[:template_component_id], source_page_id: sibling.id, translate: true),
+                          class: 'dropdown-item',
+                          data: {
+                            lato_action_target: 'trigger',
+                            turbo_method: :post,
+                            turbo_frame: 'lato_operation',
+                            turbo_confirm: t('lato_cms.component_clone_translate_confirm', lang: sibling.locale.upcase),
+                            action_title: t('lato_cms.component_clone_translate_from', lang: sibling.locale.upcase)
+                          } do %>
+                        <i class="bi bi-translate me-1"></i><%= locale_to_flag(sibling.locale) %> <%= t('lato_cms.component_clone_translate_from', lang: sibling.locale.upcase) %>
+                      <% end %>
+                    </li>
+                  <% end %>
                 <% end %>
               </ul>
             </div>

data/app/views/lato_cms/pages/fields/_file.html.erb

@@ -1,56 +1,5 @@
-<% label = field_config['name'] || field_id.humanize %>
-<% required = field_config['required'] == true %>
 <% settings = field_config['settings'] || {} %>
-<% multiple = settings['multiple'] == true %>
-<% accept = settings['accept'] %>
-<% files_input_name = lato_cms_field_input_name(field_id, 'files', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
-<% remove_input_name = lato_cms_field_input_name(field_id, 'remove_file_ids', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
-<% input_id = lato_cms_field_dom_id(field_id, 'files', dom_id_prefix: local_assigns[:dom_id_prefix]) %>
-
-<label class="form-label">
-  <%= label %><%= ' *' if required %>
-</label>
-
-<div data-controller="lato-cms-file-field"
-     data-field-id="<%= field_id %>"
-     data-field-required="<%= required %>"
-     data-lato-cms-file-field-multiple-value="<%= multiple %>"
-     data-new-badge-label="<%= t('lato_cms.field_file_new_badge') %>"
-     data-remove-label="<%= t('lato_cms.field_file_remove') %>"
-     data-remove-pending-label="<%= t('lato_cms.field_file_remove_pending') %>"
-     data-undo-label="<%= t('lato_cms.field_file_remove_undo') %>">
-  <div class="mb-2" data-lato-cms-file-field-target="list">
-  <% if page_field&.files&.attached? %>
-    <% page_field.files.each do |file| %>
-      <div class="lato-cms-file-field__item" data-lato-cms-file-field-target="item" data-attachment-id="<%= file.id %>">
-        <div class="lato-cms-file-field__info">
-          <i class="bi bi-paperclip"></i>
-          <span><%= file.blob.filename %></span>
-          <span class="text-muted small">(<%= number_to_human_size(file.blob.byte_size) %>)</span>
-        </div>
-        <button type="button" class="lato-cms-attachment-field__remove" title="<%= t('lato_cms.field_file_remove') %>" aria-label="<%= t('lato_cms.field_file_remove') %>" data-action="lato-cms-file-field#remove">
-          <i class="bi bi-trash"></i>
-        </button>
-        <div class="lato-cms-file-field__removed d-none" data-lato-cms-file-field-target="removedNotice">
-          <span class="text-danger small">
-            <i class="bi bi-trash me-1"></i><%= t('lato_cms.field_file_remove_pending') %>
-          </span>
-          <button type="button" class="btn btn-link btn-sm p-0" data-action="lato-cms-file-field#undo">
-            <%= t('lato_cms.field_file_remove_undo') %>
-          </button>
-        </div>
-      </div>
-    <% end %>
-  <% end %>
-  </div>
-
-  <input type="file"
-    class="form-control"
-    name="<%= files_input_name %>"
-    id="<%= input_id %>"
-    data-lato-cms-file-field-target="input"
-    data-action="change->lato-cms-file-field#addFiles"
-    <%= 'required' if required && !page_field&.files&.attached? %>
-    <%= 'multiple' if multiple %>
-    <% if accept %>accept="<%= accept %>"<% end %>>
-</div>
+<%= render partial: 'lato_cms/pages/fields/media_field', locals: {
+  field_id: field_id, field_config: field_config, page_field: page_field, kind: 'file', multiple: settings['multiple'] == true,
+  input_name_prefix: local_assigns[:input_name_prefix], dom_id_prefix: local_assigns[:dom_id_prefix]
+} %>

data/app/views/lato_cms/pages/fields/_gallery.html.erb

@@ -1,60 +1,4 @@
-<% label = field_config['name'] || field_id.humanize %>
-<% required = field_config['required'] == true %>
-<% settings = field_config['settings'] || {} %>
-<% accept = settings['accept'] || 'image/*' %>
-<% files_input_name = lato_cms_field_input_name(field_id, 'files', input_name_prefix: local_assigns[:input_name_prefix], multiple: true) %>
-
-<%# Build ordered file list from value JSON or default order %>
-<% ordered_files = begin
-  if page_field&.files&.attached?
-    order = JSON.parse(page_field.value || '[]') rescue []
-    files = page_field.files.to_a
-    order.filter_map { |id| files.find { |f| f.id.to_s == id.to_s } } +
-      files.reject { |f| order.include?(f.id.to_s) }
-  else
-    []
-  end
-end %>
-
-<label class="form-label">
-  <%= label %><%= ' *' if required %>
-</label>
-
-<div data-controller="lato-cms-gallery-field" data-lato-cms-gallery-field-field-id-value="<%= field_id %>" data-lato-cms-gallery-field-input-name-prefix-value="<%= local_assigns[:input_name_prefix].presence || "fields[#{field_id}]" %>" data-field-required="<%= required %>" data-remove-label="<%= t('lato_cms.field_file_remove') %>">
-  <div class="lato-cms-gallery-field__grid mb-2"
-       data-lato-cms-gallery-field-target="grid"
-       data-action="dragover->lato-cms-gallery-field#onGridDragOver drop->lato-cms-gallery-field#onGridDrop">
-    <% ordered_files.each do |file| %>
-      <div class="lato-cms-gallery-field__item"
-           data-gallery-item
-           data-attachment-id="<%= file.id %>"
-           draggable="true"
-           data-action="dragstart->lato-cms-gallery-field#onDragStart dragend->lato-cms-gallery-field#onDragEnd">
-        <img src="<%= lato_cms_attachment_path(file) %>" class="lato-cms-gallery-field__thumb" alt="<%= file.filename %>">
-        <button type="button" class="lato-cms-attachment-field__remove lato-cms-gallery-field__remove" title="<%= t('lato_cms.field_file_remove') %>" aria-label="<%= t('lato_cms.field_file_remove') %>" data-action="click->lato-cms-gallery-field#remove">
-          <i class="bi bi-trash"></i>
-        </button>
-      </div>
-    <% end %>
-  </div>
-
-  <% if ordered_files.empty? %>
-    <p class="text-muted small mb-2" data-lato-cms-gallery-field-target="emptyMsg"><%= t('lato_cms.field_gallery_empty') %></p>
-  <% end %>
-
-  <label class="btn btn-sm btn-outline-secondary">
-    <i class="bi bi-plus-lg me-1"></i><%= t('lato_cms.field_gallery_add_images') %>
-    <%# visually-hidden (not d-none): a required display:none input makes native
-        validation fail silently with a "not focusable" error, while a clipped
-        1px input stays focusable so the browser can anchor its message here. %>
-    <input type="file"
-      class="visually-hidden"
-      name="<%= files_input_name %>"
-      accept="<%= accept %>"
-      multiple
-      data-lato-cms-gallery-field-target="fileInput"
-      data-action="change->lato-cms-gallery-field#addFiles"
-      <%= 'required' if required && ordered_files.empty? %>>
-  </label>
-  <small class="text-muted ms-2"><%= t('lato_cms.field_gallery_drag_to_reorder') %></small>
-</div>
+<%= render partial: 'lato_cms/pages/fields/media_field', locals: {
+  field_id: field_id, field_config: field_config, page_field: page_field, kind: 'image', multiple: true,
+  input_name_prefix: local_assigns[:input_name_prefix], dom_id_prefix: local_assigns[:dom_id_prefix]
+} %>