من پالت دستور (Command Palette) ⌘K را در ۶۰ خط بازسازی کردم

اپلیکیشن‌هایی مانند Linear، Raycast و VS Code از یک پالت دستور (command palette) استفاده می‌کنند. شما ⌘K را فشار می‌دهید، چند حرف تایپ می‌کنید و Enter را می‌زنید. این قابلیت پیچیده به نظر می‌رسد، اما در واقع تنها ۶۰ خط کد JavaScript است.

روش ساخت آن به این صورت است:

۱. شنونده کیبورد (The Keyboard Listener) شما به یک شنونده سراسری (global listener) نیاز دارید. مرورگرها از Ctrl+K برای جستجو استفاده می‌کنند. برای جلوگیری از این کار، باید از preventDefault استفاده کنید.

document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});

۲. داده‌های دستور (Command Data) هر عملیات را به عنوان یک شیء (object) ذخیره کنید. رابط کاربری (UI) ساده باقی می‌ماند؛ این رابط، اشیاء را لیست کرده و تابعی را که انتخاب کرده‌اید اجرا می‌کند. اضافه کردن یک قابلیت جدید یعنی اضافه کردن تنها یک خط به لیست خودتان.

const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];

۳. جستجوی فازی (Fuzzy Search) پالت‌های خوب از تطبیق زیردنباله (subsequence matching) استفاده می‌کنند. این یعنی کاراکترها باید به ترتیب ظاهر شوند، اما لزوماً نباید پشت سر هم باشند. تایپ کردن "tgldk" باید عبارت "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;
}

۴. ناوبری با کیبورد (Keyboard Navigation) هدف این است که دیگر از ماوس استفاده نکنید. از کلیدهای جهت‌نما (Arrow keys) برای تغییر ایندکس انتخاب استفاده کنید. از Enter برای اجرای دستور و از Escape برای بستن منو استفاده کنید.

۵. حس آنی (The Instant Feel) به محض باز شدن پالت، فیلد ورودی را فوکوس (focus) کنید. این کار به شما اجازه می‌دهد بدون کلیک کردن، شروع به تایپ کنید.

یک پالت دستور به چهار مورد نیاز دارد:

یک بار این را بسازید تا درک کنید ابزارهای مدرن برای کاربران حرفه‌ای (power-user) چگونه کار می‌کنند.

نسخه زنده را امتحان کنید: https://dev48v.infy.uk/design/day10-command-palette.html

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