chlova/web/src/App.tsx

import { BrowserRouter, Routes, Route, NavLink, Navigate } from "react-router-dom";
import { MessageSquare, ShieldCheck, LogOut, Cpu } from "lucide-react";
import { useAuth } from "./auth";
import { AppDataProvider, useAppData } from "./appdata";
import { Login } from "./pages/Login";
import { Chat } from "./pages/Chat";
import { Review } from "./pages/Review";

function Shell() {
  const { logout } = useAuth();
  const { phase, tools, assets } = useAppData();
  const link = ({ isActive }: { isActive: boolean }): string =>
    `flex items-center gap-1.5 px-3 py-2 rounded-md text-sm ${isActive ? "bg-surface-2 text-accent" : "text-muted hover:text-fg"}`;

  return (
    <div className="min-h-dvh flex flex-col">
      <header className="flex items-center gap-2 border-b border-border bg-surface px-4 py-2">
        <span className="font-bold tracking-wide text-accent glow mr-2">CHLOVA</span>
        <nav className="flex gap-1">
          <NavLink to="/chat" className={link}>
            <MessageSquare size={16} /> Chat
          </NavLink>
          <NavLink to="/review" className={link}>
            <ShieldCheck size={16} /> Review
            {assets.length > 0 && (
              <span className="ml-1 rounded-full bg-accent px-1.5 text-xs text-bg">{assets.length}</span>
            )}
          </NavLink>
        </nav>
        <span className="ml-auto flex items-center gap-1.5 text-xs text-muted" title="Phase · outils">
          <Cpu size={14} /> {phase || "…"} · {tools} outils
        </span>
        <button onClick={logout} className="ml-3 text-muted hover:text-fg cursor-pointer" aria-label="Déconnexion" title="Déconnexion">
          <LogOut size={18} />
        </button>
      </header>
      <main className="flex-1 min-h-0">
        <Routes>
          <Route path="/chat" element={<Chat />} />
          <Route path="/review" element={<Review />} />
          <Route path="*" element={<Navigate to="/chat" replace />} />
        </Routes>
      </main>
    </div>
  );
}

export function App() {
  const { token } = useAuth();
  return (
    <BrowserRouter>
      {token ? (
        <AppDataProvider>
          <Shell />
        </AppDataProvider>
      ) : (
        <Login />
      )}
    </BrowserRouter>
  );
}