From 8629d145a8ae138dc74d521c5909bf102df22a3b Mon Sep 17 00:00:00 2001
From: Michele <michele@leopost.it>
Date: Sat, 4 Apr 2026 16:11:23 +0200
Subject: [PATCH] fix: remove redundant platform label when tabs shown, fix
 platform order

- Hide 'per facebook' badge when multiple platform tabs are visible
- Sort platforms in canonical order (Instagram, Facebook, YouTube, TikTok)
  regardless of click order, for consistency between form and preview

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/ContentPage.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ContentPage.jsx b/frontend/src/components/ContentPage.jsx
index 1712ff2..a783175 100644
--- a/frontend/src/components/ContentPage.jsx
+++ b/frontend/src/components/ContentPage.jsx
@@ -66,7 +66,13 @@ export default function ContentPage() {
   const toggleChip = (field, value) => {
     setForm(prev => {
       const arr = prev[field]
-      return { ...prev, [field]: arr.includes(value) ? (arr.length > 1 ? arr.filter(v => v !== value) : arr) : [...arr, value] }
+      if (arr.includes(value)) {
+        return { ...prev, [field]: arr.length > 1 ? arr.filter(v => v !== value) : arr }
+      }
+      // Maintain canonical order (same as PLATFORMS/CONTENT_TYPES arrays)
+      const canonical = field === 'platforms' ? PLATFORMS.map(p => p.value) : CONTENT_TYPES.map(t => t.value)
+      const newArr = [...arr, value].sort((a, b) => canonical.indexOf(a) - canonical.indexOf(b))
+      return { ...prev, [field]: newArr }
     })
   }
 
@@ -365,9 +371,9 @@ export default function ContentPage() {
                     {STATUS_LABELS[generated.status] || generated.status}
                   </span>
                 )})()}
-                {generated.platform_hint && (
+                {generatedPosts.length <= 1 && generated.platform_hint && (
                   <span style={{ fontSize: '0.72rem', fontWeight: 500, padding: '0.2rem 0.5rem', backgroundColor: 'var(--cream-dark)', color: 'var(--ink-muted)', borderLeft: '2px solid var(--border)' }}>
-                    per {generated.platform_hint}
+                    {generated.platform_hint}
                   </span>
                 )}
               </div>