feat(spotlight): implement Fuse.js fuzzy search and action grouping with mock data

src/App.tsx

@@ -1,122 +1,13 @@
-import { useState, useEffect } from "react";
-import { MantineProvider, Tabs, Button } from "@mantine/core";
-import {
-  HotkeysProvider,
-  useHotkeys,
-  useHotkeysContext,
-} from "react-hotkeys-hook";
+import { MantineProvider } from "@mantine/core";
+
 import "@mantine/core/styles.css";
-import { Spotlight, spotlight } from "@mantine/spotlight";
-import type { SpotlightActionData } from "@mantine/spotlight";
 import "@mantine/spotlight/styles.css";
-function TabContent({ title, scopeName }: any) {
-  const [text, setText] = useState(`${title} panel `);
-  const [used, setUsed] = useState(false);
-
-  useHotkeys(
-    "ctrl+b",
-    () => {
-      if (used) return;
-      setText((prev) => prev + `${title} `);
-      setUsed(true);
-    },
-    {
-      scopes: [scopeName],
-      preventDefault: true,
-    },
-  );
-
-  return <>{text}</>;
-}
-
-function TabsPage() {
-  const { enableScope, disableScope } = useHotkeysContext();
-  const [activeTab, setActiveTab] = useState("1");
-  const actions: SpotlightActionData[] = [
-    {
-      id: "first",
-      label: "First",
-      description: "First panel",
-      onClick: () => {
-        setActiveTab("1");
-      },
-    },
-    {
-      id: "second",
-      label: "Second",
-      description: "Second panel",
-      onClick: () => {
-        setActiveTab("2");
-      },
-    },
-    {
-      id: "third",
-      label: "Third",
-      description: "Third panel",
-      onClick: () => {
-        setActiveTab("3");
-      },
-    },
-  ];
-
-  useEffect(() => {
-    const currentScope = `tab${activeTab}`;
-    enableScope(currentScope);
-
-    return () => {
-      disableScope(currentScope);
-    };
-  }, [activeTab, enableScope, disableScope]);
-
-  useHotkeys("ctrl+1", () => setActiveTab("1"), { preventDefault: true });
-  useHotkeys("ctrl+2", () => setActiveTab("2"), { preventDefault: true });
-  useHotkeys("ctrl+3", () => setActiveTab("3"), { preventDefault: true });
-
-  return (
-    <>
-      <Button onClick={spotlight.open} variant="default">
-        Open spotlight
-      </Button>
-      <Spotlight
-        actions={actions}
-        nothingFound="Nothing found..."
-        highlightQuery
-        searchProps={{
-          placeholder: "Search...",
-        }}
-      />
-      <Tabs
-        value={activeTab}
-        onChange={(value) => value && setActiveTab(value)}
-      >
-        <Tabs.List>
-          <Tabs.Tab value="1">First</Tabs.Tab>
-          <Tabs.Tab value="2">Second</Tabs.Tab>
-          <Tabs.Tab value="3">Third</Tabs.Tab>
-        </Tabs.List>
-
-        <Tabs.Panel value="1">
-          <TabContent title="First" scopeName="tab1" />
-        </Tabs.Panel>
-
-        <Tabs.Panel value="2">
-          <TabContent title="Second" scopeName="tab2" />
-        </Tabs.Panel>
-
-        <Tabs.Panel value="3">
-          <TabContent title="Third" scopeName="tab3" />
-        </Tabs.Panel>
-      </Tabs>
-    </>
-  );
-}
+import { SpotlightTestDemo } from "./SpotlightTestDemo";
 
 export default function App() {
   return (
-    <HotkeysProvider initiallyActiveScopes={["tab1"]}>
-      <MantineProvider>
-        <TabsPage />
-      </MantineProvider>
-    </HotkeysProvider>
+    <MantineProvider>
+      <SpotlightTestDemo></SpotlightTestDemo>
+    </MantineProvider>
   );
 }

src/SpotlightTestDemo.tsx

@@ -0,0 +1,132 @@
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "@mantine/core";
+import { Spotlight, spotlight } from "@mantine/spotlight";
+import type {
+  SpotlightActionData,
+  SpotlightActionGroupData,
+  SpotlightFilterFunction,
+} from "@mantine/spotlight";
+import Fuse from "fuse.js";
+
+interface Product {
+  id: number;
+  title: string;
+  description: string;
+  price: number;
+  category: string;
+  brand: string;
+}
+
+function generate5kMockProducts(): Product[] {
+  const categories = [
+    "Electronics",
+    "Fashion",
+    "Home & Living",
+    "Beauty & Care",
+    "Sports & Outdoors",
+    "Automotive",
+  ];
+  const brands = ["Sony", "Samsung", "Apple", "Nike", "Adidas", "IKEA"];
+
+  return Array.from({ length: 5000 }, (_, index) => {
+    const id = index + 1;
+    const category = categories[index % categories.length];
+    const brand = brands[index % brands.length];
+
+    return {
+      id,
+      title: `${brand} High-End Item #${id}`,
+      description: `Premium ${category.toLowerCase()} product manufactured by ${brand}. High availability in stock.`,
+      price: Math.floor(Math.random() * 900) + 10,
+      category,
+      brand,
+    };
+  });
+}
+
+function groupActionsByCategory(
+  actions: SpotlightActionData[],
+): SpotlightActionGroupData[] {
+  const groupsMap = actions.reduce<Record<string, SpotlightActionData[]>>(
+    (acc, action) => {
+      const groupName = (action as any)._category || "OTHER";
+      if (!acc[groupName]) {
+        acc[groupName] = [];
+      }
+      acc[groupName].push(action);
+      return acc;
+    },
+    {},
+  );
+
+  return Object.entries(groupsMap).map(([group, groupActions]) => ({
+    group: group.toUpperCase(),
+    actions: groupActions,
+  }));
+}
+
+export function SpotlightTestDemo() {
+  const [query, setQuery] = useState("");
+  const [flatActions, setFlatActions] = useState<SpotlightActionData[]>([]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const products = generate5kMockProducts();
+
+      const actions: SpotlightActionData[] = products.map((product) => ({
+        id: `prod-${product.id}`,
+        label: product.title,
+        description: `${product.brand} | $${product.price} - ${product.description}`,
+        _category: product.category,
+      }));
+
+      setFlatActions(actions);
+    }, 50);
+  }, []);
+
+  const fuseIndex = useMemo(() => {
+    if (flatActions.length === 0) return null;
+
+    return new Fuse(flatActions, {
+      keys: ["label", "description", "_category"],
+      threshold: 0.5,
+      distance: 100,
+      minMatchCharLength: 1,
+      ignoreLocation: true,
+      useExtendedSearch: false,
+    });
+  }, [flatActions]);
+
+  const customFuzzyFilter: SpotlightFilterFunction = (searchQuery) => {
+    const trimmed = searchQuery.trim();
+
+    if (!trimmed) {
+      return groupActionsByCategory(flatActions.slice(0, 20));
+    }
+
+    if (!fuseIndex) return [];
+
+    const results = fuseIndex.search(trimmed);
+    const matchedItems = results.slice(0, 50).map((r) => r.item);
+
+    return groupActionsByCategory(matchedItems);
+  };
+
+  return (
+    <>
+      <Button onClick={spotlight.open}>Spotlight (Ctrl + K)</Button>
+      <Spotlight
+        shortcut="ctrl + k"
+        actions={flatActions}
+        filter={customFuzzyFilter}
+        query={query}
+        onQueryChange={setQuery}
+        nothingFound="Nothing found..."
+        highlightQuery
+        searchProps={{
+          placeholder: "Search...",
+        }}
+      />
+    </>
+  );
+}