@backmatter/studio 0.0.1

package/src/chrome/CommandPalette.tsx

@@ -0,0 +1,559 @@
+// packages/studio/src/chrome/CommandPalette.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import { Combobox } from "@base-ui/react/combobox";
+import { Dialog } from "@base-ui/react/dialog";
+import * as stylex from "@stylexjs/stylex";
+import {
+  commitWorkspace,
+  countConflicts,
+  notifyHeadChanged,
+  notifyTreeChanged,
+  publishCommittedFiles,
+  pullFromGithub,
+} from "../api";
+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 { useTheme } from "../theme/ThemeProvider";
+import { cx } from "../ui/popup";
+import { useEditorActions } from "./EditorActionsContext";
+import {
+  matchAppHotkey,
+  modifierSymbol,
+  previewSiteOrigin,
+} from "./hotkeys";
+import { parsePreviewMessage } from "@backmatter/core/preview";
+import { useWorkspaceNav } from "./WorkspaceNavContext";
+import {
+  contentDocPath,
+  contentTypePath,
+  settingsPath,
+  workspaceHomePath,
+} from "../workspace-path";
+
+type Item = {
+  id: string;
+  group: string;
+  label: string;
+  hint?: string;
+  shortcut?: string;
+  run: () => void;
+};
+
+type ItemGroup = { value: string; items: Item[] };
+
+const THEME_LABEL = {
+  system: "System",
+  light: "Light",
+  dark: "Dark",
+} as const;
+
+function matches(query: string, text: string) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return true;
+  return text.toLowerCase().includes(needle);
+}
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const replica = useReplicaState();
+  const workspaces = replica.control?.workspaces ?? [];
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+  const workspaceNav = useWorkspaceNav();
+  const editorActions = useEditorActions();
+  const { onLogout } = useAppChrome();
+  const { preference, cyclePreference } = useTheme();
+  const chat = useChatUIOptional();
+  const mod = modifierSymbol();
+
+  const saveDocAction = editorActions.save;
+  const revertDoc = editorActions.revert;
+  const toggleChat = chat?.aiAvailable ? chat.dispatch : null;
+
+  useEffect(() => {
+    function runHotkey(action: ReturnType<typeof matchAppHotkey>) {
+      if (action === "palette") {
+        setOpen((v) => !v);
+      } else if (action === "save") {
+        void saveDocAction?.();
+      } else if (action === "chat") {
+        toggleChat?.({ type: "toggle" });
+      }
+    }
+
+    function onKey(e: KeyboardEvent) {
+      const action = matchAppHotkey(e);
+      if (!action) return;
+      e.preventDefault();
+      runHotkey(action);
+    }
+
+    function onMessage(e: MessageEvent) {
+      const expected = previewSiteOrigin(workspaceNav?.siteUrls);
+      if (!expected || e.origin !== expected) return;
+      const message = parsePreviewMessage(e.data);
+      if (!message || message.type !== "backmatter:hotkey") return;
+      const action = matchAppHotkey(message);
+      if (!action) return;
+      runHotkey(action);
+    }
+
+    document.addEventListener("keydown", onKey, true);
+    window.addEventListener("message", onMessage);
+    return () => {
+      document.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [saveDocAction, toggleChat, workspaceNav?.siteUrls]);
+
+  const docs = workspaceNav
+    ? replica.docs(workspaceNav.workspaceId)
+    : [];
+  const git = workspaceNav ? replica.git(workspaceNav.workspaceId) : null;
+
+  const items = useMemo<Item[]>(() => {
+    const go = (path: string) => () => {
+      setOpen(false);
+      navigate(path);
+    };
+    const list: Item[] = [];
+    if (saveDocAction) {
+      list.push({
+        id: "action-save",
+        group: "Actions",
+        label: "Save",
+        shortcut: `${mod}S`,
+        run: () => {
+          setOpen(false);
+          void saveDocAction();
+        },
+      });
+    }
+    if (workspaceNav && git && git.changes.length > 0) {
+      const workspaceId = workspaceNav.workspaceId;
+      const count = git.changes.length;
+      const conflicts = countConflicts(git);
+      list.push({
+        id: "action-commit",
+        group: "Actions",
+        label:
+          conflicts > 0
+            ? `Commit blocked: ${conflicts} ${conflicts === 1 ? "conflict" : "conflicts"}`
+            : `Commit ${count} ${count === 1 ? "file" : "files"} to ${git.currentBranch}`,
+        hint: conflicts > 0 ? "Resolve conflicts in the editor first" : "Uses the default message",
+        run: () => {
+          setOpen(false);
+          if (conflicts > 0) return;
+          void commitWorkspace(workspaceId)
+            .then((result) => {
+              publishCommittedFiles(workspaceId, result.files);
+            })
+            .catch(() => {
+              notifyTreeChanged();
+            });
+        },
+      });
+    }
+    if (workspaceNav) {
+      const workspaceId = workspaceNav.workspaceId;
+      list.push({
+        id: "action-pull",
+        group: "Actions",
+        label: "Pull from GitHub",
+        hint: "Re-import the branch if a push was missed",
+        run: () => {
+          setOpen(false);
+          void pullFromGithub(workspaceId).then(() => {
+            notifyHeadChanged();
+            notifyTreeChanged();
+          });
+        },
+      });
+    }
+    if (chat?.aiAvailable) {
+      list.push(
+        {
+          id: "action-chat",
+          group: "Actions",
+          label: "Open AI chat",
+          shortcut: `${mod}J`,
+          run: () => {
+            setOpen(false);
+            chat.dispatch({ type: "open" });
+          },
+        },
+        {
+          id: "action-chat-new",
+          group: "Actions",
+          label: "New AI chat",
+          run: () => {
+            setOpen(false);
+            chat.newThread();
+            chat.dispatch({ type: "open" });
+          },
+        },
+        {
+          id: "action-chat-history",
+          group: "Actions",
+          label: "AI chat history",
+          run: () => {
+            setOpen(false);
+            chat.dispatch({ type: "showHistory" });
+          },
+        },
+      );
+    }
+    if (editorActions.canRevert && revertDoc) {
+      list.push({
+        id: "action-revert",
+        group: "Actions",
+        label: "Revert file",
+        hint: "Drop my uncommitted changes to this document",
+        run: () => {
+          setOpen(false);
+          void revertDoc();
+        },
+      });
+    }
+    list.push(
+      {
+        id: "action-workspaces",
+        group: "Actions",
+        label: "All workspaces",
+        run: go("/workspaces"),
+      },
+      {
+        id: "action-new-ws",
+        group: "Actions",
+        label: "Create workspace",
+        run: go("/workspaces/new"),
+      },
+      {
+        id: "action-account",
+        group: "Actions",
+        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",
+        label: "Log out",
+        run: () => {
+          setOpen(false);
+          onLogout();
+        },
+      },
+    );
+    if (isStudioDev()) {
+      list.push({
+        id: "action-ui-kit",
+        group: "Actions",
+        label: "Open UI kit",
+        hint: "/__ui",
+        run: go("/__ui"),
+      });
+    }
+    for (const ws of workspaces) {
+      list.push({
+        id: `ws-${ws.id}`,
+        group: "Workspaces",
+        label: ws.name,
+        run: go(workspaceHomePath(ws.slug)),
+      });
+    }
+    if (workspaceNav) {
+      list.push(
+        {
+          id: "settings-general",
+          group: "Settings",
+          label: "General settings",
+          run: go(settingsPath(workspaceNav.workspaceSlug, "general")),
+        },
+        {
+          id: "settings-github",
+          group: "Settings",
+          label: "GitHub settings",
+          run: go(settingsPath(workspaceNav.workspaceSlug, "github")),
+        },
+        {
+          id: "settings-schema",
+          group: "Settings",
+          label: "Schema settings",
+          run: go(settingsPath(workspaceNav.workspaceSlug, "schema")),
+        },
+        {
+          id: "settings-mcp",
+          group: "Settings",
+          label: "Connectors",
+          run: go(settingsPath(workspaceNav.workspaceSlug, "mcp")),
+        },
+      );
+      for (const contentType of workspaceNav.contentTypes) {
+        list.push({
+          id: `type-${contentType}`,
+          group: "Documents",
+          label: contentType,
+          hint: "Type",
+          run: go(contentTypePath(workspaceNav.workspaceSlug, contentType)),
+        });
+      }
+      for (const doc of docs) {
+        list.push({
+          id: `doc-${doc.locale}-${doc.type}-${doc.slug}`,
+          group: "Documents",
+          label: `${doc.type}/${doc.slug}`,
+          hint: doc.status === "clean" ? doc.locale : `${doc.locale} · ${doc.status === "added" ? "new" : doc.status}`,
+          run: go(
+            contentDocPath(
+              workspaceNav.workspaceSlug,
+              doc.type,
+              doc.slug,
+              doc.locale,
+              workspaceNav.defaultLocale,
+            ),
+          ),
+        });
+      }
+    }
+    return list;
+  }, [
+    chat,
+    cyclePreference,
+    revertDoc,
+    docs,
+    editorActions.canRevert,
+    git,
+    mod,
+    navigate,
+    onLogout,
+    preference,
+    saveDocAction,
+    workspaceNav,
+    workspaces,
+  ]);
+
+  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);
+    }
+    return order.map((group) => ({ value: group, items: map.get(group)! }));
+  }, [items]);
+
+  return (
+    // Combobox owns filtering + keyboard navigation; Dialog owns the overlay.
+    // Binding both to the same `open` resets the query/highlight on close.
+    <Combobox.Root
+      inline
+      autoHighlight
+      open={open}
+      onOpenChange={setOpen}
+      items={groups}
+      value={null}
+      filter={filterItem}
+      itemToStringLabel={(item: Item) => item.label}
+      onValueChange={(item) => item?.run()}
+    >
+      <Dialog.Root open={open} onOpenChange={setOpen}>
+        <Dialog.Portal>
+          <Dialog.Backdrop {...stylex.props(styles.backdrop)} />
+          <Dialog.Popup {...stylex.props(styles.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.results)}>
+              <Combobox.Empty className={cx(styles.empty)}>No matches</Combobox.Empty>
+              <Combobox.List>
+                {(group: ItemGroup) => (
+                  <Combobox.Group key={group.value} items={group.items}>
+                    <Combobox.GroupLabel className={cx(styles.group)}>
+                      {group.value}
+                    </Combobox.GroupLabel>
+                    <Combobox.Collection>
+                      {(item: Item) => (
+                        <Combobox.Item
+                          key={item.id}
+                          value={item}
+                          className={(state) =>
+                            cx(styles.item, state.highlighted && styles.itemActive)
+                          }
+                        >
+                          <span>{item.label}</span>
+                          <span {...stylex.props(styles.meta)}>
+                            {item.hint ? (
+                              <span {...stylex.props(styles.hint)}>{item.hint}</span>
+                            ) : null}
+                            {item.shortcut ? (
+                              <span {...stylex.props(styles.shortcut)}>{item.shortcut}</span>
+                            ) : null}
+                          </span>
+                        </Combobox.Item>
+                      )}
+                    </Combobox.Collection>
+                  </Combobox.Group>
+                )}
+              </Combobox.List>
+            </div>
+          </Dialog.Popup>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </Combobox.Root>
+  );
+}
+
+function filterItem(item: Item, query: string) {
+  return (
+    matches(query, item.label) ||
+    matches(query, item.group) ||
+    (item.hint ? matches(query, item.hint) : false) ||
+    (item.shortcut ? matches(query, item.shortcut) : false)
+  );
+}
+
+const styles = stylex.create({
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    zIndex: z.overlay,
+    backgroundColor: colors.overlay,
+  },
+  popup: {
+    position: "fixed",
+    left: "50%",
+    top: "18vh",
+    zIndex: z.palette,
+    width: "min(520px, calc(100vw - 32px))",
+    transform: "translateX(-50%)",
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgSurface,
+    overflow: "hidden",
+    outline: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  input: {
+    display: "block",
+    width: "100%",
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    paddingInline: space.xl,
+    paddingTop: space.lg,
+    paddingBottom: space.sm,
+    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,
+  },
+  results: {
+    maxHeight: "320px",
+    overflowY: "auto",
+    paddingBlock: space.sm,
+  },
+  group: {
+    margin: 0,
+    paddingInline: space.xl,
+    paddingBlock: space.sm,
+    fontSize: type.xs,
+    fontWeight: 600,
+    letterSpacing: "0.08em",
+    textTransform: "uppercase",
+    color: colors.textMuted,
+  },
+  item: {
+    display: "flex",
+    width: "100%",
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    paddingInline: space.xl,
+    paddingBlock: space.md,
+    textAlign: "left",
+    fontSize: type.md,
+    fontWeight: 500,
+    color: colors.text,
+  },
+  itemActive: {
+    backgroundColor: colors.bgActive,
+  },
+  hint: {
+    color: colors.textMuted,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+  },
+  meta: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    flexShrink: 0,
+  },
+  shortcut: {
+    color: colors.textMuted,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+  },
+  empty: {
+    margin: 0,
+    // Combobox.Empty stays mounted while items exist; collapse it then.
+    padding: { default: space.xl, ":empty": 0 },
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  srOnly: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: 0,
+  },
+});