fix icon search menu (#4565) (#4712)

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -101,35 +101,47 @@ export const IconPicker = ({
   const { getIcons, getIcon } = useIcons();
   const icons = getIcons();
   const matchingSearchIconKeys = useMemo(() => {
-    const filteredIconKeys = icons
+    if (icons == null) return [];
-      ? Object.keys(icons).filter((iconKey) => {
+    const scoreIconMatch = (iconKey: string, searchString: string) => {
-          if (searchString === '') {
+      const iconLabel = convertIconKeyToLabel(iconKey)
-            return true;
+        .toLowerCase()
-          }
+        .replace('icon ', '')
+        .replace(/\s/g, '');
 
-          const isMatchingSearchString = [
+      const searchLower = searchString
-            iconKey,
+        .toLowerCase()
-            convertIconKeyToLabel(iconKey),
+        .trimEnd()
-          ].some((label) =>
+        .replace(/\s/g, '');
-            label.toLowerCase().includes(searchString.toLowerCase()),
-          );
 
-          return isMatchingSearchString;
+      if (iconKey === searchString || iconLabel === searchString) return 100;
-        })
+      if (iconKey.startsWith(searchLower) || iconLabel.startsWith(searchLower))
-      : [];
+        return 75;
+      if (iconKey.includes(searchLower) || iconLabel.includes(searchLower))
+        return 50;
+
+      return 0;
+    };
+    const scoredIcons = Object.keys(icons).map((iconKey) => ({
+      iconKey,
+      score: scoreIconMatch(iconKey, searchString),
+    }));
+
+    const filteredAndSortedIconKeys = scoredIcons
+      .filter(({ score }) => score > 0)
+      .sort((a, b) => b.score - a.score)
+      .map(({ iconKey }) => iconKey);
 
     const isSelectedIconMatchingFilter =
-      selectedIconKey && filteredIconKeys.includes(selectedIconKey);
+      selectedIconKey && filteredAndSortedIconKeys.includes(selectedIconKey);
 
-    const uniqueFilteredIconKeys = [
+    return isSelectedIconMatchingFilter
-      ...new Set(
+      ? [
-        selectedIconKey && isSelectedIconMatchingFilter
+          selectedIconKey,
-          ? [selectedIconKey, ...filteredIconKeys]
+          ...filteredAndSortedIconKeys.filter(
-          : filteredIconKeys,
+            (iconKey) => iconKey !== selectedIconKey,
-      ),
+          ),
-    ];
+        ].slice(0, 25)
-
+      : filteredAndSortedIconKeys.slice(0, 25);
-    return uniqueFilteredIconKeys.slice(0, 25);
   }, [icons, searchString, selectedIconKey]);
 
   const iconKeys2d = useMemo(