Ik heb de Cmd-K command palette herbouwd in 60 regels

Apps zoals Linear, Raycast en VS Code gebruiken een command palette. Je drukt op ⌘K, typt een paar letters en drukt op Enter. Het voelt complex aan. In werkelijkheid is het slechts 60 regels JavaScript.

Hier is hoe je het bouwt:

  1. De Keyboard Listener Je hebt een globale listener nodig. Browsers gebruiken Ctrl+K voor zoeken. Je moet preventDefault gebruiken om dit te voorkomen.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Command Data Sla elke actie op als een object. De UI blijft simpel. Deze toont een lijst van deze objecten en voert de functie uit die je kiest. Een nieuwe functie toevoegen betekent simpelweg één regel aan je lijst toevoegen.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Fuzzy Search Goede palettes gebruiken subsequence matching. Dit betekent dat tekens in de juiste volgorde moeten verschijnen, maar ze hoeven niet direct naast elkaar te staan. Het typen van "tgldk" zou "Toggle dark mode" moeten vinden.
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. Toetsenbordnavigatie Het doel is om de muis niet meer te gebruiken. Gebruik de pijltoetsen om de selectie-index te wijzigen. Gebruik Enter om het commando uit te voeren. Gebruik Escape om het menu te sluiten.

  2. Het directe gevoel Focus het invoerveld op het moment dat de palette opent. Hierdoor kun je typen zonder te klikken.

Een command palette heeft vier dingen nodig:

Bouw dit een keer om te begrijpen hoe moderne power-user tools werken.

Probeer het live: https://dev48v.infy.uk/design/day10-command-palette.html

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