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]
 }