Separate photo swipe from card swipe gestures

Move drag handler from outer card to details section only.
Swiping on photos now navigates the carousel, swiping on
the details area below triggers like/dislike/skip actions.
This commit is contained in:
Viktor Barzin 2026-02-22 02:02:10 +00:00
parent a2c1f81644
commit 301579c255
No known key found for this signature in database
GPG key ID: 0EB088298288D958

View file

@ -92,17 +92,14 @@ export function SwipeCard({ feature, onSwipe, onTap, isTop, stackIndex }: SwipeC
return ( return (
<animated.div <animated.div
{...(isTop ? bind() : {})}
style={{ style={{
...style, ...style,
touchAction: 'none',
position: 'absolute' as const, position: 'absolute' as const,
width: '100%', width: '100%',
height: '100%', height: '100%',
zIndex: 10 - stackIndex, zIndex: 10 - stackIndex,
top: stackIndex * 8, top: stackIndex * 8,
}} }}
className="cursor-grab active:cursor-grabbing"
> >
<div className="relative bg-background rounded-2xl border shadow-lg overflow-hidden mx-4 h-full flex flex-col"> <div className="relative bg-background rounded-2xl border shadow-lg overflow-hidden mx-4 h-full flex flex-col">
{/* Color overlay */} {/* Color overlay */}
@ -160,8 +157,12 @@ export function SwipeCard({ feature, onSwipe, onTap, isTop, stackIndex }: SwipeC
</button> </button>
</div> </div>
{/* Details — bottom half */} {/* Details — bottom half (swipe here to like/dislike) */}
<div className="flex-1 min-h-0 p-4 flex flex-col gap-3 overflow-y-auto"> <div
{...(isTop ? bind() : {})}
className="flex-1 min-h-0 p-4 flex flex-col gap-3 overflow-y-auto cursor-grab active:cursor-grabbing"
style={{ touchAction: 'none' }}
>
{/* Price */} {/* Price */}
<div className="text-2xl font-semibold"> <div className="text-2xl font-semibold">
£{p.total_price.toLocaleString()} £{p.total_price.toLocaleString()}