میں نے 60 لائنوں میں Cmd-K کمانڈ پیلیٹ (Command Palette) دوبارہ بنایا

Linear، Raycast، اور VS Code جیسی ایپس کمانڈ پیلیٹ استعمال کرتی ہیں۔ آپ ⌘K دباتے ہیں، چند حروف ٹائپ کرتے ہیں، اور Enter دباتے ہیں۔ یہ پیچیدہ محسوس ہوتا ہے، لیکن حقیقت میں یہ صرف 60 لائنوں کا JavaScript کوڈ ہے۔

اسے بنانے کا طریقہ یہ ہے:

  1. کی بورڈ لسنر (The Keyboard Listener) آپ کو ایک گلوبل لسنر کی ضرورت ہے۔ براؤزرز سرچ کے لیے Ctrl+K استعمال کرتے ہیں۔ اسے روکنے کے لیے آپ کو preventDefault استعمال کرنا ہوگا۔
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. کمانڈ ڈیٹا (Command Data) ہر ایکشن کو ایک آبجیکٹ (object) کے طور پر محفوظ کریں۔ UI سادہ رہتا ہے۔ یہ ان آبجیکٹس کی فہرست بناتا ہے اور آپ کے منتخب کردہ فنکشن کو چلا دیتا ہے۔ نیا فیچر شامل کرنے کا مطلب ہے اپنی فہرست میں صرف ایک لائن کا اضافہ کرنا۔
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. فزی سرچ (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;
}

  1. کی بورڈ نیویگیشن (Keyboard Navigation) مقصد ماؤس کا استعمال ختم کرنا ہے۔ سلیکشن انڈیکس (selection index) تبدیل کرنے کے لیے ایرو (Arrow) کیز استعمال کریں۔ کمانڈ چلانے کے لیے Enter استعمال کریں۔ مینو بند کرنے کے لیے Escape استعمال کریں۔

  2. فوری احساس (The Instant Feel) جیسے ہی پیلیٹ کھلے، ان پٹ فیلڈ کو فوکس (focus) کر دیں۔ اس سے آپ بغیر کلک کیے ٹائپ کر سکتے ہیں۔

ایک کمانڈ پیلیٹ کے لیے چار چیزوں کی ضرورت ہوتی ہے:

جدید پاور-یوزر ٹولز کے کام کرنے کے طریقے کو سمجھنے کے لیے اسے ایک بار خود بنائیں۔

اسے لائیو آزمائیں: 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