feat: login provider selection, logout, playlists pages

- LoginPage : sélection Discord/GitHub/Google/Twitch via SuperOAuth
- Header : bouton Connexion → /login, logout ↩ quand connecté, nav Playlists conditionnelle
- useAuth : expose setUser pour logout côté Layout
- PlaylistsPage : liste owned/shared, création inline
- PlaylistPage : détail playlist + liste vidéos ordonnées
- Fix : Video.id number → string (UUID)
- Routes : /login, /playlists, /playlists/:id

frontend/src/App.tsx

@@ -2,8 +2,11 @@ import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from './components/layout/Layout';
 import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
 import CallbackPage from './pages/CallbackPage';
 import VideoPage from './pages/VideoPage';
+import PlaylistsPage from './pages/PlaylistsPage';
+import PlaylistPage from './pages/PlaylistPage';
 
 type Theme = 'dark' | 'light';
 
@@ -24,7 +27,10 @@ function App() {
       <Routes>
         <Route element={<Layout theme={theme} onToggleTheme={toggleTheme} />}>
           <Route path="/" element={<HomePage />} />
+          <Route path="/login" element={<LoginPage />} />
           <Route path="/video/:id" element={<VideoPage />} />
+          <Route path="/playlists" element={<PlaylistsPage />} />
+          <Route path="/playlists/:id" element={<PlaylistPage />} />
           <Route path="/callback" element={<CallbackPage />} />
         </Route>
       </Routes>

frontend/src/components/layout/Header.tsx

@@ -1,19 +1,19 @@
 import { Link } from 'react-router-dom';
+import { apiFetch } from '../../lib/api';
 import type { User } from '../../hooks/useAuth';
 
 interface HeaderProps {
   theme: 'dark' | 'light';
   onToggleTheme: () => void;
   user: User | null;
+  onLogout: () => void;
 }
 
-export default function Header({ theme, onToggleTheme, user }: HeaderProps) {
-  const callbackUrl = encodeURIComponent(
-    `${window.location.origin}/callback`
-  );
-  // Redirige vers SuperOAuth — l'utilisateur choisit son provider (Discord, GitHub, Google, Twitch)
-  // SuperOAuth redirige ensuite vers /callback?token=JWT&refresh=...
-  const loginUrl = `${import.meta.env.VITE_SUPEROAUTH_URL}/api/v1/auth/oauth/discord?redirectUrl=${callbackUrl}`;
+export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
+  async function handleLogout() {
+    await apiFetch('/auth/logout', { method: 'POST' }).catch(() => {});
+    onLogout();
+  }
 
   return (
     <header className="border-b border-od-border bg-od-surface">
@@ -31,18 +31,14 @@ export default function Header({ theme, onToggleTheme, user }: HeaderProps) {
 
         {/* Navigation */}
         <nav className="flex gap-6">
-          <Link
-            to="/"
-            className="text-sm text-od-muted hover:text-od-text transition-colors"
-          >
+          <Link to="/" className="text-sm text-od-muted hover:text-od-text transition-colors">
             Accueil
           </Link>
-          <Link
-            to="/videos"
-            className="text-sm text-od-muted hover:text-od-text transition-colors"
-          >
-            Vidéos
-          </Link>
+          {user && (
+            <Link to="/playlists" className="text-sm text-od-muted hover:text-od-text transition-colors">
+              Playlists
+            </Link>
+          )}
         </nav>
 
         {/* Right — thème + auth */}
@@ -56,16 +52,22 @@ export default function Header({ theme, onToggleTheme, user }: HeaderProps) {
           </button>
 
           {user ? (
-            <span className="font-mono text-xs text-od-accent">
-              {user.nickname}
-            </span>
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
+              <button
+                onClick={handleLogout}
+                className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
+              >
+                ↩
+              </button>
+            </div>
           ) : (
-            <a
-              href={loginUrl}
+            <Link
+              to="/login"
               className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
             >
               Connexion
-            </a>
+            </Link>
           )}
         </div>
 

frontend/src/components/layout/Layout.tsx

@@ -8,7 +8,7 @@ interface LayoutProps {
 }
 
 export default function Layout({ theme, onToggleTheme }: LayoutProps) {
-  const { user, loading } = useAuth();
+  const { user, loading, setUser } = useAuth();
 
   return (
     <div className="min-h-screen bg-od-bg text-od-text">
@@ -16,6 +16,7 @@ export default function Layout({ theme, onToggleTheme }: LayoutProps) {
         theme={theme}
         onToggleTheme={onToggleTheme}
         user={loading ? null : user}
+        onLogout={() => setUser(null)}
       />
       <main className="mx-auto max-w-5xl px-4 py-8">
         <Outlet />

frontend/src/hooks/useAuth.ts

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { apiFetch } from '../lib/api';
 
 export interface User {
-  id: number;
-  email: string;
+  id: string;
+  email: string | null;
   nickname: string;
   subscriptionLevel?: number;
 }
@@ -11,6 +11,7 @@ export interface User {
 interface AuthState {
   user: User | null;
   loading: boolean;
+  setUser: (u: User | null) => void;
 }
 
 interface MeResponse {
@@ -33,5 +34,5 @@ export function useAuth(): AuthState {
     return () => { cancelled = true; };
   }, []);
 
-  return { user, loading };
+  return { user, loading, setUser };
 }

frontend/src/pages/HomePage.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
 
 interface Video {
-  id: number;
+  id: string;
   title: string;
   description: string;
   requiredLevel: number;

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,40 @@
+import { Link } from 'react-router-dom';
+
+const PROVIDERS = [
+  { id: 'discord',  label: 'Discord',  icon: '◈' },
+  { id: 'github',   label: 'GitHub',   icon: '◉' },
+  { id: 'google',   label: 'Google',   icon: '◎' },
+  { id: 'twitch',   label: 'Twitch',   icon: '◆' },
+] as const;
+
+export default function LoginPage() {
+  const callbackUrl = encodeURIComponent(`${window.location.origin}/callback`);
+  const base = import.meta.env.VITE_SUPEROAUTH_URL;
+
+  return (
+    <div className="flex flex-col items-center gap-8 pt-20">
+      <div className="flex flex-col items-center gap-2">
+        <span className="font-mono text-xs font-bold tracking-widest text-od-accent">OD</span>
+        <h1 className="text-xl font-semibold text-od-text">Connexion</h1>
+        <p className="text-sm text-od-muted">Choisis ton provider pour continuer</p>
+      </div>
+
+      <div className="flex w-full max-w-xs flex-col gap-3">
+        {PROVIDERS.map(({ id, label, icon }) => (
+          <a
+            key={id}
+            href={`${base}/api/v1/auth/oauth/${id}?redirectUrl=${callbackUrl}`}
+            className="flex items-center gap-3 rounded border border-od-border bg-od-surface px-4 py-3 text-sm text-od-text transition-colors hover:border-od-accent hover:text-od-accent"
+          >
+            <span className="font-mono text-od-muted">{icon}</span>
+            {label}
+          </a>
+        ))}
+      </div>
+
+      <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+        ← Retour
+      </Link>
+    </div>
+  );
+}

frontend/src/pages/PlaylistPage.tsx

@@ -0,0 +1,125 @@
+import { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { apiFetch } from '../lib/api';
+
+interface Video {
+  id: string;
+  title: string;
+  thumbnailUrl: string | null;
+  duration: number | null;
+}
+
+interface Playlist {
+  id: string;
+  title: string;
+  description: string | null;
+  visibility: 'private' | 'shared' | 'public';
+}
+
+interface PlaylistResponse {
+  success: boolean;
+  data: {
+    playlist: Playlist;
+    videos: Video[];
+    permission: 'owner' | 'view' | 'edit';
+  };
+}
+
+export default function PlaylistPage() {
+  const { id } = useParams<{ id: string }>();
+  const [data, setData] = useState<PlaylistResponse['data'] | null>(null);
+  const [error, setError] = useState<'forbidden' | 'not_found' | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    apiFetch<PlaylistResponse>(`/playlists/${id}`)
+      .then((res) => setData(res.data))
+      .catch((err: Error) => {
+        if (err.message.includes('403')) setError('forbidden');
+        else setError('not_found');
+      })
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-3">
+        <div className="h-6 w-1/3 rounded bg-od-surface-hi animate-pulse" />
+        {[...Array(4)].map((_, i) => (
+          <div key={i} className="h-14 rounded border border-od-border bg-od-surface animate-pulse" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error === 'forbidden') {
+    return (
+      <div className="flex flex-col items-center gap-4 pt-16 text-center">
+        <span className="font-mono text-3xl text-od-accent">⊘</span>
+        <p className="text-sm text-od-muted">Accès refusé à cette playlist.</p>
+        <Link to="/playlists" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+          ← Playlists
+        </Link>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex flex-col items-center gap-4 pt-16">
+        <p className="text-sm text-od-muted">Playlist introuvable.</p>
+        <Link to="/playlists" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+          ← Playlists
+        </Link>
+      </div>
+    );
+  }
+
+  const { playlist, videos, permission } = data;
+
+  return (
+    <div className="flex flex-col gap-6">
+
+      <div className="flex flex-col gap-1 border-b border-od-border pb-6">
+        <div className="flex items-center gap-3">
+          <h1 className="text-xl font-semibold text-od-text">{playlist.title}</h1>
+          <span className="font-mono text-xs text-od-muted">{permission}</span>
+        </div>
+        {playlist.description && (
+          <p className="text-sm text-od-muted">{playlist.description}</p>
+        )}
+      </div>
+
+      {videos.length === 0 ? (
+        <p className="text-sm text-od-muted">Aucune vidéo dans cette playlist.</p>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {videos.map((v, i) => (
+            <Link
+              key={v.id}
+              to={`/video/${v.id}`}
+              className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3 hover:border-od-accent/40 transition-colors"
+            >
+              <span className="font-mono text-xs text-od-muted w-5 shrink-0">{i + 1}</span>
+              {v.thumbnailUrl && (
+                <img src={v.thumbnailUrl} alt="" className="h-10 w-16 rounded object-cover shrink-0" />
+              )}
+              <span className="flex-1 text-sm text-od-text">{v.title}</span>
+              {v.duration && (
+                <span className="font-mono text-xs text-od-muted shrink-0">
+                  {Math.floor(v.duration / 60)}:{String(v.duration % 60).padStart(2, '0')}
+                </span>
+              )}
+            </Link>
+          ))}
+        </div>
+      )}
+
+      <Link to="/playlists" className="self-start font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+        ← Playlists
+      </Link>
+
+    </div>
+  );
+}

frontend/src/pages/PlaylistsPage.tsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { apiFetch } from '../lib/api';
+
+interface Playlist {
+  id: string;
+  title: string;
+  description: string | null;
+  visibility: 'private' | 'shared' | 'public';
+}
+
+interface PlaylistsResponse {
+  success: boolean;
+  data: {
+    owned: Playlist[];
+    shared: (Playlist & { permission: 'view' | 'edit' })[];
+  };
+}
+
+export default function PlaylistsPage() {
+  const [owned, setOwned] = useState<Playlist[]>([]);
+  const [shared, setShared] = useState<(Playlist & { permission: 'view' | 'edit' })[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [createTitle, setCreateTitle] = useState('');
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    apiFetch<PlaylistsResponse>('/playlists')
+      .then((res) => {
+        setOwned(res.data.owned);
+        setShared(res.data.shared);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!createTitle.trim() || creating) return;
+    setCreating(true);
+    try {
+      const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>(
+        '/playlists',
+        { method: 'POST', body: JSON.stringify({ title: createTitle.trim() }) }
+      );
+      setOwned((prev) => [res.data.playlist, ...prev]);
+      setCreateTitle('');
+    } catch {}
+    setCreating(false);
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-3">
+        {[...Array(3)].map((_, i) => (
+          <div key={i} className="h-14 rounded border border-od-border bg-od-surface animate-pulse" />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-10">
+
+      <section className="border-b border-od-border pb-8">
+        <h1 className="text-2xl font-semibold text-od-text">Mes playlists</h1>
+      </section>
+
+      {/* Créer */}
+      <form onSubmit={handleCreate} className="flex gap-2">
+        <input
+          type="text"
+          value={createTitle}
+          onChange={(e) => setCreateTitle(e.target.value)}
+          placeholder="Nouvelle playlist…"
+          className="flex-1 rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+        />
+        <button
+          type="submit"
+          disabled={!createTitle.trim() || creating}
+          className="rounded border border-od-border px-4 py-2 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors disabled:opacity-40"
+        >
+          +
+        </button>
+      </form>
+
+      {/* Mes playlists */}
+      {owned.length > 0 && (
+        <section className="flex flex-col gap-2">
+          <h2 className="font-mono text-xs uppercase tracking-widest text-od-muted">Créées</h2>
+          {owned.map((p) => <PlaylistRow key={p.id} playlist={p} />)}
+        </section>
+      )}
+
+      {/* Partagées */}
+      {shared.length > 0 && (
+        <section className="flex flex-col gap-2">
+          <h2 className="font-mono text-xs uppercase tracking-widest text-od-muted">Partagées avec moi</h2>
+          {shared.map((p) => <PlaylistRow key={p.id} playlist={p} badge={p.permission} />)}
+        </section>
+      )}
+
+      {owned.length === 0 && shared.length === 0 && (
+        <p className="text-sm text-od-muted">Aucune playlist pour l'instant.</p>
+      )}
+
+    </div>
+  );
+}
+
+function PlaylistRow({ playlist, badge }: { playlist: Playlist; badge?: string }) {
+  return (
+    <Link
+      to={`/playlists/${playlist.id}`}
+      className="flex items-center justify-between rounded border border-od-border bg-od-surface px-4 py-3 hover:border-od-accent/40 transition-colors"
+    >
+      <span className="text-sm text-od-text">{playlist.title}</span>
+      <div className="flex items-center gap-2">
+        {badge && (
+          <span className="font-mono text-xs text-od-muted">{badge}</span>
+        )}
+        <span className="font-mono text-xs text-od-muted">
+          {playlist.visibility === 'private' ? '⊠' : playlist.visibility === 'shared' ? '⊡' : '⊞'}
+        </span>
+      </div>
+    </Link>
+  );
+}