chore: clean up gesture files

Author: hazre

src/app/components/BackRouteHandler.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { useBackRoute } from './useBackRoute';
+import { useBackRoute } from '$hooks/useBackRoute';
 
 type BackRouteHandlerProps = {
   children: (onBack: () => void) => ReactNode;

src/app/components/SwipeContext.ts

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
-import { animate, motion, useMotionValue } from 'motion/react';
+import { ReactNode, createContext } from 'react';
+import { animate, motion, useMotionValue, MotionValue } from 'motion/react';
 import { useDrag } from '@use-gesture/react';
 import { useAtomValue } from 'jotai';
 import { settingsAtom, RightSwipeAction } from '$state/settings';
 import { useIsMobile } from '$hooks/useIsMobile';
-import { SwipeContext } from './SwipeContext';
 
 const SWIPE_DISTANCE = 80;
 const SWIPE_VELOCITY = 0.4;
 const SNAP_SPRING = { type: 'spring' as const, stiffness: 600, damping: 50, mass: 0.6 };
 
+const SwipeContext = createContext<MotionValue<number> | null>(null);
+
 interface SwipeableChatWrapperProps {
   children: ReactNode;
   onOpenSidebar?: () => void;

src/app/components/SwipeableChatWrapper.tsx

@@ -1,14 +1,15 @@
-import { ReactNode, useRef, useCallback } from 'react';
+import { ReactNode } from 'react';
 import { useAtomValue } from 'jotai';
 import { settingsAtom } from '$state/settings';
 import { useIsMobile } from '$hooks/useIsMobile';
+import { useDrag } from '@use-gesture/react';
 import { createLogger } from '$utils/debug';
 
 const log = createLogger('SwipeableOverlayWrapper');
 
 const SWIPE_DISTANCE = 60;
-const AXIS_LOCK_RATIO = 1.5;
 const SWIPE_VELOCITY = 0.3;
+const AXIS_LOCK_RATIO = 1.5;
 
 interface SwipeableOverlayWrapperProps {
   children: ReactNode;
@@ -23,85 +24,43 @@ export function SwipeableOverlayWrapper({
 }: SwipeableOverlayWrapperProps) {
   const settings = useAtomValue(settingsAtom);
   const isMobile = useIsMobile();
+  const gesturesEnabled = settings.mobileGestures && isMobile;
 
-  const startX = useRef<number | null>(null);
-  const startY = useRef<number | null>(null);
-  const startTime = useRef<number | null>(null);
-
-  const handleTouchStart = useCallback(
-    (e: React.TouchEvent) => {
-      if (!settings.mobileGestures || !isMobile) return;
-      const t = e.touches[0];
-      startX.current = t.clientX;
-      startY.current = t.clientY;
-      startTime.current = Date.now();
-    },
-    [settings.mobileGestures, isMobile]
-  );
-
-  const handleTouchEnd = useCallback(
-    (e: React.TouchEvent) => {
-      if (!settings.mobileGestures || !isMobile) return;
-      if (startX.current === null || startY.current === null || startTime.current === null) return;
+  const bind = useDrag(
+    ({ active, movement: [mx, my], velocity: [vx], direction: [dx] }) => {
+      if (active) return;
 
-      const t = e.changedTouches[0];
-      const dx = t.clientX - startX.current;
-      const dy = t.clientY - startY.current;
-      const dt = Date.now() - startTime.current;
-      const velocity = Math.abs(dx) / dt;
+      const axisBlocked = Math.abs(my) * AXIS_LOCK_RATIO > Math.abs(mx);
+      if (axisBlocked) return;
 
-      const axisBlocked = Math.abs(dy) * AXIS_LOCK_RATIO > Math.abs(dx);
-      const swipedLeft =
-        direction === 'left' &&
-        dx < 0 &&
-        (Math.abs(dx) > SWIPE_DISTANCE || velocity > SWIPE_VELOCITY);
-      const swipedRight =
-        direction === 'right' &&
-        dx > 0 &&
-        (Math.abs(dx) > SWIPE_DISTANCE || velocity > SWIPE_VELOCITY);
+      const thresholdMet =
+        direction === 'left'
+          ? mx < -SWIPE_DISTANCE || (vx > SWIPE_VELOCITY && dx < 0 && mx < 0)
+          : mx > SWIPE_DISTANCE || (vx > SWIPE_VELOCITY && dx > 0 && mx > 0);
 
-      log.log(
-        `touchend — dx:${dx.toFixed(1)} dy:${dy.toFixed(1)} dt:${dt}ms vel:${velocity.toFixed(3)}`,
-        `| axisBlocked:${axisBlocked} swipedLeft:${swipedLeft} swipedRight:${swipedRight}`,
-        `| direction:${direction}`
-      );
-
-      startX.current = null;
-      startY.current = null;
-      startTime.current = null;
-
-      if (axisBlocked) {
-        log.log('axis blocked — ignoring (vertical scroll)');
-        return;
-      }
-
-      if (swipedLeft || swipedRight) {
+      if (thresholdMet) {
         log.log('swipe detected — calling onClose');
         onClose();
-      } else {
-        log.log('not a swipe — ignoring');
       }
     },
-    [settings.mobileGestures, isMobile, direction, onClose]
+    {
+      axis: 'x',
+      filterTaps: true,
+      pointer: { capture: false },
+      enabled: gesturesEnabled,
+    }
   );
 
-  const handleTouchCancel = useCallback(() => {
-    startX.current = null;
-    startY.current = null;
-    startTime.current = null;
-  }, []);
-
   return (
     <div
-      onTouchStart={handleTouchStart}
-      onTouchEnd={handleTouchEnd}
-      onTouchCancel={handleTouchCancel}
+      {...(gesturesEnabled ? bind() : {})}
       style={{
         display: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
         height: '100%',
         width: '100%',
+        touchAction: 'pan-y',
       }}
     >
       {children}

src/app/components/SwipeableOverlayWrapper.tsx

@@ -4,7 +4,7 @@ import { useDrag } from '@use-gesture/react';
 import { useAtomValue } from 'jotai';
 import { settingsAtom } from '$state/settings';
 import { mobileOrTablet } from '$utils/user-agent';
-import { useBackRoute } from '$components/useBackRoute';
+import { useBackRoute } from '$hooks/useBackRoute';
 import { createLogger } from '$utils/debug';
 
 const log = createLogger('MobileRoomOverlay');

src/app/components/useBackRoute.ts src/app/hooks/useBackRoute.tssrc/app/components/useBackRoute.ts renamed to src/app/hooks/useBackRoute.ts

@@ -61,7 +61,7 @@ import { useDirectCreateSelected } from '$hooks/router/useDirectSelected';
 import { mobileOrTablet } from '$utils/user-agent';
 import { useLastFocusedRoom } from '$hooks/useLastFocusedRooms';
 import { SwipeableOverlayWrapper } from '$components/SwipeableOverlayWrapper';
-import { BACK_ROOM_PARAM } from '$components/useBackRoute';
+import { BACK_ROOM_PARAM } from '$hooks/useBackRoute';
 import { createLogger } from '$utils/debug';
 import { resolveSwipeTargetRoom } from '$utils/resolveSwipeTargetRoom';
 import { useDirectRooms } from './useDirectRooms';

src/app/pages/MobileRoomOverlay.tsx

@@ -72,7 +72,7 @@ import { RoomSearchParams } from '$pages/paths';
 import { mobileOrTablet } from '$utils/user-agent';
 import { useLastFocusedRoom } from '$hooks/useLastFocusedRooms';
 import { SwipeableOverlayWrapper } from '$components/SwipeableOverlayWrapper';
-import { BACK_ROOM_PARAM } from '$components/useBackRoute';
+import { BACK_ROOM_PARAM } from '$hooks/useBackRoute';
 import { createLogger } from '$utils/debug';
 import { resolveSwipeTargetRoom } from '$utils/resolveSwipeTargetRoom';
 import { useHomeRooms } from './useHomeRooms';

src/app/pages/client/direct/Direct.tsx

@@ -80,7 +80,7 @@ import { useCallEmbed } from '$hooks/useCallEmbed';
 import { mobileOrTablet } from '$utils/user-agent';
 import { useLastFocusedRoom } from '$hooks/useLastFocusedRooms';
 import { SwipeableOverlayWrapper } from '$components/SwipeableOverlayWrapper';
-import { BACK_ROOM_PARAM } from '$components/useBackRoute';
+import { BACK_ROOM_PARAM } from '$hooks/useBackRoute';
 import { createLogger } from '$utils/debug';
 import { resolveSwipeTargetRoom } from '$utils/resolveSwipeTargetRoom';