feat: enhance PullToRefresh component for native platform support and improve touch event handling

Author: gazarrillo

src/components/ui/PullToRefresh.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback, type ReactNode } from 'react'
+import { Capacitor } from '@capacitor/core'
 
 const THRESHOLD = 80
 const MAX_PULL = 120
@@ -10,13 +11,15 @@ export function PullToRefresh({
   onRefresh: () => Promise<void>
   children: ReactNode
 }) {
+  const isNativePlatform = Capacitor.isNativePlatform()
   const [pullDistance, setPullDistance] = useState(0)
   const [refreshing, setRefreshing] = useState(false)
   const startY = useRef(0)
   const pulling = useRef(false)
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent) => {
+      if (!isNativePlatform) return
       if (refreshing) return
       // Only activate when scrolled to the top
       const scrollTop =
@@ -25,11 +28,12 @@ export function PullToRefresh({
       startY.current = e.touches[0].clientY
       pulling.current = true
     },
-    [refreshing],
+    [isNativePlatform, refreshing],
   )
 
   const handleTouchMove = useCallback(
     (e: React.TouchEvent) => {
+      if (!isNativePlatform) return
       if (!pulling.current || refreshing) return
       const dy = e.touches[0].clientY - startY.current
       if (dy < 0) {
@@ -41,10 +45,11 @@ export function PullToRefresh({
       const distance = Math.min(dy * 0.5, MAX_PULL)
       setPullDistance(distance)
     },
-    [refreshing],
+    [isNativePlatform, refreshing],
   )
 
   const handleTouchEnd = useCallback(async () => {
+    if (!isNativePlatform) return
     if (!pulling.current && pullDistance === 0) return
     pulling.current = false
 
@@ -60,61 +65,65 @@ export function PullToRefresh({
     } else {
       setPullDistance(0)
     }
-  }, [pullDistance, onRefresh])
+  }, [isNativePlatform, pullDistance, onRefresh])
 
   const progress = Math.min(pullDistance / THRESHOLD, 1)
 
   return (
     <div
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
+      onTouchStart={isNativePlatform ? handleTouchStart : undefined}
+      onTouchMove={isNativePlatform ? handleTouchMove : undefined}
+      onTouchEnd={isNativePlatform ? handleTouchEnd : undefined}
       className="relative"
     >
       {/* Spinner */}
-      <div
-        className="absolute left-1/2 -translate-x-1/2 flex items-center justify-center z-10 pointer-events-none"
-        style={{
-          top: pullDistance - 40,
-          opacity: progress,
-          transition: pulling.current ? 'none' : 'all 0.3s ease',
-        }}
-      >
-        <svg
-          className="h-6 w-6 text-ink-muted"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2.5}
+      {isNativePlatform && (
+        <div
+          className="absolute left-1/2 -translate-x-1/2 flex items-center justify-center z-10 pointer-events-none"
           style={{
-            transform: refreshing
-              ? undefined
-              : `rotate(${progress * 360}deg)`,
-            transition: pulling.current ? 'none' : 'transform 0.3s ease',
+            top: pullDistance - 40,
+            opacity: progress,
+            transition: pulling.current ? 'none' : 'all 0.3s ease',
           }}
         >
-          {refreshing ? (
-            <g className="animate-spin origin-center">
+          <svg
+            className="h-6 w-6 text-ink-muted"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2.5}
+            style={{
+              transform: refreshing
+                ? undefined
+                : `rotate(${progress * 360}deg)`,
+              transition: pulling.current ? 'none' : 'transform 0.3s ease',
+            }}
+          >
+            {refreshing ? (
+              <g className="animate-spin origin-center">
+                <path
+                  strokeLinecap="round"
+                  d="M12 2a10 10 0 0 1 10 10"
+                />
+              </g>
+            ) : (
               <path
                 strokeLinecap="round"
-                d="M12 2a10 10 0 0 1 10 10"
+                strokeLinejoin="round"
+                d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0 1 13.3-4.3M20 15a8 8 0 0 1-13.3 4.3"
               />
-            </g>
-          ) : (
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0 1 13.3-4.3M20 15a8 8 0 0 1-13.3 4.3"
-            />
-          )}
-        </svg>
-      </div>
+            )}
+          </svg>
+        </div>
+      )}
 
       {/* Content */}
       <div
         style={{
-          transform: `translateY(${pullDistance}px)`,
-          transition: pulling.current ? 'none' : 'transform 0.3s ease',
+          transform: isNativePlatform ? `translateY(${pullDistance}px)` : undefined,
+          transition: isNativePlatform
+            ? (pulling.current ? 'none' : 'transform 0.3s ease')
+            : undefined,
         }}
       >
         {children}