Confusing icons in `QuickAddList`

[lindapaiste]

Increasing Access

It will be easier to make selections if it is obvious which items have already been selected.

Feature enhancement details

This screenshot shows the UI when I click "Add Sketch" on a collection details page. The first sketch in the list ("Stormy Sandalwood") is already in the collection and the other two are not. But there is no way to know that unless you hover over the ✔️ icon, where you will see either a ❌ to remove the item if it is already added or a ➕ to add the item if not. This is not great in general but it's totally unusable on touch devices where there is no hover. A user will not know what clicking the icon is going to do: will it add or remove?

The ✔️ does not mean anything as all items show the ✔️. In my opinion, we should only show the ✔️ for items which are already in the collection.

As for the items which are not in the collection, we could show the ➕ all the time and not just on hover. I've also had a look at @shujuuu's mobile design for this component. She is using more of a "radio button" type look, where there is a very clear and obvious ☑️ for items which are added and an empty circle ⚪ for items which can be added by clicking. If @dewanshDT gets around to creating this radio button element for his GSoC project then we should use that element on the web version as well. It would definitely be an improvement to usability.

We show this QuickAddList modal:

• With a list of collections, when clicking "add to collection" from the editor.
• With a list of sketches, when clicking "add sketch" on the collection.

[dewanshDT]

I think this is a necessary enhancement in terms of user experience

[Ankush263]

Hey @lindapaiste, can u assign me to this issue, I can change the UI

[luckyklyist]

Hello, @lindapaiste . I've submitted a pull request for this issue. I'm looking forward to your review. Thank you! #2438