From 5c1afaaaf58a7c5c76341638403b059784b7ad01 Mon Sep 17 00:00:00 2001
From: dadaloop82 <evershelfproject@gmail.com>
Date: Fri, 22 May 2026 21:23:18 +0000
Subject: [PATCH] feat: redesign action-page hero card (match use-page style)

---
 assets/css/style.css | 16 ++++++++++++++--
 assets/js/app.js     | 16 +++++++++-------
 index.html           |  2 +-
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 614ed26..7cb35dd 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -3027,14 +3027,24 @@ body.server-offline .bottom-nav {
     gap: 14px;
 }
 
-/* Use-page hero card: larger, accent border, more breathing room */
+/* Action and Use page hero card */
+#page-action .product-preview-small,
 #page-use .product-preview-small {
     padding: 14px 16px;
     gap: 14px;
     border-left: 4px solid var(--primary);
     align-items: flex-start;
+    position: relative;
 }
 
+/* action page: slightly larger name */
+#page-action .use-hero-name {
+    font-size: 1.15rem;
+}
+
+/* barcode pill on action page */
+.action-pill-barcode { background: #f1f5f9; color: #64748b; }
+
 .use-hero-icon {
     font-size: 2.4rem;
     width: 52px;
@@ -7575,7 +7585,9 @@ body.cooking-mode-active .app-header {
 /* ── Use inventory info ── */
 [data-theme="dark"] .use-inventory-info { background: #0c2a4e; color: #7dd3fc; }
 [data-theme="dark"] #use-expiry-hint    { background: #2a1e00; border-color: #78350f; color: #fde68a; }
-[data-theme="dark"] #page-use .product-preview-small { border-left-color: var(--primary); }
+[data-theme="dark"] #page-use .product-preview-small  { border-left-color: var(--primary); }
+[data-theme="dark"] #page-action .product-preview-small { border-left-color: var(--primary); }
+[data-theme="dark"] .action-pill-barcode { background: #1e293b; color: #94a3b8; }
 [data-theme="dark"] .use-pill-ok       { background: #14532d; color: #86efac; }
 [data-theme="dark"] .use-pill-warn     { background: #422006; color: #fde68a; }
 [data-theme="dark"] .use-pill-soon     { background: #431407; color: #fdba74; }
diff --git a/assets/js/app.js b/assets/js/app.js
index d8d3d71..22dc829 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7123,17 +7123,19 @@ function showProductAction() {
         conservationHtml = `<div class="product-conservation">🧊 ${escapeHtml(currentProduct.conservation)}</div>`;
     }
     
-    // LARGER product preview
+    // Hero card preview (matches page-use style)
     document.getElementById('action-product-preview').innerHTML = `
         ${currentProduct.image_url ?
             `<img src="${escapeHtml(currentProduct.image_url)}" alt="">` :
-            `<span class="product-preview-emoji">${catIcon}</span>`
+            `<span class="use-hero-icon">${catIcon}</span>`
         }
-        <div class="product-preview-info">
-            <h3>${escapeHtml(currentProduct.name)}</h3>
-            <p>${currentProduct.brand ? `<strong>${escapeHtml(currentProduct.brand)}</strong>` : ''}</p>
-            ${currentProduct.weight_info ? `<p style="font-size:0.85rem;color:var(--text-light)">⚖️ ${escapeHtml(currentProduct.weight_info)}</p>` : ''}
-            ${currentProduct.barcode ? `<p style="font-size:0.75rem;color:var(--text-muted)">📊 ${currentProduct.barcode}</p>` : ''}
+        <div class="use-hero-body">
+            <div class="use-hero-name">${escapeHtml(currentProduct.name)}</div>
+            ${currentProduct.brand ? `<div class="use-hero-brand">${escapeHtml(currentProduct.brand)}</div>` : ''}
+            <div class="use-hero-meta">
+                ${currentProduct.weight_info ? `<span class="use-meta-pill use-pill-qty">⚖️ ${escapeHtml(currentProduct.weight_info)}</span>` : ''}
+                ${currentProduct.barcode ? `<span class="use-meta-pill action-pill-barcode">📊 ${currentProduct.barcode}</span>` : ''}
+            </div>
         </div>
         <button type="button" class="btn-edit-inline" onclick="toggleActionEdit()" title="${t('product.edit_name_brand')}">✏️</button>
     `;
diff --git a/index.html b/index.html
index db97ea7..5737beb 100644
--- a/index.html
+++ b/index.html
@@ -331,7 +331,7 @@
         </div>
         <!-- Banner: shopping list scan context -->
         <div id="shopping-scan-target-banner" class="shopping-scan-target-banner" style="display:none"></div>
-        <div class="product-preview product-preview-large" id="action-product-preview"></div>
+        <div class="product-preview product-preview-small" id="action-product-preview"></div>
         <div class="inventory-status-bar" id="action-inventory-status" style="display:none"></div>
         <div class="action-buttons" id="action-buttons-container">
             <button class="btn btn-huge btn-success" onclick="showAddForm()">