Skip to content

Rebuild the listing page around a full-bleed hero and add a photo viewer - #123

Open
AndrewG828 wants to merge 1 commit into
user/andrewgao/feature/UI-UX-Lucid-Refactor-12-category-searchfrom
user/andrewgao/feature/UI-UX-Lucid-Refactor-13-product-details
Open

Rebuild the listing page around a full-bleed hero and add a photo viewer#123
AndrewG828 wants to merge 1 commit into
user/andrewgao/feature/UI-UX-Lucid-Refactor-12-category-searchfrom
user/andrewgao/feature/UI-UX-Lucid-Refactor-13-product-details

Conversation

@AndrewG828

@AndrewG828 AndrewG828 commented Sep 3, 2026

Copy link
Copy Markdown
Member

Stacked PR 13 of 15. Based on #122 — merge in order.
#111#112#113#114#115#116#117#118#119#120#121#122#123#124#125

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

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
@coderabbitai

coderabbitai Bot commented Sep 3, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 9876103a-8d64-4b10-ac8c-46c599c6080a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant