feat(groups): panneau groupe pro + 175 icones avec recherche

src/components/library/subscriptions/subscriptions.component.ts

@@ -6,6 +6,7 @@ import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import {
   GROUP_COLORS,
   GROUP_ICONS,
+  GROUP_ICON_KEYWORDS,
   SubscriptionsService,
   type SubscriptionGroup,
   type SubscriptionItem,
@@ -67,6 +68,18 @@ export class SubscriptionsComponent {
   groupColor = signal<string>(GROUP_COLORS[0]);
   groupIcon = signal<string>(GROUP_ICONS[0]);
   groupSaving = signal<boolean>(false);
+  iconSearch = signal<string>('');
+
+  /** Icônes filtrées par la recherche (emoji ou mot-clé FR/EN). */
+  readonly filteredIcons = computed(() => {
+    const q = this.iconSearch().trim().toLowerCase();
+    if (!q) return this.icons;
+    return this.icons.filter((emoji) => {
+      if (emoji.includes(q)) return true;
+      const kw = (GROUP_ICON_KEYWORDS[emoji] || '').toLowerCase();
+      return kw.split(/\s+/).some((w) => w.startsWith(q)) || kw.includes(q);
+    });
+  });
 
   // --- Assigneur de groupes (par ligne) ---
   pickerFor = signal<number | null>(null);
@@ -142,6 +155,7 @@ export class SubscriptionsComponent {
     this.groupName.set('');
     this.groupColor.set(GROUP_COLORS[this.groups().length % GROUP_COLORS.length]);
     this.groupIcon.set(GROUP_ICONS[this.groups().length % GROUP_ICONS.length]);
+    this.iconSearch.set('');
     this.showGroupModal.set(true);
   }
 
@@ -151,6 +165,7 @@ export class SubscriptionsComponent {
     this.groupName.set(group.name);
     this.groupColor.set(group.color);
     this.groupIcon.set(group.icon);
+    this.iconSearch.set('');
     this.showGroupModal.set(true);
   }