studio-engine 0.41.0 → 0.43.0

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

@@ -0,0 +1,122 @@
+<%# Repaints EVERY row on the emails list when the example recipient changes.
+
+    The list shows each email's banner and subject as they would arrive. Both are
+    per-recipient — the banner greets by first name and the subject may too — so
+    a list rendered for one person is a list of half-truths about everyone else.
+    Changing the selection has to repaint all of them.
+
+    WHY THE TEMPLATES RIDE ON THE ROW
+    Each row carries its own header / fallback / subject templates as data
+    attributes, and this reads them from the DOM. The alternative was a second
+    JSON payload listing every email, which would have to be kept in step with
+    the rows themselves — and a row whose payload entry went missing would
+    silently stop repainting while still looking correct for whoever was selected
+    at page load.
+
+    The placeholder rule is the same one Studio::Banner applies server-side, and
+    the same one the detail page's editor applies. It is small, and it is pinned
+    on both sides. If they disagree, the server is right. %>
+<script>
+  (function () {
+    function recipients(config) {
+      return {
+        targets: config.targets || [],
+        targetId: config.targetId,
+        pickerOpen: false,
+
+        init() {
+          this.paint();
+          this.$watch("targetId", () => this.paint());
+        },
+
+        target() {
+          return this.targets.find((t) => t.id === this.targetId) || this.targets[0] || {};
+        },
+
+        firstName() {
+          return (this.target().name || "").trim().split(/\s+/)[0] || "";
+        },
+
+        resolve(template, fallback) {
+          var first = this.firstName();
+          var app = config.appName || "";
+          var text = (template || "").replace(/\{app\}/g, app);
+          if (first) return text.replace(/\{name\}/g, first);
+          if (text.indexOf("{name}") !== -1) return (fallback || "").replace(/\{app\}/g, app);
+          return text;
+        },
+
+        // A subject has no second field for the nameless case, so an unresolved
+        // placeholder is removed along with the punctuation holding it — the
+        // same two passes Studio::Banner.interpolate makes, so "Sign in, {name}"
+        // reads "Sign in" here exactly as it would in an inbox.
+        resolveSubject(template) {
+          var app = config.appName || "";
+          var text = (template || "").replace(/\{app\}/g, app);
+          var first = this.firstName();
+          if (first) return text.replace(/\{name\}/g, first);
+          return text.replace(/[,;:—-]?\s*\{name\}/g, "")
+                     .replace(/^\s*[,;:—-]\s*/, "")
+                     .replace(/\s+/g, " ")
+                     .trim();
+        },
+
+        // A row's banner lives in an IFRAME — the email's table is its own
+        // document so it cannot nest rows inside the list. Same-origin srcdoc,
+        // so its nodes are reachable; contentDocument is null until the frame
+        // has parsed, which is why the load listener is wired as well as the
+        // immediate attempt.
+        bannerNode(row, selector) {
+          var frame = row.querySelector("iframe[data-email-banner-preview]");
+          if (frame) {
+            try { return frame.contentDocument && frame.contentDocument.querySelector(selector); }
+            catch (_) { return null; }
+          }
+          return row.querySelector(selector);
+        },
+
+        paintRow(row) {
+          var header = this.bannerNode(row, "[data-banner-header]");
+          var subject = row.querySelector("[data-row-subject]");
+          if (header) {
+            header.textContent = this.resolve(row.dataset.header, row.dataset.headerFallback);
+          }
+          if (subject) subject.textContent = this.resolveSubject(row.dataset.subject);
+        },
+
+        paint() {
+          var self = this;
+          this.$root.querySelectorAll("[data-email-row]").forEach(function (row) {
+            self.paintRow(row);
+            var frame = row.querySelector("iframe[data-email-banner-preview]");
+            if (frame && !frame.dataset.repaintBound) {
+              frame.dataset.repaintBound = "1";
+              frame.addEventListener("load", function () { self.paintRow(row); });
+            }
+          });
+        },
+
+        // Anything interactive keeps its own behaviour; everything else opens
+        // the email. Without the closest() guard, clicking Upload would both
+        // open the cropper and navigate away from it.
+        openRow(event, row) {
+          // The listener sits on the tbody, so a click can land between rows and
+          // arrive with no row at all.
+          if (!row) return;
+          if (event.target.closest("a, button, input, label, form")) return;
+          var path = row.dataset.emailPath;
+          if (path) window.location = path;
+        }
+      };
+    }
+
+    window.emailRecipients = recipients;
+    if (typeof Alpine !== "undefined") {
+      Alpine.data("emailRecipients", recipients);
+    } else {
+      document.addEventListener("alpine:init", function () {
+        Alpine.data("emailRecipients", recipients);
+      });
+    }
+  })();
+</script>

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,61 +8,76 @@
   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
 
-  # `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.
+  # 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.
   #
-  # Four states, because three of them used to read as one. An app that ships
-  # its own committed artwork was told that artwork "ships with the engine",
-  # which is the wrong answer to the only question this column exists to answer.
-  badge_class, badge_label, badge_note =
-    case source
-    when :app
-      ["badge bg-success/10 text-success border-success/30", "Uploaded here",
-       "Stored for #{Studio.app_name} — this upload is what ships."]
-    when :app_asset
-      ["badge bg-success/10 text-success border-success/30", "#{Studio.app_name}'s artwork",
-       "Committed in this app's own assets. Upload to replace it."]
-    when :engine_default
-      ["badge bg-inset text-muted border-subtle", "Studio default",
-       "Shared artwork that ships with the engine. Upload to make it #{Studio.app_name}'s."]
-    else
-      ["badge bg-warning/10 text-warning border-warning/30", "No image",
-       "This email sends without a banner."]
-    end
+  # 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 — a question
+  # background_url now answers by itself (it returns nil unless entry.layered?).
+  # The row used to carry a SECOND copy of that guard; when the guard moved down
+  # and grew the host-registered-background case, the stale copy started
+  # disagreeing with the mailer. One guard, one place, so they cannot drift.
+  layered = Studio::EmailCatalog.background_url(entry.key).present?
+  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
+
 %>
-<%# The uploader host is attached ONLY when this app can actually store an
-    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"
-    <% if uploads_available %>
-      x-data="imageUploadHost({
-        store: 'emailModals',
-        aspectRatio: <%= entry.ratio %>,
-        maxWidth: <%= max_width %>,
-        transparent: false,
-        filename: '<%= entry.key %>.png',
-        saving: 'Saving banner…',
-        success: 'Banner updated',
-        successMessage: '<%= j entry.label %> now uses this app\'s own image.',
-        failure: 'Couldn\'t save the banner'
-      })"
-      @crop-photo-confirmed.window="onCropConfirmed($event.detail)"
-    <% end %>>
+<%# THE WHOLE ROW OPENS THE EMAIL, and now that is the only thing it does. The
+    provenance badge and the upload button lived here and both moved to the
+    email's own page — one place where changes are made, rather than a row that
+    is half a control panel.
+
+    A click handler rather than a wrapping link: an anchor around a <tr> is
+    invalid HTML. The name stays a real <a> so it keeps middle-click and
+    open-in-new-tab. %>
+<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 %>"
+    >
 
   <td class="px-4 py-4">
-    <div class="rounded-lg overflow-hidden border border-subtle w-40"
-         style="aspect-ratio: <%= entry.ratio %>; background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900));">
-      <% if banner_url %>
+    <% if banner %>
+      <%= render "studio/emails/banner_preview", banner: banner, ratio: entry.ratio, max_width: 224 %>
+    <% elsif banner_url %>
+      <div class="rounded-lg overflow-hidden border border-subtle"
+           style="aspect-ratio: <%= entry.ratio %>; max-width: 224px;">
         <%= image_tag banner_url, class: "w-full h-full object-cover",
               alt: "#{entry.label} email banner", loading: "lazy" %>
-      <% else %>
-        <div class="w-full h-full flex items-center justify-center text-2xs text-white/80 text-center px-3">
-          No banner
-        </div>
-      <% end %>
-    </div>
+      </div>
+    <% else %>
+      <div class="rounded-lg overflow-hidden border border-subtle flex items-center justify-center text-2xs text-white/80 text-center px-3"
+           style="aspect-ratio: <%= entry.ratio %>; max-width: 224px; background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-900));">
+        No banner
+      </div>
+    <% end %>
+  </td>
+
+  <td class="px-4 py-4">
+    <p class="text-sm text-heading" data-row-subject><%= subject %></p>
   </td>
 
   <td class="px-4 py-4">
@@ -78,37 +93,4 @@
     <p class="font-mono text-2xs text-muted mt-1"><%= entry.key %></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". %>
-  <td class="px-4 py-4">
-    <span class="<%= badge_class %> whitespace-nowrap"><%= badge_label %></span>
-    <p class="text-2xs text-muted mt-1.5 max-w-[12rem]"><%= badge_note %></p>
-  </td>
-
-  <% if uploads_available %>
-    <td class="px-4 py-4 text-right whitespace-nowrap">
-      <button type="button" @click="open()" class="btn btn-outline btn-sm inline-flex items-center gap-1.5">
-        <svg class="w-3.5 h-3.5" 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>
-        <%= source == :app ? "Replace" : "Upload" %>
-      </button>
-
-      <%# Only an APP-OWNED image can be reverted — there is nothing to drop when
-          the row is already showing the inherited default. %>
-      <% if source == :app %>
-        <%= button_to "Revert", admin_email_path(entry.key), method: :delete,
-              class: "btn btn-neutral btn-sm mt-1.5 w-full",
-              form: { data: { turbo_confirm: "Drop #{Studio.app_name}'s own #{entry.label} banner and go back to the shared default?" } } %>
-      <% end %>
-
-      <%# The cropper drops its Blob into this hidden input and submits. %>
-      <%= form_with url: admin_email_path(entry.key), method: :patch,
-            html: { multipart: true, id: form_id, "x-ref": "form" } do %>
-        <%= file_field_tag :image, class: "hidden", "x-ref": "fileInput" %>
-      <% end %>
-    </td>
-  <% end %>
 </tr>

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>
+            <%# Banner, then what an inbox shows: the subject line, then the
+                email itself. Provenance and the upload button used to sit here;
+                both belong on the email's own page, which is one click away and
+                is where every other change is made. %>
+            <th class="label-upper px-4 py-3 w-64">Banner</th>
+            <th class="label-upper px-4 py-3 w-64">Subject</th>
             <th class="label-upper px-4 py-3">Email</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>