Rebuild the listing page around a full-bleed hero and add a photo viewer - #123
Open
AndrewG828 wants to merge 1 commit into
Conversation
The listing page becomes a photo-first layout: a 65%-height hero that the details card overlaps with a rounded top edge, a swipeable pager with a photo counter, and a tap-to-open full screen viewer with pinch, pan and double-tap zoom. Toolbar icons sit directly on the photo, so their color can't be fixed. `updateHeroIconContrast()` samples the strip of the current image that actually falls under the toolbar and picks black or white; a geometry observer flips it back to black once the hero scrolls out from under the bar. Both transitions are animated so a swipe between a dark and a light photo doesn't snap. Details for reviewers: - The viewer's paging is disabled while an image is zoomed in, otherwise the drag that pans a zoomed photo also flicks to the next one. - Zoom offsets are clamped to the scaled image bounds, so you cannot pan a photo off screen and be left looking at a black rectangle. - The page carries its own bottom inset. Pushed destinations don't inherit the tab root's clearance, so Similar Items sat underneath the floating tab bar. - The custom back chevron replaces the system one, which takes the interactive swipe-back gesture with it — hence `enableSwipeBack()`. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017R8mua9xepzF3mnRETtd6W
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
This was referenced Sep 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The listing page becomes a photo-first layout: a 65%-height hero that the
details card overlaps with a rounded top edge, a swipeable pager with a photo
counter, and a tap-to-open full screen viewer with pinch, pan and double-tap
zoom.
Toolbar icons sit directly on the photo, so their color can't be fixed.
updateHeroIconContrast()samples the strip of the current image that actuallyfalls under the toolbar and picks black or white; a geometry observer flips it
back to black once the hero scrolls out from under the bar. Both transitions are
animated so a swipe between a dark and a light photo doesn't snap.
Details for reviewers:
drag that pans a zoomed photo also flicks to the next one.
off screen and be left looking at a black rectangle.
tab root's clearance, so Similar Items sat underneath the floating tab bar.
swipe-back gesture with it — hence
enableSwipeBack().Co-Authored-By: Claude Opus 5 (1M context) noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_017R8mua9xepzF3mnRETtd6W