From 31d60983b259e966086a1fc6f2ce0f77a3117500 Mon Sep 17 00:00:00 2001
From: Gilles Soulier <gil.soulier@gmail.com>
Date: Mon, 25 May 2026 13:53:27 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20header=20global=20visible=20sur=20t?=
 =?UTF-8?q?outes=20les=20pages=20=E2=80=94=20identit=C3=A9=20app=20+=20com?=
 =?UTF-8?q?pte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 frontend/src/components/layout/Layout.tsx | 43 ++++++++++++++++++-----
 frontend/src/pages/HomePage.tsx           | 13 -------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx
index 4b7ce00..0e695ba 100644
--- a/frontend/src/components/layout/Layout.tsx
+++ b/frontend/src/components/layout/Layout.tsx
@@ -1,3 +1,4 @@
+import type React from 'react'
 import { Outlet } from 'react-router-dom'
 import BottomNav from './BottomNav'
 import SideNav from './SideNav'
@@ -19,27 +20,53 @@ function TopBar() {
     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 (
     <header style={{
       position: 'fixed', top: 0, left: 0, right: 0,
       height: 44, zIndex: 100,
       background: 'var(--bg-2)',
       borderBottom: '1px solid var(--border-2)',
-      display: 'flex', alignItems: 'center', justifyContent: 'flex-end',
-      padding: '0 12px',
+      display: 'flex', alignItems: 'center',
+      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
         onClick={cycleTheme}
         title={`Thème : ${theme} (${resolved})`}
-        style={{
-          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',
-        }}
+        style={iconBtn}
       >
         <i className={`fa-solid fa-${THEME_ICON[theme]}`} />
       </button>
+
+      <button
+        title="Connexion (à venir)"
+        disabled
+        style={{ ...iconBtn, opacity: 0.4, cursor: 'default' }}
+      >
+        <i className="fa-solid fa-circle-user" />
+      </button>
     </header>
   )
 }
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 465409a..996c821 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -3,19 +3,6 @@ import { Link } from 'react-router-dom'
 export default function HomePage() {
   return (
     <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 }}>
         {[
           { label: 'Todos', icon: 'list-check', path: '/todos' },