Stop mobile sidebars getting stuck out of sync (#1953)

* fix(app): keep mobile sidebars synced with store Gesture-owned skip flags could swallow the next store sync after a no-op or overlapping gesture, leaving React state and Reanimated shared values split. Always reconcile both mobile sidebars from the panel store after gesture animations. * test(app): keep sidebar sync coverage pure * fix(app): keep sidebar close transitions idempotent * fix(app): keep mobile sidebars stable through interruptions Independent React and worklet state let stale gesture or animation callbacks overwrite newer panel commands. Use one revisioned target and one transient motion runtime so outdated callbacks cannot restore an earlier panel.
2026-07-09 23:08:56 +02:00
parent 15d3091104
commit 6af1379357
21 changed files with 1434 additions and 1651 deletions
@@ -1,147 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { Gesture } from "react-native-gesture-handler";
-import { Extrapolation, interpolate, runOnJS, useSharedValue } from "react-native-reanimated";
-import { useExplorerSidebarAnimation } from "@/contexts/explorer-sidebar-animation-context";
-import { useSidebarAnimation } from "@/contexts/sidebar-animation-context";
-import { isWeb } from "@/constants/platform";
-import { canOpenRightSidebarGesture } from "@/utils/sidebar-animation-state";
-
-interface UseExplorerOpenGestureParams {
-  enabled: boolean;
-  onOpen: () => void;
-}
-
-const MOBILE_WEB_EDGE_SWIPE_WIDTH = 32;
-
-export function useExplorerOpenGesture({ enabled, onOpen }: UseExplorerOpenGestureParams) {
-  const {
-    translateX,
-    backdropOpacity,
-    windowWidth,
-    animateToOpen,
-    animateToClose,
-    setOverlayPeek,
-    isGesturing,
-    gestureAnimatingRef,
-    openGestureRef,
-  } = useExplorerSidebarAnimation();
-  const {
-    mobilePanelState,
-    gestureAnimatingRef: mobilePanelGestureAnimatingRef,
-    openGestureRef: leftOpenGestureRef,
-  } = useSidebarAnimation();
-  const touchStartX = useSharedValue(0);
-  const touchStartY = useSharedValue(0);
-
-  const handleGestureOpen = useCallback(() => {
-    gestureAnimatingRef.current = true;
-    mobilePanelGestureAnimatingRef.current = true;
-    onOpen();
-  }, [onOpen, gestureAnimatingRef, mobilePanelGestureAnimatingRef]);
-
-  return useMemo(
-    () =>
-      Gesture.Pan()
-        .withRef(openGestureRef)
-        .simultaneousWithExternalGesture(leftOpenGestureRef)
-        .enabled(enabled)
-        .manualActivation(true)
-        .onTouchesDown((event) => {
-          const touch = event.changedTouches[0];
-          if (!touch) {
-            return;
-          }
-          touchStartX.value = touch.absoluteX;
-          touchStartY.value = touch.absoluteY;
-        })
-        .onTouchesMove((event, stateManager) => {
-          const touch = event.changedTouches[0];
-          if (!touch || event.numberOfTouches !== 1) {
-            stateManager.fail();
-            return;
-          }
-
-          const deltaX = touch.absoluteX - touchStartX.value;
-          const deltaY = touch.absoluteY - touchStartY.value;
-          const absDeltaX = Math.abs(deltaX);
-          const absDeltaY = Math.abs(deltaY);
-
-          if (!canOpenRightSidebarGesture(mobilePanelState.value, translateX.value, windowWidth)) {
-            stateManager.fail();
-            return;
-          }
-
-          // Browser back-swipe owns most of the viewport; keep this gesture on the right edge.
-          if (isWeb && touchStartX.value < windowWidth - MOBILE_WEB_EDGE_SWIPE_WIDTH) {
-            stateManager.fail();
-            return;
-          }
-
-          // Fail quickly on rightward or clearly vertical intent.
-          if (deltaX >= 10) {
-            stateManager.fail();
-            return;
-          }
-          if (absDeltaY > 10 && absDeltaY > absDeltaX) {
-            stateManager.fail();
-            return;
-          }
-
-          // Activate only on intentional leftward movement.
-          if (deltaX <= -15 && absDeltaX > absDeltaY) {
-            stateManager.activate();
-          }
-        })
-        .onStart(() => {
-          isGesturing.value = true;
-          // The overlay is display:none while closed; reveal it for the drag.
-          runOnJS(setOverlayPeek)(true);
-        })
-        .onUpdate((event) => {
-          // Right sidebar: start from closed position (+windowWidth) and move towards 0.
-          const newTranslateX = Math.max(
-            0,
-            Math.min(windowWidth, windowWidth + event.translationX),
-          );
-          translateX.value = newTranslateX;
-          backdropOpacity.value = interpolate(
-            newTranslateX,
-            [windowWidth, 0],
-            [0, 1],
-            Extrapolation.CLAMP,
-          );
-        })
-        .onEnd((event) => {
-          isGesturing.value = false;
-          const shouldOpenByPosition = translateX.value < (windowWidth * 2) / 3;
-          const shouldOpenByVelocity = event.velocityX < -500;
-          const shouldOpen = shouldOpenByPosition || shouldOpenByVelocity;
-          if (shouldOpen) {
-            animateToOpen();
-            runOnJS(handleGestureOpen)();
-          } else {
-            animateToClose();
-          }
-        })
-        .onFinalize(() => {
-          isGesturing.value = false;
-          runOnJS(setOverlayPeek)(false);
-        }),
-    [
-      enabled,
-      windowWidth,
-      translateX,
-      backdropOpacity,
-      mobilePanelState,
-      animateToOpen,
-      animateToClose,
-      setOverlayPeek,
-      isGesturing,
-      openGestureRef,
-      leftOpenGestureRef,
-      handleGestureOpen,
-      touchStartX,
-      touchStartY,
-    ],
-  );
-}