cmux-remote/public/js/gestures.js

class GestureHandler {
  constructor(sidebar) {
    this.sidebar = sidebar;
    this.startX = 0;
    this.startY = 0;
    this.tracking = false;

    document.addEventListener('touchstart', (e) => this.onTouchStart(e), { passive: true });
    document.addEventListener('touchmove', (e) => this.onTouchMove(e), { passive: false });
    document.addEventListener('touchend', (e) => this.onTouchEnd(e), { passive: true });
  }

  onTouchStart(e) {
    const touch = e.touches[0];
    this.startX = touch.clientX;
    this.startY = touch.clientY;
    this.tracking = true;
  }

  onTouchMove(e) {
    if (!this.tracking) return;

    const touch = e.touches[0];
    const dx = touch.clientX - this.startX;
    const dy = touch.clientY - this.startY;

    // Only track horizontal swipes from edge
    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
      // Swipe right from left edge to open sidebar
      if (dx > 0 && this.startX < 50 && !this.sidebar.isOpen()) {
        e.preventDefault();
      }
      // Swipe left to close sidebar
      if (dx < 0 && this.sidebar.isOpen()) {
        e.preventDefault();
      }
    }
  }

  onTouchEnd(e) {
    if (!this.tracking) return;
    this.tracking = false;

    const touch = e.changedTouches[0];
    const dx = touch.clientX - this.startX;
    const dy = touch.clientY - this.startY;

    // Minimum swipe distance
    if (Math.abs(dx) < 50 || Math.abs(dy) > Math.abs(dx)) return;

    // Swipe right from left edge = open sidebar
    if (dx > 0 && this.startX < 50) {
      this.sidebar.open();
    }

    // Swipe left = close sidebar
    if (dx < 0 && this.sidebar.isOpen()) {
      this.sidebar.close();
    }
  }
}

window.GestureHandler = GestureHandler;