search: Replicate Monaco suggestions look in CodeMirror (icons, match style,...)
Created by: fkling
Fixes: #35485 (closed)
This PR makes a couple of changes to make the suggestions look similar to Monaco's:
It adds icons to the search query suggestions in CodeMirror. Unlike originally intended, it doesn't use the same icons as Monaco (I couldn't find them). Instead I'm using the same icons that is used in the search result view, defined in SymbolIcon:
For suggestion items that are missing from that list (filters, repositories) I picked icons from @mdi/js that look similar to the Monaco ones.
NOTE: We might want to update our icon set, but that should be done separately.
This PR also adds the "Tab" indicator after the selected suggestion. I wasn't able to make this work nicely with CSS only, so I used CodeMirror's API to insert an additional node.
It also changes the "match" style to be more similar to Monaco's style.
Before:
After:
Test plan
Open search page. Try "default" completion (filters, symbols), repo:, file: and type: completions.
App preview:
Check out the client app preview documentation to learn more.