studio-engine 0.40.0 → 0.42.0

data/app/views/studio/emails/_row.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (entry:, uploads_available:, max_width:)
+<%# locals: (entry:, uploads_available:, max_width:, preview_name: nil)
     One registered email: its live banner, its name, and where that banner comes
     from. The whole row is the imageUploadHost x-data so the thumbnail, the Edit
     button, and the hidden multipart form the cropper submits all sit together —
@@ -8,6 +8,40 @@
   source     = Studio::EmailCatalog.source(entry.key)
   banner_url = Studio::EmailCatalog.preview_url(entry.key)
   form_id    = "email-banner-form-#{entry.key.dasherize}"
+  card_width = Studio::Banner::DEFAULT_WIDTH
+
+  # The banner AS IT ARRIVES, not the bare artwork. Same partial the mailer
+  # renders, in preview mode so the text nodes carry handles — the row repaints
+  # when the example recipient changes.
+  # Defaulted rather than required: the row is rendered by tests and by any host
+  # that has not passed a recipient, and "nobody selected" is a real state — it
+  # renders the name-free header, which is what a stranger receives.
+  name    = local_assigns.fetch(:preview_name, nil)
+  # THE BANNER AS IT ARRIVES — for a layered email, artwork with live text on it.
+  #
+  # Two conditions, and both were learned the hard way.
+  #
+  # It renders in an IFRAME. The banner is the email's own <table>, and putting
+  # one directly in a list row nests rows inside rows: every host asserting "one
+  # row per email" counted three per layered email, and two consumer suites went
+  # red. An iframe is a separate document, so the list's markup contract is
+  # untouched — the same reason the email preview lower down the detail page is
+  # one.
+  #
+  # And it only layers when THIS APP's artwork is layered. Whether an email
+  # layers belongs to its mailer, which the catalogue cannot see; the closest
+  # honest proxy is whose artwork is registered. turf-monster re-registers
+  # magic_link with its own flat banner and inherits the engine's background, so
+  # a naive check drew a layered picture turf-monster never sends.
+  layered = Studio::EmailCatalog.background_url(entry.key).present? && entry.engine_artwork?
+  banner  = layered ? Studio::Banner.for(entry.key, name: name) : nil
+  subject = Studio::EmailCatalog.subject_for(entry.key, name: name)
+
+  # The TEMPLATES ride on the row so the repaint script can re-resolve them for
+  # whoever is selected, without a second payload to keep in step.
+  header_template = Studio::EmailCatalog.header_template(entry.key)
+  header_fallback = Studio::EmailCatalog.header_fallback(entry.key)
+  subject_template = Studio::EmailSetting.copy_for(entry.key, :subject) || entry.subject
 
   # `badge` is a shape-only utility in engine.css — the state color comes from
   # theme-token utilities so it follows each app's palette in light and dark.
@@ -35,13 +69,25 @@
     override. On a read-only app the cropper assets are not loaded either, so an
     unconditional x-data would reference an undefined factory and Alpine would
     throw on every row. %>
-<tr class="border-b border-subtle last:border-0"
+<%# THE WHOLE ROW OPENS THE EMAIL. Kept as a click handler on the row with the
+    name still a real <a>: wrapping a table row in a link is invalid HTML, and
+    making every cell a link would break the Upload button inside one of them.
+    The handler ignores clicks that landed on a control, so Upload, Revert and
+    the name link keep their own behaviour. %>
+<tr class="border-b border-subtle last:border-0 cursor-pointer hover:bg-inset/60" data-email-row
+    data-email-path="<%= admin_email_path(entry.key) %>"
+    data-header="<%= header_template %>"
+    data-header-fallback="<%= header_fallback %>"
+    data-subject="<%= subject_template %>"
     <% if uploads_available %>
       x-data="imageUploadHost({
         store: 'emailModals',
         aspectRatio: <%= entry.ratio %>,
         maxWidth: <%= max_width %>,
         transparent: false,
+        <%# Same answer as the email's own page. Without this the SAME button
+            refused an animated GIF here and accepted it there. %>
+        allowGifs: true,
         filename: '<%= entry.key %>.png',
         saving: 'Saving banner…',
         success: 'Banner updated',
@@ -52,9 +98,23 @@
     <% end %>>
 
   <td class="px-4 py-4">
-    <div class="rounded-lg overflow-hidden border border-subtle w-40"
+    <div class="rounded-lg overflow-hidden border border-subtle w-56" data-email-banner-frame
          style="aspect-ratio: <%= entry.ratio %>; background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900));">
-      <% if banner_url %>
+      <% if banner %>
+        <%# srcdoc, so the email's table lives in its own document. Root-relative
+            asset paths inside it resolve against this page's origin, which is
+            what the admin preview wants. %>
+        <iframe class="pointer-events-none" scrolling="no" tabindex="-1" loading="lazy"
+                data-email-banner-preview data-banner-width="<%= card_width %>"
+                title="<%= entry.label %> banner"
+                style="width:<%= card_width %>px;height:<%= (card_width / entry.ratio).round %>px;border:0;transform-origin:top left;display:block;"
+                <%# ESCAPED EXPLICITLY. render returns an html_safe buffer, so a bare
+                    output tag injects it RAW into the attribute and closes the iframe
+                    at the banner's first quote — the row's markup collapses and the
+                    email's name disappears from the page. to_str drops the safe flag
+                    so the escaping actually happens. %>
+                srcdoc="<%= ERB::Util.html_escape(render("studio/mailers/layered_banner", banner: banner, preview: true).to_str) %>"></iframe>
+      <% elsif banner_url %>
         <%= image_tag banner_url, class: "w-full h-full object-cover",
               alt: "#{entry.label} email banner", loading: "lazy" %>
       <% else %>
@@ -78,6 +138,10 @@
     <p class="font-mono text-2xs text-muted mt-1"><%= entry.key %></p>
   </td>
 
+  <td class="px-4 py-4">
+    <p class="text-sm text-heading" data-row-subject><%= subject %></p>
+  </td>
+
   <%# whitespace-nowrap keeps the pill a pill — "<App>'s own" is long enough to
       wrap inside a bordered badge, which reads as a broken box next to the
       short "Inherited default". %>

data/app/views/studio/emails/index.html.erb

@@ -24,10 +24,22 @@
   # Counts the app's OWN artwork either way — uploaded here or committed in this
   # app's assets. Counting only uploads made turf-monster, whose eight banners
   # all ship from its own repo, report "all inheriting the default artwork".
+  # The picker renders entirely from this payload — a field omitted here is a
+  # grey circle with no letter in it, which is exactly what shipped once.
+  recipients_config = {
+    targets: (@targets || []).map do |t|
+      { id: t.id, label: t.label, name: t.name, email: t.email, admin: t.admin?,
+        avatar_url: t.avatar_url, avatar_color: t.avatar_color, initials: t.initials }
+    end,
+    targetId: @target&.id,
+    appName: Studio.app_name.to_s
+  }
+
   app_artwork = @entries.count { |entry| Studio::EmailCatalog.app_artwork?(entry.key) }
   bannerless  = @entries.count { |entry| Studio::EmailCatalog.source(entry.key) == :none }
 %>
-<div class="max-w-5xl mx-auto px-4 pb-16">
+<div class="max-w-5xl mx-auto px-4 pb-16"
+     x-data="emailRecipients(<%= recipients_config.to_json %>)">
   <header class="space-y-2 pt-8 pb-6">
     <p class="label-upper">studio-engine &middot; v<%= Studio::VERSION %></p>
     <h1 class="text-3xl font-bold text-heading">Emails</h1>
@@ -74,30 +86,44 @@
     </div>
   <% end %>
 
+  <%# WHO the list is rendered for. Every banner greets by name and a subject may
+      too, so a list rendered for one person is a list of half-truths about
+      everyone else — the control belongs above the table, not on each row. %>
+  <% if (@targets || []).any? %>
+    <div class="mb-4 max-w-sm">
+      <p class="label-upper mb-2">Example</p>
+      <%= render "studio/emails/recipient_picker" %>
+    </div>
+  <% end %>
+
   <div class="card overflow-hidden">
     <div class="overflow-x-auto">
       <table class="w-full text-left align-middle">
         <thead>
           <tr class="border-b border-subtle">
-            <th class="label-upper px-4 py-3 w-48">Banner</th>
+            <th class="label-upper px-4 py-3 w-64">Banner</th>
             <th class="label-upper px-4 py-3">Email</th>
+            <th class="label-upper px-4 py-3 w-56">Subject</th>
             <th class="label-upper px-4 py-3 w-52">Image</th>
             <% if @uploads_available %>
               <th class="label-upper px-4 py-3 w-40 text-right">Actions</th>
             <% end %>
           </tr>
         </thead>
-        <tbody>
+        <tbody @click="openRow($event, $event.target.closest('[data-email-row]'))">
           <% @entries.each do |entry| %>
             <%= render "studio/emails/row", entry: entry,
                   uploads_available: @uploads_available,
-                  max_width: max_width %>
+                  max_width: max_width, preview_name: @preview_name %>
           <% end %>
         </tbody>
       </table>
     </div>
   </div>
 
+  <%= render "studio/emails/banner_scale" %>
+  <%= render "studio/emails/recipient_repaint" %>
+
   <p class="text-xs text-muted mt-4">
     Banners render full-bleed at 600px wide inside the email card. The crop is
     saved at up to <%= max_width %>px, which is retina-sharp in an inbox. Each

data/app/views/studio/emails/orphan.html.erb

@@ -0,0 +1,45 @@
+<%#  admin/emails/:key for an ORPHAN — an email this app uploaded artwork for,
+     which has since left the registry.
+
+     It exists so the operator has a way out. Without the page, that upload is a
+     live ImageCache row and a paid-for S3 object with no revert button anywhere,
+     because the only control that could remove it lived on a page that 404s the
+     moment the key is unregistered.
+
+     Deliberately minimal: there is no banner to preview, no copy to edit and no
+     recipient to render as. The one honest affordance is "drop it". %>
+<% content_for(:title) { "Unregistered email" } %>
+<div class="max-w-5xl mx-auto px-4 pb-16">
+  <header class="pt-8 pb-5">
+    <%= link_to "← All emails", admin_emails_path,
+          class: "text-sm text-muted hover:text-heading underline underline-offset-2" %>
+    <h1 class="text-3xl font-bold text-heading mt-2">Unregistered email</h1>
+    <div class="flex flex-wrap items-center gap-2 mt-3">
+      <span class="badge bg-warning/10 text-warning border-warning/30 whitespace-nowrap">Not registered</span>
+      <span class="font-mono text-2xs text-muted"><%= @key %></span>
+    </div>
+  </header>
+
+  <section class="card p-4 mb-6">
+    <p class="text-body max-w-2xl">
+      <%= Studio.app_name %> uploaded artwork for <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded"><%= @key %></code>,
+      but no email is registered under that key any more — so nothing sends it. The
+      image is still stored, and this page is here so you can drop it.
+    </p>
+
+    <% if (record = Studio::EmailCatalog.record(@key)) %>
+      <div class="rounded-lg overflow-hidden border border-subtle w-56 mt-4">
+        <%= image_tag record.url, class: "w-full h-auto", alt: "Stored artwork for #{@key}" %>
+      </div>
+      <p class="font-mono text-2xs text-muted mt-2 break-all"><%= record.s3_key %></p>
+    <% end %>
+
+    <% if @uploads_available %>
+      <div class="mt-4">
+        <%= button_to "Drop this image", admin_email_path(@key), method: :delete,
+              class: "btn btn-outline btn-sm",
+              form: { data: { turbo_confirm: "Delete the stored image for #{@key}? Nothing sends it." } } %>
+      </div>
+    <% end %>
+  </section>
+</div>