Redesign: username autocomplete
The current user autocomplete popover works, but isn't very pretty. It's always centered on the view, which looks odd and means it's far away from where user autocomplete is most often used: the beginning of the message. There's also a border around the results, which is unnecessary since the list doesn't scroll.
I propose moving the popover to either the left side, or (if that's technically possible) horizontally align it to where the cursor in the text input currently is.
Another problem is that the popover currently isn't keyboard accessible. The first search result should have keyboard focus and be visually highlighted, and the arrow keys should allow moving through the search results with the keyboard. Pressing tab or enter should complete to the selected name.
Since lots of other apps use @ for mentions (Gitlab, Github, Slack, Telegram), it would be good to support this in Fractal (#144 (closed)). So the popover should be triggered both with @ and when the first three characters of a name are typed. In order to avoid the popover opening accidentally while typing there should be a short delay before it appears (e.g. 300ms, but we should test it).
Development Tasks
-
horizontally align popover to @ -
remove extra border -
add more spacing around contacts -
highlight name in the message input in blue -
open popover with @ -
automatically give focus to the first search result, and allow navigation with arrow keys
QA Tasks
-
horizontal alignment is as expected -
visual styling is as expected -
popover opens with @ -
popover opens with 3 chars of a username after delay -
name is highlighted in blue in the input -
search result keyboard navigation works as expected