RFC: New UI update, and UI zones

[franknoirot]

I'm proposing a set of new UI updates, which include some more firm conceptual organization of zones in the modeling user interface. Here are the relevant Figma designs, and if you can't get access I'll include most of them at the end below.

Problems I'm trying to solve

1. Sidebars

• Unclear when buttons should be added to left or right sidebar menus
• Left and/or right sidebar menus can be difficult for users to discover

2. Panes

• Panes have been made to appear in left side and right side without clear reasoning
• Panes are separated between Code and "everything else" without a clear reason why
• Panes take up a lot of screen space even with everything collapsed
• Pane resizer interferes with GUI even with everything collapsed

3. Toolbar

• Toolbar can contain so many items it overflows and needs to scroll
• Toolbar resizes dramatically, and jumps substantially since it is centered

4. Camera controls

• Orientation gizmo cannot be repositioned or restyled since it is rendered engine-side
• No clear way to add additional functionality such as ortho/perspective toggle

modeling-app-ui-problems.mp4

My proposed solution

1. Sidebars

• Consolidate all menus to a left sidebar (make configurable eventually)
• Consolidate account menu to a popover
• Bring avatar over near project name

2. Panes

• These are now consolidated to a "split ribbon", to borrow a term from
  Obsidian
• In future when we have a plugin architecture, the top area will house core or essential plugins, and the bottom will house installed plugins that register panes. For now, their items will be fixed.
• When everything is collapsed, the ribbon is a small strip of icons along the left side. Tooltips with descriptions will be available to the user to learn the name and keyboard shortcut of the item.
• Users can click an icon to expand the pane. At any given time, only one core pane and one installed pane can be opened.
• Users can resize the panes horizontally in unison (like now), and resize the share of the pane area that each opened pane gets.
• When only one pane is open, it takes up the full height by default but can be resized from the bottom if it's a core pane or from the top if it's an installed pane.

3. Toolbar

• The toolbar is right-aligned, and shows any tools or commands that are currently available in the modeling state machine and registered to be shown in the sidebar. This gives it the maximum space to resize and makes it resize from only one side.
• If the user has a tool equipped and there are no registered commands or tools nested within that tool, it appears as highlighted in the toolbar until the tool is unequipped by clicking on it again or hitting the Esc key.
• If the user has a tool equipped that has nested commands and/or tools registered to appear in the command bar, the current tool stacks below the command bar in an active state with a cancel/submit set of icon buttons. The toolbar is populated with the resulting nested tools and commands.

4. Camera Controls

• The lower right corner contains the controls for the camera and scene. These are client-side elements.
• A small footer-like section below this cluster can contain utility links, commands, and menus. The network health indicator will be moved down here.
• A large help icon button will toggle open a new help menu here on click. It's identical to those found in Figma, tldraw, and others.

modeling-app-ui-solutions.mp4

Images of Figma mockups

Ribbon collapsed with tooltip

One ribbon pane open

Sidebar open

Two ribbon panes open

Account menu open