feat: allow finding tokens

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -1,4 +1,4 @@
-import { atom, computed } from "nanostores";
+import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { useState } from "react";
 import { matchSorter } from "match-sorter";
@@ -7,7 +7,6 @@ import {
   componentCategories,
   WsComponentMeta,
 } from "@webstudio-is/react-sdk";
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import {
   Command,
   CommandDialog,
@@ -48,40 +47,12 @@ import { mapGroupBy } from "~/shared/shim";
 import { setActiveSidebarPanel } from "~/builder/shared/nano-states";
 import { $commandMetas } from "~/shared/commands-emitter";
 import { emitCommand } from "~/builder/shared/commands";
-
-const $commandPanel = atom<
-  | undefined
-  | {
-      lastFocusedElement: null | HTMLElement;
-    }
->();
-
-export const openCommandPanel = () => {
-  if (isFeatureEnabled("command") === false) {
-    return;
-  }
-  const activeElement =
-    document.activeElement instanceof HTMLElement
-      ? document.activeElement
-      : null;
-  // store last focused element
-  $commandPanel.set({
-    lastFocusedElement: activeElement,
-  });
-};
-
-const closeCommandPanel = ({
-  restoreFocus = false,
-}: { restoreFocus?: boolean } = {}) => {
-  const commandPanel = $commandPanel.get();
-  $commandPanel.set(undefined);
-  // restore focus in the next frame
-  if (restoreFocus && commandPanel?.lastFocusedElement) {
-    requestAnimationFrame(() => {
-      commandPanel.lastFocusedElement?.focus();
-    });
-  }
-};
+import {
+  $commandContent,
+  $isCommandPanelOpen,
+  closeCommandPanel,
+} from "./command-state";
+import { $tokenOptions, TokenGroup, type TokenOption } from "./token-group";
 
 const getMetaScore = (meta: WsComponentMeta) => {
   const categoryScore = componentCategories.indexOf(meta.category ?? "hidden");
@@ -91,7 +62,7 @@ const getMetaScore = (meta: WsComponentMeta) => {
 };
 
 type ComponentOption = {
-  tokens: string[];
+  terms: string[];
   type: "component";
   component: string;
   label: string;
@@ -120,7 +91,7 @@ const $componentOptions = computed(
       }
       const label = getInstanceLabel({ component }, meta);
       componentOptions.push({
-        tokens: ["components", label, category],
+        terms: ["components", label, category],
         type: "component",
         component,
         label,
@@ -135,7 +106,7 @@ const $componentOptions = computed(
   }
 );
 
-const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
+const ComponentGroup = ({ options }: { options: ComponentOption[] }) => {
   return (
     <CommandGroup
       name="component"
@@ -178,7 +149,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
 };
 
 type BreakpointOption = {
-  tokens: string[];
+  terms: string[];
   type: "breakpoint";
   breakpoint: Breakpoint;
   shortcut: string;
@@ -199,7 +170,7 @@ const $breakpointOptions = computed(
       const width =
         (breakpoint.minWidth ?? breakpoint.maxWidth)?.toString() ?? "";
       breakpointOptions.push({
-        tokens: ["breakpoints", breakpoint.label, width],
+        terms: ["breakpoints", breakpoint.label, width],
         type: "breakpoint",
         breakpoint,
         shortcut: (index + 1).toString(),
@@ -220,11 +191,7 @@ const getBreakpointLabel = (breakpoint: Breakpoint) => {
   return `${breakpoint.label}: ${label}`;
 };
 
-const BreakpointOptionsGroup = ({
-  options,
-}: {
-  options: BreakpointOption[];
-}) => {
+const BreakpointGroup = ({ options }: { options: BreakpointOption[] }) => {
   return (
     <CommandGroup
       name="breakpoint"
@@ -253,7 +220,7 @@ const BreakpointOptionsGroup = ({
 };
 
 type PageOption = {
-  tokens: string[];
+  terms: string[];
   type: "page";
   page: Page;
 };
@@ -268,7 +235,7 @@ const $pageOptions = computed(
           continue;
         }
         pageOptions.push({
-          tokens: ["pages", page.name],
+          terms: ["pages", page.name],
           type: "page",
           page,
         });
@@ -278,7 +245,7 @@ const $pageOptions = computed(
   }
 );
 
-const PageOptionsGroup = ({ options }: { options: PageOption[] }) => {
+const PageGroup = ({ options }: { options: PageOption[] }) => {
   const action = useSelectedAction();
   return (
     <CommandGroup
@@ -313,7 +280,7 @@ const PageOptionsGroup = ({ options }: { options: PageOption[] }) => {
 };
 
 type ShortcutOption = {
-  tokens: string[];
+  terms: string[];
   type: "shortcut";
   name: string;
   label: string;
@@ -329,7 +296,7 @@ const $shortcutOptions = computed([$commandMetas], (commandMetas) => {
         ?.split("+")
         .map((key) => (key === "meta" ? "cmd" : key));
       shortcutOptions.push({
-        tokens: ["shortcuts", "commands", label],
+        terms: ["shortcuts", "commands", label],
         type: "shortcut",
         name,
         label,
@@ -343,7 +310,7 @@ const $shortcutOptions = computed([$commandMetas], (commandMetas) => {
   return shortcutOptions;
 });
 
-const ShortcutOptionsGroup = ({ options }: { options: ShortcutOption[] }) => {
+const ShortcutGroup = ({ options }: { options: ShortcutOption[] }) => {
   return (
     <CommandGroup
       name="shortcut"
@@ -369,12 +336,25 @@ const ShortcutOptionsGroup = ({ options }: { options: ShortcutOption[] }) => {
 };
 
 const $options = computed(
-  [$componentOptions, $breakpointOptions, $pageOptions, $shortcutOptions],
-  (componentOptions, breakpointOptions, pageOptions, commandOptions) => [
+  [
+    $componentOptions,
+    $breakpointOptions,
+    $pageOptions,
+    $shortcutOptions,
+    $tokenOptions,
+  ],
+  (
+    componentOptions,
+    breakpointOptions,
+    pageOptions,
+    commandOptions,
+    tokenOptions
+  ) => [
     ...componentOptions,
     ...breakpointOptions,
     ...pageOptions,
     ...commandOptions,
+    ...tokenOptions,
   ]
 );
 
@@ -387,7 +367,7 @@ const CommandDialogContent = () => {
   if (search.trim().length > 0) {
     for (const word of search.trim().split(/\s+/)) {
       matches = matchSorter(matches, word, {
-        keys: ["tokens"],
+        keys: ["terms"],
       });
     }
   }
@@ -401,36 +381,38 @@ const CommandDialogContent = () => {
             {Array.from(groups).map(([group, matches]) => {
               if (group === "component") {
                 return (
-                  <ComponentOptionsGroup
+                  <ComponentGroup
                     key={group}
                     options={matches as ComponentOption[]}
                   />
                 );
               }
               if (group === "breakpoint") {
                 return (
-                  <BreakpointOptionsGroup
+                  <BreakpointGroup
                     key={group}
                     options={matches as BreakpointOption[]}
                   />
                 );
               }
               if (group === "page") {
                 return (
-                  <PageOptionsGroup
-                    key={group}
-                    options={matches as PageOption[]}
-                  />
+                  <PageGroup key={group} options={matches as PageOption[]} />
                 );
               }
               if (group === "shortcut") {
                 return (
-                  <ShortcutOptionsGroup
+                  <ShortcutGroup
                     key={group}
                     options={matches as ShortcutOption[]}
                   />
                 );
               }
+              if (group === "token") {
+                return (
+                  <TokenGroup key={group} options={matches as TokenOption[]} />
+                );
+              }
               group satisfies never;
             })}
           </CommandList>
@@ -443,14 +425,15 @@ const CommandDialogContent = () => {
 };
 
 export const CommandPanel = () => {
-  const isOpen = useStore($commandPanel) !== undefined;
+  const isOpen = useStore($isCommandPanelOpen);
+  const commandContent = useStore($commandContent);
   return (
     <CommandDialog
       open={isOpen}
       onOpenChange={() => closeCommandPanel({ restoreFocus: true })}
     >
       <Command shouldFilter={false}>
-        <CommandDialogContent />
+        {commandContent ?? <CommandDialogContent />}
       </Command>
     </CommandDialog>
   );

apps/builder/app/builder/features/command-panel/command-state.ts

@@ -0,0 +1,41 @@
+import { atom, computed } from "nanostores";
+import type { ReactNode } from "react";
+
+const $commandPanel = atom<
+  | undefined
+  | {
+      lastFocusedElement: null | HTMLElement;
+    }
+>();
+
+export const $isCommandPanelOpen = computed(
+  $commandPanel,
+  (commandPanel) => commandPanel !== undefined
+);
+
+export const openCommandPanel = () => {
+  const activeElement =
+    document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+  // store last focused element
+  $commandPanel.set({
+    lastFocusedElement: activeElement,
+  });
+};
+
+export const closeCommandPanel = ({
+  restoreFocus = false,
+}: { restoreFocus?: boolean } = {}) => {
+  const commandPanel = $commandPanel.get();
+  $commandPanel.set(undefined);
+  $commandContent.set(undefined);
+  // restore focus in the next frame
+  if (restoreFocus && commandPanel?.lastFocusedElement) {
+    requestAnimationFrame(() => {
+      commandPanel.lastFocusedElement?.focus();
+    });
+  }
+};
+
+export const $commandContent = atom<ReactNode>();

apps/builder/app/builder/features/command-panel/index.ts

@@ -1 +1,2 @@
+export { openCommandPanel } from "./command-state";
 export * from "./command-panel";