Simplify panes

src/components/account/SavedLocationsPage.js

@@ -284,7 +284,7 @@ const LocationRow = ({ location, listId, typesAccess }) => {
       }}
     >
       <LocationLink
-        to={`/locations/${location.id}/${viewToString(location.lat, location.lng, MIN_LOCATION_ZOOM)}?pane=standalone`}
+        to={`/locations/${location.id}/${viewToString(location.lat, location.lng, MIN_LOCATION_ZOOM)}?pane=full`}
         onClick={handleLocationClick}
       >
         <LocationTypeDisplay location={location} typesAccess={typesAccess} />

src/components/activity/ActivityDiary.ts

@@ -215,7 +215,7 @@ function transformActivityData(
         const locationTypes: LocationTypes = {
           locationId: change.location_id,
           types,
-          url: `/locations/${change.location_id}/${view}?pane=standalone`,
+          url: `/locations/${change.location_id}/${view}?pane=full`,
           isSelected: true,
         }
         switch (change.description) {

src/components/entry/EntryMobile.js

@@ -126,16 +126,13 @@ const EntryMobile = () => {
   const {
     drawerFullyOpen,
     drawerLow,
-    isStandalone,
-    isFromEmbedViewMap,
     tabIndex,
     fullyOpenPaneDrawer,
     setPaneDrawerToMiddlePosition,
     setPaneDrawerToLowPosition,
     setTabIndex,
   } = useLocationPane()
 
-  const drawerDisabled = isFromEmbedViewMap || isStandalone
   const { isOpenInMobileLayout: filterOpen } = useSelector(
     (state) => state.filter,
   )
@@ -163,7 +160,7 @@ const EntryMobile = () => {
   }, [])
 
   const [currentTranslateY, setCurrentTranslateY] = useState(
-    drawerFullyOpen || drawerDisabled
+    drawerFullyOpen
       ? hasImages
         ? ENTRY_IMAGE_HEIGHT
         : TOP_BAR_HEIGHT
@@ -187,13 +184,7 @@ const EntryMobile = () => {
         topPositionHeight={hasImages ? ENTRY_IMAGE_HEIGHT : TOP_BAR_HEIGHT}
         middlePositionScreenRatio={0.7}
         partialPositionHeightPx={80 + safeAreaInsetBottom}
-        position={
-          drawerFullyOpen || drawerDisabled
-            ? 'top'
-            : drawerLow
-              ? 'low'
-              : 'middle'
-        }
+        position={drawerFullyOpen ? 'top' : drawerLow ? 'low' : 'middle'}
         onPositionChange={(position) => {
           if (position === 'top') {
             setTimeout(fullyOpenPaneDrawer, 0.25)
@@ -207,10 +198,8 @@ const EntryMobile = () => {
             console.error(position)
           }
         }}
-        drawerDisabled={drawerDisabled || drawerFullyOpen}
         onChangeTranslateY={setCurrentTranslateY}
         hasWhiteBackground={!isLoading && hasImages}
-        showMoveElement={!(drawerFullyOpen || drawerDisabled)}
       >
         {hasImages && (
           <RevealedFromUnderneath

src/components/entry/EntryOverview.js

@@ -217,12 +217,7 @@ const EntryOverview = () => {
   const user = useSelector((state) => state.auth.user)
   const isDesktop = useIsDesktop()
 
-  const {
-    drawerFullyOpen,
-    isStandalone,
-    reenablePaneDrawerAndSetToLowPosition,
-    setPaneDrawerToLowPosition,
-  } = useLocationPane()
+  const { drawerFullyOpen, setPaneDrawerToLowPosition } = useLocationPane()
 
   const containerRef = useRef(null)
 
@@ -250,8 +245,6 @@ const EntryOverview = () => {
       })
       if (googleMap?.getZoom() < MIN_LOCATION_ZOOM) {
         googleMap?.setZoom(MIN_LOCATION_ZOOM)
-      } else if (isStandalone) {
-        reenablePaneDrawerAndSetToLowPosition()
       } else if (drawerFullyOpen) {
         setPaneDrawerToLowPosition()
       }

src/components/entry/TopButtonsMobile.js

@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux'
 import styled from 'styled-components/macro'
 
 import { useAppHistory } from '../../utils/useAppHistory'
+import { useIsEmbed } from '../../utils/useBreakpoint'
 import { zIndex } from '../ui/GlobalStyle'
 import IconButton from '../ui/IconButton'
 import ReturnIcon from '../ui/ReturnIcon'
@@ -47,7 +48,7 @@ const StyledButtons = styled.div`
   }
 `
 
-const EntryButton = styled(IconButton)`
+const RoundIconButton = styled(IconButton)`
   background-color: rgba(0, 0, 0, 0.45);
   border: none;
   svg {
@@ -56,69 +57,71 @@ const EntryButton = styled(IconButton)`
   ${({ opaque }) => opaque && `opacity: 0.5; cursor: help;`}
 `
 
-EntryButton.defaultProps = {
+RoundIconButton.defaultProps = {
   size: 48,
 }
 
 const TopButtonsMobile = ({ hasImages }) => {
   const history = useAppHistory()
   const { locationId } = useSelector((state) => state.location)
-  const {
-    isStandalone,
-    isFromEmbedViewMap,
-    setPaneDrawerToMiddlePosition,
-    reenablePaneDrawerAndSetToLowPosition,
-  } = useLocationPane()
+  const isEmbed = useIsEmbed()
+  const { setPaneDrawerToMiddlePosition, setPaneDrawerToLowPosition } =
+    useLocationPane()
   const { id: recentChangesSectionId } = useSelector(
     (state) => state.activity.recentChanges.lastBrowsedSection,
   )
   const { userId: userActivityUserId } = useSelector(
     (state) => state.activity.userActivityLastBrowsedSection,
   )
   const { lastViewedListId } = useSelector((state) => state.save)
+  const { lastViewedListPositionId } = useSelector((state) => state.list)
   const { handleClickDelete, isDeleteVisible, isDeleteDisabled } =
     useDeleteLocation()
 
+  const backPath = lastViewedListId
+    ? '/account/lists'
+    : userActivityUserId
+      ? `/users/${userActivityUserId}/activity`
+      : recentChangesSectionId
+        ? '/changes'
+        : lastViewedListPositionId
+          ? '/list'
+          : '/map'
+
+  const backGoesToMap = backPath === '/map'
+
   const handleBack = () => {
-    const standaloneBackPath = lastViewedListId
-      ? '/account/lists'
-      : userActivityUserId
-        ? `/users/${userActivityUserId}/activity`
-        : recentChangesSectionId
-          ? '/changes'
-          : '/list'
-    history.push(`${standaloneBackPath}?pane=&tab=`)
+    if (backGoesToMap && !isEmbed) {
+      setPaneDrawerToMiddlePosition()
+    } else {
+      history.push(`${backPath}?pane=&tab=`)
+    }
   }
 
   return (
     <StyledButtons whiteBackground={!hasImages}>
-      <EntryButton
-        onClick={
-          isStandalone
-            ? handleBack
-            : isFromEmbedViewMap
-              ? () => history.push('/map')
-              : (e) => {
-                  e.stopPropagation()
-                  setPaneDrawerToMiddlePosition()
-                }
-        }
+      <RoundIconButton
+        onClick={handleBack}
         icon={<ReturnIcon />}
         label="back-button"
       />
       <div>
-        {isStandalone && !isFromEmbedViewMap && (
-          <EntryButton
+        {!backGoesToMap && (
+          <RoundIconButton
             onClick={(event) => {
               event.stopPropagation()
-              reenablePaneDrawerAndSetToLowPosition()
+              if (isEmbed) {
+                history.push('/map?pane=&tab=')
+              } else {
+                setPaneDrawerToLowPosition()
+              }
             }}
             icon={<MapIcon />}
             label="map-button"
           />
         )}
         {isDeleteVisible && (
-          <EntryButton
+          <RoundIconButton
             onClick={(event) => {
               event.stopPropagation()
               handleClickDelete(locationId)
@@ -128,7 +131,7 @@ const TopButtonsMobile = ({ hasImages }) => {
             opaque={isDeleteDisabled}
           />
         )}
-        <EntryButton
+        <RoundIconButton
           onClick={(event) => {
             event.stopPropagation()
             history.push(`/locations/${locationId}/edit`)

src/components/entry/useLocationPane.js

@@ -3,30 +3,17 @@ import { useHistory, useLocation } from 'react-router-dom'
 
 import { useIsEmbed } from '../../utils/useBreakpoint'
 
-/**
- * Manages location pane state via URL search params.
- *
- * URL params:
- *   pane = 'low' | 'full' | 'standalone' | (absent = middle)
- *   tab  = '1'   | (absent = 0)
- *
- * Returns an object with the same shape as state.location.pane in Redux,
- * plus functions to mutate the state.
- */
 const useLocationPane = () => {
   const history = useHistory()
   const { search, pathname } = useLocation()
   const isEmbed = useIsEmbed()
 
   const params = new URLSearchParams(search)
-  const paneParam = params.get('pane') // 'low' | 'full' | 'standalone' | null
-  const tabParam = params.get('tab') // '1' | null
-
-  const isStandalone = paneParam === 'standalone'
-  const isFromEmbedViewMap = isEmbed
-  const drawerFullyOpen =
-    paneParam === 'full' || isStandalone || isFromEmbedViewMap
-  const drawerLow = paneParam === 'low'
+  const paneParam = params.get('pane') // 'low' | 'full' | null -> middle position
+  const tabParam = params.get('tab') // '1' | null -> 0
+
+  const drawerFullyOpen = isEmbed || paneParam === 'full'
+  const drawerLow = !isEmbed && paneParam === 'low'
   const tabIndex = drawerFullyOpen && tabParam === '1' ? 1 : 0
 
   const setParams = useCallback(
@@ -66,7 +53,6 @@ const useLocationPane = () => {
 
   const setPaneParam = useCallback(
     (newPaneValue) => {
-      // If we're moving away from fully open, clear the tab index
       const isLeavingFullyOpen = drawerFullyOpen && newPaneValue !== 'full'
       setParams(
         newPaneValue,
@@ -88,10 +74,6 @@ const useLocationPane = () => {
     setPaneParam('low')
   }, [setPaneParam])
 
-  const reenablePaneDrawerAndSetToLowPosition = useCallback(() => {
-    setPaneParam('low')
-  }, [setPaneParam])
-
   const setTabIndex = useCallback(
     (index) => {
       setParams(paneParam, index === 0 ? null : index)
@@ -102,13 +84,10 @@ const useLocationPane = () => {
   return {
     drawerFullyOpen,
     drawerLow,
-    isStandalone,
-    isFromEmbedViewMap,
     tabIndex,
     fullyOpenPaneDrawer,
     setPaneDrawerToMiddlePosition,
     setPaneDrawerToLowPosition,
-    reenablePaneDrawerAndSetToLowPosition,
     setTabIndex,
   }
 }

src/components/list/ListPage.js

@@ -73,7 +73,7 @@ const ListPage = () => {
       }
       onLocationClick={(locationPosition) => {
         dispatch(setLastViewedListPositionState(locationPosition))
-        history.push(`/locations/${locationPosition.id}?pane=standalone`)
+        history.push(`/locations/${locationPosition.id}?pane=full`)
       }}
     />
   )

src/components/ui/DraggablePane.js

@@ -31,7 +31,7 @@ const DragHandle = styled.div`
   background-color: #ccc;
   border-radius: 3px;
   margin: 10px auto;
-  ${(props) => !props.showMoveElement && `display: none`};
+  ${(props) => !props.visible && `display: none`};
 `
 
 const POSITIONS = {
@@ -48,14 +48,11 @@ const DraggablePane = ({
   topPositionHeight,
   middlePositionScreenRatio,
   partialPositionHeightPx,
-  drawerDisabled,
   onChangeTranslateY,
   hasWhiteBackground,
-  showMoveElement,
   displayOverTopBar,
 }) => {
-  const isDraggablePosition =
-    position === POSITIONS.MIDDLE || position === POSITIONS.LOW
+  const isDraggablePosition = position !== POSITIONS.TOP
   const paneRef = useRef(null)
   const [isDragging, setIsDragging] = useState(false)
   const [startY, setStartY] = useState(0)
@@ -151,7 +148,7 @@ const DraggablePane = ({
   }, [topPositionHeight, position, movePane])
 
   const handleStart = (clientY) => {
-    if (drawerDisabled) {
+    if (!isDraggablePosition) {
       return
     }
     setIsDragging(true)
@@ -160,7 +157,7 @@ const DraggablePane = ({
   }
 
   const handleMove = (clientY) => {
-    if (!isDragging || drawerDisabled) {
+    if (!isDragging || !isDraggablePosition) {
       return
     }
 
@@ -171,7 +168,7 @@ const DraggablePane = ({
   }
 
   const handleEnd = () => {
-    if (!isDragging || drawerDisabled) {
+    if (!isDragging || !isDraggablePosition) {
       return
     }
     setIsDragging(false)
@@ -245,11 +242,10 @@ const DraggablePane = ({
       onTouchEnd={isDraggablePosition ? handleTouchEnd : undefined}
       onMouseDown={isDraggablePosition ? handleMouseDown : undefined}
       hasWhiteBackground={hasWhiteBackground}
-      showMoveElement={showMoveElement}
       isDraggablePosition={isDraggablePosition}
       displayOverTopBar={displayOverTopBar}
     >
-      <DragHandle showMoveElement={showMoveElement} />
+      <DragHandle visible={isDraggablePosition} />
       {children}
     </PaneContainer>
   )