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