Replace "X" Button with Dropdown Menu in `CollectionMetadata`

[raclim]

Background

In the current Collection's sketch list view, the "X" button shown for each sketch can be confusing for users since its exact purpose isn't immediately clear (i.e does it remove a sketch from the collection, delete the sketch altogether).

We would like to replace this button with a dropdown menu that can help communicate affordances more effectively, allow multiple actions, and add consistency with the rest of the site. An example of a dropdown actions menu can be seen in the 'My Sketches' or 'My Collections' page.

Current collection's sketch list view with "X" button:

My Sketches page with dropdown actions menu:

Suggestions to Start

• Examine how the Dropdown actions menu is currently implemented in other parts of the p5.js editor. One example file is SketchListRowBase.jsx, which is in the My Sketches page.
• Currently the "X" button is rendered in the CollectionMetadata.jsx component. Replace this button with the menu trigger for the dropdown actions. Ensure that this setup is consistent in logic and styling with other parts of the editor.
• Feel free to start small, and work with adding just the "Remove from Collection" action to the dropdown menu first. Other actions such as "Share" could be explored afterwards.

[Nixxx19]

Hi @raclim!

I'd love to work on this issue and submit the fix for it.

[VaibhavNarayann]

For the initial implementation, should I limit the dropdown to only include "Remove from Collection," or would you like additional actions (e.g., Share) included in the first PR?

[SinhaS12]

Hey @raclim . Thank You For Giving the Starting Point CollectionMetadata.jsx I have start work for this by today I will resolve this issue .