chore: preferences view swipe gesture

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

@@ -4,13 +4,14 @@ import { observer } from 'mobx-react-lite'
 import { PreferencesMenu } from './PreferencesMenu'
 import PreferencesCanvas from './PreferencesCanvas'
 import { PreferencesProps } from './PreferencesProps'
-import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
-import Modal from '../Modal/Modal'
+import Modal, { ModalAction } from '../Modal/Modal'
 import { classNames } from '@standardnotes/snjs'
 import { useCommandService } from '../CommandProvider'
 import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
 import { useAvailableSafeAreaPadding } from '@/Hooks/useSafeAreaPadding'
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import Icon from '../Icon/Icon'
 
 const PreferencesView: FunctionComponent<PreferencesProps> = ({
   application,
@@ -30,7 +31,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
     menu.selectPane(viewControllerManager.preferencesController.currentPane)
   }, [menu, viewControllerManager.preferencesController.currentPane])
 
-  useDisableBodyScrollOnMobile()
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
   const addAndroidBackHandler = useAndroidBackHandler()
 
@@ -58,6 +59,23 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
 
   const { hasTopInset } = useAvailableSafeAreaPadding()
 
+  const modalActions = useMemo(
+    (): ModalAction[] => [
+      {
+        label: (
+          <span className="flex items-center">
+            <Icon type="chevron-left" size="large" />
+            Back
+          </span>
+        ),
+        type: 'primary',
+        mobileSlot: 'left',
+        onClick: closePreferences,
+      },
+    ],
+    [closePreferences],
+  )
+
   return (
     <Modal
       close={closePreferences}
@@ -84,6 +102,9 @@ const PreferencesView: FunctionComponent<PreferencesProps> = ({
           />
         </div>
       }
+      disableCustomHeader={isMobileScreen}
+      actions={modalActions}
+      customFooter={<></>}
     >
       <PreferencesCanvas
         menu={menu}