Command search

2025-12

⌘F

Command search

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

Why

I hit a box like this before I even know what I am after, so I cared most about two things. What it shows me before I type, 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 I do not just find them, I wrap them. 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 I could tune each one without the other getting in the way.