refactor: repo (#1070)

packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx

@@ -0,0 +1,48 @@
+import RoundIconButton from '@/Components/Button/RoundIconButton'
+import TitleBar from '@/Components/TitleBar/TitleBar'
+import Title from '@/Components/TitleBar/Title'
+import { FunctionComponent, useEffect, useMemo } from 'react'
+import { observer } from 'mobx-react-lite'
+import { PreferencesMenu } from './PreferencesMenu'
+import PreferencesCanvas from './PreferencesCanvas'
+import { PreferencesProps } from './PreferencesProps'
+
+const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
+  const menu = useMemo(
+    () => new PreferencesMenu(props.application, props.viewControllerManager.enableUnfinishedFeatures),
+    [props.viewControllerManager.enableUnfinishedFeatures, props.application],
+  )
+
+  useEffect(() => {
+    menu.selectPane(props.viewControllerManager.preferencesController.currentPane)
+    const removeEscKeyObserver = props.application.io.addKeyObserver({
+      key: 'Escape',
+      onKeyDown: (event) => {
+        event.preventDefault()
+        props.closePreferences()
+      },
+    })
+    return () => {
+      removeEscKeyObserver()
+    }
+  }, [props, menu])
+
+  return (
+    <div className="h-full w-full absolute top-left-0 flex flex-col bg-contrast z-index-preferences">
+      <TitleBar className="items-center justify-between">
+        <div className="h-8 w-8" />
+        <Title className="text-lg">Your preferences for Standard Notes</Title>
+        <RoundIconButton
+          onClick={() => {
+            props.closePreferences()
+          }}
+          type="normal"
+          icon="close"
+        />
+      </TitleBar>
+      <PreferencesCanvas {...props} menu={menu} />
+    </div>
+  )
+}
+
+export default observer(PreferencesView)