Redesign the page builder shortcuts menu as a control panel

[adelaidemt]

Right now we have a shortcuts menu on the page builder plugin but would like to evolve this to a "control panel" to house the available features to the user. This control panel should include checkboxes to turn on the following features:

• grid layout
• accessibility labels
• measure tool
• screen dimensions and zoom level
• ability to toggle between device sizes
• toggle on/off module names (maybe?)
• shortcuts

@jeremydw anything else?

[micjamking]

Initial mockup of website staging tool control panel:

[adelaidemt]

Assigning to @jeremydw to work on staging.

cc @Zoramite

[micjamking]

Updated figma mocks:

[adelaidemt]

Next steps from our discussion a few weeks ago:

• Looks awesome and we want to start working on this when we have a quieter period (will work to assign it to another dev, perhaps Michael)
• Default state is minimized toolbar – how can we make it less obtrusive?
• Can we do this within an iFrame? (Storybook does this)

[jeremydw]

FYI: Building this out using Mantine components as part of the updated Blinkk starter pack.

Mantine.Page.Layers.mov