feat: nested search

.github/workflows/ci.yml

@@ -6,10 +6,8 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - name: npm install
-        run: npm install
+        run: npx npm@7 install
       - name: eslint
         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",
@@ -43,7 +45,6 @@ const groupNameStyle = {
   fontSize: "10px",
   textTransform: "uppercase" as const,
   opacity: 0.5,
-  background: "var(--background)",
 };
 
 const App = () => {
@@ -102,7 +103,7 @@ const App = () => {
         {
           id: "darkTheme",
           name: "Dark",
-          keywords: "dark",
+          keywords: "dark theme",
           section: "",
           perform: () =>
             document.documentElement.setAttribute("data-theme-dark", ""),
@@ -111,7 +112,7 @@ const App = () => {
         {
           id: "lightTheme",
           name: "Light",
-          keywords: "light",
+          keywords: "light theme",
           section: "",
           perform: () =>
             document.documentElement.removeAttribute("data-theme-dark"),
@@ -123,10 +124,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 +150,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,18 +188,32 @@ const ResultItem = React.forwardRef(
     {
       action,
       active,
+      currentRootActiveId,
     }: {
-      action: Action;
+      action: ActionImpl;
       active: boolean;
+      currentRootActiveId: ActionId;
     },
     ref: React.Ref<HTMLDivElement>
   ) => {
+    const ancestors = React.useMemo(() => {
+      return (function collect(action: ActionImpl, ancestors = []) {
+        if (action.parent && action.parent.id !== currentRootActiveId) {
+          ancestors.push(action.parent);
+          if (action.parent.parent) {
+            collect(action.parent.parent, ancestors);
+          }
+        }
+        return ancestors;
+      })(action);
+    }, [action, currentRootActiveId]);
+
     return (
       <div
         ref={ref}
         style={{
           padding: "12px 16px",
-          background: active ? "var(--a1)" : "var(--background)",
+          background: active ? "var(--a1)" : "transparent",
           borderLeft: `2px solid ${
             active ? "var(--foreground)" : "transparent"
           }`,
@@ -203,10 +223,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 +270,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]