refactor: support saving inspector status

src/components/FileExplorer/index.tsx

@@ -5,7 +5,7 @@ import { SearchBar } from 'components/SearchBar'
 import { useConfigs } from 'containers/ConfigsContext'
 import { PortalContext } from 'containers/PortalContext'
 import { RepoContext } from 'containers/RepoContext'
-import { useInspector } from 'containers/StateInspector'
+import { useInspector } from 'containers/Inspector'
 import * as React from 'react'
 import { usePrevious, useUpdateEffect } from 'react-use'
 import { cx } from 'utils/cx'

src/components/Gitako.tsx

@@ -1,7 +1,7 @@
 import { SideBar } from 'components/SideBar'
 import { ConfigsContextWrapper } from 'containers/ConfigsContext'
+import { InspectorContextWrapper } from 'containers/Inspector'
 import { ReloadContextWrapper } from 'containers/ReloadContext'
-import { InspectorContextWrapper } from 'containers/StateInspector'
 import * as React from 'react'
 import { StyleSheetManager } from 'styled-components'
 import { insertMountPoint } from 'utils/DOMHelper'
@@ -14,11 +14,11 @@ import { StateBarStateContextWrapper } from '../containers/SideBarState'
 export function Gitako() {
   const mountPoint = React.useMemo(() => insertMountPoint(), [])
   return (
-    <InspectorContextWrapper>
-      <StyleSheetManager target={mountPoint}>
-        <ReloadContextWrapper>
-          <ErrorBoundary>
-            <ConfigsContextWrapper>
+    <StyleSheetManager target={mountPoint}>
+      <ReloadContextWrapper>
+        <ErrorBoundary>
+          <ConfigsContextWrapper>
+            <InspectorContextWrapper>
               <StateBarErrorContextWrapper>
                 <StateBarStateContextWrapper>
                   <OAuthWrapper>
@@ -28,10 +28,10 @@ export function Gitako() {
                   </OAuthWrapper>
                 </StateBarStateContextWrapper>
               </StateBarErrorContextWrapper>
-            </ConfigsContextWrapper>
-          </ErrorBoundary>
-        </ReloadContextWrapper>
-      </StyleSheetManager>
-    </InspectorContextWrapper>
+            </InspectorContextWrapper>
+          </ConfigsContextWrapper>
+        </ErrorBoundary>
+      </ReloadContextWrapper>
+    </StyleSheetManager>
   )
 }

src/containers/ErrorContext.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'common'
-import { useInspector } from 'containers/StateInspector'
+import { useInspector } from 'containers/Inspector'
 import * as React from 'react'
 import { useStateIO } from 'utils/hooks/useStateIO'
 

src/containers/Inspector.tsx

@@ -3,6 +3,8 @@ import { IN_PRODUCTION_MODE } from 'env'
 import * as React from 'react'
 import { noop } from 'utils/general'
 import { useStateIO } from 'utils/hooks/useStateIO'
+import { useConfigs } from './ConfigsContext'
+import { Config } from 'utils/config/helper'
 
 export type InspectorContextShape = ReactIO<JSONObject>
 
@@ -12,7 +14,10 @@ export const InspectorContextWrapper = IN_PRODUCTION_MODE
   ? React.Fragment
   : function InspectorContextWrapper({ children }: PropsWithChildren) {
       const $ = useStateIO<JSONObject>({})
-      const [show, setShow] = React.useState(true)
+      const configs = useConfigs()
+      const { __showInspector: show } = configs.value
+      const setShow = (__showInspector: Config['__showInspector']) =>
+        configs.onChange({ __showInspector })
 
       return (
         <InspectorContext.Provider value={$}>

src/containers/RepoContext.tsx

@@ -9,7 +9,7 @@ import { useHandleNetworkError } from 'utils/hooks/useHandleNetworkError'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { SideBarStateContext } from './SideBarState'
-import { useInspector } from './StateInspector'
+import { useInspector } from './Inspector'
 
 export const RepoContext = React.createContext<MetaData | null>(null)
 

src/containers/SideBarState.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useLoadedContext } from 'utils/hooks/useLoadedContext'
 import { useStateIO } from 'utils/hooks/useStateIO'
 import { SideBarErrorContext } from './ErrorContext'
-import { useInspector } from './StateInspector'
+import { useInspector } from './Inspector'
 
 export type SideBarState =
   | 'disabled'

src/utils/config/helper.ts

@@ -22,6 +22,7 @@ export type Config = {
   restoreExpandedFolders: boolean
   pjaxMode: 'native' | 'pjax-api'
   showDiffInText: boolean
+  __showInspector?: boolean
 }
 
 export type ConfigKeys = keyof Config
@@ -45,6 +46,7 @@ enum configKeys {
   restoreExpandedFolders = 'restoreExpandedFolders',
   pjaxMode = 'pjaxMode',
   showDiffInText = 'showDiffInText',
+  __showInspector = '__showInspector',
 }
 
 // NOT use platform name to distinguish GHE from github.com