Goals
Implement the baseline mobile image viewer per the Figma spec. The viewer is a Vue 3 / Codex overlay that replaces MMV on mobile (Minerva).
Acceptance Criteria
- Basic layout is in place (header with title + close, full-bleed image, caption + details link, bottom nav bar with prev/next + counter). Progressive image loading and prefetch are working.
- Keyboard navigation — Left/Right arrow keys to navigate images, Escape to close the viewer.
- Author line — Display the image author/attribution below the title in the header. One line, truncated with ellipsis. (Note: we need to add a new API call to get this info.)
- Tap-to-toggle chrome — Single tap on the image area hides all UI chrome (header, caption, nav bar) except the close button. A second tap anywhere restores the chrome. The close button must remain visible at all times.
- Medium-sized nav buttons — The prev/next buttons in the nav bar should use Codex size="medium".
- Button styling — Nav and close buttons should use the Codex "normal neutral" weight. Current custom dark-bg overrides (border, hover, active states) should be reviewed against this.
Notes:
- Use background-base-interactive for the background
- Image is fully visible and full bleed. Location is equidistant from header and footer elements.
- description is underneath the image if there is one. Two lines then truncate. Uses the caption style. Links are primary progressive
- Licensing information links to commons
- move the next and previous arrows to the bottom alongside the pagination so they don't cover the images
- Medium button for pagination
- use the normal neutral style for buttons
- single tap hides everything except the close affordance. Tapping anywhere again brings back the chrome
- Title is two lines then truncate
- Author is one line and truncate
- MMV is always in dark mode
token list
Title: UI-text-bold with line-height x-small and text colour base
close button: medium neutral-normal
Author: caption-text color-subtle
The description and attribution link are text-color-base and caption-text sizing with primary-progressive links
The key line above the pagination buttons is border-color-muted
Background is background-color-interactive-subtle
pagination text is caption as well