search: First iteration of "did you mean"
Created by: fkling
Simple implementation of "did you mean" for language suggestions. The suggestions will show up if the query consists of 2 or 3 terms, no filters and the first term is a language name (happy to adapt those rules to unlimited terms).
I mostly followed https://www.figma.com/file/VV1k7NWYaORzrBvUJzogHl/ with some some small adjustments:
- I chose the version with the darker background color because
- it looked a bit "detached" without a background
- with the white background it looked too similar to search results
- I made the whole line into a link and omitted the "Run search" link. I felt there were too many variations of font styles with the query, the "Run search" link and the description.
Note: I also made some changes to SearchResultsInfoBar.tsx so that the buttons would line up properly if there are no search results (see last screenshot).
Test plan
- Verified that clicking the link applies the new search
- Suggestions are not shown if first term is not a language, or there are less than 2 or more than 3 terms, or the query contains a filter.
- Colors look correct in dark mode
- Container correctly aligns in smaller windows
Screenshots
No results
Some results
Dark mode
Small screen
Misaligned if I didn't add the nav-item classes to the info bar
