আমি ৬০ লাইনে Cmd-K কমান্ড প্যালেটটি পুনরায় তৈরি করেছি

Linear, Raycast এবং VS Code-এর মতো অ্যাপগুলো একটি কমান্ড প্যালেট ব্যবহার করে। আপনি ⌘K চাপেন, কয়েকটি অক্ষর টাইপ করেন এবং Enter চাপেন। এটি দেখতে জটিল মনে হলেও আসলে এটি মাত্র ৬০ লাইনের JavaScript কোড।

এটি যেভাবে তৈরি করবেন:

১. কিবোর্ড লিসেনার (The Keyboard Listener) আপনার একটি গ্লোবাল লিসেনার প্রয়োজন। ব্রাউজার সার্চের জন্য Ctrl+K ব্যবহার করে। এটি বন্ধ করতে আপনাকে অবশ্যই preventDefault ব্যবহার করতে হবে।

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

২. কমান্ড ডেটা (Command Data) প্রতিটি অ্যাকশনকে একটি অবজেক্ট হিসেবে সংরক্ষণ করুন। এতে 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) প্যালেটটি খোলার সাথে সাথেই ইনপুট ফিল্ডটিকে ফোকাস করুন। এতে ক্লিক না করেই আপনি টাইপ করতে পারবেন।

একটি কমান্ড প্যালেটের জন্য চারটি জিনিস প্রয়োজন:

আধুনিক পাওয়ার-ইউজার টুলগুলো কীভাবে কাজ করে তা বুঝতে এটি একবার তৈরি করে দেখুন।

লাইভ ট্রাই করুন: 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