feat: implement Moving Motivators feature with session management, real-time event handling, and UI components for enhanced user experience

src/components/layout/Header.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { useSession, signOut } from 'next-auth/react';
 import { useTheme } from '@/contexts/ThemeContext';
 import { useState } from 'react';
@@ -9,23 +10,89 @@ export function Header() {
   const { theme, toggleTheme } = useTheme();
   const { data: session, status } = useSession();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [workshopsOpen, setWorkshopsOpen] = useState(false);
+  const pathname = usePathname();
+
+  const isActiveLink = (path: string) => pathname.startsWith(path);
 
   return (
     <header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
         <Link href="/" className="flex items-center gap-2">
-          <span className="text-2xl">📊</span>
-          <span className="text-xl font-bold text-foreground">SWOT Manager</span>
+          <span className="text-2xl">🚀</span>
+          <span className="text-xl font-bold text-foreground">Workshop Manager</span>
         </Link>
 
         <nav className="flex items-center gap-4">
           {status === 'authenticated' && session?.user && (
-            <Link
-              href="/sessions"
-              className="text-muted transition-colors hover:text-foreground"
-            >
-              Mes Sessions
-            </Link>
+            <>
+              {/* All Workshops Link */}
+              <Link
+                href="/sessions"
+                className={`text-sm font-medium transition-colors ${
+                  isActiveLink('/sessions') && !isActiveLink('/sessions/')
+                    ? 'text-primary'
+                    : 'text-muted hover:text-foreground'
+                }`}
+              >
+                Mes Ateliers
+              </Link>
+
+              {/* Workshops Dropdown */}
+              <div className="relative">
+                <button
+                  onClick={() => setWorkshopsOpen(!workshopsOpen)}
+                  onBlur={() => setTimeout(() => setWorkshopsOpen(false), 150)}
+                  className={`flex items-center gap-1 text-sm font-medium transition-colors ${
+                    isActiveLink('/sessions/') || isActiveLink('/motivators')
+                      ? 'text-primary'
+                      : 'text-muted hover:text-foreground'
+                  }`}
+                >
+                  Ateliers
+                  <svg
+                    className={`h-4 w-4 transition-transform ${workshopsOpen ? 'rotate-180' : ''}`}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </button>
+
+                {workshopsOpen && (
+                  <div className="absolute left-0 z-20 mt-2 w-56 rounded-lg border border-border bg-card py-1 shadow-lg">
+                    <Link
+                      href="/sessions/new"
+                      className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
+                      onClick={() => setWorkshopsOpen(false)}
+                    >
+                      <span className="text-lg">📊</span>
+                      <div>
+                        <div className="font-medium">Analyse SWOT</div>
+                        <div className="text-xs text-muted">Forces, faiblesses, opportunités</div>
+                      </div>
+                    </Link>
+                    <Link
+                      href="/motivators/new"
+                      className="flex items-center gap-3 px-4 py-2.5 text-sm text-foreground hover:bg-card-hover"
+                      onClick={() => setWorkshopsOpen(false)}
+                    >
+                      <span className="text-lg">🎯</span>
+                      <div>
+                        <div className="font-medium">Moving Motivators</div>
+                        <div className="text-xs text-muted">Motivations intrinsèques</div>
+                      </div>
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </>
           )}
 
           <button