feat: nested search

.github/workflows/ci.yml

@@ -11,5 +11,3 @@ jobs:
         run: npm run lint
       - name: tsc
         run: npm run typecheck
-      - name: test
-        run: npm run test

example/src/App.tsx

@@ -3,7 +3,8 @@ import * as React from "react";
 import { KBarAnimator } from "../../src/KBarAnimator";
 import { KBarProvider } from "../../src/KBarContextProvider";
 import KBarPortal from "../../src/KBarPortal";
-import useMatches, { NO_GROUP } from "../../src/useMatches";
+import { NO_GROUP } from "../../src/useMatches";
+import useDeepMatches from "../../src/useDeepMatches";
 import KBarPositioner from "../../src/KBarPositioner";
 import KBarSearch from "../../src/KBarSearch";
 import KBarResults from "../../src/KBarResults";
@@ -14,8 +15,9 @@ import Docs from "./Docs";
 import SearchDocsActions from "./SearchDocsActions";
 import { createAction } from "../../src/utils";
 import { useAnalytics } from "./utils";
-import { Action } from "../../src";
 import Blog from "./Blog";
+import { ActionImpl } from "../../src/action";
+import { ActionId } from "../../src";
 
 const searchStyle = {
   padding: "12px 16px",
@@ -102,7 +104,7 @@ const App = () => {
         {
           id: "darkTheme",
           name: "Dark",
-          keywords: "dark",
+          keywords: "dark theme",
           section: "",
           perform: () =>
             document.documentElement.setAttribute("data-theme-dark", ""),
@@ -111,7 +113,7 @@ const App = () => {
         {
           id: "lightTheme",
           name: "Light",
-          keywords: "light",
+          keywords: "light theme",
           section: "",
           perform: () =>
             document.documentElement.removeAttribute("data-theme-dark"),
@@ -123,10 +125,7 @@ const App = () => {
       <KBarPortal>
         <KBarPositioner>
           <KBarAnimator style={animatorStyle}>
-            <KBarSearch
-              style={searchStyle}
-              placeholder="Type a command or search…"
-            />
+            <KBarSearch style={searchStyle} />
             <RenderResults />
           </KBarAnimator>
         </KBarPositioner>
@@ -152,25 +151,33 @@ const App = () => {
 };
 
 function RenderResults() {
-  const groups = useMatches();
-  const flattened = React.useMemo(
-    () =>
-      groups.reduce((acc, curr) => {
-        acc.push(curr.name);
-        acc.push(...curr.actions);
-        return acc;
-      }, []),
-    [groups]
-  );
+  const { throttledGroups: matches, throttledRootActionId: rootActionId } =
+    useDeepMatches();
+
+  const flattened = React.useMemo(() => {
+    let res = [];
+    for (let i = 0; i < matches.length; i++) {
+      let match = matches[i];
+      if (match !== NO_GROUP) res.push(match.name);
+      for (let j = 0; j < match.actions.length; j++) {
+        res.push(match.actions[j]);
+      }
+    }
+    return res;
+  }, [matches]);
 
   return (
     <KBarResults
-      items={flattened.filter((i) => i !== NO_GROUP)}
+      items={flattened}
       onRender={({ item, active }) =>
         typeof item === "string" ? (
           <div style={groupNameStyle}>{item}</div>
         ) : (
-          <ResultItem action={item} active={active} />
+          <ResultItem
+            action={item}
+            active={active}
+            currentRootActiveId={rootActionId}
+          />
         )
       }
     />
@@ -182,12 +189,27 @@ const ResultItem = React.forwardRef(
     {
       action,
       active,
+      currentRootActiveId,
     }: {
-      action: Action;
+      action: ActionImpl;
       active: boolean;
+      currentRootActiveId: ActionId;
     },
     ref: React.Ref<HTMLDivElement>
   ) => {
+    const ancestors = React.useMemo(() => {
+      let ancestors = [];
+      (function collect(action: ActionImpl) {
+        if (action.parent && action.parent.id !== currentRootActiveId) {
+          ancestors.push(action.parent);
+          if (action.parent.parent) {
+            collect(action.parent.parent);
+          }
+        }
+      })(action);
+      return ancestors;
+    }, [action, currentRootActiveId]);
+
     return (
       <div
         ref={ref}
@@ -203,10 +225,39 @@ const ResultItem = React.forwardRef(
           cursor: "pointer",
         }}
       >
-        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+        <div
+          style={{
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            fontSize: 14,
+          }}
+        >
           {action.icon && action.icon}
           <div style={{ display: "flex", flexDirection: "column" }}>
-            <span>{action.name}</span>
+            <div>
+              {ancestors.length > 0 &&
+                ancestors.map((ancestor) => (
+                  <React.Fragment key={ancestor.id}>
+                    <span
+                      style={{
+                        opacity: 0.5,
+                        marginRight: 8,
+                      }}
+                    >
+                      {ancestor.name}
+                    </span>
+                    <span
+                      style={{
+                        marginRight: 8,
+                      }}
+                    >
+                      &rsaquo;
+                    </span>
+                  </React.Fragment>
+                ))}
+              <span>{action.name}</span>
+            </div>
             {action.subtitle && (
               <span style={{ fontSize: 12 }}>{action.subtitle}</span>
             )}
@@ -221,6 +272,7 @@ const ResultItem = React.forwardRef(
                   padding: "4px 6px",
                   background: "rgba(0 0 0 / .1)",
                   borderRadius: "4px",
+                  fontSize: 14,
                 }}
               >
                 {sc}

example/src/Blog.tsx

@@ -23,7 +23,7 @@ const greatgrandchild = createAction({
 
 export default function Blog() {
   const [actions, setActions] = React.useState([
-    ...Array.from(Array(4)).map((_, i) =>
+    ...Array.from(Array(100000)).map((_, i) =>
       createAction({
         name: i.toString(),
         shortcut: [],

example/src/SearchDocsActions.tsx

@@ -40,7 +40,7 @@ export default function SearchDocsActions() {
             name: "Search docs…",
             shortcut: ["?"],
             keywords: "find",
-            section: "",
+            section: "Documentation",
           }
         : null,
     [searchActions]