𝗜 𝗥𝗲𝗯𝘂𝗶𝗹𝘁 𝘁𝗵𝗲 𝗖𝗺𝗱-𝗞 𝗖𝗼𝗺𝗺𝗮𝗻𝗱 𝗣𝗮𝗹𝗲𝘁𝘁𝗲 𝗶𝗻 𝟲𝟬 𝗟𝗶𝗻𝗲𝘀

Aplikasi seperti Linear, Raycast, dan VS Code menggunakan command palette. Anda menekan ⌘K, mengetik beberapa huruf, lalu menekan Enter. Rasanya kompleks. Padahal sebenarnya hanya butuh 60 baris JavaScript.

Berikut cara membangunnya:

  1. Keyboard Listener Anda memerlukan listener global. Browser menggunakan Ctrl+K untuk pencarian. Anda harus menggunakan preventDefault untuk menghentikan hal ini.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Command Data Simpan setiap aksi sebagai sebuah objek. UI tetap sederhana. Ia akan menampilkan daftar objek ini dan menjalankan fungsi yang Anda pilih. Menambahkan fitur baru berarti hanya menambah satu baris ke dalam daftar Anda.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Fuzzy Search Command palette yang bagus menggunakan subsequence matching. Ini berarti karakter harus muncul secara berurutan, tetapi tidak harus berdampingan. Mengetik "tgldk" seharusnya dapat menemukan "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 Keyboard Tujuannya adalah agar tidak perlu lagi menggunakan mouse. Gunakan tombol panah (Arrow keys) untuk mengubah indeks seleksi. Gunakan Enter untuk menjalankan perintah. Gunakan Escape untuk menutup menu.

  2. Sensasi Instan Berikan fokus pada kolom input tepat saat palette terbuka. Ini memungkinkan Anda untuk langsung mengetik tanpa harus melakukan klik.

Sebuah command palette membutuhkan empat hal:

Bangunlah ini sekali saja untuk memahami cara kerja alat-alat modern bagi power-user.

Coba 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