From 84a241221d11c03946083ee8c922e8bc28a487b8 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 10 May 2026 18:34:03 -0400
Subject: [PATCH] edit page: move status pills into call_to_action header area
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per fox: status data was "in the wrong spot" — it had been rendered at
the top of the content area as a standalone full-width row above the
edit-page grid. Moved into the call_to_action block (top-right of the
page, same area where the permanent link lives) so the at-a-glance
state sits naturally above the form rather than splitting visual flow.

- Pills (visibility / ready / price) and permanent link now render
  together in call_to_action
- .edit-status-bar restyled: no background, no border, right-justified
  flex row (matches the right-aligned page header area)
- .edit-permanent-link: right-aligned, muted, small

Tests still pass (9 in target slice).
---
 make_post_sell/static/css/common.css     | 19 ++++++++++++-------
 make_post_sell/templates/product_edit.j2 | 20 ++++++++------------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css
index a70281e..378c156 100644
--- a/make_post_sell/static/css/common.css
+++ b/make_post_sell/static/css/common.css
@@ -1453,18 +1453,23 @@ div.edit-page > section.well2 > form > h3:first-child {
     flex-shrink: 0;
 }
 
-/* Status pill — at the top of the edit page, surfaces "ready / not ready"
-   and the visibility state at a glance. */
+/* Status pill — lives in the call_to_action block (top-right of page,
+   alongside permanent link). Surfaces visibility + ready state + price
+   at a glance. No background since it sits in the page header area. */
 .edit-status-bar {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space-2, 8px);
     align-items: center;
-    margin-bottom: var(--space-4, 16px);
-    padding: var(--space-3, 12px) var(--space-4, 16px);
-    border-radius: var(--radius-md, 8px);
-    background: var(--surface-dim, #f9f9fa);
-    border: 1px solid var(--color-border, #eee);
+    justify-content: flex-end;
+    margin: 0 0 var(--space-2, 8px);
+}
+
+.edit-permanent-link {
+    text-align: right;
+    margin: 0;
+    color: var(--color-text-muted, #666);
+    font-size: 0.85em;
 }
 
 .edit-status-pill {
diff --git a/make_post_sell/templates/product_edit.j2 b/make_post_sell/templates/product_edit.j2
index ad9d21f..f3cd8e2 100644
--- a/make_post_sell/templates/product_edit.j2
+++ b/make_post_sell/templates/product_edit.j2
@@ -1,18 +1,6 @@
 {% extends "base.j2" -%}
 
 {%- block call_to_action -%}
-<br/>
-<br/>
-permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolute_url(request) }}</a>
-{%- endblock call_to_action -%}
-
-{% block content -%}
-
-{% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
-{% set audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "opus"] %}
-{% set image_extensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"] %}
-
-{# Status bar: at-a-glance state. Visibility + ready-to-sell. #}
 <section class="edit-status-bar">
   {% if product.visibility == 1 %}
     <span class="edit-status-pill edit-status-pill-public">Public</span>
@@ -32,6 +20,14 @@ permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolut
     <span class="edit-status-pill" style="background: var(--color-text-muted, #888);">${{ '{:.2f}'.format(price) }}</span>
   {% endif %}
 </section>
+<p class="edit-permanent-link">permanent link: <a href="{{ product.absolute_url(request) }}">{{ product.absolute_url(request) }}</a></p>
+{%- endblock call_to_action -%}
+
+{% block content -%}
+
+{% set video_extensions = ["mp4", "avi", "mov", "wmv", "flv", "mkv", "webm", "m4v"] %}
+{% set audio_extensions = ["mp3", "wav", "ogg", "m4a", "flac", "aac", "opus"] %}
+{% set image_extensions = ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"] %}
 
 <div class="edit-page">