feat: tag query linter and autocomplete

[poneciak57]

We would like to have linting for tags expression search input.
Here is the example tag expression:

<tag1>&&(<tag2>||<tag3>)

User would see it like plain text by default so we want to improve his performance by adding linting.

Tag names should be wrapped in colourfull pills so like border and color and operands like && or ( should have different colors. When user is typing the expression it should update.

Tips

• You can make normal div an input field by setting conteneditable property to true (or do some trick with text input)
• In javascript you can add event listener to update event of some div field.
• when user is typing you can wrap tags and operands in <span> with custom styles
• you can get all tags (there won't be that many) from database and use them to make simple autocompletion (can be bruteforce for simplicity for now)
• you can use tags to also know if user typed tag exists and for example mark by red color unexisting tags that user has in his expression

Disclaimer

• I know it is kind of hard thing to do. It might require some experties so feel free to ask.
• try keeping it as simple as possible like time complexity or look can be improved after you make sure it works

Showcase

How to test on mobiles?

Mobile phones have the keyboard that pop up when you need to type something it can be hard to test in desktop browser. So here is the little guide on how you can test it.

1. Make sure you are using same wifi on laptop/desktop and your phone
2. Find your laptop/desktop ip address
3. This ip address is what you use as localhost on desktop so when you type this ip on your mobile like http://<ip>:<app_port> it will work (not exactly localhost because its 0.0.0.0 but it is your computers ip in the wifi network)