בניתי מחדש את ה-Cmd-K Command Palette ב-60 שורות

אפליקציות כמו Linear, Raycast ו-VS Code משתמשות ב-command palette. לוחצים על ⌘K, מקלידים כמה אותיות ולוחצים על Enter. זה מרגיש מורכב, אבל זה למעשה רק 60 שורות של JavaScript.

כך בונים את זה:

  1. מאזין מקלדת (Keyboard Listener) אתה צריך מאזין גלובלי. דפדפנים משתמשים ב-Ctrl+K לחיפוש. עליך להשתמש ב-preventDefault כדי למנוע זאת.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. נתוני פקודות (Command Data) שמור כל פעולה כאובייקט. ממשק המשתמש (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. ניווט באמצעות המקלדת המטרה היא להפסיק להשתמש בעכבר. השתמש במקשי החצים כדי לשנות את אינדקס הבחירה. השתמש ב-Enter כדי להריץ את הפקודה. השתמש ב-Escape כדי לסגור את התפריט.

  2. תחושה של תגובה מיידית (Instant Feel) העבר את הפוקוס לשדה הקלט ברגע שהפלטה נפתחת. זה מאפשר לך להקליד מבלי ללחוץ עם העכבר.

command palette זקוקה לארבעה דברים:

בנו את זה פעם אחת כדי להבין איך כלי 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