Eu reconstruí a Command Palette do Cmd-K em 60 linhas

Apps como Linear, Raycast e VS Code usam uma command palette. Você pressiona ⌘K, digita algumas letras e aperta Enter. Parece complexo. Na verdade, são apenas 60 linhas de JavaScript.

Veja como construí-la:

  1. O Listener de Teclado Você precisa de um listener global. Os navegadores usam Ctrl+K para pesquisa. Você deve usar o preventDefault para impedir isso.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Dados de Comando Armazene cada ação como um objeto. A UI permanece simples. Ela lista esses objetos e executa a função que você escolher. Adicionar um novo recurso significa adicionar apenas uma linha à sua lista.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Busca Fuzzy Boas palettes usam correspondência de subsequência. Isso significa que os caracteres devem aparecer em ordem, mas não precisam estar um ao lado do outro. Digitar "tgldk" deve encontrar "Toggle dark mode".
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. Navegação por Teclado O objetivo é parar de usar o mouse. Use as teclas de seta para alterar o índice de seleção. Use Enter para executar o comando. Use Escape para fechar o menu.

  2. A Sensação de Resposta Instantânea Coloque o foco no campo de entrada no momento em que a palette abrir. Isso permite que você digite sem precisar clicar.

Uma command palette precisa de quatro coisas:

Construa isso uma vez para entender como as ferramentas modernas para power-users funcionam.

Experimente ao vivo: https://dev48v.infy.uk/design/day10-command-palette.html

Fonte: https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l