refactor: make Header a server component to avoid auth flash on load

Move session check from client-side useSession() to server-side auth(), so the authenticated state is known at initial render. Extract interactive parts (ThemeToggle, UserMenu, WorkshopsDropdown, NavLinks) into small client components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 11:14:27 +01:00
parent a10205994c
commit 9298eef0cb
7 changed files with 223 additions and 170 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import { Providers } from '@/components/Providers';
+import { Header } from '@/components/layout/Header';

 const geistSans = Geist({
  variable: '--font-geist-sans',
@@ -37,7 +38,12 @@ export default function RootLayout({
        />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Providers>{children}</Providers>
+        <Providers>
+          <div className="min-h-screen bg-background">
+            <Header />
+            {children}
+          </div>
+        </Providers>
      </body>
    </html>
  );
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -2,7 +2,6 @@

 import { SessionProvider } from 'next-auth/react';
 import { ThemeProvider } from '@/contexts/ThemeContext';
-import { Header } from '@/components/layout/Header';
 import { ReactNode } from 'react';

 interface ProvidersProps {
@@ -13,10 +12,7 @@ export function Providers({ children }: ProvidersProps) {
  return (
    <SessionProvider>
      <ThemeProvider>
-        <div className="min-h-screen bg-background">
-          <Header />
-          {children}
-        </div>
+        {children}
      </ThemeProvider>
    </SessionProvider>
  );
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,26 +1,14 @@
-'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, useRef } from 'react';
-import { Avatar, RocketIcon } from '@/components/ui';
-import { WORKSHOPS } from '@/lib/workshops';
-import { useClickOutside } from '@/hooks/useClickOutside';
+import { auth } from '@/lib/auth';
+import { RocketIcon } from '@/components/ui';
+import { ThemeToggle } from './ThemeToggle';
+import { UserMenu } from './UserMenu';
+import { WorkshopsDropdown } from './WorkshopsDropdown';
+import { NavLinks } from './NavLinks';

-export function Header() {
-  const { theme, toggleTheme } = useTheme();
-  const { data: session, status } = useSession();
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [workshopsOpen, setWorkshopsOpen] = useState(false);
-  const workshopsDropdownRef = useRef<HTMLDivElement>(null);
-  const userMenuRef = useRef<HTMLDivElement>(null);
-  useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
-  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
-  const pathname = usePathname();
-
-  const isActiveLink = (path: string) => pathname.startsWith(path);
+export async function Header() {
+  const session = await auth();
+  const isAuthenticated = !!session?.user;

  return (
    <header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
@@ -31,154 +19,20 @@ export function Header() {
        </Link>

        <nav className="flex items-center gap-4">
-          {status === 'authenticated' && session?.user && (
+          {isAuthenticated && (
            <>
-              {/* 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>
-
-              {/* Objectives Link */}
-              <Link
-                href="/objectives"
-                className={`text-sm font-medium transition-colors ${
-                  isActiveLink('/objectives') ? 'text-primary' : 'text-muted hover:text-foreground'
-                }`}
-              >
-                🎯 Mes Objectifs
-              </Link>
-
-              {/* Teams Link */}
-              <Link
-                href="/teams"
-                className={`text-sm font-medium transition-colors ${
-                  isActiveLink('/teams') ? 'text-primary' : 'text-muted hover:text-foreground'
-                }`}
-              >
-                👥 Équipes
-              </Link>
-
-              {/* New Workshop Dropdown */}
-              <div className="relative" ref={workshopsDropdownRef}>
-                <button
-                  onClick={() => setWorkshopsOpen(!workshopsOpen)}
-                  className={`flex items-center gap-1 text-sm font-medium transition-colors ${
-                    WORKSHOPS.some((w) => isActiveLink(w.path))
-                      ? 'text-primary'
-                      : 'text-muted hover:text-foreground'
-                  }`}
-                >
-                  Nouvel atelier
-                  <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">
-                    {WORKSHOPS.map((w) => (
-                      <Link
-                        key={w.id}
-                        href={w.newPath}
-                        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">{w.icon}</span>
-                        <div>
-                          <div className="font-medium">{w.label}</div>
-                          <div className="text-xs text-muted">{w.description}</div>
-                        </div>
-                      </Link>
-                    ))}
-                  </div>
-                )}
-              </div>
+              <NavLinks />
+              <WorkshopsDropdown />
            </>
          )}

-          <button
-            onClick={toggleTheme}
-            className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
-            aria-label="Toggle theme"
-          >
-            {theme === 'light' ? '🌙' : '☀️'}
-          </button>
+          <ThemeToggle />

-          {status === 'loading' ? (
-            <div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
-          ) : status === 'authenticated' && session?.user ? (
-            <div ref={userMenuRef} className="relative">
-              <button
-                onClick={() => setMenuOpen(!menuOpen)}
-                className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
-              >
-                <Avatar email={session.user.email!} name={session.user.name} size={24} />
-                <span className="text-sm font-medium text-foreground">
-                  {session.user.name || session.user.email?.split('@')[0]}
-                </span>
-                <svg
-                  className={`h-4 w-4 text-muted transition-transform ${menuOpen ? '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>
-
-              {menuOpen && (
-                <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
-                  <div className="border-b border-border px-4 py-2">
-                    <p className="text-xs text-muted">Connecté en tant que</p>
-                    <p className="truncate text-sm font-medium text-foreground">
-                      {session.user.email}
-                    </p>
-                  </div>
-                  <Link
-                    href="/profile"
-                    onClick={() => setMenuOpen(false)}
-                    className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
-                  >
-                    👤 Mon Profil
-                  </Link>
-                  <Link
-                    href="/users"
-                    onClick={() => setMenuOpen(false)}
-                    className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
-                  >
-                    👥 Utilisateurs
-                  </Link>
-                  <button
-                    onClick={() => signOut({ callbackUrl: '/' })}
-                    className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
-                  >
-                    Se déconnecter
-                  </button>
-                </div>
-              )}
-            </div>
+          {isAuthenticated ? (
+            <UserMenu
+              userName={session.user?.name}
+              userEmail={session.user?.email!}
+            />
          ) : (
            <Link
              href="/login"
--- a/src/components/layout/NavLinks.tsx
+++ b/src/components/layout/NavLinks.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export function NavLinks() {
+  const pathname = usePathname();
+
+  const isActiveLink = (path: string) => pathname.startsWith(path);
+
+  return (
+    <>
+      <Link
+        href="/sessions"
+        className={`text-sm font-medium transition-colors ${
+          isActiveLink('/sessions') && !isActiveLink('/sessions/')
+            ? 'text-primary'
+            : 'text-muted hover:text-foreground'
+        }`}
+      >
+        Mes Ateliers
+      </Link>
+
+      <Link
+        href="/objectives"
+        className={`text-sm font-medium transition-colors ${
+          isActiveLink('/objectives') ? 'text-primary' : 'text-muted hover:text-foreground'
+        }`}
+      >
+        🎯 Mes Objectifs
+      </Link>
+
+      <Link
+        href="/teams"
+        className={`text-sm font-medium transition-colors ${
+          isActiveLink('/teams') ? 'text-primary' : 'text-muted hover:text-foreground'
+        }`}
+      >
+        👥 Équipes
+      </Link>
+    </>
+  );
+}
--- a/src/components/layout/ThemeToggle.tsx
+++ b/src/components/layout/ThemeToggle.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { useTheme } from '@/contexts/ThemeContext';
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
+      aria-label="Toggle theme"
+    >
+      {theme === 'light' ? '🌙' : '☀️'}
+    </button>
+  );
+}
--- a/src/components/layout/UserMenu.tsx
+++ b/src/components/layout/UserMenu.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { signOut } from 'next-auth/react';
+import { useState, useRef } from 'react';
+import { Avatar } from '@/components/ui';
+import { useClickOutside } from '@/hooks/useClickOutside';
+
+interface UserMenuProps {
+  userName: string | null | undefined;
+  userEmail: string;
+}
+
+export function UserMenu({ userName, userEmail }: UserMenuProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const userMenuRef = useRef<HTMLDivElement>(null);
+  useClickOutside(userMenuRef, () => setMenuOpen(false), menuOpen);
+
+  return (
+    <div ref={userMenuRef} className="relative">
+      <button
+        onClick={() => setMenuOpen(!menuOpen)}
+        className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card pl-1.5 pr-3 transition-colors hover:bg-card-hover"
+      >
+        <Avatar email={userEmail} name={userName} size={24} />
+        <span className="text-sm font-medium text-foreground">
+          {userName || userEmail.split('@')[0]}
+        </span>
+        <svg
+          className={`h-4 w-4 text-muted transition-transform ${menuOpen ? '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>
+
+      {menuOpen && (
+        <div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
+          <div className="border-b border-border px-4 py-2">
+            <p className="text-xs text-muted">Connecté en tant que</p>
+            <p className="truncate text-sm font-medium text-foreground">{userEmail}</p>
+          </div>
+          <Link
+            href="/profile"
+            onClick={() => setMenuOpen(false)}
+            className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
+          >
+            👤 Mon Profil
+          </Link>
+          <Link
+            href="/users"
+            onClick={() => setMenuOpen(false)}
+            className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
+          >
+            👥 Utilisateurs
+          </Link>
+          <button
+            onClick={() => signOut({ callbackUrl: '/' })}
+            className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
+          >
+            Se déconnecter
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/components/layout/WorkshopsDropdown.tsx
+++ b/src/components/layout/WorkshopsDropdown.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useRef } from 'react';
+import { WORKSHOPS } from '@/lib/workshops';
+import { useClickOutside } from '@/hooks/useClickOutside';
+
+export function WorkshopsDropdown() {
+  const [workshopsOpen, setWorkshopsOpen] = useState(false);
+  const workshopsDropdownRef = useRef<HTMLDivElement>(null);
+  useClickOutside(workshopsDropdownRef, () => setWorkshopsOpen(false), workshopsOpen);
+  const pathname = usePathname();
+
+  const isActiveLink = (path: string) => pathname.startsWith(path);
+
+  return (
+    <div className="relative" ref={workshopsDropdownRef}>
+      <button
+        onClick={() => setWorkshopsOpen(!workshopsOpen)}
+        className={`flex items-center gap-1 text-sm font-medium transition-colors ${
+          WORKSHOPS.some((w) => isActiveLink(w.path))
+            ? 'text-primary'
+            : 'text-muted hover:text-foreground'
+        }`}
+      >
+        Nouvel atelier
+        <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">
+          {WORKSHOPS.map((w) => (
+            <Link
+              key={w.id}
+              href={w.newPath}
+              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">{w.icon}</span>
+              <div>
+                <div className="font-medium">{w.label}</div>
+                <div className="text-xs text-muted">{w.description}</div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}