fix: add mobile swipe navigation to history lightbox

[Simplereally]

Summary

• add mobile-only vertical swipe handling to the history lightbox so swipe up opens the next item and swipe down opens the previous one
• keep the change scoped to gallery-opened lightbox sessions and disable gestures while zooming, editing, or viewing compare mode
• cover the new gesture behavior with lightbox tests for next, previous, and ignored short drags

Testing

• /home/josh/.bun/bin/bun run test components/images/image-lightbox.test.tsx components/studio/layout/studio-shell.test.tsx
• /home/josh/.bun/bin/bun x tsc --noEmit

Summary by CodeRabbit

• New Features

  • Mobile swipe navigation: Users can now swipe up and down in the image lightbox to navigate between images on touch devices.
  • Enhanced gallery navigation in studio with improved lightbox controls for seamless image browsing.

• Tests

  • Added comprehensive test coverage for mobile swipe gesture navigation in the lightbox.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
bloomstudio	Ignored	Preview	Mar 10, 2026 4:22pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a53ae355-b6c7-4df0-91b2-27cf9905a945

📥 Commits

Reviewing files that changed from the base of the PR and between df4c540 and e895a16.

📒 Files selected for processing (4)

• components/images/image-lightbox.test.tsx
• components/images/image-lightbox.tsx
• components/studio/layout/studio-shell.tsx
• hooks/use-vertical-swipe-navigation.ts

---

📝 Walkthrough

Walkthrough

This PR introduces vertical swipe navigation to the ImageLightbox component. A new reusable hook (useVerticalSwipeNavigation) handles touch-based pointer events to detect vertical swipes, while the ImageLightbox component accepts a mediaNavigation prop to wire next/previous handlers. StudioShell integrates this feature by tracking gallery navigation state and providing media navigation callbacks to the lightbox.

Changes

Cohort / File(s)	Summary
Swipe Hook Infrastructure hooks/use-vertical-swipe-navigation.ts	New React hook implementing vertical swipe gesture detection via pointer events. Tracks active touch state, validates swipe distance and vertical dominance, and triggers onSwipeUp/onSwipeDown callbacks. Supports configurable swipe distance threshold and direction lock ratio.
ImageLightbox Component Updates components/images/image-lightbox.tsx	Added mediaNavigation prop to enable next/previous navigation handlers. Integrated swipe hook with backdrop suppression logic to prevent accidental closes during swipes. Wrapped render paths with swipe-enabled containers and added data-testid attributes for testing.
StudioShell Integration components/studio/layout/studio-shell.tsx	Wired gallery lightbox navigation: tracks navigation state, computes current lightbox index, provides next/previous handlers, and passes mediaNavigation object to ImageLightbox. Reworked lightbox open/close flow with dedicated handlers.
Test Coverage components/images/image-lightbox.test.tsx	Added "Lightbox - Mobile Swipe Navigation" test suite with pointer event simulation for swipe gestures. Note: test block appears duplicated in diff, covering onNext/onPrevious callback invocation and short drag ignore behavior.

Sequence Diagram

sequenceDiagram
    participant User as User/Touch Device
    participant Hook as useVerticalSwipeNavigation
    participant Lightbox as ImageLightbox
    participant Shell as StudioShell
    participant State as Gallery State

    User->>Hook: Pointer Down (touch start)
    Hook->>Hook: Initialize swipe tracking
    
    User->>Hook: Pointer Move (drag)
    Hook->>Hook: Calculate deltaX/deltaY & validate direction
    Hook->>Hook: Enforce vertical lock if dominant
    
    User->>Hook: Pointer Up (touch end)
    Hook->>Hook: Validate swipe distance & dominance
    Hook->>Lightbox: onSwipeUp/onSwipeDown callback
    
    Lightbox->>Lightbox: Suppress backdrop click
    Lightbox->>Shell: mediaNavigation.onNext/onPrevious()
    
    Shell->>State: Update lightbox image index
    Shell->>Shell: Re-render with new image
    Shell->>Lightbox: Update mediaNavigation state
    
    Lightbox->>Lightbox: Reset suppression on image change

Loading

Estimated Code Review Effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly Related PRs

• feat: convex optimizations, mobile studio ui #22: Modifies ImageLightbox and studio-shell integration for mobile gallery navigation, overlapping with lightbox click handling changes and mediaNavigation wiring.

Poem

🐰 A touch, a swipe, a graceful glide,
Through gallery images far and wide,
No need to tap—just finger flow,
Up for next, down for the show,
Mobile lightbox hops with glee! ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/mobile-history-lightbox-swipe

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e895a162e0

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Suppress backdrop close for blocked swipe directions

The backdrop-click suppression is only set when hasNext/hasPrevious is true, so at the first or last gallery item a long swipe in the unavailable direction leaves suppressBackdropClickRef unset. In browsers that still emit a click after that touch sequence (the same behavior this ref is guarding against on successful swipes), handleBackdropCloseAttempt will treat it as a real backdrop click and close the lightbox instead of no-oping at the boundary.

Useful? React with 👍 / 👎.