plainleaf/client/components/command_palette.tsx

import { FilterList } from "./filter.tsx";
import { Terminal } from "preact-feather";
import type { Command } from "../types/command.ts";
import type { FilterOption } from "@silverbulletmd/silverbullet/type/client";
import { isMacLike, prettifyShortcut } from "../../plug-api/lib/shortcut.ts";
import { commandNameZhCN } from "../lib/zh_cn.ts";

export function commandOptions(commands: Map<string, Command>): FilterOption[] {
  const options: FilterOption[] = [];
  for (const [name, def] of commands.entries()) {
    if (def.hide) continue;

    options.push({
      name: commandNameZhCN(name),
      description: name,
      hint: keyboardHint(def),
      meta: { commandName: name, aliases: [name] },
      orderId:
        def.lastRun !== undefined ? -def.lastRun : -(Number(def.priority) || 0),
    });
  }
  return options;
}

export function CommandPalette({
  commands,
  onTrigger,
  darkMode,
}: {
  commands: Map<string, Command>;
  darkMode?: boolean;
  onTrigger: (command: Command | undefined) => void;
}) {
  const options = commandOptions(commands);
  return (
    <FilterList
      label="运行命令"
      placeholder="搜索命令"
      options={options}
      allowNew={false}
      icon={Terminal}
      darkMode={darkMode}
      helpText="输入命令名称进行筛选，按 <code>Enter</code> 运行。"
      onSelect={(opt) => {
        if (opt) {
          onTrigger(commands.get(opt.meta.commandName));
        } else {
          onTrigger(undefined);
        }
      }}
    />
  );
}

export function keyboardHint(def: {
  key?: string | string[];
  mac?: string | string[];
}): string | undefined {
  const shortcuts: string[] = [];
  if (isMacLike && def.mac) {
    if (Array.isArray(def.mac)) {
      shortcuts.push(...def.mac);
    } else {
      shortcuts.push(def.mac);
    }
  } else if (def.key) {
    if (Array.isArray(def.key)) {
      shortcuts.push(...def.key);
    } else {
      shortcuts.push(def.key);
    }
  }
  return shortcuts.length > 0
    ? shortcuts.map(prettifyShortcut).join(" | ")
    : undefined;
}