Bullet and arrow UX for block control could be improved

The bullet is currently used to do a lot of stuff with unclear UX. I have a lot of prescriptive ideas to solve, which you can take or leave, but I’d love this to get cleaned up a bit :smiley:

  • The left-click, left-click-drag, and right-click functionality is confusingly implemented and communicated.
    • Consider changing the mouse-cursor when hovering a bullet to prioritize communicating drag-ability rather than encouraging zooming in.
    • Consider removing the left-click-to-zoom functionality
      • Add a modifier+left-click action for power users to zoom into the block in the context menu, similar to the action to load the block in the sidebar.
    • The user should be able to right click anywhere on the block to open the context menu, not just the bullet
  • The bullet should not be used to communicate the collapsed state of a block.
    • This adds confusion to the UX by drawing the user to expect the bullet to control the collapsed state
    • Communicating the collapsed state of a block should be shifted to the element that controls the collapsed state: the arrow.
    • visibility and angle of rotation of the arrows can communicate the state of the block.
      • If a block is collapsed, show the arrow pointing right.
        • On hover, rotate the arrow to point down.
      • If a block is not collapsed, set visibility: hidden.
        • On hover, set visibility: visible and set the arrow rotation to point right.

In the attached gif I’ve edited my CSS to adjust the arrows to communicate collapsed state, and removed the circle around the bullet.
[optimize output image]