Add Manage Panels to Toolbar (#6004)

**Problem:**
We'd like to have a more prominent, easily-accessible way to manage
panel visibility located in the toolbar

**Fix:**
As a v1, leveraging a lot of similarity to the insert mode's dropdown in
the toolbar. Will iterate to use leverage a newly created button +
dropdown menu component in the future.

**Manual Tests:**
I hereby swear that:

- [x] I opened a hydrogen project and it loaded
- [x] I could navigate to various routes in Preview mode

Fixes #5892

---------

Co-authored-by: Balazs Bajorics <[email protected]>

editor/src/components/canvas/canvas-floating-toolbars.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { FlexColumn, FlexRow } from '../../uuiui'
 import { CanvasToolbar } from '../editor/canvas-toolbar'
-import { ClosedPanels } from '../editor/closed-panels'
 import { Substores, useEditorState } from '../editor/store/store-hook'
 import { ErrorOverlayComponent } from './canvas-error-overlay'
 import { SafeModeErrorOverlay } from './canvas-wrapper-component'
 import { CanvasStrategyPicker } from './controls/select-mode/canvas-strategy-picker'
+import { TestMenu } from '../titlebar/test-menu'
 
 export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSProperties }) => {
   const safeMode = useEditorState(
@@ -32,21 +32,20 @@ export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSPrope
           position: 'absolute',
           top: 0,
           alignItems: 'flex-start',
-          justifyContent: 'space-between',
+          justifyContent: 'center',
           padding: 6,
           width: '100%',
           height: '100%',
         }}
       >
-        <ClosedPanels side='left' />
         <FlexRow style={{ width: 250, alignItems: 'flex-start', gap: 10 }}>
           <CanvasToolbar />
           <CanvasStrategyPicker />
         </FlexRow>
-        <ClosedPanels side='right' />
       </FlexRow>
-      {/* The error overlays are deliberately the last here so they hide other canvas UI */}
+      {/* The error overlays are deliberately the last here so they hide other canvas UI, except the test menu */}
       {safeMode ? <SafeModeErrorOverlay /> : <ErrorOverlayComponent />}
+      <TestMenu />
     </FlexColumn>
   )
 })

editor/src/components/canvas/canvas-strategies/canvas-strategies.tsx

@@ -229,6 +229,7 @@ function getInteractionTargetFromEditorState(editor: EditorState): InteractionTa
     case 'textEdit':
     case 'comment':
     case 'follow':
+    case 'panels':
       return targetPaths(editor.selectedViews)
     default:
       assertNever(editor.mode)

editor/src/components/canvas/controls/panels-mode/panels-mode-hooks.ts

@@ -0,0 +1,12 @@
+import type { MouseCallbacks } from '../select-mode/select-mode-hooks'
+import { NO_OP } from '../../../../core/shared/utils'
+
+const noop: MouseCallbacks = {
+  onMouseMove: NO_OP,
+  onMouseDown: NO_OP,
+  onMouseUp: NO_OP,
+}
+
+export function usePanelsModeSelectAndHover(): MouseCallbacks {
+  return noop
+}

editor/src/components/canvas/controls/select-mode/select-mode-hooks.tsx

@@ -64,6 +64,7 @@ import { getAllLockedElementPaths } from '../../../../core/shared/element-lockin
 import { treatElementAsGroupLike } from '../../canvas-strategies/strategies/group-helpers'
 import { useCommentModeSelectAndHover } from '../comment-mode/comment-mode-hooks'
 import { useFollowModeSelectAndHover } from '../follow-mode/follow-mode-hooks'
+import { usePanelsModeSelectAndHover } from '../panels-mode/panels-mode-hooks'
 
 const DRAG_START_THRESHOLD = 2
 
@@ -805,6 +806,7 @@ export function useSelectAndHover(
     mode?.type === 'comment' ? mode.comment : null,
   )
   const followModeCallbacks = useFollowModeSelectAndHover()
+  const panelsModeCallbacks = usePanelsModeSelectAndHover()
 
   if (hasInteractionSession) {
     return {
@@ -826,6 +828,8 @@ export function useSelectAndHover(
         return commentModeCallbacks
       case 'follow':
         return followModeCallbacks
+      case 'panels':
+        return panelsModeCallbacks
       default:
         const _exhaustiveCheck: never = modeType
         throw new Error(`Unhandled editor mode ${JSON.stringify(modeType)}`)

editor/src/components/editor/canvas-toolbar-states.tsx

@@ -27,6 +27,7 @@ type ToolbarMode =
   | { primary: 'play' }
   | { primary: 'comment' }
   | { primary: 'zoom' }
+  | { primary: 'panels' }
 
 export function useToolbarMode(): ToolbarMode {
   const editorMode = useEditorState(
@@ -124,6 +125,10 @@ export function useToolbarMode(): ToolbarMode {
     }
   }
 
+  if (editorMode.type === 'panels') {
+    return { primary: 'panels' }
+  }
+
   // Edit Mode
   if (nothingSelected) {
     return { primary: 'edit', secondary: 'nothing-selected' }

editor/src/components/editor/canvas-toolbar.tsx

@@ -61,6 +61,7 @@ import { insertComponentPickerItem } from '../navigator/navigator-item/component
 import { useAtom } from 'jotai'
 import { ActiveRemixSceneAtom } from '../canvas/remix/utopia-remix-root-component'
 import * as EP from '../../core/shared/element-path'
+import { PanelsPicker } from '../navigator/navigator-item/panels-picker'
 
 export const InsertMenuButtonTestId = 'insert-menu-button'
 export const PlayModeButtonTestId = 'canvas-toolbar-play-mode'
@@ -267,6 +268,14 @@ export const CanvasToolbar = React.memo(() => {
     }
   }, [canvasToolbarMode.primary, dispatch, dispatchSwitchToSelectModeCloseMenus])
 
+  const togglePanelsButtonClicked = React.useCallback(() => {
+    if (canvasToolbarMode.primary === 'panels') {
+      dispatchSwitchToSelectModeCloseMenus()
+    } else {
+      dispatch([switchEditorMode(EditorModes.panelsMode())])
+    }
+  }, [canvasToolbarMode.primary, dispatch, dispatchSwitchToSelectModeCloseMenus])
+
   const currentStrategyState = useEditorState(
     Substores.restOfStore,
     (store) => store.strategyState,
@@ -423,6 +432,16 @@ export const CanvasToolbar = React.memo(() => {
           </div>,
         )}
         <Separator />
+        <Tooltip title='Manage panels' placement='bottom'>
+          <InsertModeButton
+            testid={commentButtonTestId}
+            iconType={'panels'}
+            iconCategory='tools'
+            primary={canvasToolbarMode.primary === 'panels'}
+            onClick={togglePanelsButtonClicked}
+            keepActiveInLiveMode
+          />
+        </Tooltip>
         <Tooltip title='Zoom to 100%' placement='bottom'>
           <SquareButton
             style={{
@@ -510,6 +529,18 @@ export const CanvasToolbar = React.memo(() => {
         : null}
       {/* Live Mode */}
       {showRemixNavBar ? wrapInSubmenu(<RemixNavigationBar />) : null}
+      {/* Panels Mode */}
+      {canvasToolbarMode.primary === 'panels'
+        ? wrapInSubmenu(
+            <FlexColumn style={{ padding: '3px 8px 0 8px', flexGrow: 1 }}>
+              <FlexRow>
+                <Tile style={{ flexGrow: 1 }}>
+                  <PanelsPicker />
+                </Tile>
+              </FlexRow>
+            </FlexColumn>,
+          )
+        : null}
     </FlexColumn>
   )
 })