studio-engine 0.48.0 → 0.50.0

data/app/views/studio/profiles/_form_script.html.erb

@@ -0,0 +1,65 @@
+<%# The edit form's Alpine component.
+
+    Its own partial so the page above stays readable and this can be reasoned
+    about as behaviour rather than markup.
+%>
+<script>
+  window.studioProfileForm = function (initial) {
+    return {
+      alpine: true,
+      fields: Object.assign({}, initial),
+      initial: Object.assign({}, initial),
+
+      // Trimmed on both sides: whitespace is not a change, and the controller
+      // trims on the way in too — so the bar agrees with what saving would do.
+      changed(key) {
+        return String(this.fields[key] || "").trim() !== String(this.initial[key] || "").trim();
+      },
+
+      get changeCount() {
+        var self = this;
+        return Object.keys(this.fields).filter(function (k) { return self.changed(k); }).length;
+      },
+
+      get dirty() { return this.changeCount > 0; },
+
+      discard() {
+        this.fields = Object.assign({}, this.initial);
+      },
+
+      init() {
+        var self = this;
+
+        // Guard the exit BOTH ways. beforeunload covers a hard navigation or a
+        // closed tab; turbo:before-visit covers a Turbo Drive visit, which never
+        // fires beforeunload — an app with Turbo on would otherwise drop edits
+        // silently on any in-app link.
+        this._beforeUnload = function (e) {
+          if (!self.dirty) return;
+          e.preventDefault();
+          e.returnValue = "";
+        };
+        window.addEventListener("beforeunload", this._beforeUnload);
+
+        this._beforeVisit = function (e) {
+          if (!self.dirty) return;
+          if (!window.confirm("You have unsaved changes. Leave without saving?")) {
+            e.preventDefault();
+          }
+        };
+        document.addEventListener("turbo:before-visit", this._beforeVisit);
+
+        // Submitting is not leaving. Drop both guards before the form goes, or
+        // saving prompts you about the very changes you just chose to save.
+        this.$refs.form.addEventListener("submit", function () { self.teardown(); });
+      },
+
+      teardown() {
+        window.removeEventListener("beforeunload", this._beforeUnload);
+        document.removeEventListener("turbo:before-visit", this._beforeVisit);
+      },
+
+      destroy() { this.teardown(); }
+    };
+  };
+</script>

data/app/views/studio/profiles/_identity.html.erb

@@ -0,0 +1,41 @@
+<%# The "you at a glance" header — avatar, name, address — at the top of BOTH
+    /profile and /profile/edit.
+
+    Locals:
+      user      (required)
+      editable  (Boolean) — true on the edit page, where the avatar badge opens
+                the crop modal.
+
+    ON THE READ PAGE THE WHOLE CARD IS THE LINK to /profile/edit (operator's
+    call). It began as a badge-only link, then the page heading and the Edit
+    button were removed, and a 28px target became the single route to editing —
+    so the target grew to the thing people actually aim at.
+
+    That is also why the badge is a <span> there: an <a> inside an <a> is invalid,
+    and browsers repair it by closing the outer link early, which would quietly
+    shrink the card's clickable area to whatever preceded the badge.
+
+    THE AVATAR IS OPTIONAL — the guard the registry used to carry. As a ROW the
+    avatar declared `requires: :avatar` and was dropped whole on a host whose
+    model has no attachment; moving it into this header lost that, and the first
+    render against such a model raised `undefined method 'avatar'`.
+%>
+<% editable = local_assigns.fetch(:editable, false) %>
+<% attachable = user.respond_to?(:avatar) && user.avatar.respond_to?(:attached?) %>
+
+<%= render "studio/profiles/identity_styles" %>
+
+<%= render "studio/profiles/identity_mini", user: user %>
+
+<% if editable %>
+  <div data-studio-identity-full class="card p-6 mb-6 text-center">
+    <%= render "studio/profiles/identity_body", user: user, editable: true, attachable: attachable %>
+  </div>
+<% else %>
+  <%= link_to edit_profile_path,
+              class: "studio-identity-card card p-6 mb-6 text-center block no-underline",
+              data: { studio_identity_full: true },
+              aria: { label: "Edit your profile" } do %>
+    <%= render "studio/profiles/identity_body", user: user, editable: false, attachable: attachable %>
+  <% end %>
+<% end %>

data/app/views/studio/profiles/_identity_body.html.erb

@@ -0,0 +1,44 @@
+<%# The identity block's contents — avatar, name, address.
+
+    Its own partial because the READ page wraps it in a link and the EDIT page
+    does not, and duplicating the markup to achieve that is how the two drift.
+
+    Locals: user, editable, attachable.
+%>
+<div class="relative mb-3 studio-avatar mx-auto" style="width: 128px; height: 128px;">
+  <% if attachable && user.avatar.attached? %>
+    <%= image_tag user.avatar, class: "rounded-full object-cover",
+                  style: "width: 128px; height: 128px;", alt: user.display_name %>
+  <% else %>
+    <div class="rounded-full flex items-center justify-center font-bold text-white text-4xl"
+         style="width: 128px; height: 128px; background-color: <%= user.avatar_color %>">
+      <%= user.avatar_initials %>
+    </div>
+  <% end %>
+
+  <% badge_class = "studio-avatar-badge absolute bottom-0 right-0 flex items-center justify-center rounded-full border-2 border-page bg-primary text-white transition" %>
+  <% badge_style = "width: 28px; height: 28px;" %>
+
+  <% if editable && attachable %>
+    <%# A real button: on the edit page this opens the cropper. %>
+    <button type="button" @click="$refs.filePicker.click()"
+            aria-label="Change your profile photo"
+            class="<%= badge_class %>" style="<%= badge_style %>">
+      <%= render "studio/profiles/pencil_icon" %>
+    </button>
+  <% elsif !editable %>
+    <%# DECORATIVE on the read page, and it has to be: the whole card is a link
+        now, and an <a> inside an <a> is invalid HTML that browsers repair by
+        closing the outer one early — which would silently cut the card's
+        clickable area down to whatever came before the badge. The card carries
+        the destination and the accessible name; this is just the glyph. %>
+    <span class="<%= badge_class %>" style="<%= badge_style %>" aria-hidden="true">
+      <%= render "studio/profiles/pencil_icon" %>
+    </span>
+  <% end %>
+</div>
+
+<p class="text-3xl font-extrabold text-heading"><%= user.display_name %></p>
+<% if user.respond_to?(:email) && user.email.present? %>
+  <p class="text-secondary text-sm break-all"><%= user.email %></p>
+<% end %>

data/app/views/studio/profiles/_identity_mini.html.erb

@@ -0,0 +1,106 @@
+<%# The compact identity that takes over when the full card scrolls away.
+
+    Locals: user (required).
+
+    WHY IT EXISTS: on a long profile the header is the thing that tells you whose
+    page you are on, and it is the first thing to disappear. This keeps that
+    answer on screen — the same move the navbar makes when it shrinks on scroll.
+
+    FIXED, NOT STICKY, and that is the whole layout decision. A sticky element
+    stays in flow, so it would reserve its own height under the card forever and
+    push every row down by 56px whether or not it is showing. Fixed takes it out
+    of flow: nothing moves, and the bar simply is not there until it is.
+
+    Pinned to `var(--nav-h, 0px)` — the height the host navbar publishes, which
+    /admin/style already uses to stick its section nav. The 0px fallback means an
+    app that publishes nothing gets a bar at the top of the viewport rather than
+    a broken one.
+
+    NOT INTERACTIVE, and aria-hidden. It duplicates content that is already on
+    the page and already reachable: the full card above is the link to editing.
+    A second link here would be a duplicate tab stop and a second announcement of
+    the same name for no gain — this is an orientation aid for people who can see
+    the screen, so it says so.
+%>
+<div data-studio-identity-mini
+     class="studio-identity-mini"
+     aria-hidden="true">
+  <div class="px-4">
+    <div class="flex items-center gap-3 py-2">
+      <% if user.respond_to?(:avatar) && user.avatar.respond_to?(:attached?) && user.avatar.attached? %>
+        <%= image_tag user.avatar, class: "rounded-full object-cover flex-shrink-0",
+                      style: "width: 32px; height: 32px;", alt: "" %>
+      <% else %>
+        <div class="rounded-full flex items-center justify-center font-bold text-white text-xs flex-shrink-0"
+             style="width: 32px; height: 32px; background-color: <%= user.avatar_color %>">
+          <%= user.avatar_initials %>
+        </div>
+      <% end %>
+
+      <div class="min-w-0">
+        <p class="text-sm font-bold text-heading truncate"><%= user.display_name %></p>
+        <% if user.respond_to?(:email) && user.email.present? %>
+          <p class="text-xs text-muted truncate"><%= user.email %></p>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  (function () {
+    var CLASS = "is-visible";
+
+    function wire() {
+      var full = document.querySelector("[data-studio-identity-full]");
+      var mini = document.querySelector("[data-studio-identity-mini]");
+      if (!full || !mini) return;
+
+      // No IntersectionObserver: leave the bar hidden rather than showing a
+      // duplicate header permanently. The page is fully usable without it.
+      if (!("IntersectionObserver" in window)) return;
+
+      if (mini._studioObserver) mini._studioObserver.disconnect();
+
+      // HAND OVER PART-WAY, not once the card has gone. Waiting for the last
+      // pixel left a gap where neither header was on screen, which is the moment
+      // the bar exists to cover. It appears once most of the card has scrolled
+      // past, so the two overlap briefly instead.
+      //
+      // Ratio, not a pixel offset: the card's height changes with the name's
+      // wrap and with whether there is an email under it, so a fixed offset
+      // would mean something different on every account.
+      var SHOW_BELOW_RATIO = 0.6;
+
+      var observer = new IntersectionObserver(function (entries) {
+        var entry = entries[0];
+        // A card taller than the viewport can never reach ratio 1, so "not
+        // intersecting at all" has to count as gone in its own right.
+        var gone = !entry.isIntersecting || entry.intersectionRatio < SHOW_BELOW_RATIO;
+        mini.classList.toggle(CLASS, gone);
+      }, {
+        // The navbar covers the top of the viewport, so pixels behind it are not
+        // visible pixels — without this the card reads as on-screen while it is
+        // hidden under the nav.
+        rootMargin: "-72px 0px 0px 0px",
+        // A spread of thresholds, or the callback only fires at fully-in and
+        // fully-out and the ratio test above never gets a chance to run.
+        threshold: [0, 0.2, 0.4, 0.5, 0.6, 0.8, 1]
+      });
+
+      observer.observe(full);
+      mini._studioObserver = observer;
+    }
+
+    document.addEventListener("turbo:load", wire);
+    document.addEventListener("turbo:before-cache", function () {
+      var mini = document.querySelector("[data-studio-identity-mini]");
+      if (mini) {
+        mini.classList.remove(CLASS);
+        if (mini._studioObserver) mini._studioObserver.disconnect();
+      }
+    });
+    if (document.readyState !== "loading") wire();
+    else document.addEventListener("DOMContentLoaded", wire);
+  })();
+</script>

data/app/views/studio/profiles/_identity_styles.html.erb

@@ -0,0 +1,96 @@
+<%# The avatar badge's reveal.
+
+    The badge sits empty until you hover the picture, then the pencil fades in —
+    the operator's call, and it keeps the resting state quiet.
+
+    WRITTEN AS CSS RATHER THAN TAILWIND UTILITIES on purpose. The engine ships a
+    prebuilt bundle to consumers, so a utility only exists if something already
+    emitted it; `group-focus-within:opacity-100` is exactly the kind of class
+    that is absent in one app and present in another, and the failure mode is
+    silent — a keyboard user simply never sees the icon. Owning the selector
+    removes that uncertainty.
+
+    THREE REVEAL PATHS, and the last two are not decoration. Since the operator
+    removed the page heading and the Edit button, this badge is the ONLY route
+    from /profile to /profile/edit, so an affordance that exists only on hover
+    would strand two whole groups of people:
+
+      hover        — the intended interaction on a pointer
+      focus        — the same affordance for a keyboard, which never hovers
+      (hover: none) — touch has no hover at all, so the icon simply stays
+                      visible there rather than never appearing
+
+    The badge circle itself is always visible in every case; it is only the
+    glyph inside it that waits.
+%>
+<style>
+  .studio-avatar-badge-icon {
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+
+  /* The read page: the whole card is the link, so hovering ANYWHERE on it
+     reveals the glyph. The avatar and badge selectors stay for the edit page,
+     where the badge is its own button. */
+  .studio-identity-card:hover .studio-avatar-badge-icon,
+  .studio-identity-card:focus .studio-avatar-badge-icon,
+  .studio-identity-card:focus-visible .studio-avatar-badge-icon,
+  .studio-avatar:hover .studio-avatar-badge-icon,
+  .studio-avatar-badge:hover .studio-avatar-badge-icon,
+  .studio-avatar-badge:focus .studio-avatar-badge-icon,
+  .studio-avatar-badge:focus-visible .studio-avatar-badge-icon {
+    opacity: 1;
+  }
+
+  /* The card reads as clickable before you click it. Kept subtle — this is a
+     whole card lighting up, not a button. */
+  .studio-identity-card {
+    transition: border-color 200ms ease, background-color 200ms ease;
+  }
+
+  .studio-identity-card:hover,
+  .studio-identity-card:focus-visible {
+    border-color: var(--color-primary);
+  }
+
+  /* No hover to give: show it and be done. */
+  @media (hover: none) {
+    .studio-avatar-badge-icon { opacity: 1; }
+  }
+
+  /* The compact header that takes over on scroll. FIXED so it costs no layout
+     height while hidden; pinned to the navbar height the host publishes. */
+  .studio-identity-mini {
+    position: fixed;
+    /* Sits just under the host navbar, with a little air so it reads as a card
+       floating over the page rather than a second navbar welded to the first. */
+    top: calc(var(--nav-h, 0px) + 0.5rem);
+    /* CARD WIDTH, not full bleed. 42rem is max-w-2xl — the page container's
+       width — and the calc keeps it inside the viewport's gutters on a narrow
+       screen, where a fixed 42rem would run off the edge. Centred with the same
+       translate the entry animation uses, so the two must stay in one transform:
+       a second transform property would silently replace the first. */
+    left: 50%;
+    width: min(42rem, calc(100% - 2rem));
+    z-index: 30;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: 0.75rem;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25);
+    opacity: 0;
+    transform: translateX(-50%) translateY(-6px);
+    pointer-events: none;
+    transition: opacity 200ms ease, transform 200ms ease;
+  }
+
+  .studio-identity-mini.is-visible {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .studio-avatar-badge-icon,
+    .studio-identity-card,
+    .studio-identity-mini { transition: none; }
+  }
+</style>

data/app/views/studio/profiles/_name_fields.html.erb

@@ -0,0 +1,34 @@
+<%# Name fields — first and last, side by side on a wide row.
+
+    Locals: user (required).
+
+    NO BUTTON. These are fields in the edit page's single form; the sticky bar
+    saves them. `x-model` feeds the dirty check that makes the bar appear.
+
+    LAST NAME IS OPTIONAL AT THE COLUMN LEVEL. mcritchie-studio and turf-monster
+    have it; mcritchie-industries, moms-app and acquisition-studio do not, and
+    they get a first-name-only row rather than a broken one. The engine's
+    standard-columns migration does not yet carry last_name — making it universal
+    is a coordinated fleet change (roll-out-last-name-column), and gating here is
+    what lets this page ship without waiting on it.
+%>
+<div class="grid gap-4 sm:grid-cols-2">
+  <div>
+    <label class="block text-sm text-secondary mb-2 font-medium" for="profile_first_name">First name</label>
+    <input type="text" name="profile[first_name]" id="profile_first_name"
+           value="<%= user.first_name %>" class="input-field"
+           maxlength="<%= Studio::FIRST_NAME_MAX_LENGTH %>"
+           autocomplete="given-name" placeholder="What should we call you?"
+           x-model="fields.first_name">
+  </div>
+
+  <% if user.respond_to?(:last_name) %>
+    <div>
+      <label class="block text-sm text-secondary mb-2 font-medium" for="profile_last_name">Last name</label>
+      <input type="text" name="profile[last_name]" id="profile_last_name"
+             value="<%= user.last_name %>" class="input-field"
+             maxlength="<%= Studio::FIRST_NAME_MAX_LENGTH %>"
+             autocomplete="family-name" x-model="fields.last_name">
+    </div>
+  <% end %>
+</div>

data/app/views/studio/profiles/_pencil_icon.html.erb

@@ -0,0 +1,7 @@
+<%# The edit glyph on the identity avatar. Its own partial so the read page's
+    link and the edit page's button cannot drift into different icons. %>
+<svg class="w-4 h-4 studio-avatar-badge-icon" fill="none" stroke="currentColor" stroke-width="2"
+     viewBox="0 0 24 24" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round"
+        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
+</svg>

data/app/views/studio/profiles/_save_bar.html.erb

@@ -0,0 +1,39 @@
+<%# The edit form's save bar — fixed to the viewport bottom, present only while
+    the form is dirty.
+
+    No locals. It reads `dirty` and `changeCount` off the enclosing
+    studioProfileForm component, so it must be rendered INSIDE that x-data scope.
+
+    ITS OWN PARTIAL so the browser lane can mount it. The lab page that drives
+    this in a real browser may set up a partial's locals and nothing else — it may
+    not hand-roll the markup — and while this lived inline in edit.html.erb there
+    was no name for it to render. A template needs a controller, a session and a
+    user; a partial needs none of those. See test/lib/e2e_lane_contract_test.rb.
+
+    Four details that make or break it:
+
+      * fixed, not sticky — it must not reserve height while it is hidden;
+      * env(safe-area-inset-bottom), or it sits under the iPhone home indicator;
+      * role="status" + aria-live="polite" announces "unsaved changes" without
+        stealing focus;
+      * the enclosing form carries bottom padding while the bar is up, so the bar
+        never covers the last field. That padding lives on the x-data element in
+        edit.html.erb, because it is the scroll container's business, not the
+        bar's.
+%>
+<div x-show="dirty" x-cloak x-transition.opacity
+     data-studio-save-bar
+     role="status" aria-live="polite"
+     class="fixed inset-x-0 bottom-0 z-40 border-t border-subtle"
+     style="background: var(--color-surface); padding-bottom: env(safe-area-inset-bottom);">
+  <div class="max-w-2xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
+    <p class="text-sm text-secondary">
+      <span class="font-semibold text-heading" x-text="changeCount"></span>
+      <span x-text="changeCount === 1 ? 'unsaved change' : 'unsaved changes'"></span>
+    </p>
+    <div class="flex items-center gap-2">
+      <button type="button" @click="discard()" class="btn btn-outline btn-sm">Discard</button>
+      <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
+    </div>
+  </div>
+</div>

data/app/views/studio/profiles/edit.html.erb

@@ -0,0 +1,111 @@
+<%# /profile/edit — ONE form, one Save, and a save bar that does not depend on
+    where you are in the page.
+
+    THE SAVE BAR is fixed to the viewport bottom and exists only while the form
+    is dirty. Rejected alternatives, so nobody re-litigates them: a sticky TOP bar
+    stacks under the navbar and eats mobile viewport; a floating button has no
+    room for a Discard or a change count; an always-present footer costs vertical
+    space permanently on a page that is usually short.
+
+    Four details that make or break it, all present below:
+
+      * the form carries bottom padding while the bar is up, so the bar never
+        covers the last field;
+      * env(safe-area-inset-bottom), or it sits under the iPhone home indicator;
+      * role="status" + aria-live="polite" announces "unsaved changes" without
+        stealing focus;
+      * beforeunload AND turbo:before-visit guard the exit, so navigating away
+        does not silently drop edits.
+
+    THE DIRTY CHECK compares against what the server rendered, trimmed on both
+    sides — whitespace is not a change, and the controller trims on the way in
+    too, so the bar agrees with what saving would actually do.
+
+    NO-JS FALLBACK: the form has a plain submit at the end. A page whose JS never
+    ran still saves; it simply never gets the bar.
+%>
+<% content_for(:title, "Edit profile") %>
+
+<% initial = {
+     first_name: current_user.try(:first_name).to_s,
+     last_name:  current_user.try(:last_name).to_s,
+     email:      current_user.try(:email).to_s,
+     birthday:   (if current_user.respond_to?(:birth_year) && current_user.birth_year.present? &&
+                     current_user.birth_month.present? && current_user.birth_day.present?
+                    format("%04d-%02d-%02d", current_user.birth_year, current_user.birth_month, current_user.birth_day)
+                  else
+                    ""
+                  end)
+   } %>
+
+<%# THE CROPPER COMES FROM THE IDENTITY HEADER, not from a row. It used to be a
+    row carrying `modals: true`, and this page kept gating on that flag after the
+    avatar moved — so nothing declared it, the host never mounted, and clicking
+    the badge opened nothing at all. Gate on the same thing the badge does. %>
+<% avatar_editable = current_user.respond_to?(:avatar) && current_user.avatar.respond_to?(:attached?) %>
+
+<% if avatar_editable %>
+  <%= render "studio/cropper_assets" %>
+<% end %>
+
+<div x-data="studioProfileForm(<%= initial.to_json %>)"
+     x-bind:style="dirty ? 'padding-bottom: 96px' : ''">
+  <div class="max-w-2xl mx-auto py-8">
+    <%# The way back. The page heading and the Done button came off on the
+        operator's call, which left browser-back as the only exit for someone who
+        opened this and changed nothing — so a small explicit one goes here.
+        Deliberately quiet: it is an escape hatch, not an action, and the save bar
+        owns the bottom of the screen when there is anything to save. %>
+    <%= link_to profile_path,
+                class: "inline-flex items-center gap-1 text-sm text-secondary hover:text-heading transition mb-4",
+                aria: { label: "Back to your profile" } do %>
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"
+           viewBox="0 0 24 24" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/>
+      </svg>
+      Back
+    <% end %>
+
+    <%# Header + uploader in ONE Alpine scope — the badge calls $refs.filePicker,
+        and refs do not cross components. %>
+    <%= render "studio/profiles/editable_identity", user: current_user %>
+
+    <%= form_with url: profile_path, method: :patch, scope: :profile,
+                  data: { turbo: false }, html: { "x-ref": "form" } do %>
+      <div class="card p-0 overflow-hidden">
+        <% @profile_sections.each_with_index do |section, index| %>
+          <section class="p-6 <%= "border-t border-subtle" unless index.zero? %>"
+                   data-profile-section="<%= section[:key] %>">
+            <% if section[:title].present? %>
+              <h2 class="text-sm font-bold text-heading mb-4"><%= section[:title] %></h2>
+            <% end %>
+            <%= render section[:partial], **section.fetch(:locals, {}).merge(user: current_user) %>
+          </section>
+        <% end %>
+      </div>
+
+      <%# The JS-less path. Hidden once Alpine boots, because with the bar up
+          there would be two Saves. %>
+      <div class="mt-6" x-show="!alpine" x-cloak>
+        <button type="submit" class="btn btn-primary">Save changes</button>
+      </div>
+
+      <%= render "studio/profiles/save_bar" %>
+    <% end %>
+  </div>
+</div>
+
+<%= render "studio/profiles/form_script" %>
+
+<% if avatar_editable %>
+  <%# Mounted ONCE per page. Two hosts sharing a store name would register the
+      same modal ids twice and render duplicate cards. %>
+  <%= render "studio/modals/scoped_host", store: "profileModals" do %>
+    <template x-if="$store.profileModals.current()?.id === 'crop-photo'">
+      <div><%= render "studio/modals/crop_photo", store: "profileModals" %></div>
+    </template>
+    <template x-if="$store.profileModals.current()?.id === 'saving'">
+      <div><%= render "studio/modals/saving", store: "profileModals" %></div>
+    </template>
+  <% end %>
+<% end %>

data/app/views/studio/profiles/show.html.erb

@@ -1,56 +1,24 @@
-<%# The shared /profile page.
+<%# /profile — the READ page.
 
-    A bare content wrapper, not a layout: it renders inside the host's
-    application layout and inherits that app's navbar, theme and flash. Same
-    shape as /admin/style and /admin/emails.
+    "You at a glance" (the operator's framing, and the shape iOS Settings uses):
+    an identity block you look at, then the things that are read-level but need a
+    way to act — Google being the one that exists today.
 
-    The page is nothing but its sections. @profile_sections is already resolved
-    and filtered by the controller (Studio.profile_sections_for) — rows the host
-    cannot serve, and admin rows for non-admins, are gone before we get here — so
-    this template makes no decisions of its own beyond an empty state.
+    Editing lives at /profile/edit. The avatar's badge links there, so the same
+    control in the same place means "change this" on both pages.
 %>
 <% content_for(:title, "Profile") %>
 
-<%# Does any resolved row need the crop/saving modals? A row declares
-    `modals: true` and the page mounts them once, here.
-
-    The page owns its modal host DELIBERATELY. The obvious alternative — render
-    "studio/modals/host" and let the app supply it — fails in both directions:
-    mcritchie-industries and moms-app render no shared host at all, so there
-    would be nowhere to open a modal from; and mcritchie-studio and turf-monster
-    each ship their OWN app/views/studio/modals/_host.html.erb, which shadows the
-    engine's in this non-isolated engine, so the page would silently get their
-    fork and its registrations. studio/modals/_scoped_host is unforked in every
-    app. /admin/emails reached the same conclusion first.
-
-    Mounted once per page rather than once per row: two hosts sharing a store
-    name would register the same modal ids twice and render duplicate cards. %>
-<% profile_needs_modals = Array(@profile_sections).any? { |section| section[:modals] } %>
-
-<% if profile_needs_modals %>
-  <%# cropper.js + the imageUploadHost / cropPhotoModal / submitFormWithProgress
-      factories. Loaded only when a row can actually open the cropper, which is
-      the whole reason this is a partial and not a global include. %>
-  <%= render "studio/cropper_assets" %>
-<% end %>
-
 <div class="max-w-2xl mx-auto py-8">
-  <h1 class="text-2xl font-extrabold text-heading mb-8">Profile</h1>
+  <%= render "studio/profiles/identity", user: current_user, editable: false %>
 
-  <% if @profile_sections.blank? %>
-    <%# Reachable, and worth rendering honestly rather than as a blank page: an
-        app whose user model serves none of the declared rows (no avatar
-        attachment, no first_name column) lands here until it installs the
-        standard profile columns. %>
-    <%= render "components/empty_state",
-               message: "Nothing to edit yet",
-               detail: "This app has not enabled any profile fields." %>
-  <% else %>
-    <div class="space-y-6">
-      <% @profile_sections.each do |section| %>
-        <section class="card p-6" data-profile-section="<%= section[:key] %>">
+  <% if @profile_sections.present? %>
+    <div class="card p-0 overflow-hidden">
+      <% @profile_sections.each_with_index do |section, index| %>
+        <section class="p-6 <%= "border-t border-subtle" unless index.zero? %>"
+                 data-profile-section="<%= section[:key] %>">
           <% if section[:title].present? %>
-            <h2 class="text-lg font-bold text-heading mb-4"><%= section[:title] %></h2>
+            <h2 class="text-sm font-bold text-heading mb-4"><%= section[:title] %></h2>
           <% end %>
           <%= render section[:partial], **section.fetch(:locals, {}).merge(user: current_user) %>
         </section>
@@ -58,16 +26,3 @@
     </div>
   <% end %>
 </div>
-
-<% if profile_needs_modals %>
-  <%# Optional chaining on current() is load-bearing: the outer template unmounts
-      one tick AFTER the stack empties, so a bare .id throws on every close. %>
-  <%= render "studio/modals/scoped_host", store: "profileModals" do %>
-    <template x-if="$store.profileModals.current()?.id === 'crop-photo'">
-      <div><%= render "studio/modals/crop_photo", store: "profileModals" %></div>
-    </template>
-    <template x-if="$store.profileModals.current()?.id === 'saving'">
-      <div><%= render "studio/modals/saving", store: "profileModals" %></div>
-    </template>
-  <% end %>
-<% end %>