Skip to content

Add full-screen image browsing to the dashboard - #212

Merged
FlintSH merged 5 commits into
mainfrom
feat/image-gallery
Sep 17, 2026
Merged

FlintSH merged 5 commits into
mainfrom
feat/image-gallery

Conversation

@FlintSH

@FlintSH FlintSH commented Sep 16, 2026

Copy link
Copy Markdown
Owner

What does your PR do?

Adds full-screen image browsing directly to the existing dashboard file grid. Open an image thumbnail, then browse with previous/next buttons, arrow keys, or a mobile swipe—even across result pages. Fit, actual size, zoom, pan, and download controls live inside the viewer.

Use the existing file-type filter to narrow the grid to images. Optional week/month/year grouping lives inside the Upload date menu. Share pages get one small expand button to open the same viewer.

Why are you making these changes?

Implements the phone-gallery workflow clarified in #183: a grid of images, full-image viewing, and quick navigation. Upload-date grouping provides the requested categorization.

How did you implement it?

  • Reuses the existing authenticated image and download routes. Share links expand only their authorized image.
  • Preserves the existing search, file-type, visibility, date, and sort filters while browsing. Image navigation uses the current image as an anchor with deterministic ordering, so uploads and deletions cannot shift a page boundary into a duplicate or skipped image. Grouping uses upload dates and chronological sort.
  • Image thumbnails open the gallery; the card menu and modified link clicks still open the file page.
  • Uses a focus-trapped dialog with Escape/return-focus behavior, keyboard zoom and panning, mobile swipe navigation, and recoverable loading/error states.
  • Background library updates preserve the current image and zoom; the next navigation refreshes its neighbors. Closing restores focus, with a library-heading fallback if the original file leaves the results. Changing date grouping starts at page one.

Screenshots / Recordings (if UI)

Existing file grid, filtered to JPEG images and grouped by upload month:

File grid using the existing file-type filter and optional month grouping

Full-screen viewing with compact controls:

Full-screen image viewer

Actual size, mobile, and share page

Zoom and pan for image details:

Image detail at actual size

Mobile viewer with swipe navigation:

Mobile image viewer

A single expand control on share pages:

Shared image with expand control

Related Issues

Closes #183.

Additional Info

  • Greptile review: 5/5 on 4f44f36, with no outstanding blocking issues.
  • GitHub test suite: 480 passed, 1 skipped, including database-backed tests. Build, TypeScript, ESLint, and formatting checks pass on 4f44f36.
  • Anchored API tests cover sorting and ties in both directions, owner/filter scoping, removed images, and exact position counts. Thirteen hook regression tests cover refreshes, shifted boundaries, and request cancellation. Five additional database-backed browser scenarios confirm insertions/deletions before the active image preserve exact next/previous neighbors on both the first and later viewer pages, with correct end controls. Browser validation also covers background refresh with zoom, focus restoration when the opener disappears, grouping changes from page two, the existing file-type filter, navigation across filtered and mixed-file pages, Back restoration, reset, and 320px/390px layouts. The viewer also passed zoom/pan/swipe, focus/scroll restoration, failed-image recovery, and protected-link checks.
  • Meticulous could not create a cloud run: the image build, smoke test, and upload succeeded, then the service rejected test creation because this project hit its plan limit. No cloud visual verdict is available. CI log.

Screenshots use disposable local fixtures with public sample photos from Lorem Picsum.

@github-actions

github-actions Bot commented Sep 16, 2026

Copy link
Copy Markdown

Flare PR preview: closed

Preview and disposable data removed.

Commit: 4f44f3687451

Public, disposable test instance running untrusted PR code. Anyone can view or change its test data. Do not enter passwords you use elsewhere, credentials, or private files.

@greptile-apps

greptile-apps Bot commented Sep 16, 2026

Copy link
Copy Markdown

Greptile Summary

This PR adds full-screen image browsing to the dashboard file library, with filtering, zooming, keyboard and swipe navigation, downloads, date grouping, and cross-page traversal. The current implementation preserves an open gallery through background refreshes, resets pagination when grouping changes, and uses image-ID anchoring for navigation when the library ordering changes.

Confidence Score: 5/5

Safe to merge; there are no outstanding blocking issues.

The previously reported gallery refresh behavior is fully addressed: background file-list refreshes retain the active gallery session, while filter changes still close it. The grouping behavior is fully addressed because changing or disabling grouping resets the page to 1. The prior file-grid navigation concern was correctly conceded: FlintSH explained that ordinary thumbnail clicks are intentionally the gallery entry point, with file-page access retained through the filename, Manage → Open file, and modified thumbnail clicks. The prior refreshed-page navigation thread was resolved by Greptile without explanation; the current implementation uses the active image ID as the navigation anchor rather than relying on a stale numeric page.

Reviews (4): Last reviewed commit: "Anchor image navigation to the current f..." | Re-trigger Greptile

Comment thread components/dashboard/file-grid/index.tsx Outdated
Comment thread hooks/use-image-gallery.ts Outdated
@FlintSH FlintSH changed the title Add a photo gallery and full-screen image viewer Add full-screen image browsing to the dashboard Sep 16, 2026
Comment thread hooks/use-file-filters.ts
Comment thread hooks/use-image-gallery.ts
@FlintSH
FlintSH merged commit 3a3edeb into main Sep 17, 2026
12 of 13 checks passed
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.

[FEATURE] Image Gallery

1 participant