Search: Add tag suggestions to notes list

[codebykat]

Fix

This PR adds matching tag results to the notes list.

It shows a maximum of five and hides the section if there are no matches.

Clicking a suggested tag fills in the search field with the tag: syntax.

Fixes #1624, #895

Test

1. Perform some searches and make sure everything works in a way that makes sense! Test with weird tag names, long tag names, tags that aren't added to any notes, etc.
2. Change note layout (comfy, condensed, expanded) and make sure the left panel is laid out properly (all elements the correct heights, no notes missing, no text overflow).
3. Test in dark mode as well

Screenshots

More here.

Release

RELEASE-NOTES.txt was updated in 6c2f569 with:

Added matching tags to the notes list on search

[codebykat]

This has a couple bugs still but I think it's ready to not be a draft anymore! Would love opinions on the open questions above, thoughts on how the code looks, and testing. I'll try to mop up the known issues tomorrow (assuming we even want to keep the keyboard stuff, it's kinda janky).

[belcherj]

Is this from the new Icon pack? Can this be added as a separate PR?

[codebykat]

Which new Icon pack? It's the tag icon shown next to a tag name (differentiates tag suggestions from search suggestions). Tyler shared the SVG with me in Slack.

[dmsnell]

fun fact, not too important here, but can be useful especially since this event originates on a div - we can pass data through custom attributes and access them in the callback…

<div
	key={tag.id}
	id={tag.id}
	data-tag-id={tag.id}
	onClick={this.doSearch}
>

doSearch = ( { target: { dataset: { tagId } } } ) => this.props.onSearch( `tag:${ tagId }` ));

[codebykat]

Ooh this is something I have needed in attempting to translate my jQuery brain into React.

[dmsnell]

if we have encodeURIComponent here in this component it probably means we're neglecting to convert it on entry into the application. did you come across this incidentally or did you anticipate the need for this?

[codebykat]

I found the need for it in testing... you're saying the query should get encoded upstream somewhere?

[codebykat]

I think I got it here, is that what you had in mind? Any thoughts on the fact that this input was not formerly encoded? 8a7493c

[SylvesterWilmott]

Some things that were discussed away from GitHub:

• The designs show a tag: prefix on the tag items in the list, the designs are based on an updated UI which has a wider search bar. This doesn't work well with the current width of the search bar so this detail will be omitted until the UI changes have been made.
• Desktop has the advantage of being able to show search results and suggestions simultaneously. The filter as you type behaviour will be retained until we understand if the point scoring system of the default "relevance" search will cause problems with performance.

Feedback:

• The tag suggestions considers character case where it should not
• Let's allow matches anywhere in the tag name and matching with 2 characters
• Regarding the style changes request, here is a pen I whipped up

[codebykat]

Done:

• Style fixes
• Case insensitive matching anywhere in the string, starting from 2 characters typed
• Made some code less terrible

[codebykat]

@dmsnell your advice on the correct way to do this would be very welcome ❤ --> 30e2bf8

[dmsnell]

let's remove the query from the debounce to prevent the parallel-universes effect when we have multiple calls to doSearch in a row. granted, we shouldn't have the same problems as with the note content (which could be updated by remote calls) but this keeps a single source of data instead of two

debouncedSearch() also has to change but not in a big way

debouncedSearch = debounce(() => this.props.onSearch(this.state.query), SEARCH_DELAY);

[dmsnell]

is debounce the appropriate idiom for search? if we keep on typing then it won't search until we stop. a throttle might be more appropriate so that we can see search results as we continue to type but it will still make sure we don't send a new search on every keystroke

debounce will prevent the search from interfering with our typing but won't update until we have finished typing
throttle will allow a slow search to interfere with our typing but provide us partial results as we type