Nimejenga upya Cmd-K Command Palette kwa Mistari 60

Programu kama Linear, Raycast, na VS Code hutumia command palette. Unabonyeza ⌘K, unaandika herufi chache, kisha unabonyeza Enter. Inaonekana kuwa ngumu. Kwa kweli, ni mistari 60 tu ya JavaScript.

Hivi ndivyo unavyoweza kuijenga:

  1. Msikilizaji wa Kibodi (Keyboard Listener) Unahitaji msikilizaji wa jumla (global listener). Vivinjari hutumia Ctrl+K kwa ajili ya utafutaji. Lazima utumie preventDefault kuzuia hili.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Data za Amri (Command Data) Hifadhi kila kitendo kama object. UI inabaki kuwa rahisi. Inaorodhesha object hizi na kuendesha function unayochagua. Kuongeza kipengele kipya inamaanisha kuongeza mstari mmoja kwenye orodha yako.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Utafutaji wa Fuzzy (Fuzzy Search) Command palette nzuri hutumia subsequence matching. Hii inamaanisha herufi lazima zionekane kwa mpangilio, lakini si lazima ziwe zimekaribiana. Kuandika "tgldk" kunapaswa kupata "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. Urambazaji wa Kibodi (Keyboard Navigation) Lengo ni kuacha kutumia mouse. Tumia vitufe vya Mishale (Arrow keys) kubadilisha index ya uteuzi. Tumia Enter kuendesha amri. Tumia Escape kufunga menyu.

  2. Hisia ya Papo hapo (The Instant Feel) Weka focus kwenye sehemu ya kuingiza maandishi (input field) mara tu palette inapofunguka. Hii inakuwezesha kuandika bila kubonyeza mouse.

Command palette inahitaji mambo manne:

Ijenge mara moja ili kuelewa jinsi zana za kisasa za watumiaji wenye uzoefu (power-user tools) zinavyofanya kazi.

Jaribu ukiwa live: https://dev48v.infy.uk/design/day10-command-palette.html

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