From e2bf83b54faed377ab895633a5ddef95efb84620 Mon Sep 17 00:00:00 2001
From: Michele <michele@leopost.it>
Date: Tue, 7 Apr 2026 12:17:16 +0200
Subject: [PATCH] fix: sticky user card in sidebar, move logout to Settings >
 Sicurezza
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sidebar user card (name + plan badge) now always visible at bottom
  using flexShrink: 0 (nav area scrolls, footer stays fixed)
- Removed logout button from sidebar (reduces accidental logouts)
- Added "Esci dall'account" button in Settings > Sicurezza section
- User needs 2 clicks to logout: Settings icon → Sicurezza → Esci

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/Layout.jsx       | 21 ++-------------------
 frontend/src/components/SettingsPage.jsx | 19 ++++++++++++++++---
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 1609dae..1025586 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -120,8 +120,8 @@ export default function Layout() {
           })}
         </nav>
 
-        {/* User card + logout */}
-        <div style={{ borderTop: '1px solid var(--border)' }}>
+        {/* User card — always visible at bottom */}
+        <div style={{ borderTop: '1px solid var(--border)', flexShrink: 0 }}>
           {/* Admin link */}
           {isAdmin && (
             <div style={{ padding: '0.5rem 1.25rem', borderBottom: '1px solid var(--border)' }}>
@@ -172,23 +172,6 @@ export default function Layout() {
             </div>
             <span style={{ fontSize: '0.65rem', color: 'var(--ink-muted)', flexShrink: 0 }}>⚙</span>
           </button>
-
-          {/* Logout — ben visibile */}
-          <button
-            onClick={logout}
-            style={{
-              width: '100%', padding: '0.7rem 1.25rem',
-              background: '#FFF0EE', border: 'none', borderTop: '1px solid var(--border)',
-              fontFamily: "'DM Sans', sans-serif", fontSize: '0.82rem', fontWeight: 700,
-              color: 'var(--accent)', cursor: 'pointer', textAlign: 'left',
-              transition: 'background-color 0.15s, color 0.15s',
-              letterSpacing: '0.02em',
-            }}
-            onMouseEnter={e => { e.currentTarget.style.backgroundColor = 'var(--accent)'; e.currentTarget.style.color = 'white' }}
-            onMouseLeave={e => { e.currentTarget.style.backgroundColor = '#FFF0EE'; e.currentTarget.style.color = 'var(--accent)' }}
-          >
-            → Esci
-          </button>
         </div>
       </aside>
 
diff --git a/frontend/src/components/SettingsPage.jsx b/frontend/src/components/SettingsPage.jsx
index ca42d3e..2a1aefd 100644
--- a/frontend/src/components/SettingsPage.jsx
+++ b/frontend/src/components/SettingsPage.jsx
@@ -163,7 +163,7 @@ const SECTIONS = [
 ]
 
 export default function SettingsPage() {
-  const { user, isPro } = useAuth()
+  const { user, isPro, logout } = useAuth()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
   const [activeSection, setActiveSection] = useState(searchParams.get('tab') || 'profilo')
@@ -266,7 +266,7 @@ export default function SettingsPage() {
           {activeSection === 'affiliati' && <AffiliateList />}
           {activeSection === 'commenti' && <CommentsQueue />}
           {activeSection === 'sicurezza' && (
-            <SicurezzaSection user={user} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} />
+            <SicurezzaSection user={user} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} logout={logout} />
           )}
           {activeSection === 'privacy' && (
             <PrivacySection user={user} navigate={navigate} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} />
@@ -652,7 +652,7 @@ function GuideAccordion({ guide, providerName }) {
 
 // ─── Sicurezza ────────────────────────────────────────────────────────────────
 
-function SicurezzaSection({ user, saving, success, errors, setMsg, setSaving }) {
+function SicurezzaSection({ user, saving, success, errors, setMsg, setSaving, logout }) {
   const [form, setForm] = useState({ current_password: '', new_password: '', confirm_password: '' })
   const isGoogle = user?.auth_provider === 'google'
 
@@ -719,6 +719,19 @@ function SicurezzaSection({ user, saving, success, errors, setMsg, setSaving })
           </>
         )}
       </Card>
+      <Card>
+        <Label>Sessione</Label>
+        <p style={{ fontSize: '0.85rem', color: 'var(--ink-muted)', margin: '0.5rem 0 1rem', lineHeight: 1.5 }}>
+          Disconnettiti dal tuo account su questo dispositivo.
+        </p>
+        <button onClick={logout} style={{
+          padding: '0.55rem 1.25rem', backgroundColor: 'var(--error)', color: 'white',
+          fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: '0.85rem',
+          border: 'none', cursor: 'pointer',
+        }}>
+          Esci dall'account
+        </button>
+      </Card>
     </div>
   )
 }