@backmatter/studio 0.0.5 → 0.0.7

package/src/chrome/CommandPalette.tsx

@@ -16,7 +16,7 @@ import { isStudioDev } from "../studio-config";
 import { useReplicaState } from "../replica/useReplica";
 import { useChatUIOptional } from "../chat/ChatProvider";
 import { useAppChrome } from "../components/AppChromeContext";
-import { colors, radius, space, type, z } from "../styles/tokens.stylex";
+import { colors, space, type, z } from "../styles/tokens.stylex";
 import { useTheme } from "../theme/ThemeProvider";
 import { cx } from "../ui/popup";
 import { useEditorActions } from "./EditorActionsContext";
@@ -33,16 +33,33 @@ import {
   settingsPath,
   workspaceHomePath,
 } from "../workspace-path";
+import { PaletteIcon, type PaletteIconId } from "./command-palette-icons";
+import { SearchIcon } from "../chat/icons";
 
 type Item = {
   id: string;
   group: string;
   label: string;
+  icon: PaletteIconId;
   hint?: string;
   shortcut?: string;
+  /** Hidden when the palette opens; shown once the user types to search. */
+  searchOnly?: boolean;
   run: () => void;
 };
 
+const GROUP_ORDER = [
+  "Editing",
+  "Git",
+  "AI",
+  "Go to",
+  "Appearance",
+  "Settings",
+  "Content",
+  "Workspaces",
+  "Documents",
+] as const;
+
 type ItemGroup = { value: string; items: Item[] };
 
 const THEME_LABEL = {
@@ -66,7 +83,8 @@ export function CommandPalette() {
   const workspaceNav = useWorkspaceNav();
   const editorActions = useEditorActions();
   const { onLogout } = useAppChrome();
-  const { preference, cyclePreference } = useTheme();
+  const { preference, cyclePreference, resolved } = useTheme();
+  const glass = resolved === "dark" ? glassDark : glassLight;
   const chat = useChatUIOptional();
   const mod = modifierSymbol();
 
@@ -124,8 +142,9 @@ export function CommandPalette() {
     if (saveDocAction) {
       list.push({
         id: "action-save",
-        group: "Actions",
+        group: "Editing",
         label: "Save",
+        icon: "save",
         shortcut: `${mod}S`,
         run: () => {
           setOpen(false);
@@ -139,7 +158,8 @@ export function CommandPalette() {
       const conflicts = countConflicts(git);
       list.push({
         id: "action-commit",
-        group: "Actions",
+        group: "Git",
+        icon: "commit",
         label:
           conflicts > 0
             ? `Commit blocked: ${conflicts} ${conflicts === 1 ? "conflict" : "conflicts"}`
@@ -162,7 +182,8 @@ export function CommandPalette() {
       const workspaceId = workspaceNav.workspaceId;
       list.push({
         id: "action-pull",
-        group: "Actions",
+        group: "Git",
+        icon: "pull",
         label: "Pull from GitHub",
         hint: "Re-import the branch if a push was missed",
         run: () => {
@@ -178,7 +199,8 @@ export function CommandPalette() {
       list.push(
         {
           id: "action-chat",
-          group: "Actions",
+          group: "AI",
+          icon: "chat",
           label: "Open AI chat",
           shortcut: `${mod}J`,
           run: () => {
@@ -188,7 +210,8 @@ export function CommandPalette() {
         },
         {
           id: "action-chat-new",
-          group: "Actions",
+          group: "AI",
+          icon: "chat-new",
           label: "New AI chat",
           run: () => {
             setOpen(false);
@@ -198,7 +221,8 @@ export function CommandPalette() {
         },
         {
           id: "action-chat-history",
-          group: "Actions",
+          group: "AI",
+          icon: "chat-history",
           label: "AI chat history",
           run: () => {
             setOpen(false);
@@ -210,7 +234,8 @@ export function CommandPalette() {
     if (editorActions.canRevert && revertDoc) {
       list.push({
         id: "action-revert",
-        group: "Actions",
+        group: "Editing",
+        icon: "revert",
         label: "Revert file",
         hint: "Drop my uncommitted changes to this document",
         run: () => {
@@ -222,35 +247,29 @@ export function CommandPalette() {
     list.push(
       {
         id: "action-workspaces",
-        group: "Actions",
+        group: "Go to",
+        icon: "workspaces",
         label: "All workspaces",
         run: go("/workspaces"),
       },
       {
         id: "action-new-ws",
-        group: "Actions",
+        group: "Go to",
+        icon: "workspace-new",
         label: "Create workspace",
         run: go("/workspaces/new"),
       },
       {
         id: "action-account",
-        group: "Actions",
+        group: "Go to",
+        icon: "account",
         label: "User settings",
         run: go("/account"),
       },
-      {
-        id: "action-theme",
-        group: "Appearance",
-        label: `Theme: ${THEME_LABEL[preference]}`,
-        hint: "Toggle",
-        run: () => {
-          cyclePreference();
-          setOpen(false);
-        },
-      },
       {
         id: "action-logout",
-        group: "Actions",
+        group: "Go to",
+        icon: "logout",
         label: "Log out",
         run: () => {
           setOpen(false);
@@ -258,12 +277,25 @@ export function CommandPalette() {
         },
       },
     );
+    list.push({
+      id: "action-theme",
+      group: "Appearance",
+      icon: "theme",
+      label: `Theme: ${THEME_LABEL[preference]}`,
+      hint: "Toggle",
+      run: () => {
+        cyclePreference();
+        setOpen(false);
+      },
+    });
     if (isStudioDev()) {
       list.push({
         id: "action-ui-kit",
-        group: "Actions",
+        group: "Go to",
+        icon: "ui-kit",
         label: "Open UI kit",
         hint: "/__ui",
+        searchOnly: true,
         run: go("/__ui"),
       });
     }
@@ -271,7 +303,9 @@ export function CommandPalette() {
       list.push({
         id: `ws-${ws.id}`,
         group: "Workspaces",
+        icon: "workspace",
         label: ws.name,
+        searchOnly: true,
         run: go(workspaceHomePath(ws.slug)),
       });
     }
@@ -280,34 +314,44 @@ export function CommandPalette() {
         {
           id: "settings-general",
           group: "Settings",
+          icon: "settings-general",
           label: "General settings",
+          searchOnly: true,
           run: go(settingsPath(workspaceNav.workspaceSlug, "general")),
         },
         {
           id: "settings-github",
           group: "Settings",
+          icon: "settings-github",
           label: "GitHub settings",
+          searchOnly: true,
           run: go(settingsPath(workspaceNav.workspaceSlug, "github")),
         },
         {
           id: "settings-schema",
           group: "Settings",
+          icon: "settings-schema",
           label: "Schema settings",
+          searchOnly: true,
           run: go(settingsPath(workspaceNav.workspaceSlug, "schema")),
         },
         {
           id: "settings-mcp",
           group: "Settings",
+          icon: "connectors",
           label: "Connectors",
+          searchOnly: true,
           run: go(settingsPath(workspaceNav.workspaceSlug, "mcp")),
         },
       );
       for (const contentType of workspaceNav.contentTypes) {
         list.push({
           id: `type-${contentType}`,
-          group: "Documents",
+          group: "Content",
+          icon: "content-type",
           label: contentType,
-          hint: "Type",
+          hint: "Content type",
+          searchOnly: true,
           run: go(contentTypePath(workspaceNav.workspaceSlug, contentType)),
         });
       }
@@ -315,8 +359,17 @@ export function CommandPalette() {
         list.push({
           id: `doc-${doc.locale}-${doc.type}-${doc.slug}`,
           group: "Documents",
+          icon: "document",
           label: `${doc.type}/${doc.slug}`,
-          hint: doc.status === "clean" ? doc.locale : `${doc.locale} · ${doc.status === "added" ? "new" : doc.status}`,
+          searchOnly: true,
+          hint:
+            doc.status === "clean"
+              ? undefined
+              : doc.status === "added"
+                ? "New"
+                : doc.status === "modified"
+                  ? "Modified"
+                  : doc.status,
           run: go(
             contentDocPath(
               workspaceNav.workspaceSlug,
@@ -347,16 +400,19 @@ export function CommandPalette() {
   ]);
 
   const groups = useMemo<ItemGroup[]>(() => {
-    const order: string[] = [];
     const map = new Map<string, Item[]>();
     for (const item of items) {
-      if (!map.has(item.group)) {
-        map.set(item.group, []);
-        order.push(item.group);
-      }
-      map.get(item.group)!.push(item);
+      const bucket = map.get(item.group);
+      if (bucket) bucket.push(item);
+      else map.set(item.group, [item]);
     }
-    return order.map((group) => ({ value: group, items: map.get(group)! }));
+    const rank = (name: string) => {
+      const index = GROUP_ORDER.indexOf(name as (typeof GROUP_ORDER)[number]);
+      return index === -1 ? GROUP_ORDER.length : index;
+    };
+    return [...map.entries()]
+      .sort(([a], [b]) => rank(a) - rank(b))
+      .map(([group, groupItems]) => ({ value: group, items: groupItems }));
   }, [items]);
 
   return (
@@ -375,21 +431,26 @@ export function CommandPalette() {
     >
       <Dialog.Root open={open} onOpenChange={setOpen}>
         <Dialog.Portal>
-          <Dialog.Backdrop {...stylex.props(styles.backdrop)} />
-          <Dialog.Popup {...stylex.props(styles.popup)} initialFocus={inputRef}>
+          <Dialog.Backdrop {...stylex.props(styles.backdrop, glass.backdrop)} />
+          <Dialog.Popup {...stylex.props(styles.popup, glass.popup)} initialFocus={inputRef}>
             <Dialog.Title {...stylex.props(styles.srOnly)}>Command palette</Dialog.Title>
             <Dialog.Description {...stylex.props(styles.srOnly)}>
               Jump to pages or run save, commit, and other actions.
             </Dialog.Description>
-            <Combobox.Input
-              ref={inputRef}
-              placeholder="Go to or run…"
-              aria-label="Command palette search"
-              autoComplete="off"
-              spellCheck={false}
-              className={cx(styles.input)}
-            />
-            <p {...stylex.props(styles.caption)}>↑↓ move · ↵ run · esc close</p>
+            <div {...stylex.props(styles.inputRow)}>
+              <span {...stylex.props(styles.inputIcon)} aria-hidden>
+                <SearchIcon size={15} />
+              </span>
+              <Combobox.Input
+                ref={inputRef}
+                placeholder="Go to or run…"
+                aria-label="Command palette search"
+                autoComplete="off"
+                spellCheck={false}
+                data-no-ring=""
+                className={cx(styles.input)}
+              />
+            </div>
             <div {...stylex.props(styles.results)}>
               <Combobox.Empty className={cx(styles.empty)}>No matches</Combobox.Empty>
               <Combobox.List>
@@ -404,10 +465,15 @@ export function CommandPalette() {
                           key={item.id}
                           value={item}
                           className={(state) =>
-                            cx(styles.item, state.highlighted && styles.itemActive)
+                            cx(styles.item, state.highlighted && glass.itemActive)
                           }
                         >
-                          <span>{item.label}</span>
+                          <span {...stylex.props(styles.itemMain)}>
+                            <span {...stylex.props(styles.itemIcon)}>
+                              <PaletteIcon id={item.icon} />
+                            </span>
+                            <span {...stylex.props(styles.itemLabel)}>{item.label}</span>
+                          </span>
                           <span {...stylex.props(styles.meta)}>
                             {item.hint ? (
                               <span {...stylex.props(styles.hint)}>{item.hint}</span>
@@ -431,6 +497,7 @@ export function CommandPalette() {
 }
 
 function filterItem(item: Item, query: string) {
+  if (!query.trim() && item.searchOnly) return false;
   return (
     matches(query, item.label) ||
     matches(query, item.group) ||
@@ -439,12 +506,55 @@ function filterItem(item: Item, query: string) {
   );
 }
 
+const glassLight = stylex.create({
+  backdrop: {
+    backgroundColor: "rgba(24, 24, 27, 0.28)",
+    backdropFilter: "blur(6px)",
+  },
+  popup: {
+    backgroundColor: "rgba(255, 255, 255, 0.78)",
+    backdropFilter: "blur(28px) saturate(1.15)",
+    borderColor: "rgba(255, 255, 255, 0.72)",
+    boxShadow:
+      "0 28px 80px rgba(24, 24, 27, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.55) inset",
+    "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": {
+      backgroundColor: colors.bgSurface,
+      borderColor: colors.border,
+      boxShadow: "0 16px 48px rgba(24, 24, 27, 0.2)",
+    },
+  },
+  itemActive: {
+    backgroundColor: "rgba(24, 24, 27, 0.06)",
+  },
+});
+
+const glassDark = stylex.create({
+  backdrop: {
+    backgroundColor: "rgba(0, 0, 0, 0.42)",
+    backdropFilter: "blur(8px)",
+  },
+  popup: {
+    backgroundColor: "rgba(36, 36, 40, 0.72)",
+    backdropFilter: "blur(28px) saturate(1.25)",
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    boxShadow:
+      "0 28px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07) inset",
+    "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))": {
+      backgroundColor: colors.bgSurface,
+      borderColor: colors.border,
+      boxShadow: "0 16px 48px rgba(0, 0, 0, 0.45)",
+    },
+  },
+  itemActive: {
+    backgroundColor: "rgba(255, 255, 255, 0.09)",
+  },
+});
+
 const styles = stylex.create({
   backdrop: {
     position: "fixed",
     inset: 0,
     zIndex: z.overlay,
-    backgroundColor: colors.overlay,
   },
   popup: {
     position: "fixed",
@@ -453,53 +563,63 @@ const styles = stylex.create({
     zIndex: z.palette,
     width: "min(520px, calc(100vw - 32px))",
     transform: "translateX(-50%)",
-    borderRadius: radius.md,
+    borderRadius: 14,
     borderWidth: 1,
     borderStyle: "solid",
-    borderColor: colors.border,
-    backgroundColor: colors.bgSurface,
     overflow: "hidden",
     outline: "none",
     "@media (prefers-reduced-motion: reduce)": {
       transitionDuration: "0ms",
     },
   },
+  inputRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    paddingInline: space.xl,
+    paddingTop: space.lg,
+    paddingBottom: space.md,
+  },
+  inputIcon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
   input: {
     display: "block",
     width: "100%",
+    minWidth: 0,
     borderWidth: 0,
     backgroundColor: "transparent",
     color: colors.text,
-    paddingInline: space.xl,
-    paddingTop: space.lg,
-    paddingBottom: space.sm,
+    padding: 0,
     fontSize: type.lg,
     outline: "none",
-  },
-  caption: {
-    margin: 0,
-    paddingInline: space.xl,
-    paddingBottom: space.md,
-    borderBottomWidth: 1,
-    borderBottomStyle: "solid",
-    borderBottomColor: colors.border,
-    color: colors.textMuted,
-    fontFamily: type.mono,
-    fontSize: type.xs,
-    lineHeight: 1.45,
+    boxShadow: "none",
+    ":focus": {
+      outline: "none",
+    },
+    ":focus-visible": {
+      outline: "none",
+    },
+    "::placeholder": {
+      color: colors.textMuted,
+    },
   },
   results: {
-    maxHeight: "320px",
+    maxHeight: "min(52vh, 440px)",
     overflowY: "auto",
-    paddingBlock: space.sm,
+    paddingTop: 0,
+    paddingBottom: space.md,
   },
   group: {
     margin: 0,
     paddingInline: space.xl,
-    paddingBlock: space.sm,
+    paddingTop: space.md,
+    paddingBottom: space.sm,
     fontSize: type.xs,
-    fontWeight: 600,
-    letterSpacing: "0.08em",
+    fontWeight: 500,
+    letterSpacing: "0.04em",
     textTransform: "uppercase",
     color: colors.textMuted,
   },
@@ -513,14 +633,31 @@ const styles = stylex.create({
     borderWidth: 0,
     backgroundColor: "transparent",
     paddingInline: space.xl,
-    paddingBlock: space.md,
+    paddingBlock: 10,
     textAlign: "left",
     fontSize: type.md,
     fontWeight: 500,
     color: colors.text,
   },
-  itemActive: {
-    backgroundColor: colors.bgActive,
+  itemMain: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    minWidth: 0,
+    flex: 1,
+  },
+  itemIcon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 18,
+    color: colors.textMuted,
+  },
+  itemLabel: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
   },
   hint: {
     color: colors.textMuted,