[preview 3] Redesign panel sections in sidebar

src/components/controls/panelHeader.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import { useSelector } from "react-redux";
-import { RootState } from "../../store";
 import { useAppDispatch } from "../../hooks";
 import { togglePanelDisplay } from "../../actions/panelDisplay";
 import { HeaderContainer } from "./styles";
 import { PanelToggle, On } from "./panelToggle";
 import { AnnotatedTitle, Title, Tooltip } from "./annotatedTitle";
-import { PanelChevron } from "./panelChevron";
 
 /** Panel identifier used internally. */
 export type PanelId = string;
@@ -16,45 +13,24 @@ type Props = {
   title: Title
   tooltip?: Tooltip
   panelIsVisible: On
-
-  /** Indicates whether there are options for the panel. */
-  hasOptions: boolean
-
-  /** Indicates options visibility. */
-  optionsAreVisible: boolean
-
-  /** Update options visibility. */
-  setOptionsAreVisible: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 /**
  * A header used by all panel controls, containing an interactive title.
  */
-export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, hasOptions, optionsAreVisible, setOptionsAreVisible }: Props) => {
+export const PanelHeader = ({ panel, title, tooltip, panelIsVisible }: Props) => {
   const dispatch = useAppDispatch();
 
-  const mobile = useSelector((state: RootState) => state.general.mobileDisplay);
-
   function togglePanelVisibility() {
     dispatch(togglePanelDisplay(panel))
   }
 
-  function toggleOptionsVisibility() {
-    setOptionsAreVisible(!optionsAreVisible);
-  }
-
   return (
     // Clicking anywhere in the element, even whitespace, will toggle panel visibility.
     <HeaderContainer onClick={togglePanelVisibility}>
-      <span>
-        {hasOptions && !mobile &&
-          <PanelChevron
-            show={optionsAreVisible}
-            onClick={toggleOptionsVisibility} />}
-        <AnnotatedTitle
-          title={title}
-          tooltip={tooltip} />
-      </span>
+      <AnnotatedTitle
+        title={title}
+        tooltip={tooltip} />
       <PanelToggle
         on={panelIsVisible}
         callback={(togglePanelVisibility)} />

src/components/controls/panelSection.tsx

@@ -23,26 +23,15 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
 
   const panelIsVisible = panelsToDisplay.includes(panel)
 
-  // Initially, panel visibility determines options visibility.
-  const [optionsAreVisible, setOptionsAreVisible] = React.useState(panelIsVisible);
-
-  // Subsequent panel visibility updates also determines options visibility.
-  React.useEffect(() => {
-    setOptionsAreVisible(panelIsVisible)
-  }, [panelIsVisible])
-
   return (
     <PanelSectionContainer>
       <PanelHeader
         panel={panel}
         title={title}
         tooltip={tooltip}
         panelIsVisible={panelIsVisible}
-        hasOptions={options!==undefined}
-        optionsAreVisible={optionsAreVisible}
-        setOptionsAreVisible={setOptionsAreVisible}
       />
-      {optionsAreVisible && options}
+      {panelIsVisible && options}
     </PanelSectionContainer>
   );
 };

src/components/controls/styles.js

@@ -50,7 +50,7 @@ export const PanelSectionContainer = styled.div`
 `;
 
 export const TitleAndIconContainer = styled.span`
-  display: inline-flex;
+  display: flex;
   align-items: center;
 `;