feat(frontend): playlist B1 — edit, delete, share, invitations

- PlaylistPage: bouton Éditer (formulaire inline titre/visibilité), Supprimer (confirm → DELETE → redirect), Partager (modal userId/permission → POST share), Retirer vidéo (✕ → DELETE)
- PlaylistsPage: section invitations reçues avec Accept / Refuser (PATCH share/:shareId)
- tsc --noEmit : 0 erreur, 0 console.log

frontend/src/pages/PlaylistPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { apiFetch, ApiError } from '../lib/api';
 
 interface Video {
@@ -27,9 +27,25 @@ interface PlaylistResponse {
 
 export default function PlaylistPage() {
   const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
   const [data, setData] = useState<PlaylistResponse['data'] | null>(null);
   const [error, setError] = useState<'forbidden' | 'not_found' | null>(null);
   const [loading, setLoading] = useState(true);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  // Edit inline form
+  const [editOpen, setEditOpen] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editVisibility, setEditVisibility] = useState<'private' | 'shared' | 'public'>('private');
+  const [saving, setSaving] = useState(false);
+
+  // Share modal
+  const [shareOpen, setShareOpen] = useState(false);
+  const [shareUserId, setShareUserId] = useState('');
+  const [sharePermission, setSharePermission] = useState<'view' | 'edit'>('view');
+  const [sharing, setSharing] = useState(false);
+  const [shareError, setShareError] = useState<string | null>(null);
+  const [shareOk, setShareOk] = useState(false);
 
   useEffect(() => {
     if (!id) return;
@@ -42,6 +58,73 @@ export default function PlaylistPage() {
       .finally(() => setLoading(false));
   }, [id]);
 
+  function openEdit() {
+    if (!data) return;
+    setEditTitle(data.playlist.title);
+    setEditVisibility(data.playlist.visibility);
+    setEditOpen(true);
+    setActionError(null);
+  }
+
+  async function handleEdit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!id || saving) return;
+    setSaving(true);
+    setActionError(null);
+    try {
+      const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>(
+        `/playlists/${id}`,
+        { method: 'PATCH', body: JSON.stringify({ title: editTitle.trim(), visibility: editVisibility }) }
+      );
+      setData((prev) => prev ? { ...prev, playlist: res.data.playlist } : prev);
+      setEditOpen(false);
+    } catch {
+      setActionError('Impossible de modifier la playlist.');
+    }
+    setSaving(false);
+  }
+
+  async function handleDelete() {
+    if (!id || !confirm('Supprimer cette playlist ?')) return;
+    setActionError(null);
+    try {
+      await apiFetch(`/playlists/${id}`, { method: 'DELETE' });
+      navigate('/playlists');
+    } catch {
+      setActionError('Impossible de supprimer la playlist.');
+    }
+  }
+
+  async function handleRemoveVideo(videoId: string) {
+    if (!id || !confirm('Retirer cette vidéo de la playlist ?')) return;
+    setActionError(null);
+    try {
+      await apiFetch(`/playlists/${id}/videos/${videoId}`, { method: 'DELETE' });
+      setData((prev) => prev ? { ...prev, videos: prev.videos.filter((v) => v.id !== videoId) } : prev);
+    } catch {
+      setActionError('Impossible de retirer la vidéo.');
+    }
+  }
+
+  async function handleShare(e: React.FormEvent) {
+    e.preventDefault();
+    if (!id || !shareUserId.trim() || sharing) return;
+    setSharing(true);
+    setShareError(null);
+    setShareOk(false);
+    try {
+      await apiFetch(`/playlists/${id}/share`, {
+        method: 'POST',
+        body: JSON.stringify({ userId: shareUserId.trim(), permission: sharePermission }),
+      });
+      setShareOk(true);
+      setShareUserId('');
+    } catch {
+      setShareError("Impossible d'envoyer l'invitation.");
+    }
+    setSharing(false);
+  }
+
   if (loading) {
     return (
       <div className="flex flex-col gap-3">
@@ -77,11 +160,50 @@ export default function PlaylistPage() {
   }
 
   const { playlist, videos, permission } = data;
+  const isOwner = permission === 'owner';
 
   return (
     <div className="flex flex-col gap-6">
 
-      <div className="flex flex-col gap-1 border-b border-od-border pb-6">
+      {/* Header */}
+      <div className="flex flex-col gap-3 border-b border-od-border pb-6">
+        {editOpen ? (
+          <form onSubmit={handleEdit} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
+            <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Modifier</p>
+            <input
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              required
+              className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+            />
+            <select
+              value={editVisibility}
+              onChange={(e) => setEditVisibility(e.target.value as 'private' | 'shared' | 'public')}
+              className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+            >
+              <option value="private">Privée</option>
+              <option value="shared">Partagée</option>
+              <option value="public">Publique</option>
+            </select>
+            <div className="flex gap-2">
+              <button
+                type="submit"
+                disabled={saving}
+                className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+              >
+                {saving ? '…' : 'Enregistrer'}
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditOpen(false)}
+                className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+              >
+                Annuler
+              </button>
+            </div>
+          </form>
+        ) : (
+          <>
             <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>
@@ -89,29 +211,111 @@ export default function PlaylistPage() {
             {playlist.description && (
               <p className="text-sm text-od-muted">{playlist.description}</p>
             )}
+            {isOwner && (
+              <div className="flex gap-2">
+                <button
+                  onClick={openEdit}
+                  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"
+                >
+                  Éditer
+                </button>
+                <button
+                  onClick={() => { setShareOpen(true); setShareError(null); setShareOk(false); }}
+                  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"
+                >
+                  Partager
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors"
+                >
+                  Supprimer
+                </button>
+              </div>
+            )}
+          </>
+        )}
+        {actionError && <p className="font-mono text-xs text-od-crit">{actionError}</p>}
       </div>
 
+      {/* Share modal */}
+      {shareOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-od-bg/80">
+          <div className="w-full max-w-sm rounded border border-od-border bg-od-surface p-6 flex flex-col gap-4">
+            <p className="font-mono text-xs text-od-muted uppercase tracking-widest">Partager</p>
+            <form onSubmit={handleShare} className="flex flex-col gap-3">
+              <input
+                value={shareUserId}
+                onChange={(e) => setShareUserId(e.target.value)}
+                placeholder="ID utilisateur"
+                required
+                className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+              />
+              <select
+                value={sharePermission}
+                onChange={(e) => setSharePermission(e.target.value as 'view' | 'edit')}
+                className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
+              >
+                <option value="view">Lecture seule</option>
+                <option value="edit">Édition</option>
+              </select>
+              {shareError && <p className="font-mono text-xs text-od-crit">{shareError}</p>}
+              {shareOk && <p className="font-mono text-xs text-od-ok">Invitation envoyée.</p>}
+              <div className="flex gap-2">
+                <button
+                  type="submit"
+                  disabled={sharing || !shareUserId.trim()}
+                  className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+                >
+                  {sharing ? '…' : 'Inviter'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setShareOpen(false)}
+                  className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
+                >
+                  Fermer
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Videos */}
       {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
+            <div
               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"
+              className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
             >
               <span className="font-mono text-xs text-od-muted w-5 shrink-0">{i + 1}</span>
+              <Link
+                to={`/video/${v.id}`}
+                className="flex flex-1 items-center gap-4 hover:opacity-80 transition-opacity min-w-0"
+              >
                 {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>
+                <span className="flex-1 text-sm text-od-text truncate">{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>
+              {isOwner && (
+                <button
+                  onClick={() => handleRemoveVideo(v.id)}
+                  className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors shrink-0"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
           ))}
         </div>
       )}

frontend/src/pages/PlaylistsPage.tsx

@@ -9,28 +9,40 @@ interface Playlist {
   visibility: 'private' | 'shared' | 'public';
 }
 
+interface Invitation {
+  shareId: string;
+  playlistId: string;
+  playlistTitle: string;
+  permission: 'view' | 'edit';
+}
+
 interface PlaylistsResponse {
   success: boolean;
   data: {
     owned: Playlist[];
     shared: (Playlist & { permission: 'view' | 'edit' })[];
+    invitations?: Invitation[];
   };
 }
 
 export default function PlaylistsPage() {
   const [owned, setOwned] = useState<Playlist[]>([]);
   const [shared, setShared] = useState<(Playlist & { permission: 'view' | 'edit' })[]>([]);
+  const [invitations, setInvitations] = useState<Invitation[]>([]);
   const [loading, setLoading] = useState(true);
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [createTitle, setCreateTitle] = useState('');
   const [creating, setCreating] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
+  const [inviteError, setInviteError] = useState<string | null>(null);
+  const [respondingId, setRespondingId] = useState<string | null>(null);
 
   useEffect(() => {
     apiFetch<PlaylistsResponse>('/playlists')
       .then((res) => {
         setOwned(res.data.owned);
         setShared(res.data.shared);
+        setInvitations(res.data.invitations ?? []);
       })
       .catch(() => setFetchError('Impossible de charger les playlists.'))
       .finally(() => setLoading(false));
@@ -54,6 +66,28 @@ export default function PlaylistsPage() {
     setCreating(false);
   }
 
+  async function respondInvitation(inv: Invitation, status: 'accepted' | 'revoked') {
+    if (respondingId) return;
+    setRespondingId(inv.shareId);
+    setInviteError(null);
+    try {
+      await apiFetch(`/playlists/${inv.playlistId}/share/${inv.shareId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ status }),
+      });
+      setInvitations((prev) => prev.filter((i) => i.shareId !== inv.shareId));
+      if (status === 'accepted') {
+        const res = await apiFetch<PlaylistsResponse>('/playlists');
+        setOwned(res.data.owned);
+        setShared(res.data.shared);
+        setInvitations(res.data.invitations ?? []);
+      }
+    } catch {
+      setInviteError("Impossible de répondre à l'invitation.");
+    }
+    setRespondingId(null);
+  }
+
   if (loading) {
     return (
       <div className="flex flex-col gap-3">
@@ -96,6 +130,41 @@ export default function PlaylistsPage() {
         {createError && <p className="font-mono text-xs text-od-crit">{createError}</p>}
       </div>
 
+      {/* Invitations reçues */}
+      {invitations.length > 0 && (
+        <section className="flex flex-col gap-2">
+          <h2 className="font-mono text-xs uppercase tracking-widest text-od-muted">Invitations</h2>
+          {inviteError && <p className="font-mono text-xs text-od-crit">{inviteError}</p>}
+          {invitations.map((inv) => (
+            <div
+              key={inv.shareId}
+              className="flex items-center justify-between gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
+            >
+              <div className="flex flex-col gap-0.5 min-w-0">
+                <span className="text-sm text-od-text truncate">{inv.playlistTitle}</span>
+                <span className="font-mono text-xs text-od-muted">{inv.permission}</span>
+              </div>
+              <div className="flex gap-2 shrink-0">
+                <button
+                  disabled={respondingId === inv.shareId}
+                  onClick={() => respondInvitation(inv, 'accepted')}
+                  className="rounded border border-od-ok px-3 py-1 font-mono text-xs text-od-ok hover:bg-od-ok hover:text-od-bg transition-colors disabled:opacity-40"
+                >
+                  {respondingId === inv.shareId ? '…' : 'Accepter'}
+                </button>
+                <button
+                  disabled={respondingId === inv.shareId}
+                  onClick={() => respondInvitation(inv, 'revoked')}
+                  className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors disabled:opacity-40"
+                >
+                  Refuser
+                </button>
+              </div>
+            </div>
+          ))}
+        </section>
+      )}
+
       {/* Mes playlists */}
       {owned.length > 0 && (
         <section className="flex flex-col gap-2">
@@ -112,7 +181,7 @@ export default function PlaylistsPage() {
         </section>
       )}
 
-      {owned.length === 0 && shared.length === 0 && (
+      {owned.length === 0 && shared.length === 0 && invitations.length === 0 && (
         <p className="text-sm text-od-muted">Aucune playlist pour l'instant.</p>
       )}