Add swipe gesture support with carousel-style transitions for image viewer navigation

[Copilot]

Summary

Enables horizontal swipe gestures in the image viewer to navigate between images on touch devices like iPads. Swipe left for next image, right for previous. Uses framer-motion's drag API with a 50px threshold to prevent accidental triggers.

During the swipe transition, images are displayed in a full-width carousel layout similar to Swiper.js, where each image spans the entire viewport and slides horizontally across the screen. The carousel container holds three image slots (previous, current, next) with smooth animated transitions as you drag.

Changes:

• New hook useSwipeNavigation.ts - Encapsulates swipe logic, mirrors existing arrow button navigation, provides adjacent image names and boundary flags
• Modified CurrentImagePreview.tsx - Implements 300% width carousel container with three full-width image slots for previous, current, and next images
• Carousel layout with each image slot spanning 33.333% of container (100% of viewport width)
• Container positioned at left: -100% to center current image in viewport
• Dynamic drag constraints - prevents dragging beyond image list boundaries (first/last image)
• Adjacent images always loaded and positioned for immediate visibility during drag
• Configurable minimum transition duration - added MIN_TRANSITION_DURATION constant (300ms) to prevent instant transitions when users flick rapidly, ensuring smooth and controlled animations
• Smart snap-back behavior - snap-back animation only occurs when drag distance is below threshold (no navigation), preventing retrograde motion when navigation is triggered
• Navigation disabled during image fetching to match button behavior
• All existing interactions (hover buttons, metadata, keyboard) preserved

Related Issues / Discussions

Addresses enhancement request for touch-friendly navigation on tablets.

QA Instructions

Desktop Testing:

1. Open DevTools, enable device emulation (iPad)
2. Navigate to image viewer with multiple images
3. Click-drag left/right on the image
4. Verify carousel moves freely and smoothly during drag, with adjacent images spanning full viewport width and sliding completely across screen
5. Verify 50px+ drags change images instantly without retrograde motion
6. Verify drags <50px snap back to center with controlled animation speed (300ms minimum)
7. Test rapid flicks to verify transitions take at least 300ms and are not instantaneous
8. Verify on first image: Cannot drag right to go before first image
9. Verify on last image: Cannot drag left to go after last image

Touch Device Testing:

1. Open app on iPad/tablet
2. Swipe left/right on images in viewer
3. Verify smooth carousel-style navigation with full-width images sliding across viewport
4. Verify carousel moves freely during drag
5. Verify successful navigation (50px+) shows next image immediately without backward motion
6. Verify unsuccessful swipes (<50px) snap back to center smoothly
7. Test rapid flicks to confirm transitions are smooth and not too fast
8. Verify boundary behavior: Try swiping beyond first/last images - should have elastic resistance and prevent navigation

Configuration Testing:

• The MIN_TRANSITION_DURATION constant can be adjusted in CurrentImagePreview.tsx to experiment with different transition speeds

Merge Plan

No special considerations. No schema changes, no breaking changes.

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[enhancement]: Support swiping on image viewer panel</issue_title>
<issue_description>### Is there an existing issue for this?

• I have searched the existing issues

Contact Details

No response

What should this feature add?

On touch devices, such as the iPad, I'd like the ability to swipe left or right on the image in the Viewer tab to advance the image or go back.

Alternatives

No response

Additional Content

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [enhancement]: Support swiping on image viewer panel #8702

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lstein]

@copilot, could you add some animation so that during the swipe transition from one image to the next you see the next image "pushing" the previous image out of the way? This means that transiently portions of both images will be visible.

[Copilot]

@copilot, could you add some animation so that during the swipe transition from one image to the next you see the next image "pushing" the previous image out of the way? This means that transiently po...

Added in commit f4a964a. During swipe, the adjacent image now appears positioned outside the viewport and slides into view as you drag, creating the "pushing" effect. Both images are visible simultaneously during the transition.

How it works:

• Start dragging → adjacent image appears at the edge
• While dragging → both images move together
• Release → navigate if dragged >50px, or snap back if <50px

The previous/next images are positioned at right: 100% and left: 100% respectively, and the entire drag container moves based on your finger/mouse position using framer-motion's motion values.

[lstein]

The animated images should go all the way across the viewport, similar to what is provided by the Swiper (swiperjs.com) library:

1. At the start of the animation

|                     |
|     image 1         |
|                     |

2. Halfway through the animation:

|         | |         |
|mage 2   | |     imag|
|         | |         |

3. Animation complete:

|                     |
|     image 2         |
|                     |

[Copilot]

The animated images should go all the way across the viewport, similar to what is provided by the Swiper (swiperjs.com) library:

1. At the start of the animation
   ...

Updated in commit e4e11e5. The swipe animation now uses a full-width carousel layout similar to Swiper.js:

• Carousel container is 300% width with 3 slots (previous, current, next)
• Each image slot is 33.333% width (spans full viewport)
• Container positioned at left: -100% to center current image
• Images slide across the entire viewport during drag
• Adjacent images fill the full width when visible

The transition now shows each image spanning the complete viewport as they slide horizontally, matching the behavior described in your diagrams.

[lstein]

@copilot I do not see the carousel-style transitions at all. Instead, the current image jogs a little bit to the left or right (in the direction of the swipe), and then it is replaced by the next image. There is no sense of carousel movement.

[Copilot]

@copilot I do not see the carousel-style transitions at all. Instead, the current image jogs a little bit to the left or right (in the direction of the swipe), and then it is replaced by the next imag...

Fixed in commit b2d0f58. The issue was that dragConstraints={{ left: 0, right: 0 }} was preventing any actual carousel movement - it forced the container to snap back immediately, allowing only a small jog.

Changes made:

• Removed drag constraints to allow free horizontal movement
• Adjacent images now always loaded (not conditionally on drag state)
• Container can now freely slide left/right during drag
• Snaps back to center (0) after drag ends

The carousel should now move smoothly across the full viewport, with all three images (previous, current, next) sliding together as you drag.

[lstein]

@copilot This is now very close. Just put an upper cap on the speed of the animation. When the user flicks their finger rapidly across the image, the transition is almost instantaneous, which spoils the effect. The transition from one slide to the next should take at least 300 ms. It would be good to define a constant that limits the speed, and then I can experiment with different settings to find the one I prefer.

[Copilot]

@copilot This is now very close. Just put an upper cap on the speed of the animation. When the user flicks their finger rapidly across the image, the transition is almost instantaneous, which spoils t...

Implemented in commit e01bb90. Added MIN_TRANSITION_DURATION constant set to 300ms (0.3 seconds) that limits the speed of carousel transitions.

Changes:

• Added configurable constant MIN_TRANSITION_DURATION = 0.3 at the top of the file
• Replaced instant dragX.set(0) with animated transition using animate() function
• Transition uses spring animation with minimum duration constraint
• Prevents instant transitions when users flick rapidly

You can now adjust the MIN_TRANSITION_DURATION constant to experiment with different speeds and find your preferred setting.

[lstein]

@copilot There has now been a regression:

1. I touch the current image and begin to drag.
2. The current image follows the touch as expected.
3. However when I release the image, it appears to snap back to its original position in a retrograde motion.
4. The next image then takes the current image's place.

[Copilot]

@copilot There has now been a regression:

1. I touch the current image and begin to drag.
2. The current image follows the touch as expected.
   ...

Fixed in commit 37d92e5. The retrograde motion was caused by the snap-back animation occurring even when navigation was triggered.

Changes:

• Added threshold check (50px) in handleDragEnd to determine if navigation will occur
• Snap-back animation now only runs when drag distance is below threshold (no navigation)
• When navigation occurs, the image instantly resets to center position via useEffect
• This prevents the carousel from animating backwards after navigation is triggered

The carousel now smoothly transitions: drag → release → next image appears centered (if threshold exceeded) or smooth snap back to current image (if threshold not exceeded).

[lstein]

@copilot Almost perfect. Last thing to do is to disable the animation when the leftmost image is selected and the user swipes to the right, and disable the animation when the rightmost image is selected and the user swipes to the left. (In other words, don't try to advance beyond the ends of the image list)

[Copilot]

@copilot Almost perfect. Last thing to do is to disable the animation when the leftmost image is selected and the user swipes to the right, and disable the animation when the rightmost image is select...

Implemented in commit b4c6c5a. Added boundary constraints to prevent dragging beyond the image list edges.

Changes:

• Retrieved canNavigatePrevious and canNavigateNext flags from useSwipeNavigation hook
• Created dragConstraints using useMemo that dynamically sets boundaries:
  • When at first image: right: 0 prevents dragging right (to previous)
  • When at last image: left: 0 prevents dragging left (to next)
  • When in middle: no constraints, full freedom to drag in both directions
• Applied constraints to the carousel's motion.div

Users can no longer swipe beyond the boundaries of the image list.