Close Pane Buttons (#4339)

* PanelButton component, closes panes

* dark mode pane icons

* show colors of entire button set on hover;

* check if prop is null

* add PanelButtonProps

* check if prop is null

* add grey color to button instances

editor/src/components/canvas/design-panel-root.tsx

@@ -1,19 +1,15 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-
 import { jsx } from '@emotion/react'
 import type { ResizeDirection } from 're-resizable'
 import { Resizable } from 're-resizable'
 import React from 'react'
 import * as EditorActions from '../editor/actions/action-creators'
-
 import { RightMenuTab } from '../editor/store/editor-state'
-
 import { Substores, useEditorState } from '../editor/store/store-hook'
 import { InspectorEntryPoint } from '../inspector/inspector'
 import { CanvasWrapperComponent } from './canvas-wrapper-component'
-
 import { CodeEditorWrapper } from '../code-editor/code-editor-container'
 import {
   SimpleFlexRow,
@@ -22,7 +18,6 @@ import {
   useColorTheme,
   LargerIcons,
 } from '../../uuiui'
-
 import { ConsoleAndErrorsPane } from '../code-editor/console-and-errors-pane'
 import { InspectorWidthAtom } from '../inspector/common/inspector-atoms'
 import { useAtom } from 'jotai'

editor/src/components/titlebar/title-bar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
 import { createSelector } from 'reselect'
 import { auth0Url } from '../../common/env-vars'
 import { getUserPicture } from '../../common/user'
@@ -37,6 +37,7 @@ import {
   type StoredPanel,
   useUpdateGridPanelLayoutPutCodeEditorBelowNavigator,
 } from '../canvas/grid-panels-state'
+import { NO_OP } from '../../core/shared/utils'
 
 interface ProjectTitleProps {}
 
@@ -60,6 +61,31 @@ const ProjectTitle: React.FC<React.PropsWithChildren<ProjectTitleProps>> = ({ ch
   )
 }
 
+type PanelButtonProps = {
+  onClick?: () => void
+  color?: string
+  isHovered?: boolean
+  children?: React.ReactNode
+}
+
+export const PanelButton = (props: PanelButtonProps) => {
+  return (
+    <div
+      onClick={props.onClick !== null ? props.onClick : NO_OP}
+      style={{
+        width: 8,
+        height: 8,
+        borderRadius: 8,
+        pointerEvents: 'initial',
+        backgroundColor:
+          props.isHovered && props.color !== null ? props.color : colorTheme.unavailableGrey.value,
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
+
 export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel }) => {
   const { drag } = useGridPanelDraggable(props.panelData)
 
@@ -134,6 +160,18 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
     e.stopPropagation()
   }, [])
 
+  const toggleNavigatorVisible = React.useCallback(() => {
+    dispatch([togglePanel('leftmenu')])
+  }, [dispatch])
+
+  const [isHovered, setIsHovered] = useState(false)
+  const setIsHoveredTrue = React.useCallback(() => {
+    setIsHovered(true)
+  }, [])
+  const setIsHoveredFalse = React.useCallback(() => {
+    setIsHovered(false)
+  }, [])
+
   return (
     <div
       ref={drag}
@@ -149,24 +187,12 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
         gap: 10,
         flexShrink: 0,
       }}
+      onMouseEnter={setIsHoveredTrue}
+      onMouseLeave={setIsHoveredFalse}
     >
       <FlexRow css={{ gap: 6 }}>
-        <div
-          style={{
-            width: 8,
-            height: 8,
-            borderRadius: 8,
-            backgroundColor: theme.unavailableGrey.value,
-          }}
-        />
-        <div
-          style={{
-            width: 8,
-            height: 8,
-            borderRadius: 8,
-            backgroundColor: theme.unavailableGrey.value,
-          }}
-        />
+        <PanelButton onClick={toggleNavigatorVisible} color='#FF5F57' isHovered={isHovered} />
+        <PanelButton isHovered={isHovered} color={colorTheme.unavailableGrey.value} />
       </FlexRow>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {currentBranch != null ? (
@@ -242,6 +268,7 @@ export const TitleBarProjectTitle = React.memo((props: { panelData: StoredPanel
 
 export const TitleBarUserProfile = React.memo((props: { panelData: StoredPanel }) => {
   const { drag } = useGridPanelDraggable(props.panelData)
+  const dispatch = useDispatch()
 
   const theme = useColorTheme()
   const { loginState } = useEditorState(
@@ -263,6 +290,18 @@ export const TitleBarUserProfile = React.memo((props: { panelData: StoredPanel }
     window.open(auth0Url('auto-close'), '_blank')
   }, [])
 
+  const toggleInspectorVisible = React.useCallback(() => {
+    dispatch([togglePanel('rightmenu')])
+  }, [dispatch])
+
+  const [isHovered, setIsHovered] = useState(false)
+  const setIsHoveredTrue = React.useCallback(() => {
+    setIsHovered(true)
+  }, [])
+  const setIsHoveredFalse = React.useCallback(() => {
+    setIsHovered(false)
+  }, [])
+
   return (
     <div
       ref={drag}
@@ -271,23 +310,21 @@ export const TitleBarUserProfile = React.memo((props: { panelData: StoredPanel }
         height: TitleHeight,
         width: '100%',
         backgroundColor: theme.inspectorBackground.value,
-        paddingLeft: 10,
+        padding: '0 8px',
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 6,
       }}
+      onMouseEnter={setIsHoveredTrue}
+      onMouseLeave={setIsHoveredFalse}
     >
-      <div
-        style={{
-          width: 8,
-          height: 8,
-          borderRadius: 8,
-          backgroundColor: theme.unavailableGrey.value,
-        }}
-      />
-      <div style={{ flex: '0 0 0px', paddingRight: 8 }}>
+      <FlexRow css={{ gap: 6 }}>
+        <PanelButton onClick={toggleInspectorVisible} color='#FF5F57' isHovered={isHovered} />
+        <PanelButton isHovered={isHovered} color={colorTheme.unavailableGrey.value} />
+      </FlexRow>
+      <div style={{ flex: '0 0 0px' }}>
         {unless(
           loggedIn,
           <Button
@@ -334,28 +371,15 @@ export const TitleBarEmpty = React.memo((props: { panelData: StoredPanel }) => {
         gap: 6,
       }}
     >
-      <div
-        style={{
-          width: 8,
-          height: 8,
-          borderRadius: 8,
-          backgroundColor: theme.unavailableGrey.value,
-        }}
-      />
-      <div
-        style={{
-          width: 8,
-          height: 8,
-          borderRadius: 8,
-          backgroundColor: theme.unavailableGrey.value,
-        }}
-      />
+      <PanelButton color={colorTheme.unavailableGrey.value} />
+      <PanelButton color={colorTheme.unavailableGrey.value} />
     </div>
   )
 })
 
 export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
   const { drag } = useGridPanelDraggable(props.panelData)
+  const dispatch = useDispatch()
   const theme = useColorTheme()
 
   const updatePanelLayout = useUpdateGridPanelLayout()
@@ -365,12 +389,25 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
 
   const onMinimize = useUpdateGridPanelLayoutPutCodeEditorBelowNavigator()
 
+  const toggleCodeEditorVisible = React.useCallback(
+    () => dispatch([togglePanel('codeEditor')]),
+    [dispatch],
+  )
+
+  const [isHovered, setIsHovered] = useState(false)
+  const setIsHoveredTrue = React.useCallback(() => {
+    setIsHovered(true)
+  }, [])
+  const setIsHoveredFalse = React.useCallback(() => {
+    setIsHovered(false)
+  }, [])
+
   return (
     <div
       ref={drag}
       className='handle'
       style={{
-        height: 28,
+        height: 40,
         width: '100%',
         backgroundColor: theme.inspectorBackground.value,
         paddingLeft: 10,
@@ -380,25 +417,12 @@ export const TitleBarCode = React.memo((props: { panelData: StoredPanel }) => {
         gap: 6,
         fontWeight: 600,
       }}
+      onMouseEnter={setIsHoveredTrue}
+      onMouseLeave={setIsHoveredFalse}
     >
-      <div
-        onClick={onMinimize}
-        style={{
-          width: 8,
-          height: 8,
-          borderRadius: 8,
-          backgroundColor: '#F5BF4F',
-        }}
-      />
-      <div
-        onClick={onMaximize}
-        style={{
-          width: 8,
-          height: 8,
-          borderRadius: 8,
-          backgroundColor: '#61C454',
-        }}
-      />
+      <PanelButton onClick={toggleCodeEditorVisible} color='#FF5F57' isHovered={isHovered} />
+      <PanelButton onClick={onMinimize} color='#FDBC40' isHovered={isHovered} />
+      <PanelButton onClick={onMaximize} color='#33C748' isHovered={isHovered} />
       <span style={{ marginLeft: 8 }}>Code </span>
     </div>
   )