fix: Disabled pane gesture navigation by default and moved it to Labs since it is unstable

packages/web/src/javascripts/Components/Panes/usePaneGesture.ts

@@ -2,18 +2,29 @@ import { useStateRef } from '@/Hooks/useStateRef'
 import { useEffect, useRef, useState } from 'react'
 import { Direction, Pan, PointerListener, type GestureEventData } from 'contactjs'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { useApplication } from '../ApplicationProvider'
+import { ApplicationEvent, PrefKey } from '@standardnotes/snjs'
 
 export const usePaneSwipeGesture = (
   direction: 'left' | 'right',
   onSwipeEnd: (element: HTMLElement) => void,
   gesture: 'pan' | 'swipe' = 'pan',
 ) => {
+  const application = useApplication()
+
   const overlayElementRef = useRef<HTMLElement | null>(null)
   const [element, setElement] = useState<HTMLElement | null>(null)
 
   const onSwipeEndRef = useStateRef(onSwipeEnd)
   const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
+  const [isEnabled, setIsEnabled] = useState(() => application.getPreference(PrefKey.PaneGesturesEnabled, false))
+  useEffect(() => {
+    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+      setIsEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
+    })
+  }, [application])
+
   useEffect(() => {
     if (!element) {
       return
@@ -23,6 +34,10 @@ export const usePaneSwipeGesture = (
       return
     }
 
+    if (!isEnabled) {
+      return
+    }
+
     const panRecognizer = new Pan(element, {
       supportedDirections: direction === 'left' ? [Direction.Left] : [Direction.Right],
     })
@@ -144,7 +159,7 @@ export const usePaneSwipeGesture = (
         }
       }
     }
-  }, [direction, element, gesture, isMobileScreen, onSwipeEndRef])
+  }, [direction, element, gesture, isMobileScreen, onSwipeEndRef, isEnabled])
 
   return [setElement]
 }

packages/web/src/javascripts/Components/Preferences/Panes/General/Labs/Labs.tsx

@@ -1,6 +1,6 @@
 import { Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/Application/Application'
-import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
+import { ApplicationEvent, FeatureIdentifier, FeatureStatus, FindNativeFeature, PrefKey } from '@standardnotes/snjs'
 import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import PreferencesGroup from '../../../PreferencesComponents/PreferencesGroup'
@@ -18,15 +18,25 @@ type ExperimentalFeatureItem = {
 
 type Props = {
   application: {
-    setValue: WebApplication['setValue']
-    getValue: WebApplication['getValue']
     features: WebApplication['features']
+    getPreference: WebApplication['getPreference']
+    setPreference: WebApplication['setPreference']
+    addSingleEventObserver: WebApplication['addSingleEventObserver']
   }
 }
 
 const LabsPane: FunctionComponent<Props> = ({ application }) => {
   const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
 
+  const [isPaneGesturesEnabled, setIsPaneGesturesEnabled] = useState(() =>
+    application.getPreference(PrefKey.PaneGesturesEnabled, false),
+  )
+  useEffect(() => {
+    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+      setIsPaneGesturesEnabled(application.getPreference(PrefKey.PaneGesturesEnabled, false))
+    })
+  }, [application])
+
   const reloadExperimentalFeatures = useCallback(() => {
     const experimentalFeatures = application.features.getExperimentalFeatures().map((featureIdentifier) => {
       const feature = FindNativeFeature(featureIdentifier)
@@ -52,6 +62,14 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
       <PreferencesSegment>
         <Title>Labs</Title>
         <div>
+          <LabsFeature
+            name="Pane switch gestures"
+            description="Allows using gestures to navigate"
+            isEnabled={isPaneGesturesEnabled}
+            toggleFeature={() => {
+              void application.setPreference(PrefKey.PaneGesturesEnabled, !isPaneGesturesEnabled)
+            }}
+          />
           {experimentalFeatures.map(({ identifier, name, description, isEnabled, isEntitled }, index) => {
             const toggleFeature = () => {
               if (!isEntitled) {
@@ -77,7 +95,7 @@ const LabsPane: FunctionComponent<Props> = ({ application }) => {
               </Fragment>
             )
           })}
-          {experimentalFeatures.length === 0 && (
+          {(experimentalFeatures.length === 0 || typeof isPaneGesturesEnabled === 'boolean') && (
             <div className="flex items-center justify-between">
               <div className="flex flex-col">
                 <Text>No experimental features available.</Text>