fix: sticky user card in sidebar, move logout to Settings > Sicurezza

- 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>
This commit is contained in:
Michele
2026-04-07 12:17:16 +02:00
parent 9a8b3c4e14
commit e2bf83b54f
2 changed files with 18 additions and 22 deletions

View File

@@ -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>

View File

@@ -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>
)
}