add fuzzy finding

aslilac · aslilac · commit 61552be3ac9b · 2023-10-06T18:31:11.000Z
diff --git a/site/package.json b/site/package.json
@@ -89,6 +89,7 @@
     "ts-prune": "0.10.3",
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.33",
+    "ufuzzy": "npm:@leeoniya/ufuzzy@1.0.10",
     "unique-names-generator": "4.7.1",
     "uuid": "9.0.0",
     "vite": "4.4.2",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
@@ -1,21 +1,71 @@
+import { type ReactNode, useMemo, useState } from "react";
+import uFuzzy from "ufuzzy";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
 import icons from "theme/icons.json";
 
+const iconsWithoutSuffix = icons.map((icon) => icon.split(".")[0]);
+const fuzzyFinder = new uFuzzy({
+  intraMode: 1,
+  intraIns: 1,
+  intraSub: 1,
+  intraTrn: 1,
+  intraDel: 1,
+});
+
 export default function () {
+  const [searchText, setSearchText] = useState("");
+
+  const searchedIcons = useMemo(() => {
+    if (!searchText.trim()) {
+      return icons.map((icon) => ({ url: `/icon/${icon}`, description: icon }));
+    }
+
+    const [map, info, sorted] = fuzzyFinder.search(
+      iconsWithoutSuffix,
+      searchText,
+    );
+
+    // We hit an invalid state somehow
+    if (!map || !info || !sorted) {
+      return [];
+    }
+
+    return sorted.map((i) => {
+      const iconName = icons[info.idx[i]];
+      const ranges = info.ranges[i];
+
+      const nodes: ReactNode[] = [];
+      let cursor = 0;
+      for (let j = 0; j < ranges.length; j += 2) {
+        nodes.push(iconName.slice(cursor, ranges[j]));
+        nodes.push(
+          <mark key={j + 1}>{iconName.slice(ranges[j], ranges[j + 1])}</mark>,
+        );
+        cursor = ranges[j + 1];
+      }
+      nodes.push(iconName.slice(cursor));
+      return { url: `/icon/${iconName}`, description: nodes };
+    });
+  }, [searchText.trim()]);
+
   return (
     <Margins>
+      <input
+        type="search"
+        onChange={(event) => setSearchText(event.target.value)}
+      />
       <Stack direction="row" wrap="wrap" spacing={1} justifyContent="center">
-        {icons.map((icon) => (
-          <CopyableValue value={`/icon/${icon}`} placement="bottom">
+        {searchedIcons.map((icon) => (
+          <CopyableValue key={icon.url} value={icon.url} placement="bottom">
             <Stack
               alignItems="center"
               css={(theme) => ({ margin: theme.spacing(1.5) })}
             >
               <img
-                src={`/icon/${icon}`}
+                src={icon.url}
                 css={{
                   width: 64,
                   height: 64,
@@ -35,7 +85,7 @@ export default function () {
                   overflow: "hidden",
                 }}
               >
-                {icon}
+                {icon.description}
               </p>
             </Stack>
           </CopyableValue>
