Refactor Instrument Selector to Grid Layout for Better UX

[Shiv-aurora]

Current Behavior

The current instrument selector in Music Blocks uses a radial layout implemented with Wheelnav.js. While it’s visually distinctive, it introduces several UX issues:

• Many instrument names are displayed upside down or at angles that are hard to read.
• The radial layout is hard to use on mobile, with instruments overlapping and difficult to tap.
• The wheel feels cluttered with many instruments and is hard to customize; a grid layout is cleaner and easier to maintain.

Screenshot (current wheel layout):

---

Desired Situation

Redesign the instrument selector as a grid-based layout, with instrument buttons placed around the border of a rectangle and a close button in the center. This new layout improves:

• Readability
• Better mobile responsiveness
• Customizability and ease of future enhancements

Screenshot (proposed grid layout):

---

Checklist

• [✅] I have read and followed the project's code of conduct.
• [✅] I have searched for similar issues before creating this one.
• [✅] I have provided all the necessary information to understand and reproduce the issue.
• [✅] I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.
🙋🏾🙋🏼 Questions: Community Matrix Server.

[walterbender]

I am not convinced that your proposed solution is actually an improvement. The pie menu is at least organized by instrument type. Does alpha sort make things easier?
Maybe something more along the lines of the Temperament menu would be more suitable?