[Feature]: Add Haptic Feedback for Touch Interactions

[Th-Shivam]

Problem Statement

Currently, the mobile trackpad provides no tactile feedback when performing actions like clicking, scrolling, or switching modes. This makes the experience feel less responsive and disconnected from the actual PC input being simulated.

Issues with current implementation:
• No confirmation when a tap registers as a click
• Users can't "feel" if they successfully triggered an action
• Less engaging compared to native mobile apps with haptic feedback
• Harder to use without looking at the screen

This reduces the overall user experience quality and makes Rein feel less polished compared to commercial remote desktop solutions that include haptic feedback.

Proposed Solution

Implement haptic feedback using the Web Vibration API for key interactions:

1. Click Actions:

   • Single tap (left click): Short vibration (10ms)
   • Double tap (right click): Two short pulses (10ms, 50ms gap, 10ms)
   • Triple tap (middle click): Three quick pulses

2. Mode Switching:

   • Cursor/Scroll toggle: Medium vibration (20ms)
   • Keyboard open: Gentle pulse (15ms)

3. Gesture Feedback:

   • Scroll start: Very short pulse (5ms)
   • Zoom start: Distinct pattern (5ms, 30ms, 5ms)
   • Long press (drag): Sustained vibration (50ms)

Implementation:

   // In trackpad.tsx
   const hapticClick = (type: 'single' | 'double' | 'triple') => {
     if (!navigator.vibrate) return;
     
     const patterns = {
       single: [10],
       double: [10, 50, 10],
       triple: [10, 30, 10, 30, 10]
     };
     navigator.vibrate(patterns[type]);
   };

4. User Control:

   • Add toggle in Settings: "Enable Haptic Feedback"
   • Save preference to localStorage
   • Default: ON (can be disabled if needed)

5. Browser Compatibility Check:

   • Gracefully degrade if Vibration API not supported
   • Show info message in Settings if unavailable

Alternatives Considered

1. Audio Feedback (click sounds):
   ✓ Works on all devices
   ✗ Annoying in public spaces
   ✗ Not as intuitive as haptic
   ✗ Requires audio files

2. Visual Feedback Only (ripple effects):
   ✓ Always works
   ✗ User needs to look at screen
   ✗ Less engaging than haptic
   ✓ Could be combined with haptic

3. Strong Vibrations (like game controllers):
   ✗ Drains battery faster
   ✗ Can be distracting
   ✗ Not suitable for subtle interactions

4. Haptic Based on Force Touch:
   ✓ More sophisticated
   ✗ Limited device support
   ✗ Not available on all phones

Decision: Standard Vibration API with user control is the best balance of compatibility, battery efficiency, and user experience.

Additional Context

Technical Implementation:
┌─────────────────────────────────────┐
│ Touch Event │
│ ↓ │
│ Gesture Detection │
│ ↓ │
│ Haptic Pattern Selection │
│ ↓ │
│ navigator.vibrate([pattern]) │
│ ↓ │
│ Send Input to WebSocket │
└─────────────────────────────────────┘

Files to Modify:
• src/routes/trackpad.tsx - Add haptic calls in event handlers
• src/routes/settings.tsx - Add haptic toggle
• src/components/Trackpad/ControlBar.tsx - Haptic on button press
• src/hooks/useTrackpadGesture.ts - Haptic on gesture detection

Browser Compatibility:
✓ Chrome for Android: Yes
✓ Safari iOS: Yes (iOS 13+)
✓ Firefox Android: Yes
✓ Samsung Internet: Yes
✗ Desktop browsers: API exists but most don't vibrate

Estimated Effort: 1-2 hours

Code Example:

// Settings page toggle
const [hapticEnabled, setHapticEnabled] = useState(
  localStorage.getItem('rein-haptic') !== 'false'
);

// Helper function
const vibrate = (pattern: number | number[]) => {
  if (hapticEnabled && navigator.vibrate) {
    navigator.vibrate(pattern);
  }
};

// Usage in trackpad
const handleClick = (button: 'left' | 'right') => {
  vibrate(button === 'left' ? [10] : [10, 50, 10]);
  send({ type: 'click', button, press: true });
  // ... rest of code
};

Similar Apps with Haptic:
• Chrome Remote Desktop: Has haptic feedback
• Microsoft Remote Desktop: Vibrates on clicks
• TeamViewer: Haptic on gestures
• iOS/Android native apps: Standard practice

User Benefits:
• More satisfying interaction
• Better accessibility for visually impaired users
• Reduced need to look at screen during use
• Feels more premium and polished
• Battery impact: Negligible (few milliseconds)

Performance Impact:
• CPU: None (native browser API)
• Battery: <0.1% per hour (millisecond vibrations)
• Network: Zero impact

Checklist

• I have searched for existing feature requests to avoid duplicates