Command Palette

One instance, opened from anywhere

The palette is a single component mounted high in the tree, not something each page renders for itself. That’s the whole trick that keeps it simple: there’s exactly one piece of open/closed state, one keyboard listener, one focus trap. A global keydown listener opens it on ⌘K/Ctrl+K from anywhere, or on a lone / — but only when you’re not typing into an input, textarea, select, or a contenteditable, so the slash key stays a normal keystroke in a form.

Some surfaces want their own visible trigger instead of a floating pill. The graph landing and the hub fill every corner with their own chrome, so there a “Search” affordance sits in the header and opens the same palette by dispatching a window event — commandpalette:open — rather than being wired to its internal state. The keyboard hotkey already worked off a window listener, so the event is just the same door with a second handle.

The registry is the hub's data, reused

The palette doesn’t keep its own list of what exists. It builds the searchable set from the exact same FEATURES and THOUGHTS arrays the hub and the dev-notes index render from, plus a few core static pages (Home, Settings, Résumé) and one non-navigation action: toggle the theme.

• Add a feature to the hub and it shows up in the palette for free — there is no second place to register it, so the two can’t drift apart.
• Each command carries a keyword list seeded from its title and id, so a query can still hit an entry when the visible label doesn’t contain the letters you typed.
• Results stay grouped — Pages, Dev Notes, Actions — so a growing registry reads as sections rather than one long list.

A fuzzy matcher small enough to read

Rather than pull in a search dependency, the matcher is a greedy subsequence scan you can read end to end. It walks the query left to right, consumes the next matching character in the text, and scores each hit by where it lands: a bonus for a prefix match, a smaller one for landing at a word boundary (after a space, -, /, or _), and another for a run of consecutive characters. An empty query matches everything with a neutral score, so the palette shows the full registry the moment it opens.

It also returns the matched character ranges, folded into contiguous spans, so the UI can highlight the part of each result you actually typed — the scoring and the highlighting come from the same pass instead of matching twice.

An honest combobox, not a div with a listener

The palette is a real ARIA combobox. The input owns the interaction; arrow keys, Enter, and Escape all live on it, and it points at the active result with aria-activedescendant rather than moving DOM focus into the list. That’s the pattern screen readers expect from a search box that filters a list beneath it, and it means keyboard users never lose the caret while they navigate.

Two jsx-a11y lint rules fire false positives on this shape — they want keyboard handlers on the individual option rows, but in this pattern the keyboard lives on the input, not the options — so those are the only two suppressions, documented at the call site. The shortcut-hint text is platform-aware (⌘K on Apple devices, Ctrl K elsewhere), resolved after mount so it stays hydration-safe, and its colour clears WCAG AA contrast.

What I’d revisit

Today the only non-navigation command is the theme toggle. The registry is shaped to hold more — anything with an actionIdinstead of an href — so recent pages, “copy current URL,” or per-feature actions could slot in without touching the matcher or the combobox. The deliberate call for the first version was to make everything the site already has reachable in one keystroke, and to do it without a search library or a second source of truth to keep in sync.