Reconstruí la paleta de comandos Cmd-K en 60 líneas

Aplicaciones como Linear, Raycast y VS Code utilizan una paleta de comandos. Presionas ⌘K, escribes unas pocas letras y pulsas Enter. Parece complejo, pero en realidad son solo 60 líneas de JavaScript.

Aquí te muestro cómo construirla:

  1. El escuchador de teclado (Keyboard Listener) Necesitas un escuchador global. Los navegadores usan Ctrl+K para buscar. Debes usar preventDefault para evitar esto.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Datos de comandos Almacena cada acción como un objeto. La interfaz de usuario (UI) se mantiene simple. Enumera estos objetos y ejecuta la función que elijas. Añadir una nueva funcionalidad significa añadir una sola línea a tu lista.
const COMMANDS = [
  { icon: "🌙", label: "Alternar modo oscuro", group: "Tema", run: toggleDark },
  { icon: "📄", label: "Nuevo archivo",         group: "Archivo",  run: newFile },
];
  1. Búsqueda difusa (Fuzzy Search) Las buenas paletas utilizan la coincidencia de subsecuencias. Esto significa que los caracteres deben aparecer en orden, pero no necesitan estar uno al lado del otro. Escribir "tgldk" debería encontrar "Alternar modo oscuro".
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. Navegación por teclado El objetivo es dejar de usar el ratón. Usa las teclas de flecha para cambiar el índice de selección. Usa Enter para ejecutar el comando. Usa Escape para cerrar el menú.

  2. Sensación de inmediatez Enfoca el campo de entrada en el momento en que se abre la paleta. Esto te permite escribir sin necesidad de hacer clic.

Una paleta de comandos necesita cuatro cosas:

Construye esto una vez para entender cómo funcionan las herramientas modernas para usuarios avanzados.

Pruébalo en vivo: https://dev48v.infy.uk/design/day10-command-palette.html

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