From 8f9e3d5622b3faea6e55c5f9695fc186f3d5be8e Mon Sep 17 00:00:00 2001
From: BFLOWS <sandbox@bflows.net>
Date: Thu, 23 Apr 2026 16:02:13 +0200
Subject: [PATCH] fix(ar1-admin): TabView interno per Layout vs Struttura
 quadri (prima erano Button invisibili)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I due 'tab' interni al Dialog erano <Button> con prop text=true quando non selezionati:
rendering senza sfondo ne bordo, praticamente invisibili. Carlo non vedeva come
raggiungere l'editor Struttura quadri e pensava mancasse.

Sostituito l'hacky Button-tab con un vero TabView PrimeReact (stesso componente
del TabView esterno delle 5 tab). Due TabPanel:
  1. 'Layout grafico' (icona pi pi-palette) - contenuto form brand/header/intro/privacy
  2. 'Struttura quadri' (icona pi pi-list, + ' •' se modificata) - rende QuadriStructureEditor

Mapping activeIndex<->editSection:
  editSection='layout' -> activeIndex=0
  editSection='struttura' -> activeIndex=1
  onTabChange setta entrambi.
---
 src/modules/ar1/pages/Ar1AdminConfig.js | 46 +++++++++----------------
 1 file changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/modules/ar1/pages/Ar1AdminConfig.js b/src/modules/ar1/pages/Ar1AdminConfig.js
index 8449148..484d219 100644
--- a/src/modules/ar1/pages/Ar1AdminConfig.js
+++ b/src/modules/ar1/pages/Ar1AdminConfig.js
@@ -863,28 +863,13 @@ const Ar1AdminConfig = () => {
                             )}
                         </div>
 
-                        {/* Tab switch: Layout vs Struttura */}
-                        <div style={{ display: 'flex', gap: 0, borderBottom: '2px solid #e0e0e0', marginBottom: 16 }}>
-                            <Button
-                                label="Layout grafico"
-                                icon="pi pi-palette"
-                                text={editSection !== 'layout'}
-                                onClick={() => setEditSection('layout')}
-                                style={{ borderRadius: 0, borderBottom: editSection === 'layout' ? '3px solid var(--primary-color)' : 'none' }}
-                            />
-                            <Button
-                                label={'Struttura quadri' + (questionsStructureChanged() ? ' •' : '')}
-                                icon="pi pi-list"
-                                text={editSection !== 'struttura'}
-                                severity={questionsStructureChanged() ? 'warning' : undefined}
-                                onClick={() => setEditSection('struttura')}
-                                style={{ borderRadius: 0, borderBottom: editSection === 'struttura' ? '3px solid var(--primary-color)' : 'none' }}
-                            />
-                        </div>
+                        {/* TabView interno: Layout vs Struttura */}
+                        <TabView
+                            activeIndex={editSection === 'layout' ? 0 : 1}
+                            onTabChange={(e) => setEditSection(e.index === 0 ? 'layout' : 'struttura')}
+                        >
+                            <TabPanel header={<span><i className="pi pi-palette" style={{ marginRight: '0.5rem' }} />Layout grafico</span>}>
 
-                        {/* SEZIONE LAYOUT */}
-                        {editSection === 'layout' && (
-                            <div>
                                 <Message severity="info" style={{ marginBottom: 10 }}
                                     text="Modifiche al layout grafico (brand, colori, testi introduttivi) si applicano in place alla versione corrente, senza creare una nuova versione." />
 
@@ -954,16 +939,17 @@ const Ar1AdminConfig = () => {
                                         <InputTextarea value={layoutAdvancedJson} onChange={(e) => setLayoutAdvancedJson(e.target.value)} rows={20} style={{ width: '100%', fontFamily: 'monospace', fontSize: 12 }} />
                                     </div>
                                 )}
-                            </div>
-                        )}
+                            </TabPanel>
 
-                        {/* SEZIONE STRUTTURA QUADRI */}
-                        {editSection === 'struttura' && questionsSnapshot && (
-                            <QuadriStructureEditor
-                                value={questionsSnapshot}
-                                onChange={setQuestionsSnapshot}
-                            />
-                        )}
+                            <TabPanel header={<span><i className="pi pi-list" style={{ marginRight: '0.5rem' }} />Struttura quadri{questionsStructureChanged() ? ' •' : ''}</span>}>
+                                {questionsSnapshot && (
+                                    <QuadriStructureEditor
+                                        value={questionsSnapshot}
+                                        onChange={setQuestionsSnapshot}
+                                    />
+                                )}
+                            </TabPanel>
+                        </TabView>
 
                         {/* Footer azioni */}
                         <div style={{ position: 'sticky', bottom: 0, background: 'white', paddingTop: 14, borderTop: '1px solid #eee', marginTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>