feat: sprint 3 — profil utilisateur, badge plan, dropdown Header

- AuthContext.User : plan? { slug, name, level } | null
- UserBadge : nickname + badge plan.slug (fallback free)
- Header : dropdown click (Profil / Déconnexion) + click-outside
- ProfilePage : infos compte, badge plan, edit nickname (PATCH /users/me + re-fetch /auth/me → setUser)
- App : route /profile protégée
- useAuth : réexporte depuis AuthContext, fin de la dérive

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import VideoPage from './pages/VideoPage';
 import PlaylistsPage from './pages/PlaylistsPage';
 import PlaylistPage from './pages/PlaylistPage';
 import AdminPage from './pages/AdminPage';
+import ProfilePage from './pages/ProfilePage';
 
 type Theme = 'dark' | 'light';
 
@@ -38,6 +39,7 @@ function App() {
               <Route path="/playlists" element={<PlaylistsPage />} />
               <Route path="/playlists/:id" element={<PlaylistPage />} />
               <Route path="/admin" element={<AdminPage />} />
+              <Route path="/profile" element={<ProfilePage />} />
             </Route>
           </Route>
         </Routes>

frontend/src/components/UserBadge.tsx

@@ -0,0 +1,18 @@
+import type { User } from '../context/AuthContext';
+
+interface UserBadgeProps {
+  user: User;
+}
+
+export default function UserBadge({ user }: UserBadgeProps) {
+  const planLabel = user.plan?.slug ?? 'free';
+
+  return (
+    <span className="flex items-center gap-2">
+      <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
+      <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">
+        {planLabel}
+      </span>
+    </span>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -1,6 +1,8 @@
+import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { apiFetch } from '../../lib/api';
 import type { User } from '../../context/AuthContext';
+import UserBadge from '../UserBadge';
 
 interface HeaderProps {
   theme: 'dark' | 'light';
@@ -10,8 +12,23 @@ interface HeaderProps {
 }
 
 export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
   async function handleLogout() {
     await apiFetch('/auth/logout', { method: 'POST' }).catch(() => {});
+    setOpen(false);
     onLogout();
   }
 
@@ -39,7 +56,7 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
               Playlists
             </Link>
           )}
-          {user?.roles?.includes('admin') && (
+          {user?.roles?.some((r) => r === 'admin' || r === 'super_admin') && (
             <Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
               admin
             </Link>
@@ -57,14 +74,31 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
           </button>
 
           {user ? (
-            <div className="flex items-center gap-3">
+            <div className="relative" ref={dropdownRef}>
-              <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
               <button
-                onClick={handleLogout}
+                onClick={() => setOpen((o) => !o)}
-                className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
+                className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
               >
-                ↩
+                <UserBadge user={user} />
+                <span className="font-mono text-xs text-od-muted">▾</span>
               </button>
+              {open && (
+                <div className="absolute right-0 top-full mt-1 w-36 rounded border border-od-border bg-od-surface shadow-lg z-50">
+                  <Link
+                    to="/profile"
+                    onClick={() => setOpen(false)}
+                    className="block px-3 py-2 text-xs text-od-muted hover:text-od-text transition-colors"
+                  >
+                    Profil
+                  </Link>
+                  <button
+                    onClick={handleLogout}
+                    className="w-full text-left px-3 py-2 font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
+                  >
+                    Déconnexion
+                  </button>
+                </div>
+              )}
             </div>
           ) : (
             <Link

frontend/src/context/AuthContext.tsx

@@ -5,6 +5,7 @@ export interface User {
   id: string;
   email: string | null;
   nickname: string;
+  plan?: { slug: string; name: string; level: number } | null;
   subscriptionLevel?: number;
   roles: string[];
 }

frontend/src/hooks/useAuth.ts

@@ -1,38 +1,4 @@
-import { useState, useEffect } from 'react';
+// Réexporte depuis AuthContext — source unique de vérité auth.
-import { apiFetch } from '../lib/api';
+// Ne pas dupliquer User ou la logique de fetch ici.
-
+export type { User } from '../context/AuthContext';
-export interface User {
+export { useAuthContext as useAuth } from '../context/AuthContext';
-  id: string;
-  email: string | null;
-  nickname: string;
-  subscriptionLevel?: number;
-}
-
-interface AuthState {
-  user: User | null;
-  loading: boolean;
-  setUser: (u: User | null) => void;
-}
-
-interface MeResponse {
-  success: boolean;
-  data: { user: User };
-}
-
-export function useAuth(): AuthState {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    apiFetch<MeResponse>('/auth/me')
-      .then((res) => { if (!cancelled) setUser(res.data.user); })
-      .catch(() => { if (!cancelled) setUser(null); })
-      .finally(() => { if (!cancelled) setLoading(false); });
-
-    return () => { cancelled = true; };
-  }, []);
-
-  return { user, loading, setUser };
-}

frontend/src/pages/ProfilePage.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import { apiFetch, ApiError } from '../lib/api';
+import { useAuthContext } from '../context/AuthContext';
+import type { User } from '../context/AuthContext';
+
+interface MeResponse {
+  success: boolean;
+  data: { user: User };
+}
+
+export default function ProfilePage() {
+  const { user, setUser } = useAuthContext();
+
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(user?.nickname ?? '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!user) return null;
+
+  function handleEdit() {
+    setDraft(user!.nickname);
+    setError(null);
+    setEditing(true);
+  }
+
+  function handleCancel() {
+    setEditing(false);
+    setError(null);
+  }
+
+  async function handleSave() {
+    const trimmed = draft.trim();
+    if (!trimmed || trimmed === user!.nickname) {
+      setEditing(false);
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      await apiFetch('/users/me', {
+        method: 'PATCH',
+        body: JSON.stringify({ nickname: trimmed }),
+      });
+      const res = await apiFetch<MeResponse>('/auth/me');
+      setUser(res.data.user);
+      setEditing(false);
+    } catch (e) {
+      setError(e instanceof ApiError ? `Erreur ${e.status}` : 'Erreur réseau');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const planLabel = user.plan?.name ?? 'Free';
+  const planSlug = user.plan?.slug ?? 'free';
+
+  return (
+    <div className="max-w-lg space-y-8">
+      <h1 className="font-mono text-sm text-od-accent">Profil</h1>
+
+      {/* Infos compte */}
+      <section className="space-y-4">
+        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">
+          Compte
+        </h2>
+
+        <div className="rounded border border-od-border bg-od-surface divide-y divide-od-border">
+
+          {/* Email */}
+          <div className="flex items-center justify-between px-4 py-3">
+            <span className="text-xs text-od-muted">Email</span>
+            <span className="font-mono text-xs text-od-text">
+              {user.email ?? '—'}
+            </span>
+          </div>
+
+          {/* Nickname */}
+          <div className="flex items-center justify-between px-4 py-3">
+            <span className="text-xs text-od-muted">Pseudo</span>
+            {editing ? (
+              <div className="flex flex-col items-end gap-1">
+                <div className="flex items-center gap-2">
+                  <input
+                    value={draft}
+                    onChange={(e) => setDraft(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') handleCancel(); }}
+                    maxLength={32}
+                    disabled={saving}
+                    className="w-36 rounded border border-od-border bg-od-bg px-2 py-0.5 font-mono text-xs text-od-text focus:border-od-accent focus:outline-none disabled:opacity-50"
+                    autoFocus
+                  />
+                  <button
+                    onClick={handleSave}
+                    disabled={saving}
+                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40"
+                  >
+                    {saving ? '…' : '✓'}
+                  </button>
+                  <button
+                    onClick={handleCancel}
+                    disabled={saving}
+                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40"
+                  >
+                    ✕
+                  </button>
+                </div>
+                {error && (
+                  <span className="font-mono text-[10px] text-od-crit">{error}</span>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                <span className="font-mono text-xs text-od-text">{user.nickname}</span>
+                <button
+                  onClick={handleEdit}
+                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors"
+                >
+                  modifier
+                </button>
+              </div>
+            )}
+          </div>
+
+        </div>
+      </section>
+
+      {/* Plan */}
+      <section className="space-y-4">
+        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">
+          Abonnement
+        </h2>
+
+        <div className="rounded border border-od-border bg-od-surface px-4 py-3 flex items-center justify-between">
+          <p className="text-xs text-od-text">{planLabel}</p>
+          <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">
+            {planSlug}
+          </span>
+        </div>
+      </section>
+    </div>
+  );
+}