Odtworzyłem paletę poleceń Cmd-K w 60 liniach

Aplikacje takie jak Linear, Raycast i VS Code korzystają z palety poleceń. Naciskasz ⌘K, wpisujesz kilka liter i zatwierdzasz klawiszem Enter. Wydaje się to skomplikowane, a w rzeczywistości to tylko 60 linii JavaScriptu.

Oto jak ją zbudować:

  1. Nasłuchiwanie klawiatury Potrzebujesz globalnego listenera. Przeglądarki używają Ctrl+K do wyszukiwania. Musisz użyć preventDefault, aby to zablokować.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Dane poleceń Przechowuj każdą akcję jako obiekt. Interfejs użytkownika (UI) pozostaje prosty. Wyświetla on listę tych obiektów i uruchamia wybraną funkcję. Dodanie nowej funkcji oznacza dodanie jednej linii do Twojej listy.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Wyszukiwanie rozmyte (Fuzzy Search) Dobre palety wykorzystują dopasowywanie podciągów (subsequence matching). Oznacza to, że znaki muszą pojawiać się w odpowiedniej kolejności, ale nie muszą sąsiadować ze sobą. Wpisanie „tgldk” powinno znaleźć „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. Nawigacja klawiaturą Celem jest rezygnacja z używania myszy. Używaj strzałek, aby zmieniać indeks wyboru. Używaj Enter, aby uruchomić polecenie. Używaj Escape, aby zamknąć menu.

  2. Wrażenie natychmiastowości Skup uwagę (focus) na polu tekstowym w momencie otwarcia palety. Pozwala to na pisanie bez konieczności klikania.

Paleta poleceń wymaga czterech rzeczy:

Zbuduj to raz, aby zrozumieć, jak działają nowoczesne narzędzia dla zaawansowanych użytkowników.

Wypróbuj na żywo: https://dev48v.infy.uk/design/day10-command-palette.html

Źródło: https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l