A productivity site should feel like a native desktop app. We redesigned the ToolVines global search palette with a keyboard-first Raycast-style command interface to let power users search, navigate, and run tools in milliseconds.
The Goals: Speed and Accessibility
We set out to achieve three main UI/UX objectives:
- Provide global keyboard shortcut launch (
⌘KorCtrl+Kor/) from anywhere on the platform. - Implement visual text highlighting so users see why a search match occurred.
- Enable zero-latency keyboard navigation via Arrow Keys, Enter to navigate, and Tab to accept suggestions.
Under the Hood: Search Scored Ranking
To deliver relevant matches instantly, we implemented a client-side weighted scoring system:
Exact Name Match -> +1000 points
Starts With Name Match -> +800 points
Contains Name Match -> +600 points
Keyword/Tag Matches -> +400 points
Category Matches -> +100 points
This ensures searching "pdf" lists the PDF Merger immediately, rather than showing generic tools that happen to have "pdf" in their descriptions. Combined with Tailwind dynamic layout breakpoints and smooth CSS animations, the search has become the primary navigation hub of ToolVines.