NxOmnibar

The omnibar is the most critical component in the entire app because it's the first thing the user interacts with upon every summon.

Here's what happens when you start typing into the omnibar:

1. The value you're typing out gets put into onbservable state (via MobX).
2. A query to the db is made and will fill-in the remainder of the note title with best-match.
3. NxFileList will filter based on query, highlighting the best-match if applicable.
4. NxFileContent will display content of highlighted best-match or blank 'hit enter to create'.
5. Regardless of wether it's an existing note or a new one, hitting enter will pass focus off to NxFileContent.

• NOTE: All the while, the up and down arrows will page through the current list of results, updating the value of the omnibar.

Autocomplete

As you type in the omnibar, autocomplete will find the closest match and will fill in the rest of the matching note title. The portion that gets filled in does so on the righthand side of your key cursor and it will also be selected[1] so that the user has immediate control over manipulating as they see fit. This is standard behavior in most omnibar/omnibox UI e.g. web browser address bar.

Usually it's a dropdown that displays with your autocomplete options, but in nvAux, this is NxFileList's purpose.

• [1] https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange