share devtools position for panel and indicator

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

@@ -15,7 +15,7 @@ import {
   ACTION_ERROR_OVERLAY_CLOSE,
   STORAGE_KEY_POSITION,
   ACTION_DEVTOOLS_PANEL_CLOSE,
-  ACTION_DEVTOOLS_INDICATOR_POSITION,
+  ACTION_DEVTOOLS_POSITION,
 } from '../../shared'
 import { Draggable } from '../errors/dev-tools-indicator/draggable'
 
@@ -36,7 +36,7 @@ export function DevToolsIndicator({
 }) {
   const [open, setOpen] = useState(false)
 
-  const [vertical, horizontal] = state.indicatorPosition.split('-', 2)
+  const [vertical, horizontal] = state.devToolsPosition.split('-', 2)
 
   const toggleErrorOverlay = () => {
     dispatch({ type: ACTION_DEVTOOLS_PANEL_CLOSE })
@@ -65,11 +65,11 @@ export function DevToolsIndicator({
       <Draggable
         padding={INDICATOR_PADDING}
         onDragStart={() => setOpen(false)}
-        position={state.indicatorPosition}
+        position={state.devToolsPosition}
         setPosition={(p) => {
           dispatch({
-            type: ACTION_DEVTOOLS_INDICATOR_POSITION,
-            indicatorPosition: p,
+            type: ACTION_DEVTOOLS_POSITION,
+            devToolsPosition: p,
           })
           localStorage.setItem(STORAGE_KEY_POSITION, p)
         }}

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

@@ -61,7 +61,7 @@ const state: OverlayState = {
   isErrorOverlayOpen: false,
   // TODO: This will be handled on the next stack——with proper story.
   isDevToolsPanelOpen: false,
-  indicatorPosition: 'bottom-left',
+  devToolsPosition: 'bottom-left',
 }
 
 export const StaticRoute: Story = {

packages/next/src/next-devtools/dev-overlay/dev-overlay.stories.tsx

@@ -7,7 +7,7 @@ import imgApp from './app.png'
 import { useReducer } from 'react'
 import { DevOverlay } from './dev-overlay'
 import {
-  ACTION_DEVTOOLS_INDICATOR_POSITION,
+  ACTION_DEVTOOLS_POSITION,
   ACTION_DEVTOOLS_PANEL_CLOSE,
   ACTION_DEVTOOLS_PANEL_TOGGLE,
   ACTION_ERROR_OVERLAY_CLOSE,
@@ -98,7 +98,7 @@ const initialState: OverlayState = {
   },
   isErrorOverlayOpen: false,
   isDevToolsPanelOpen: false,
-  indicatorPosition: 'bottom-left',
+  devToolsPosition: 'bottom-left',
 }
 
 function useOverlayReducer() {
@@ -120,8 +120,8 @@ function useOverlayReducer() {
         case ACTION_DEVTOOLS_PANEL_CLOSE: {
           return { ...state, isDevToolsPanelOpen: false }
         }
-        case ACTION_DEVTOOLS_INDICATOR_POSITION: {
-          return { ...state, indicatorPosition: action.indicatorPosition }
+        case ACTION_DEVTOOLS_POSITION: {
+          return { ...state, devToolsPosition: action.devToolsPosition }
         }
         default: {
           return state

packages/next/src/next-devtools/dev-overlay/shared.ts

@@ -30,7 +30,7 @@ export interface OverlayState {
   routerType: 'pages' | 'app'
   isErrorOverlayOpen: boolean
   isDevToolsPanelOpen: boolean
-  indicatorPosition: Corners
+  devToolsPosition: Corners
 }
 export type OverlayDispatch = React.Dispatch<DispatcherEvent>
 
@@ -58,7 +58,7 @@ export const ACTION_DEVTOOLS_PANEL_OPEN = 'devtools-panel-open'
 export const ACTION_DEVTOOLS_PANEL_CLOSE = 'devtools-panel-close'
 export const ACTION_DEVTOOLS_PANEL_TOGGLE = 'devtools-panel-toggle'
 
-export const ACTION_DEVTOOLS_INDICATOR_POSITION = 'devtools-indicator-position'
+export const ACTION_DEVTOOLS_POSITION = 'devtools-position'
 
 export const STORAGE_KEY_THEME = '__nextjs-dev-tools-theme'
 export const STORAGE_KEY_POSITION = '__nextjs-dev-tools-position'
@@ -142,8 +142,8 @@ export interface DevToolsPanelToggleAction {
 }
 
 export interface DevToolsIndicatorPositionAction {
-  type: typeof ACTION_DEVTOOLS_INDICATOR_POSITION
-  indicatorPosition: Corners
+  type: typeof ACTION_DEVTOOLS_POSITION
+  devToolsPosition: Corners
 }
 
 export type DispatcherEvent =
@@ -207,7 +207,7 @@ export const INITIAL_OVERLAY_STATE: Omit<
   versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   debugInfo: { devtoolsFrontendUrl: undefined },
   isDevToolsPanelOpen: false,
-  indicatorPosition: 'bottom-left',
+  devToolsPosition: 'bottom-left',
 }
 
 function getInitialState(
@@ -379,8 +379,8 @@ export function useErrorOverlayReducer(
         case ACTION_DEVTOOLS_PANEL_TOGGLE: {
           return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
         }
-        case ACTION_DEVTOOLS_INDICATOR_POSITION: {
-          return { ...state, indicatorPosition: action.indicatorPosition }
+        case ACTION_DEVTOOLS_POSITION: {
+          return { ...state, devToolsPosition: action.devToolsPosition }
         }
         default: {
           return state