From 63a2bddf47807ec8d0f47040dc40432b605355fa Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sun, 27 Sep 2026 13:52:20 -0400
Subject: [PATCH] =?UTF-8?q?fix(groups):=20assignation=20en=20lot=201=20req?=
 =?UTF-8?q?u=C3=AAte=20+=20trackBy=20(plus=20de=20wipe/429)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../subscriptions.component.html              | 14 +++---
 .../subscriptions/subscriptions.component.ts  | 43 +++++++++++++------
 src/services/subscriptions.service.ts         | 34 +++++++++++++++
 3 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/src/components/library/subscriptions/subscriptions.component.html b/src/components/library/subscriptions/subscriptions.component.html
index 9019ad0..f299aa8 100644
--- a/src/components/library/subscriptions/subscriptions.component.html
+++ b/src/components/library/subscriptions/subscriptions.component.html
@@ -82,7 +82,7 @@
       Aucune suggestion : chaque thème a moins de 2 chaînes, ou tout est déjà rangé.
     </div>
     <ul *ngIf="suggestions().length > 0" class="mt-3 space-y-2">
-      <li *ngFor="let s of suggestions()" class="flex flex-col gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-3 sm:flex-row sm:items-center sm:justify-between">
+      <li *ngFor="let s of suggestions(); trackBy: trackBySuggestion" class="flex flex-col gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex min-w-0 items-center gap-3">
           <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-xl" [style.background-color]="s.color + '26'" [style.border]="'1px solid ' + s.color + '66'">{{ s.icon }}</span>
           <div class="min-w-0">
@@ -138,7 +138,7 @@
   <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()"
+        *ngFor="let group of groups(); trackBy: trackByGroupId"
         (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"
       >
@@ -215,7 +215,7 @@
             Tous
           </button>
           <button
-            *ngFor="let group of groups()"
+            *ngFor="let group of groups(); trackBy: trackByGroupId"
             type="button"
             (click)="setGroupFilter(group.id)"
             class="rounded-full border px-3 py-1 text-xs font-semibold transition"
@@ -307,7 +307,7 @@
           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>
+          <option *ngFor="let group of groups(); trackBy: trackByGroupId" [value]="group.id">{{ group.icon }} {{ group.name }}</option>
         </select>
         <button
           type="button"
@@ -330,7 +330,7 @@
       <ng-container *ngIf="filteredItems().length > 0; else emptyState">
         <div class="divide-y divide-slate-800">
           <div
-            *ngFor="let item of filteredItems()"
+            *ngFor="let item of filteredItems(); trackBy: trackBySubscriptionId"
             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">
@@ -404,7 +404,7 @@
                       <button type="button" (click)="openNewGroup()" class="text-red-300 hover:underline">Créer un groupe</button>
                     </div>
                     <label
-                      *ngFor="let group of groups()"
+                      *ngFor="let group of groups(); trackBy: trackByGroupId"
                       class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm text-slate-200 hover:bg-slate-800"
                     >
                       <input
@@ -474,7 +474,7 @@
             <span class="text-xs text-slate-500">{{ items().length }}</span>
           </button>
         </li>
-        <li *ngFor="let group of groups()">
+        <li *ngFor="let group of groups(); trackBy: trackByGroupId">
           <button
             type="button"
             (click)="setGroupFilter(group.id); setTab('channels')"
diff --git a/src/components/library/subscriptions/subscriptions.component.ts b/src/components/library/subscriptions/subscriptions.component.ts
index 66b0215..98570be 100644
--- a/src/components/library/subscriptions/subscriptions.component.ts
+++ b/src/components/library/subscriptions/subscriptions.component.ts
@@ -183,28 +183,34 @@ export class SubscriptionsComponent {
     }
   }
 
-  /** Crée le groupe suggéré (ou complète l'existant) et y assigne les chaînes. */
+  /** Crée le groupe suggéré (ou complète l'existant) : 2 requêtes max, pas de tempête. */
   applySuggestion(s: GroupSuggestion): Promise<void> {
     if (this.suggestBusy()) return Promise.resolve();
     this.suggestBusy.set(true);
-    const assignAll = (groupId: string): Promise<void> => {
-      const calls = s.channelIds
-        .filter((sid) => !(this.members()[String(sid)] || []).includes(groupId))
-        .map((sid) => new Promise<void>((resolve) => {
-          const current = this.members()[String(sid)] || [];
-          this.subs.setSubscriptionGroups(sid, [...current, groupId]).subscribe({ next: () => resolve(), error: () => resolve() });
-        }));
-      return Promise.all(calls).then(() => undefined);
-    };
     const done = () => this.suggestBusy.set(false);
+    const run = (gid: string): Promise<void> => new Promise<void>((resolve) => {
+      this.subs.setGroupMembers(gid, this.memberIdsOf(gid, s)).subscribe({ next: () => resolve(), error: () => resolve() });
+    });
     if (s.kind === 'complete' && s.existingGroupId) {
-      return assignAll(s.existingGroupId).finally(done);
+      return run(s.existingGroupId).finally(done);
     }
     return new Promise<void>((resolve) => {
-      this.subs.createGroup(s.name, s.color, s.icon).subscribe((g) => resolve(g?.id ? assignAll(g.id) : undefined));
+      this.subs.createGroup(s.name, s.color, s.icon).subscribe((g) => {
+        if (g?.id) run(g.id).then(() => resolve());
+        else resolve();
+      });
     }).finally(done);
   }
 
+  /** Ids déjà dans le groupe + nouveaux (union), pour l'assignation en lot. */
+  private memberIdsOf(groupId: string, s: GroupSuggestion): number[] {
+    const members = this.members();
+    const current = Object.keys(members)
+      .filter((k) => (members[k] || []).includes(groupId))
+      .map(Number);
+    return [...new Set([...current, ...s.channelIds])];
+  }
+
   /** Applique toutes les suggestions d'un coup, dans l'ordre. */
   async applyAllSuggestions(): Promise<void> {
     if (this.suggestBusy()) return;
@@ -213,6 +219,19 @@ export class SubscriptionsComponent {
     }
   }
 
+  // --- trackBy : DOM stable (pas de re-rendu complet + recharge d'images à chaque tick) ---
+  trackBySubscriptionId(_idx: number, item: SubscriptionItem): number {
+    return item.subscriptionId;
+  }
+
+  trackByGroupId(_idx: number, group: SubscriptionGroup): string {
+    return group.id;
+  }
+
+  trackBySuggestion(_idx: number, s: GroupSuggestion): string {
+    return `${s.kind}:${s.existingGroupId || s.name}`;
+  }
+
   readonly items = computed(() => this.subs.items());
   readonly groups = computed(() => this.subs.subscriptionGroups());
   readonly members = computed(() => this.subs.groupMembers());
diff --git a/src/services/subscriptions.service.ts b/src/services/subscriptions.service.ts
index e935e33..4a5d382 100644
--- a/src/services/subscriptions.service.ts
+++ b/src/services/subscriptions.service.ts
@@ -546,6 +546,40 @@ export class SubscriptionsService {
     );
   }
 
+  /**
+   * Remplace les chaînes d'un groupe en UNE seule requête (assignation en lot).
+   * Évite la tempête de PUT par chaîne (rate-limit + re-rendus en cascade).
+   */
+  setGroupMembers(groupId: string, subscriptionIds: number[]): Observable<boolean> {
+    const ids = [...new Set((subscriptionIds || []).map(Number).filter(Number.isFinite))];
+    return this.http.put(`/api/subscription-groups/${groupId}/members`, { subscriptionIds: ids }).pipe(
+      tap(() => {
+        const wanted = new Set(ids.map(String));
+        const members = { ...this.members() };
+        for (const key of Object.keys(members)) {
+          const cur = members[key] || [];
+          const has = cur.includes(groupId);
+          const want = wanted.has(key);
+          if (has === want) continue;
+          members[key] = want ? [...cur, groupId] : cur.filter((gid) => gid !== groupId);
+        }
+        for (const sid of wanted) {
+          const key = String(sid);
+          if (!(key in members)) members[key] = [groupId];
+        }
+        this.members.set(members);
+        this.refreshGroupCounts();
+      }),
+      map(() => true),
+      catchError((err) => {
+        console.error('Failed to set group members', err);
+        this.lastErrorMsg.set('Assignation en lot impossible. Réessayez.');
+        this.listGroups().subscribe();
+        return of(false);
+      })
+    );
+  }
+
   /** Recalcule les compteurs locaux sans appel réseau. */
   private refreshGroupCounts(): void {
     const members = this.members();