Saya Membina Semula Command Palette Cmd-K dalam 60 Baris

Aplikasi seperti Linear, Raycast, dan VS Code menggunakan command palette. Anda tekan ⌘K, taip beberapa huruf, dan tekan Enter. Ia terasa kompleks. Sebenarnya, ia hanya memerlukan 60 baris JavaScript.

Berikut adalah cara anda membinanya:

  1. Pendengar Papan Kekunci (Keyboard Listener) Anda memerlukan pendengar global. Pelayar web menggunakan Ctrl+K untuk carian. Anda mesti menggunakan preventDefault untuk menghentikannya.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Data Arahan (Command Data) Simpan setiap tindakan sebagai objek. UI kekal ringkas. Ia menyenaraikan objek-objek ini dan menjalankan fungsi yang anda pilih. Menambah ciri baharu bermakna hanya menambah satu baris ke dalam senarai anda.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Carian Kabur (Fuzzy Search) Command palette yang baik menggunakan padanan suburutan (subsequence matching). Ini bermakna aksara mesti muncul mengikut urutan, tetapi tidak perlu berada bersebelahan. Menaip "tgldk" sepatutnya dapat mencari "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. Navigasi Papan Kekunci Matlamatnya adalah untuk berhenti menggunakan tetikus. Gunakan kekunci Anak Panah (Arrow keys) untuk menukar indeks pilihan. Gunakan Enter untuk menjalankan arahan. Gunakan Escape untuk menutup menu.

  2. Rasa Segera (Instant Feel) Fokuskan medan input sebaik sahaja palette dibuka. Ini membolehkan anda menaip tanpa perlu klik.

Sebuah command palette memerlukan empat perkara:

Bina ini sekali untuk memahami bagaimana alatan pengguna mahir (power-user) moden berfungsi.

Cuba secara langsung: https://dev48v.infy.uk/design/day10-command-palette.html

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