నేను 60 లైన్లలో Cmd-K కమాండ్ ప్యాలెట్‌ను మళ్ళీ నిర్మించాను

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) ప్రతి చర్యను ఒక ఆబ్జెక్ట్‌గా నిల్వ చేయండి. దీనివల్ల 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) మౌస్ వాడకాన్ని నిలిపివేయడమే దీని లక్ష్యం. సెలెక్షన్ ఇండెక్స్‌ను మార్చడానికి Arrow కీలను ఉపయోగించండి. కమాండ్‌ను రన్ చేయడానికి Enter ఉపయోగించండి. మెనూని మూసివేయడానికి Escape ఉపయోగించండి.

  2. ఇన్‌స్టంట్ ఫీల్ (The Instant Feel) ప్యాలెట్ తెరవగానే ఇన్‌పుట్ ఫీల్డ్‌పై ఫోకస్ చేయండి. దీనివల్ల మీరు క్లిక్ చేయకుండానే నేరుగా టైప్ చేయవచ్చు.

ఒక కమాండ్ ప్యాలెట్‌కు నాలుగు అంశాలు అవసరం:

ఆధునిక పవర్-యూజర్ టూల్స్ ఎలా పనిచేస్తాయో అర్థం చేసుకోవడానికి దీనిని ఒకసారి నిర్మించి చూడండి.

Try it live: https://dev48v.infy.uk/design/day10-command-palette.html

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