Group popular icon

public/js/icon-picker.js

@@ -38,6 +38,31 @@
       if (!res.ok) throw new Error('HTTP ' + res.status);
       const json = await res.json();
 
+      const POPULAR_ORDER = [
+        // Education
+        'fa-solid fa-graduation-cap', 'fa-solid fa-book', 'fa-solid fa-book-open',
+        'fa-solid fa-chalkboard-teacher', 'fa-solid fa-school', 'fa-solid fa-university',
+        'fa-solid fa-pencil', 'fa-solid fa-certificate', 'fa-solid fa-award',
+        'fa-solid fa-medal',
+
+        // Finance
+        'fa-solid fa-piggy-bank', 'fa-solid fa-dollar-sign', 'fa-solid fa-credit-card',
+        'fa-solid fa-wallet', 'fa-solid fa-hand-holding-dollar', 'fa-solid fa-coins',
+        'fa-solid fa-chart-line', 'fa-solid fa-receipt', 'fa-solid fa-building-columns',
+        'fa-solid fa-landmark',
+
+        // Social / Contact
+        'fa-solid fa-users', 'fa-solid fa-user-group', 'fa-solid fa-handshake',
+        'fa-solid fa-comments', 'fa-solid fa-phone', 'fa-solid fa-envelope',
+        'fa-solid fa-globe', 'fa-solid fa-location-dot', 'fa-solid fa-building',
+        'fa-solid fa-headset',
+
+        // Social Media
+        'fa-brands fa-facebook', 'fa-brands fa-instagram', 'fa-brands fa-youtube',
+        'fa-brands fa-linkedin', 'fa-brands fa-twitter', 'fa-brands fa-tiktok',
+        'fa-brands fa-whatsapp', 'fa-brands fa-telegram',
+      ];
+
       ALL_ICONS = Object.entries(json).flatMap(([name, meta]) =>
         (meta.styles || [])
           .filter(s => ['solid', 'regular', 'brands'].includes(s))
@@ -47,6 +72,15 @@
           }))
       );
 
+      ALL_ICONS.sort((a, b) => {
+        const ai = POPULAR_ORDER.indexOf(a.value);
+        const bi = POPULAR_ORDER.indexOf(b.value);
+        if (ai === -1 && bi === -1) return 0;
+        if (ai === -1) return 1;
+        if (bi === -1) return -1;
+        return ai - bi;
+      });
+
       console.log('[IconPicker] loaded:', ALL_ICONS.length, 'icons');
     } catch (err) {
       console.error('[IconPicker] fetch failed:', err);