V1

src/components/Layout.tsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
 import {
   LayoutDashboard,
   KanbanSquare,
-  Target,
+  Clock,
   Bug,
   Users,
   Plus,
@@ -12,7 +12,6 @@ import {
   Settings,
   Gamepad2,
   ShieldCheck,
-  CalendarRange,
   Sun,
   Moon
 } from 'lucide-react'
@@ -21,12 +20,12 @@ import { supa } from '../lib/supabase'
 import { ROLE_LABELS } from '../lib/types'
 import { Theme, getTheme, setTheme } from '../lib/theme'
 import { Avatar, Modal } from './ui'
+import NotificationBell from './NotificationBell'
 
 export type Page =
   | 'dashboard'
   | 'kanban'
   | 'planning'
-  | 'milestones'
   | 'bugs'
   | 'members'
   | 'admin'
@@ -34,8 +33,7 @@ export type Page =
 const NAV: { id: Page; label: string; icon: typeof LayoutDashboard; adminOnly?: boolean }[] = [
   { id: 'dashboard', label: 'Tableau de bord', icon: LayoutDashboard },
   { id: 'kanban', label: 'Tâches (Kanban)', icon: KanbanSquare },
-  { id: 'planning', label: 'Planning', icon: CalendarRange },
-  { id: 'milestones', label: 'Jalons', icon: Target },
+  { id: 'planning', label: 'Feuille de temps', icon: Clock },
   { id: 'bugs', label: 'Bugs', icon: Bug },
   { id: 'members', label: 'Équipe', icon: Users },
   { id: 'admin', label: 'Administration', icon: ShieldCheck, adminOnly: true }
@@ -114,14 +112,16 @@ export default function Layout({
             <button
               key={n.id}
               onClick={() => setPage(n.id)}
-              className={`relative flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
-                page === n.id ? 'text-ink' : 'text-muted hover:bg-panel2 hover:text-ink'
+              className={`relative flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
+                page === n.id
+                  ? 'text-accent'
+                  : 'text-muted hover:bg-accent/10 hover:text-accent'
               }`}
             >
               {page === n.id && (
                 <motion.span
                   layoutId="nav-active"
-                  className="absolute inset-0 rounded-lg bg-accent/20"
+                  className="absolute inset-0 rounded-lg bg-accent/15 ring-1 ring-inset ring-accent/25"
                   transition={{ type: 'spring', stiffness: 380, damping: 30 }}
                 />
               )}
@@ -141,6 +141,7 @@ export default function Layout({
                 {profile ? ROLE_LABELS[profile.role] : ''}
               </div>
             </div>
+            <NotificationBell setPage={setPage} />
             <button
               onClick={toggleTheme}
               title={theme === 'dark' ? 'Passer en clair' : 'Passer en sombre'}