feat(web): fuzzy search with fuse.js for typo-tolerant tool discovery

apps/web/package.json

@@ -20,6 +20,7 @@
     "@use-gesture/react": "^10.3.1",
     "clsx": "^2.1.0",
     "fflate": "^0.8.3",
+    "fuse.js": "^7.4.2",
     "jszip": "^3.10.1",
     "konva": "^10",
     "leaflet": "^1.9.4",

apps/web/src/components/layout/tool-panel.tsx

@@ -1,6 +1,7 @@
 import { CATEGORIES, MODALITIES, TOOLS } from "@snapotter/shared";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "@/contexts/i18n-context";
+import { useFuseSearch } from "@/hooks/use-fuse-search";
 import { ICON_MAP } from "@/lib/icon-map";
 import { getCategoryName, getModalityName } from "@/lib/tool-i18n";
 import { useFeaturesStore } from "@/stores/features-store";
@@ -31,13 +32,7 @@ export function ToolPanel() {
     });
   }, [disabledTools, experimentalEnabled, loaded]);
 
-  const filteredTools = useMemo(() => {
+  const filteredTools = useFuseSearch(visibleTools, search);
-    if (!search) return visibleTools;
-    const q = search.toLowerCase();
-    return visibleTools.filter(
-      (t) => t.name.toLowerCase().includes(q) || t.description.toLowerCase().includes(q),
-    );
-  }, [search, visibleTools]);
 
   const groupedByModality = useMemo(() => {
     const byModality = new Map<string, Map<string, typeof TOOLS>>();

apps/web/src/hooks/use-fuse-search.ts

@@ -0,0 +1,29 @@
+import type { Tool } from "@snapotter/shared";
+import type { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
+import { useMemo } from "react";
+
+const FUSE_OPTIONS: IFuseOptions<Tool> = {
+  keys: [
+    { name: "name", weight: 0.4 },
+    { name: "description", weight: 0.3 },
+    { name: "id", weight: 0.2 },
+    { name: "category", weight: 0.1 },
+  ],
+  threshold: 0.4,
+  ignoreLocation: true,
+  minMatchCharLength: 2,
+};
+
+/**
+ * Wraps a tool list with Fuse.js fuzzy search.
+ * Returns all tools when query is empty; ranked fuzzy results otherwise.
+ */
+export function useFuseSearch(tools: Tool[], query: string): Tool[] {
+  const fuse = useMemo(() => new Fuse(tools, FUSE_OPTIONS), [tools]);
+
+  return useMemo(() => {
+    if (!query) return tools;
+    return fuse.search(query).map((r) => r.item);
+  }, [fuse, query, tools]);
+}

apps/web/src/pages/fullscreen-grid-page.tsx

@@ -18,6 +18,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { OtterLogo } from "@/components/common/otter-logo";
 import { MobileBottomNav } from "@/components/layout/mobile-bottom-nav";
 import { useTranslation } from "@/contexts/i18n-context";
+import { useFuseSearch } from "@/hooks/use-fuse-search";
 import { useMobile } from "@/hooks/use-mobile";
 import { track } from "@/lib/analytics";
 import { apiGet } from "@/lib/api";
@@ -69,20 +70,12 @@ export function FullscreenGridPage() {
     });
   }, [disabledTools, experimentalEnabled]);
 
-  const filteredTools = useMemo(() => {
+  const modalityFiltered = useMemo(() => {
-    let tools = visibleTools;
+    if (modalityTab === "all") return visibleTools;
-    if (modalityTab !== "all") {
+    return visibleTools.filter((t) => t.modality === modalityTab);
-      tools = tools.filter((t) => t.modality === modalityTab);
+  }, [visibleTools, modalityTab]);
-    }
+
-    if (!search) return tools;
+  const filteredTools = useFuseSearch(modalityFiltered, search);
-    const q = search.toLowerCase();
-    return tools.filter(
-      (t) =>
-        t.name.toLowerCase().includes(q) ||
-        t.description.toLowerCase().includes(q) ||
-        t.category.toLowerCase().includes(q),
-    );
-  }, [search, visibleTools, modalityTab]);
 
   useEffect(() => {
     if (!search) return;