feat: add explore page Category and Network filters

[Sekhmet]

Summary

This PR adds ability to filter by Network and Category on explore page.

Closes: https://github.com/snapshot-labs/workflow/issues/213

@bonustrack original issue calls for multi-selection on category, but API only supports single category filter, do we want to implement it with multi-selection (would also require changes on the API).

How to test

1. Go to http://localhost:8080/#/explore
2. Try different filters.

Screenshots

[bonustrack]

@Sekhmet No, we don't need to support multiple category selection.

[bonustrack]

Looks good, is it possible to sort network by name and have the possibility to search within the dropdown? Currently it's hard to find a specific network. Also if we have the counter of space for each networks I would remove network with 0 spaces.

[Sekhmet]

We don't have counter right now, we would need to fetch that info first, for now just ported it to combobox.

[wa0x6e]

• On mobile, the "network" dropdown looks very narrow, maybe we could use another width than the input. Moreover, if we have selected something long from the "Category", like investment, it will make the network input shrink more, and the combobox will have an horizontal scroll
• When clicking on the "Network" input, on dev console mobile emulation, it show right-click menu (seems like this is also the case on master). This behavior is not present if clicking on the dropdown caret icon, and is not on the headless-ui demo either

On mobile, it has 2 different behaviors:

• When focus is out of the combobox (touch somewhere blank on the page), touching on the input will select all text
• When focus is on the combobox (select something in the combobox), touching the input again will not select all text, but place the cursor at the selected touch point.

[wa0x6e]

All other combobox are missing the label now

[Sekhmet]

When clicking on the "Network" input, on dev console mobile emulation, it show right-click menu (seems like this is also the case on master). This behavior is not present if clicking on the dropdown caret icon, and is not on the headless-ui demo either

This happens because we select text on focus, I added workaround so it will skip initial click, but if you click it again it will still happen. It's just what dev emulation does, if you go to other website and select some text (with keyboard shortcut) it will pop up as well.

[bonustrack]

This is not looking good, can we have the width of the input dynamic based on the label and have the dropdown width based on the content?

[Sekhmet]

We would need to grow this input using JS because CSS can't do that, is that okay?

[bonustrack]

Hum, what you can't do with CSS exactly?

[Sekhmet]

So I assume if we select longer option input should grow with it:

But it's not possible with CSS alone as it's input:
https://css-tricks.com/auto-growing-inputs-textareas/

[bonustrack]

• Let's remove "query" on the text telling there is no results, and align it to left
• Make the input auto growing
• Use a fixed width for the dropdown
• Truncate text so network name are always in 1 line

[Sekhmet]

Are we sure about left-align?

Doesn't look good to me.

[bonustrack]

Ok let's keep text-center but change text to No results found