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:
@@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'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' },
|
||||||
|
|||||||
Reference in New Issue
Block a user