feat(library): liste « À regarder plus tard » (watch later)

Nouvelle liste dans la section Vous de la barre latérale, avec un bouton horloge a cote du coeur sur toutes les cartes (accueil, themes, provider- themes, recherche). - db : les 4 fonctions de listes (like/unlike/isLiked/list) prennent un paramètre `tag` — la table `tags` sert déjà de mot-clés génériques, donc zéro migration. - api : les 4 routes likes sont générées par registerVideoTagRoutes(prefix, tagName) ; /api/user/watch-later = même fabrique, même enrichissement yt-dlp, même middleware cookie-aware. Entrée OpenAPI ajoutée. - front : LikesService prend un VideoTag, like-button un @Input() list (icône horloge, ambre quand enregistré, libellés a11y dédiés) — un seul composant pour les deux boutons, pas de copie. - cartes de recherche : la grille partagée n'avait AUCUN bouton ; cœur + horloge ajoutés, masqués sur les lives et cartes chaîne (coin bas-gauche déjà occupé par le compteur de spectateurs / pas des vidéos). - route /library/watch-later = LikedComponent via data.list (titre, icône, placeholder et état vide pilotés par la route), clés nav.watchLater FR/EN. Tests : npm run test:api 41/41 (nouveau test watch-later : ajout, statut, indépendance vis-à-vis des likes, liste, retrait, 400, 401) + 21 autres suites vertes. Build OK, instance locale 4200 rebuildée. Sondage Playwright desktop+mobile : 12/14 (2 faux positifs du sondage : accordéon replié sur une route hors /library, 3×401 console pendant la phase déconnectée).
2026-10-01 14:13:43 -04:00
parent 88a2d21133
commit 735255b7d8
16 changed files with 246 additions and 114 deletions
@@ -70,6 +70,12 @@ export const APP_ROUTES: Routes = [
    loadComponent: () => import('./components/library/liked/liked.component').then(m => m.LikedComponent),
    title: 'NewTube - Liked'
  },
+  {
+    path: 'library/watch-later',
+    loadComponent: () => import('./components/library/liked/liked.component').then(m => m.LikedComponent),
+    data: { list: 'watch-later' },
+    title: 'NewTube - Watch later'
+  },
  {
    path: 'library/subscriptions',
    loadComponent: () => import('./components/library/subscriptions/subscriptions.component').then(m => m.SubscriptionsComponent),
@@ -42,6 +42,13 @@
        <span *ngIf="showClipBadge" class="rounded bg-orange-600 px-1.5 py-0.5 text-[11px] font-bold text-white">CLIP</span>
        <span *ngIf="showChannelBadge" class="rounded bg-slate-700/90 px-1.5 py-0.5 text-[11px] font-bold text-slate-200 ring-1 ring-slate-500/50">CHAÎNE</span>
      </div>
+      <!-- Like + « à regarder plus tard », sur la miniature comme sur les
+           cartes de thème. Masqués pour un live (badge LIVE en haut à gauche)
+           et une carte chaîne : ce ne sont pas des vidéos. -->
+      <div *ngIf="!showChannelBadge && !showLiveBadge" class="absolute bottom-1 left-1 flex items-center gap-1">
+        <app-like-button [videoId]="video.id" [provider]="video.provider" [title]="video.title" [thumbnail]="video.thumbnailUrl"></app-like-button>
+        <app-like-button [list]="'watch-later'" [videoId]="video.id" [provider]="video.provider" [title]="video.title" [thumbnail]="video.thumbnailUrl"></app-like-button>
+      </div>
      <span *ngIf="showDuration" class="absolute bottom-1 right-1 rounded bg-black/80 px-1.5 py-0.5 text-xs text-white">
        {{ video.durationSec | duration }}
      </span>
@@ -6,6 +6,7 @@ import { DurationPipe } from '../../pipes/duration.pipe';
 import { ProviderBadgeComponent } from '../provider-badge/provider-badge.component';
 import { SubscribeButtonComponent } from '../subscribe-button/subscribe-button.component';
 import { ChannelIdentityComponent } from '../channel-identity/channel-identity.component';
+import { LikeButtonComponent } from '../../../../components/shared/components/like-button/like-button.component';
 import type { ChannelMeta, ProviderId } from '../../models/channel.model';
 import { toShortProviderId } from '../../providers/provider-ids';
 import { isLiveVideoItem, isShortVideoItem, isVerticalVideoItem, videoAspectRatio, verticalFrameWidthPercent } from '../../utils/video-kind';
@@ -16,7 +17,7 @@ import { capturedAgoLabel, sourceLabel } from '../../../search/adapters/provenan
  templateUrl: './video-card.component.html',
  styleUrls: ['./video-card.component.scss'],
  standalone: true,
-  imports: [CommonModule, RouterLink, DurationPipe, ProviderBadgeComponent, SubscribeButtonComponent, ChannelIdentityComponent],
+  imports: [CommonModule, RouterLink, DurationPipe, ProviderBadgeComponent, SubscribeButtonComponent, ChannelIdentityComponent, LikeButtonComponent],
 })
 export class VideoCardComponent implements OnChanges {
  @Input() video!: VideoItem;
@@ -30,8 +30,9 @@
            <div *ngIf="video.duration && video.duration > 0" class="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-2 py-1 rounded">
              {{ video.duration | duration }}
            </div>
-            <div class="absolute bottom-2 left-2">
+            <div class="absolute bottom-2 left-2 flex items-center gap-1">
              <app-like-button [videoId]="video.videoId" [provider]="instances.selectedProvider()" [title]="video.title" [thumbnail]="video.thumbnail"></app-like-button>
+              <app-like-button [list]="'watch-later'" [videoId]="video.videoId" [provider]="instances.selectedProvider()" [title]="video.title" [thumbnail]="video.thumbnail"></app-like-button>
            </div>
          </div>
          <div class="p-4 flex-grow flex flex-col">
@@ -1,9 +1,16 @@
 <div class="container mx-auto p-4 sm:p-6 max-w-6xl">
-  <h2 class="mb-6 flex items-center border-l-4 border-red-500 pl-4 text-2xl font-bold text-slate-100 sm:text-3xl">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 mr-2 text-red-400">
-      <path d="M12 21s-6.716-4.248-9.193-6.725A6 6 0 0 1 12 5.414 6 6 0 0 1 21.193 14.275C18.716 16.752 12 21 12 21z" />
-    </svg>
-    Liked videos
+  <h2 class="mb-6 flex items-center border-l-4 pl-4 text-2xl font-bold text-slate-100 sm:text-3xl"
+      [class.border-red-500]="!isWatchLater" [class.border-amber-400]="isWatchLater">
+    @if (isWatchLater) {
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 mr-2 text-amber-400">
+        <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.23.2.8-1.3-4.5-2.7z" />
+      </svg>
+    } @else {
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 mr-2 text-red-400">
+        <path d="M12 21s-6.716-4.248-9.193-6.725A6 6 0 0 1 12 5.414 6 6 0 0 1 21.193 14.275C18.716 16.752 12 21 12 21z" />
+      </svg>
+    }
+    {{ heading }}
  </h2>

  <div class="bg-slate-800/50 rounded-lg p-6 border border-slate-700">
@@ -14,7 +21,7 @@
        [ngModel]="searchQuery()"
        (ngModelChange)="onSearchChange($event)"
        class="block w-full pl-10 pr-10 py-2 border border-slate-600 rounded-lg bg-slate-700 text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-150"
-        placeholder="Rechercher dans les vidéos aimées..."
+        [placeholder]="searchPlaceholder"
      />
      <svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
@@ -34,10 +41,12 @@
      <div class="text-red-300">{{ err }}</div>
    } @else if (items().length === 0) {
      <div class="flex flex-col items-center gap-3 py-8 text-center">
-        <div class="text-slate-400">Aucune vidéo aimée pour le moment.</div>
-        <a [routerLink]="['/library/import']" class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500">
-          ⬇ Importer mes favoris (Google / Twitch)
-        </a>
+        <div class="text-slate-400">{{ emptyMessage }}</div>
+        @if (!isWatchLater) {
+          <a [routerLink]="['/library/import']" class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500">
+            ⬇ Importer mes favoris (Google / Twitch)
+          </a>
+        }
      </div>
    } @else {
      <ul class="space-y-3">
@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { LikesService, LikedVideoItem } from '../../../services/likes.service';
+import { LikesService, LikedVideoItem, VideoTag } from '../../../services/likes.service';

@Component({
  selector: 'app-library-liked',
@@ -13,6 +13,10 @@ import { LikesService, LikedVideoItem } from '../../../services/likes.service';
 })
 export class LikedComponent {
  private likes = inject(LikesService);
+  private route = inject(ActivatedRoute);
+
+  /** Liste affichée : 'like' (défaut) ou 'watch-later', portée par la route. */
+  readonly list = signal<VideoTag>('like');

  loading = signal<boolean>(true);
  error = signal<string | null>(null);
@@ -20,19 +24,44 @@ export class LikedComponent {
  searchQuery = signal<string>('');

  constructor() {
-    this.refresh();
+    // `data` émet la valeur courante puis à chaque réactivation de route :
+    // le composant reste unique pour les deux listes, pas de double chargement.
+    this.route.data.subscribe((d) => {
+      this.list.set(d?.['list'] === 'watch-later' ? 'watch-later' : 'like');
+      this.refresh();
+    });
+  }
+
+  get isWatchLater(): boolean {
+    return this.list() === 'watch-later';
+  }
+
+  get heading(): string {
+    return this.isWatchLater ? 'À regarder plus tard' : 'Liked videos';
+  }
+
+  get searchPlaceholder(): string {
+    return this.isWatchLater
+      ? 'Rechercher dans « À regarder plus tard »...'
+      : 'Rechercher dans les vidéos aimées...';
+  }
+
+  get emptyMessage(): string {
+    return this.isWatchLater
+      ? 'Aucune vidéo à regarder plus tard.'
+      : 'Aucune vidéo aimée pour le moment.';
  }

  refresh(q?: string): void {
    this.loading.set(true);
    this.error.set(null);
-    this.likes.list(200, q).subscribe({
+    this.likes.list(200, q, this.list()).subscribe({
      next: (rows) => {
        this.items.set(rows || []);
        this.loading.set(false);
      },
      error: (err) => {
-        const msg = err?.error?.error || err?.message || 'Erreur lors du chargement des vidéos aimées';
+        const msg = err?.error?.error || err?.message || 'Erreur lors du chargement de la liste';
        this.error.set(String(msg));
        this.loading.set(false);
      }
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, inject, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { LikesService } from '../../../../services/likes.service';
+import { LikesService, VideoTag } from '../../../../services/likes.service';
 import { finalize } from 'rxjs';
 import { AuthService } from '../../../../services/auth.service';

@@ -14,13 +14,16 @@ import { AuthService } from '../../../../services/auth.service';
    @if (isAuthenticated()) {
      <button 
        (click)="onClick($event)" 
-        [class.text-red-500]="isLiked()"
+        [class.text-red-500]="isLiked() && list === 'like'"
+        [class.text-amber-400]="isLiked() && list === 'watch-later'"
        [class.text-slate-400]="!isLiked()"
-        [class.hover\:text-red-500]="!isLiked()"
+        [class.hover\:text-red-500]="!isLiked() && list === 'like'"
+        [class.hover\:text-amber-400]="!isLiked() && list === 'watch-later'"
        [disabled]="isLoading()"
        class="flex h-11 w-11 items-center justify-center rounded-full transition-colors duration-200 hover:bg-slate-700/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60"
-        [attr.aria-label]="isLiked() ? 'Retirer des vidéos aimées' : 'Ajouter aux vidéos aimées'"
+        [attr.aria-label]="label"
        [attr.aria-pressed]="isLiked()"
+        [attr.title]="label"
      >
        @if (isLoading()) {
          <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -36,11 +39,9 @@ import { AuthService } from '../../../../services/auth.service';
            fill="currentColor"
            [attr.aria-hidden]="true"
          >
-            <path 
-              [attr.d]="isLiked() ? 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' : 'M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z'"
-            />
+            <path [attr.d]="iconPath" />
          </svg>
-          <span class="sr-only">{{ isLiked() ? 'Retirer des vidéos aimées' : 'Ajouter aux vidéos aimées' }}</span>
+          <span class="sr-only">{{ label }}</span>
        }
      </button>
    }
@@ -83,6 +84,8 @@ export class LikeButtonComponent implements OnInit, OnDestroy, OnChanges {
  private likesService = inject(LikesService);
  private auth = inject(AuthService);
  
+  /** Liste pilotée par ce bouton : 'like' (cœur) ou 'watch-later' (horloge). */
+  @Input() list: VideoTag = 'like';
  @Input() provider = 'youtube';
  @Input() title?: string;
  @Input() thumbnail?: string;
@@ -100,6 +103,27 @@ export class LikeButtonComponent implements OnInit, OnDestroy, OnChanges {
  get videoId(): string {
    return this._videoId;
  }
+
+  /** Libellé a11y (aria-label / title / sr-only) selon la liste et l'état. */
+  get label(): string {
+    if (this.list === 'watch-later') {
+      return this.isLiked()
+        ? 'Retirer de « À regarder plus tard »'
+        : 'Ajouter à « À regarder plus tard »';
+    }
+    return this.isLiked() ? 'Retirer des vidéos aimées' : 'Ajouter aux vidéos aimées';
+  }
+
+  get iconPath(): string {
+    if (this.list === 'watch-later') {
+      // Horloge (Material « schedule ») : identique dans les deux états,
+      // l'état se lit à la couleur (ambre quand la vidéo est enregistrée).
+      return 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.23.2.8-1.3-4.5-2.7z';
+    }
+    return this.isLiked()
+      ? 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
+      : 'M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z';
+  }
  
  isLiked = signal<boolean>(false);
  isLoading = signal<boolean>(true);
@@ -126,7 +150,8 @@ export class LikeButtonComponent implements OnInit, OnDestroy, OnChanges {
      this.isLoading.set(false);
      return;
    }
-    if (changes['videoId'] && !changes['videoId'].firstChange) {
+    if ((changes['videoId'] && !changes['videoId'].firstChange) ||
+        (changes['list'] && !changes['list'].firstChange)) {
      this.checkLikeStatus();
    }
  }
@@ -157,7 +182,7 @@ export class LikeButtonComponent implements OnInit, OnDestroy, OnChanges {

    this.isLoading.set(true);
    try {
-      this.likesService.isLiked(this.provider, this.videoId)
+      this.likesService.isLiked(this.provider, this.videoId, this.list)
        .pipe(
          finalize(() => {
            if (!this.destroyRef) {
@@ -193,7 +218,7 @@ export class LikeButtonComponent implements OnInit, OnDestroy, OnChanges {
    
    try {
      if (this.isLiked()) {
-        this.likesService.unlike(this.provider, this.videoId)
+        this.likesService.unlike(this.provider, this.videoId, this.list)
          .pipe(
            finalize(() => {
              if (!this.destroyRef) {
@@ -217,8 +242,8 @@ export class LikeButtonComponent implements OnInit, OnDestroy, OnChanges {
      } else {
        const cleanTitle = (this.title || '').trim();
        const cleanThumb = (this.thumbnail || '').trim();
-        try { console.debug('[LikeButton] like payload', { provider: this.provider, videoId: this.videoId, title: cleanTitle, hasThumb: !!cleanThumb }); } catch {}
-        this.likesService.like(this.provider, this.videoId, cleanTitle || undefined, cleanThumb || undefined)
+        try { console.debug('[LikeButton] tag payload', { list: this.list, provider: this.provider, videoId: this.videoId, title: cleanTitle, hasThumb: !!cleanThumb }); } catch {}
+        this.likesService.like(this.provider, this.videoId, cleanTitle || undefined, cleanThumb || undefined, this.list)
          .pipe(
            finalize(() => {
              if (!this.destroyRef) {
@@ -64,6 +64,12 @@
                <span [class.hidden]="collapsed" class="truncate">{{ 'nav.liked' | t }}</span>
              </a>
            </li>
+            <li>
+              <a routerLink="/library/watch-later" routerLinkActive="bg-slate-800" class="flex items-center px-3 py-2 rounded hover:bg-slate-800 transition" [ngClass]="{ 'gap-0 justify-center': collapsed, 'gap-3': !collapsed }" [attr.title]="collapsed ? ('nav.watchLater' | t) : null">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.23.2.8-1.3-4.5-2.7z"/></svg>
+                <span [class.hidden]="collapsed" class="truncate">{{ 'nav.watchLater' | t }}</span>
+              </a>
+            </li>
            <li>
              <a routerLink="/library/downloads" routerLinkActive="bg-slate-800" class="flex items-center px-3 py-2 rounded hover:bg-slate-800 transition" [ngClass]="{ 'gap-0 justify-center': collapsed, 'gap-3': !collapsed }" [attr.title]="collapsed ? ('nav.downloads' | t) : null">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.17l3.59-3.58L17 11l-5 5-5-5 1.41-1.41L12 13.17V3h0zm-7 15h14v2H5v-2z"/></svg>
@@ -181,8 +181,9 @@
          <div *ngIf="isLiveCard(v) && v.views > 0" class="absolute bottom-2 left-2 bg-black/75 text-white text-xs px-2 py-1 rounded-md">
            {{ v.views | number }} spectateurs
          </div>
-          <div *ngIf="!isLiveCard(v)" class="absolute bottom-2 left-2">
+          <div *ngIf="!isLiveCard(v)" class="absolute bottom-2 left-2 flex items-center gap-1">
            <app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
+            <app-like-button [list]="'watch-later'" [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
          </div>
        </div>
        <div class="p-3 pb-1">
@@ -243,7 +244,7 @@
              <img [src]="v.thumbnail" [alt]="v.title" loading="lazy" decoding="async" class="w-full aspect-video object-cover transition-transform duration-300 group-hover:scale-105">
              <div class="absolute top-2 right-2"><app-provider-badge [provider]="provider()"></app-provider-badge></div>
              <div *ngIf="v.duration && v.duration > 0" class="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-2 py-1 rounded-md font-mono">{{ v.duration | duration }}</div>
-              <div class="absolute bottom-2 left-2"><app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button></div>
+              <div class="absolute bottom-2 left-2 flex items-center gap-1"><app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button><app-like-button [list]="'watch-later'" [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button></div>
            </div>
            <div class="p-3 pb-1"><h3 class="font-semibold text-slate-100 group-hover:text-red-400 transition-colors duration-200 text-sm line-clamp-2 pr-2">{{ v.title }}</h3></div>
          </a>
@@ -268,7 +269,7 @@
              <div class="absolute top-2 right-2"><app-provider-badge [provider]="provider()"></app-provider-badge></div>
              <div class="absolute top-2 left-2"><span class="bg-red-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">CLIP</span></div>
              <div *ngIf="v.duration && v.duration > 0" class="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-2 py-1 rounded-md font-mono">{{ v.duration | duration }}</div>
-              <div class="absolute bottom-2 left-2"><app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button></div>
+              <div class="absolute bottom-2 left-2 flex items-center gap-1"><app-like-button [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button><app-like-button [list]="'watch-later'" [videoId]="v.videoId" [provider]="provider()" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button></div>
            </div>
            <div class="p-3 pb-1"><h3 class="font-semibold text-slate-100 group-hover:text-red-400 transition-colors duration-200 text-sm line-clamp-2 pr-2">{{ v.title }}</h3></div>
          </a>
@@ -67,8 +67,9 @@
              <div *ngIf="isLiveCard(v) && v.views > 0" class="absolute bottom-2 left-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded">
                {{ v.views | number }} spectateurs
              </div>
-              <div class="absolute bottom-2 left-2" *ngIf="!isLiveCard(v)">
+              <div class="absolute bottom-2 left-2 flex items-center gap-1" *ngIf="!isLiveCard(v)">
                <app-like-button [videoId]="v.videoId" [provider]="b.provider" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
+                <app-like-button [list]="'watch-later'" [videoId]="v.videoId" [provider]="b.provider" [title]="v.title" [thumbnail]="v.thumbnail"></app-like-button>
              </div>
            </div>
            <div class="p-3 pb-1">
@@ -61,6 +61,7 @@ const EN: Record<string, string> = {
  'nav.history': 'History',
  'nav.playlists': 'Playlists',
  'nav.liked': 'Liked videos',
+  'nav.watchLater': 'Watch later',
  'nav.downloads': 'Downloads',
  'nav.import': 'Import',
  'nav.explore': 'Explore',
@@ -251,6 +252,7 @@ const FR: Record<string, string> = {
  'nav.history': 'Historique',
  'nav.playlists': 'Listes de lecture',
  'nav.liked': 'Vidéos que vous aimez',
+  'nav.watchLater': 'À regarder plus tard',
  'nav.downloads': 'Téléchargements',
  'nav.import': 'Importer',
  'nav.explore': 'Explorer',
@@ -11,6 +11,17 @@ export interface LikedVideoItem {
  created_at?: string;
 }

+/**
+ * Liste vidéo par tag : 'like' (vidéos aimées) ou 'watch-later' (à regarder
+ * plus tard). Le segment d'API suit le tag (`likes` est le nom legacy).
+ */
+export type VideoTag = 'like' | 'watch-later';
+
+const TAG_PATH: Record<VideoTag, string> = {
+  'like': 'likes',
+  'watch-later': 'watch-later',
+};
+
@Injectable({ providedIn: 'root' })
 export class LikesService {
  private http = inject(HttpClient);
@@ -24,27 +35,27 @@ export class LikesService {
    }
  }

-  list(limit = 100, q?: string): Observable<LikedVideoItem[]> {
+  list(limit = 100, q?: string, tag: VideoTag = 'like'): Observable<LikedVideoItem[]> {
    let params = new HttpParams().set('limit', String(limit));
    if (typeof q === 'string' && q.trim().length > 0) params = params.set('q', q.trim());
-    return this.http.get<LikedVideoItem[]>(`${this.apiBase()}/user/likes`, { params, withCredentials: true });
+    return this.http.get<LikedVideoItem[]>(`${this.apiBase()}/user/${TAG_PATH[tag]}`, { params, withCredentials: true });
  }

-  like(provider: string, videoId: string, title?: string, thumbnail?: string): Observable<{ provider: string; video_id: string }> {
+  like(provider: string, videoId: string, title?: string, thumbnail?: string, tag: VideoTag = 'like'): Observable<{ provider: string; video_id: string }> {
    return this.http.post<{ provider: string; video_id: string }>(
-      `${this.apiBase()}/user/likes`,
+      `${this.apiBase()}/user/${TAG_PATH[tag]}`,
      { provider, videoId, title, thumbnail },
      { withCredentials: true }
    );
  }

-  unlike(provider: string, videoId: string): Observable<{ removed: boolean }> {
+  unlike(provider: string, videoId: string, tag: VideoTag = 'like'): Observable<{ removed: boolean }> {
    const params = new HttpParams().set('provider', provider).set('videoId', videoId);
-    return this.http.delete<{ removed: boolean }>(`${this.apiBase()}/user/likes`, { params, withCredentials: true });
+    return this.http.delete<{ removed: boolean }>(`${this.apiBase()}/user/${TAG_PATH[tag]}`, { params, withCredentials: true });
  }

-  isLiked(provider: string, videoId: string): Observable<{ liked: boolean }> {
+  isLiked(provider: string, videoId: string, tag: VideoTag = 'like'): Observable<{ liked: boolean }> {
    const params = new HttpParams().set('provider', provider).set('videoId', videoId);
-    return this.http.get<{ liked: boolean }>(`${this.apiBase()}/user/likes/status`, { params, withCredentials: true });
+    return this.http.get<{ liked: boolean }>(`${this.apiBase()}/user/${TAG_PATH[tag]}/status`, { params, withCredentials: true });
  }
 }