From d170058509c2f0d902f1ea8c448d6b93741f08fe Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Sun, 26 Apr 2026 11:04:19 -0400
Subject: [PATCH] refactor(icons): add categoryIcon support for representative
 category icons

- add optional `categoryIcon` flag to icon metadata helper in add-remove.js and business.js
- mark Add01Icon and ChartLineData01Icon as category representative icons
- use categoryIcon flag in IconsPage to display the most representative icon per category
- add `cursor-pointer` to category sidebar buttons and widen sidebar from 200px to 250px
---
 src/features/admin/devkit/IconsPage.client.js | 10 ++++++----
 src/shared/icons/add-remove.js                |  3 ++-
 src/shared/icons/business.js                  |  3 ++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/features/admin/devkit/IconsPage.client.js b/src/features/admin/devkit/IconsPage.client.js
index 2656efd..ebbdcfc 100644
--- a/src/features/admin/devkit/IconsPage.client.js
+++ b/src/features/admin/devkit/IconsPage.client.js
@@ -18,7 +18,9 @@ export default function IconsPage() {
       const cat = Icon.category;
       if (!cat) continue;
       if (!map.has(cat)) map.set(cat, { count: 0, FirstIcon: Icon });
-      map.get(cat).count += 1;
+      const entry = map.get(cat);
+      entry.count += 1;
+      if (Icon.categoryIcon) entry.FirstIcon = Icon;
     }
     return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
   }, []);
@@ -103,14 +105,14 @@ export default function IconsPage() {
         </div>
 
         {hasSidebar && (
-          <div className="w-full sm:w-[200px] sm:shrink-0 sm:sticky sm:top-4 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden order-first sm:order-none">
+          <div className="w-full sm:w-[250px] sm:shrink-0 sm:sticky sm:top-4 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden order-first sm:order-none">
             <div className="px-3 py-2.5 border-b border-neutral-200 dark:border-neutral-800">
               <span className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wide">Catégories</span>
             </div>
             <div className="py-1 flex sm:flex-col flex-row flex-wrap sm:flex-nowrap gap-0">
               <button
                 onClick={() => setSelectedCategory(null)}
-                className={`flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
+                className={`cursor-pointer flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
                   selectedCategory === null
                     ? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white'
                     : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white'
@@ -125,7 +127,7 @@ export default function IconsPage() {
                 <button
                   key={cat}
                   onClick={() => setSelectedCategory(cat)}
-                  className={`flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
+                  className={`cursor-pointer flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
                     selectedCategory === cat
                       ? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white'
                       : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white'
diff --git a/src/shared/icons/add-remove.js b/src/shared/icons/add-remove.js
index 1385a0c..cb1f9df 100644
--- a/src/shared/icons/add-remove.js
+++ b/src/shared/icons/add-remove.js
@@ -1,4 +1,4 @@
-const m = (fn, keywords) => Object.assign(fn, { keywords, category: 'Ajouter + Supprimer' });
+const m = (fn, keywords, isCategoryIcon = false) => Object.assign(fn, { keywords, category: 'Ajouter + Supprimer', ...(isCategoryIcon && { categoryIcon: true }) });
 
 export const Add01Icon = m(
   (props) => (
@@ -7,6 +7,7 @@ export const Add01Icon = m(
     </svg>
   ),
   ['add', 'plus', 'create', 'new', 'insert', 'cross', 'ajouter', 'nouveau', 'créer', 'insérer'],
+  true
 );
 
 export const Add02Icon = m(
diff --git a/src/shared/icons/business.js b/src/shared/icons/business.js
index 89e4723..de3b038 100644
--- a/src/shared/icons/business.js
+++ b/src/shared/icons/business.js
@@ -1,4 +1,4 @@
-const m = (fn, keywords) => Object.assign(fn, { keywords, category: 'Entreprise' });
+const m = (fn, keywords, isCategoryIcon = false) => Object.assign(fn, { keywords, category: 'Entreprise', ...(isCategoryIcon && { categoryIcon: true }) });
 
 export const Activity01Icon = m(
   (props) => (
@@ -928,6 +928,7 @@ export const ChartLineData01Icon = m(
     </svg>
   ),
   ['chart', 'line', 'data', 'trend', 'graphique', 'lignes', 'données', 'tendance'],
+  true
 );
 
 export const ChartLineData02Icon = m(