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/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>
+  );
+}