feat(subscriptions): gestion des abonnements par groupes façon PocketTube

- Tables subscription_groups + subscription_group_members (migration + schema)
- API CRUD groupes, membres par groupe, groupes par abonnement
- Page Abonnements: onglets Groupes/Chaines, modale creation/edition (icone/couleur), assignation unitaire + lot, filtre par groupe + recherche
- Sidebar: section Groupes avec navigation directe (queryParams)
- i18n nav.groups FR/EN + 4 tests unitaires service

src/components/library/subscriptions/subscriptions.component.html

@@ -2,9 +2,16 @@
   <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
     <div>
       <h2 class="text-3xl font-bold text-slate-100">Abonnements</h2>
-      <p class="text-sm text-slate-400">Gérez vos chaînes suivies multi-fournisseurs</p>
+      <p class="text-sm text-slate-400">Organisez vos chaînes suivies en groupes thématiques</p>
     </div>
     <div class="flex flex-wrap gap-2">
+      <button
+        class="rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold text-white transition hover:bg-red-500"
+        (click)="openNewGroup()"
+        type="button"
+      >
+        + Nouveau groupe
+      </button>
       <button
         class="rounded-md border border-slate-700 bg-slate-800 px-3 py-1.5 text-sm text-slate-200 transition hover:border-slate-500 hover:text-white"
         (click)="refresh()"
@@ -15,10 +22,152 @@
     </div>
   </div>
 
-  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
+  <!-- Onglets façon PocketTube -->
+  <div class="mb-4 flex gap-2 border-b border-slate-800">
+    <button
+      type="button"
+      (click)="setTab('groups')"
+      class="px-4 py-2 text-sm font-semibold transition"
+      [class.text-red-300]="activeTab() === 'groups'"
+      [class.border-b-2]="activeTab() === 'groups'"
+      [class.border-red-500]="activeTab() === 'groups'"
+      [class.text-slate-400]="activeTab() !== 'groups'"
+    >
+      Groupes ({{ groups().length }})
+    </button>
+    <button
+      type="button"
+      (click)="setTab('channels')"
+      class="px-4 py-2 text-sm font-semibold transition"
+      [class.text-red-300]="activeTab() === 'channels'"
+      [class.border-b-2]="activeTab() === 'channels'"
+      [class.border-red-500]="activeTab() === 'channels'"
+      [class.text-slate-400]="activeTab() !== 'channels'"
+    >
+      Chaînes ({{ items().length }})
+    </button>
+  </div>
+
+  <!-- ==================== ONGLET GROUPES ==================== -->
+  <div *ngIf="activeTab() === 'groups'">
+    <div *ngIf="groups().length > 0; else noGroups" class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      <div
+        *ngFor="let group of groups()"
+        (click)="openGroupChannel(group)"
+        class="cursor-pointer rounded-xl border border-slate-800 bg-slate-900/60 p-4 shadow-lg shadow-black/30 transition hover:border-slate-600"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <div class="flex items-center gap-3">
+            <span
+              class="flex h-11 w-11 items-center justify-center rounded-lg text-xl"
+              [style.background-color]="group.color + '26'"
+              [style.border]="'1px solid ' + group.color + '66'"
+            >{{ group.icon }}</span>
+            <div>
+              <h3 class="font-semibold text-slate-100">{{ group.name }}</h3>
+              <p class="text-xs text-slate-400">{{ group.channelCount }} chaîne(s)</p>
+            </div>
+          </div>
+          <div class="flex gap-1" (click)="$event.stopPropagation()">
+            <button
+              type="button"
+              (click)="openEditGroup(group, $event)"
+              class="rounded px-2 py-1 text-xs text-slate-400 hover:bg-slate-800 hover:text-white"
+              title="Modifier le groupe"
+            >✏️</button>
+            <button
+              type="button"
+              (click)="deleteGroup(group, $event)"
+              class="rounded px-2 py-1 text-xs text-slate-400 hover:bg-slate-800 hover:text-red-300"
+              title="Supprimer le groupe"
+            >🗑️</button>
+          </div>
+        </div>
+        <div class="mt-3 flex items-center justify-between">
+          <span
+            class="inline-block h-1.5 w-24 rounded-full"
+            [style.background-color]="group.color"
+          ></span>
+          <span class="text-xs font-medium text-slate-400 hover:text-red-300">Voir les chaînes →</span>
+        </div>
+      </div>
+    </div>
+    <ng-template #noGroups>
+      <div class="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-slate-700 bg-slate-900/60 p-10 text-center">
+        <div class="text-4xl">📁</div>
+        <h3 class="text-lg font-semibold text-slate-100">Aucun groupe pour le moment</h3>
+        <p class="text-sm text-slate-400">Créez des groupes thématiques (Tech, Musique, Sport…) pour organiser vos abonnements.</p>
+        <button
+          type="button"
+          (click)="openNewGroup()"
+          class="mt-2 rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-500"
+        >
+          + Créer mon premier groupe
+        </button>
+      </div>
+    </ng-template>
+  </div>
+
+  <!-- ==================== ONGLET CHAÎNES ==================== -->
+  <div *ngIf="activeTab() === 'channels'" class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
     <div class="bg-slate-900/60 rounded-xl border border-slate-800 p-4 shadow-lg shadow-black/30">
+      <!-- Filtre par groupe -->
       <div class="flex flex-wrap items-center gap-2 border-b border-slate-800 pb-4">
-        <span class="text-xs uppercase tracking-wide text-slate-400">Filtres</span>
+        <span class="text-xs uppercase tracking-wide text-slate-400">Groupe</span>
+        <div class="flex flex-wrap gap-2">
+          <button
+            type="button"
+            (click)="setGroupFilter('all')"
+            class="rounded-full border px-3 py-1 text-xs font-semibold transition"
+            [class.bg-red-500/20]="activeGroupId() === 'all'"
+            [class.text-red-200]="activeGroupId() === 'all'"
+            [class.border-red-500/40]="activeGroupId() === 'all'"
+            [class.border-slate-700]="activeGroupId() !== 'all'"
+            [class.text-slate-300]="activeGroupId() !== 'all'"
+            [class.bg-slate-800/70]="activeGroupId() !== 'all'"
+          >
+            Tous
+          </button>
+          <button
+            *ngFor="let group of groups()"
+            type="button"
+            (click)="setGroupFilter(group.id)"
+            class="rounded-full border px-3 py-1 text-xs font-semibold transition"
+            [class.bg-red-500/20]="activeGroupId() === group.id"
+            [class.text-red-200]="activeGroupId() === group.id"
+            [class.border-red-500/40]="activeGroupId() === group.id"
+            [class.border-slate-700]="activeGroupId() !== group.id"
+            [class.text-slate-300]="activeGroupId() !== group.id"
+            [class.bg-slate-800/70]="activeGroupId() !== group.id"
+          >
+            {{ group.icon }} {{ group.name }} ({{ group.channelCount }})
+          </button>
+          <button
+            *ngIf="ungroupedCount() > 0"
+            type="button"
+            (click)="setGroupFilter('ungrouped')"
+            class="rounded-full border px-3 py-1 text-xs font-semibold transition"
+            [class.bg-amber-500/20]="activeGroupId() === 'ungrouped'"
+            [class.text-amber-200]="activeGroupId() === 'ungrouped'"
+            [class.border-amber-500/40]="activeGroupId() === 'ungrouped'"
+            [class.border-slate-700]="activeGroupId() !== 'ungrouped'"
+            [class.text-slate-300]="activeGroupId() !== 'ungrouped'"
+            [class.bg-slate-800/70]="activeGroupId() !== 'ungrouped'"
+          >
+            Sans groupe ({{ ungroupedCount() }})
+          </button>
+        </div>
+      </div>
+
+      <!-- Recherche + filtres provider -->
+      <div class="flex flex-wrap items-center gap-2 border-b border-slate-800 py-4">
+        <input
+          type="search"
+          placeholder="Rechercher une chaîne…"
+          [ngModel]="searchQuery()"
+          (ngModelChange)="searchQuery.set($event)"
+          class="w-full sm:w-56 rounded-md border border-slate-700 bg-slate-800 px-3 py-1.5 text-sm text-slate-100 placeholder:text-slate-500 focus:border-red-500 focus:outline-none"
+        />
         <div class="flex flex-wrap gap-2">
           <button
             *ngFor="let filter of filters"
@@ -37,7 +186,7 @@
         </div>
       </div>
 
-      <div class="flex items-center justify-between py-4">
+      <div class="flex flex-wrap items-center justify-between gap-2 py-4">
         <div class="flex items-center gap-2 text-sm text-slate-400">
           <span>Trier par :</span>
           <button
@@ -53,6 +202,43 @@
             {{ sort.label }}
           </button>
         </div>
+        <button
+          *ngIf="filteredItems().length > 0"
+          type="button"
+          (click)="toggleSelectAll()"
+          class="text-xs text-slate-400 hover:text-white"
+        >
+          {{ selectedCount() > 0 ? 'Tout désélectionner' : 'Tout sélectionner' }}
+        </button>
+      </div>
+
+      <!-- Barre d'actions en lot -->
+      <div *ngIf="selectedCount() > 0" class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-sky-500/30 bg-sky-500/10 p-3">
+        <span class="text-xs font-semibold text-sky-200">{{ selectedCount() }} sélectionnée(s)</span>
+        <select
+          [ngModel]="bulkGroupId()"
+          (ngModelChange)="bulkGroupId.set($event)"
+          class="rounded-md border border-slate-700 bg-slate-800 px-2 py-1 text-xs text-slate-100"
+        >
+          <option value="">— Choisir un groupe —</option>
+          <option *ngFor="let group of groups()" [value]="group.id">{{ group.icon }} {{ group.name }}</option>
+        </select>
+        <button
+          type="button"
+          (click)="bulkAddToGroup()"
+          [disabled]="!bulkGroupId()"
+          class="rounded-md bg-sky-600 px-3 py-1 text-xs font-semibold text-white disabled:opacity-40 hover:bg-sky-500"
+        >
+          Ajouter au groupe
+        </button>
+        <button
+          *ngIf="activeGroupId() !== 'all' && activeGroupId() !== 'ungrouped'"
+          type="button"
+          (click)="bulkRemoveFromActiveGroup()"
+          class="rounded-md border border-slate-600 px-3 py-1 text-xs text-slate-200 hover:border-red-400 hover:text-red-200"
+        >
+          Retirer du groupe actif
+        </button>
       </div>
 
       <ng-container *ngIf="filteredItems().length > 0; else emptyState">
@@ -62,7 +248,14 @@
             class="flex flex-col gap-4 py-4 md:flex-row md:items-center md:justify-between"
           >
             <ng-container *ngIf="item.channel as channel; else subscriptionFallback">
-              <div class="flex items-center gap-4">
+              <div class="flex items-center gap-3">
+                <input
+                  type="checkbox"
+                  [checked]="isSelected(item.subscriptionId)"
+                  (change)="toggleSelect(item.subscriptionId)"
+                  class="h-4 w-4 shrink-0 accent-red-500"
+                  title="Sélectionner pour action en lot"
+                />
                 <a [routerLink]="['/channel', channel.provider, channel.externalId]" title="Ouvrir la page de la chaîne">
                   <img
                     [src]="channel.avatarUrl || 'https://placehold.co/80x80/png'"
@@ -79,6 +272,21 @@
                     <app-provider-badge [provider]="channel.provider"></app-provider-badge>
                     <span *ngIf="channel.verified" class="text-xs text-emerald-300">✓ Vérifiée</span>
                   </div>
+                  <!-- Badges groupes -->
+                  <div class="flex flex-wrap gap-1">
+                    <span
+                      *ngFor="let gid of itemGroupIds(item)"
+                      class="rounded-full px-2 py-0.5 text-[11px] font-semibold"
+                      [style.background-color]="'#1e293b'"
+                      [style.color]="'#e2e8f0'"
+                      [style.border]="'1px solid #475569'"
+                    >
+                      {{ groupNameById(gid) }}
+                    </span>
+                    <span *ngIf="itemGroupIds(item).length === 0" class="text-[11px] italic text-slate-500">
+                      Sans groupe
+                    </span>
+                  </div>
                   <div class="flex flex-wrap gap-3 text-sm text-slate-400">
                     <span *ngIf="channel.handle">{{ channel.handle }}</span>
                     <span *ngIf="channel.subsCount != null">
@@ -88,19 +296,42 @@
                       Abonné depuis {{ item.createdAt | date:'mediumDate' }}
                     </span>
                   </div>
-                  <a
-                    *ngIf="channel.url"
-                    class="text-xs text-blue-300 hover:text-blue-200"
-                    [href]="channel.url"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    Voir la chaîne externe
-                  </a>
                 </div>
               </div>
 
               <div class="flex flex-col items-stretch gap-2 text-sm md:text-right">
+                <!-- Assigneur de groupes -->
+                <div class="relative">
+                  <button
+                    class="w-full rounded-md border border-slate-700 bg-slate-800/60 px-3 py-1 text-sm text-slate-300 transition hover:border-slate-500 hover:text-white"
+                    type="button"
+                    (click)="togglePicker(item.subscriptionId, $event)"
+                  >
+                    📁 Groupes ({{ itemGroupIds(item).length }})
+                  </button>
+                  <div
+                    *ngIf="pickerFor() === item.subscriptionId"
+                    class="absolute right-0 z-20 mt-1 max-h-64 w-64 overflow-y-auto rounded-lg border border-slate-700 bg-slate-900 p-2 text-left shadow-xl"
+                  >
+                    <div *ngIf="groups().length === 0" class="p-2 text-xs text-slate-400">
+                      Aucun groupe.
+                      <button type="button" (click)="openNewGroup()" class="text-red-300 hover:underline">Créer un groupe</button>
+                    </div>
+                    <label
+                      *ngFor="let group of groups()"
+                      class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm text-slate-200 hover:bg-slate-800"
+                    >
+                      <input
+                        type="checkbox"
+                        [checked]="itemGroupIds(item).includes(group.id)"
+                        (change)="toggleMembership(item, group.id)"
+                        class="h-4 w-4 accent-red-500"
+                      />
+                      <span>{{ group.icon }}</span>
+                      <span class="flex-1 truncate">{{ group.name }}</span>
+                    </label>
+                  </div>
+                </div>
                 <app-subscribe-button
                   [provider]="channel.provider"
                   [externalId]="channel.externalId"
@@ -129,21 +360,120 @@
 
       <ng-template #emptyState>
         <div class="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-slate-700 bg-slate-900/60 p-10 text-center">
-          <h3 class="text-lg font-semibold text-slate-100">Aucune chaîne suivie</h3>
-          <p class="text-sm text-slate-400">Explorez la page Trending ou effectuez une recherche pour commencer à vous abonner.</p>
+          <h3 class="text-lg font-semibold text-slate-100">Aucune chaîne dans ce filtre</h3>
+          <p class="text-sm text-slate-400">Changez de groupe, de filtre ou abonnez-vous à de nouvelles chaînes.</p>
         </div>
       </ng-template>
     </div>
 
     <aside class="rounded-xl border border-slate-800 bg-slate-900/50 p-4 shadow-lg shadow-black/30">
-      <h3 class="text-lg font-semibold text-slate-100">Astuce</h3>
-      <p class="mt-2 text-sm text-slate-400">
-        Utilisez le raccourci <code class="rounded bg-slate-800 px-2 py-0.5 text-xs">S</code> sur une carte vidéo pour activer
-        rapidement le bouton d'abonnement. Les abonnements sont synchronisés sur tous vos appareils.
-      </p>
+      <h3 class="text-lg font-semibold text-slate-100">Groupes</h3>
+      <p class="mt-1 text-xs text-slate-500">Cliquez pour filtrer les chaînes.</p>
+      <ul class="mt-3 space-y-1">
+        <li>
+          <button
+            type="button"
+            (click)="setGroupFilter('all'); setTab('channels')"
+            class="flex w-full items-center justify-between rounded px-2 py-1.5 text-sm hover:bg-slate-800"
+            [class.text-red-200]="activeGroupId() === 'all'"
+            [class.text-slate-300]="activeGroupId() !== 'all'"
+          >
+            <span>📚 Toutes</span>
+            <span class="text-xs text-slate-500">{{ items().length }}</span>
+          </button>
+        </li>
+        <li *ngFor="let group of groups()">
+          <button
+            type="button"
+            (click)="setGroupFilter(group.id); setTab('channels')"
+            class="flex w-full items-center justify-between rounded px-2 py-1.5 text-sm hover:bg-slate-800"
+            [class.text-red-200]="activeGroupId() === group.id"
+            [class.text-slate-300]="activeGroupId() !== group.id"
+          >
+            <span class="truncate">{{ group.icon }} {{ group.name }}</span>
+            <span class="text-xs text-slate-500">{{ group.channelCount }}</span>
+          </button>
+        </li>
+      </ul>
+      <button
+        type="button"
+        (click)="openNewGroup()"
+        class="mt-3 w-full rounded-md border border-dashed border-slate-600 px-3 py-1.5 text-xs text-slate-300 hover:border-red-400 hover:text-white"
+      >
+        + Nouveau groupe
+      </button>
       <p class="mt-4 text-sm text-slate-500">
         Cache TTL: {{ hasCache() ? '6h' : '—' }}.
       </p>
     </aside>
   </div>
+
+  <!-- ==================== MODALE GROUPE ==================== -->
+  <div *ngIf="showGroupModal()" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" (click)="closeGroupModal()">
+    <div class="w-full max-w-md rounded-xl border border-slate-700 bg-slate-900 p-5 shadow-2xl" (click)="$event.stopPropagation()">
+      <h3 class="text-lg font-semibold text-slate-100">
+        {{ editingGroup() ? 'Modifier le groupe' : 'Nouveau groupe' }}
+      </h3>
+      <label class="mt-4 block text-xs font-semibold uppercase tracking-wide text-slate-400">Nom</label>
+      <input
+        type="text"
+        [ngModel]="groupName()"
+        (ngModelChange)="groupName.set($event)"
+        maxlength="80"
+        placeholder="Ex : Tech, Musique, Sport…"
+        class="mt-1 w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100 placeholder:text-slate-500 focus:border-red-500 focus:outline-none"
+      />
+      <label class="mt-4 block text-xs font-semibold uppercase tracking-wide text-slate-400">Icône</label>
+      <div class="mt-1 flex flex-wrap gap-1">
+        <button
+          *ngFor="let icon of icons"
+          type="button"
+          (click)="groupIcon.set(icon)"
+          class="rounded-md px-2 py-1 text-lg"
+          [class.bg-red-500/20]="groupIcon() === icon"
+          [class.ring-1]="groupIcon() === icon"
+          [class.ring-red-500]="groupIcon() === icon"
+          [class.hover:bg-slate-800]="groupIcon() !== icon"
+        >{{ icon }}</button>
+      </div>
+      <label class="mt-4 block text-xs font-semibold uppercase tracking-wide text-slate-400">Couleur</label>
+      <div class="mt-1 flex flex-wrap gap-1">
+        <button
+          *ngFor="let color of colors"
+          type="button"
+          (click)="groupColor.set(color)"
+          class="h-7 w-7 rounded-full"
+          [style.background-color]="color"
+          [class.ring-2]="groupColor() === color"
+          [class.ring-white]="groupColor() === color"
+          [title]="color"
+        ></button>
+      </div>
+      <div class="mt-4 flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 p-3">
+        <span
+          class="flex h-10 w-10 items-center justify-center rounded-lg text-xl"
+          [style.background-color]="groupColor() + '26'"
+          [style.border]="'1px solid ' + groupColor() + '66'"
+        >{{ groupIcon() }}</span>
+        <span class="font-semibold text-slate-100">{{ groupName() || 'Aperçu du groupe' }}</span>
+      </div>
+      <div class="mt-5 flex justify-end gap-2">
+        <button
+          type="button"
+          (click)="closeGroupModal()"
+          class="rounded-md border border-slate-700 px-4 py-2 text-sm text-slate-300 hover:border-slate-500 hover:text-white"
+        >
+          Annuler
+        </button>
+        <button
+          type="button"
+          (click)="saveGroup()"
+          [disabled]="!groupName().trim() || groupSaving()"
+          class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white disabled:opacity-40 hover:bg-red-500"
+        >
+          {{ groupSaving() ? '…' : (editingGroup() ? 'Enregistrer' : 'Créer') }}
+        </button>
+      </div>
+    </div>
+  </div>
 </div>