Command search

2025-12

A search box that starts empty and quiet, then turns into grouped, live results as you type.

Why

People open a box like this before they know what they are after, so two things matter most. What it shows before anything is typed, and how it marks a match without lighting up the whole row. Those took the longest by far.

Try it

Click the bar and it opens. With nothing typed you get the resting view: a few filters, your last searches, a couple of quick actions, a recent file. Open More for extra filters, or hit sort to flip the people list around.

Start typing and it turns into results, people first, then files, reactions, collections. Type mar and the matches glow, even the ones sitting inside an email. Put an @ in front and a little people picker drops in. Click anywhere outside and it shrinks back to one bar.

How it is built

The trick with the matches is that they are not just found, they are wrapped. A small function walks the text and splits it around each hit, so the match can be its own styled piece rather than a highlight painted over the row. That is why it works the same in a name, a domain, or a comma list.

// Split the text around each hit and mark the matches.
function highlight(text, q) {
  const out = []
  const lower = text.toLowerCase()
  let i = 0
  for (let at; (at = lower.indexOf(q, i)) !== -1; i = at + q.length) {
    out.push(text.slice(i, at))
    out.push(<mark className="text-amber-500">{text.slice(at, at + q.length)}</mark>)
  }
  out.push(text.slice(i))
  return out
}

Searching a person is relational, not literal. Every file and list carries the people on it, so looking up a name pulls in the things they touch, not only the rows their name shows up in. Resting and results are two separate layouts too, swapped on whether the box is empty, so each can be tuned without the other getting in the way.