feat(ui): header global visible sur toutes les pages — identité app + compte

- TopBar enrichi : icône maison + nom + version (gauche), thème + compte (droite)
- Bouton compte désactivé (placeholder pour future auth multi-utilisateurs)
- Suppression de la carte HomeHub redondante sur la page d'accueil

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-25 13:53:27 +02:00
co-authored by Claude Sonnet 4.6
parent b468104931
commit 31d60983b2
2 changed files with 35 additions and 21 deletions
+35 -8
View File
@@ -1,3 +1,4 @@
import type React from 'react'
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
import BottomNav from './BottomNav' import BottomNav from './BottomNav'
import SideNav from './SideNav' import SideNav from './SideNav'
@@ -19,27 +20,53 @@ function TopBar() {
setTheme(THEME_CYCLE[(idx + 1) % THEME_CYCLE.length]) setTheme(THEME_CYCLE[(idx + 1) % THEME_CYCLE.length])
} }
const iconBtn: React.CSSProperties = {
background: 'var(--bg-4)', border: 'none', borderRadius: 8,
width: 36, height: 36, cursor: 'pointer',
color: 'var(--ink-2)', fontSize: 16,
display: 'flex', alignItems: 'center', justifyContent: 'center',
flexShrink: 0,
}
return ( return (
<header style={{ <header style={{
position: 'fixed', top: 0, left: 0, right: 0, position: 'fixed', top: 0, left: 0, right: 0,
height: 44, zIndex: 100, height: 44, zIndex: 100,
background: 'var(--bg-2)', background: 'var(--bg-2)',
borderBottom: '1px solid var(--border-2)', borderBottom: '1px solid var(--border-2)',
display: 'flex', alignItems: 'center', justifyContent: 'flex-end', display: 'flex', alignItems: 'center',
padding: '0 12px', padding: '0 12px', gap: 8,
}}> }}>
{/* Identité app — gauche */}
<i className="fa-solid fa-house" style={{ color: 'var(--accent)', fontSize: 16, flexShrink: 0 }} />
<span style={{
fontFamily: 'var(--font-mono)', fontWeight: 700,
color: 'var(--accent)', fontSize: 15, letterSpacing: '-0.02em',
flexShrink: 0,
}}>HomeHub</span>
<span style={{
fontFamily: 'var(--font-mono)', fontSize: 10,
color: 'var(--ink-4)', flexShrink: 0,
}}>v{__APP_VERSION__}</span>
<div style={{ flex: 1 }} />
{/* Boutons — droite */}
<button <button
onClick={cycleTheme} onClick={cycleTheme}
title={`Thème : ${theme} (${resolved})`} title={`Thème : ${theme} (${resolved})`}
style={{ style={iconBtn}
background: 'var(--bg-4)', border: 'none', borderRadius: 8,
width: 36, height: 36, cursor: 'pointer',
color: 'var(--ink-2)', fontSize: 16,
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}
> >
<i className={`fa-solid fa-${THEME_ICON[theme]}`} /> <i className={`fa-solid fa-${THEME_ICON[theme]}`} />
</button> </button>
<button
title="Connexion (à venir)"
disabled
style={{ ...iconBtn, opacity: 0.4, cursor: 'default' }}
>
<i className="fa-solid fa-circle-user" />
</button>
</header> </header>
) )
} }
-13
View File
@@ -3,19 +3,6 @@ import { Link } from 'react-router-dom'
export default function HomePage() { export default function HomePage() {
return ( return (
<div className="p-4"> <div className="p-4">
<div className="glass" style={{ padding: 20, borderRadius: 10, marginBottom: 16 }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
<h1 style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', margin: 0 }}>
HomeHub
</h1>
<span style={{ color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
v{__APP_VERSION__}
</span>
</div>
<p style={{ color: 'var(--ink-2)', marginTop: 8 }}>
Application d&apos;organisation personnelle
</p>
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}> <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))', gap: 12 }}>
{[ {[
{ label: 'Todos', icon: 'list-check', path: '/todos' }, { label: 'Todos', icon: 'list-check', path: '/todos' },