Improve the UX of the architecture filter

[enclave-marc-barry]

• User can't select the text to right click and copy, any mouse interaction with the text drags the content, which is unwanted. We need another way move to the next architecture that doesn't prevent interacting with the text.
• User can't tell from the dots which architecture is being shown
• User can't tell from the dots which other architectures are available and which dot shows which architecture diagram

https://user-images.githubusercontent.com/67782240/169287459-a68a37e0-7466-48c0-a208-1362a6a3fc57.mp4

[enclave-marc-barry]

Maybe this is one to experiment with in Figma before we build it?

[enclave-marc-barry]

Thanks for this first effort @20Bulka20. I don't think this solution quite works because we end up duplicating the buttons from the filter section below. I think we need to solve this in Figma before we go any further.

[enclave-marc-barry]

Potential solutions I can imagine

1. Collapse the architecture selector and vendor list into a single component

2. Annotate the dots with architecture acronyms

[enclave-marc-barry]

Short answer is that I think this issue needs UX/UI attention