Skip to content

Refactor and reorganize Builder "More" menu for better discoverability #561

@conorstrejcek

Description

@conorstrejcek

Motivation

I've been using the Builder and noticed the "More" dropdown has become quite long, containing a mix of file operations, view settings, and grid tools. For long-time users, this is probably not an issue, but for newer users (like myself), it makes finding the right tool difficult.

Additionally, looking at Builder.tsx, the topBarChildren memoized value is currently handling all this logic in one place (roughly ~200 lines), which makes the component harder to maintain.

Proposed Changes

I’d like to work on a PR to reorganize this menu into logical groups and refactor the code to be more modular. However, since I am a new user/contributor, I want to make sure not to make any opinionated decisions on the organization. Here are my first thoughts, but I wanted to open a discussion for anyone who has opinions on this.

Suggested groupings

  • File: New Puzzle, Import, Export
  • Grid Tools: Clear Fill, Toggle Block/Bar/Rebus, Symmetry
  • View/Settings: Mute, Keyboard toggle, Stats
  • Account: Dashboard, Admin

In my personal UX opinion, I don't think we should necessarily hide these within nested navigation, and I think we could still have all of the options visible at once. My suggestion would be to put some small headers between each to make the groupings visually clear.

In addition, I'd like to extract each of the groups into smaller sub-components (e.g., <FileMenu />, <GridToolsMenu />) to reduce the overall cognitive load when editing the menu / Builder file.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions