Skip to content

feat(gallery): add masonry gallery layout mode#9124

Open
AsuraAce wants to merge 3 commits intoinvoke-ai:mainfrom
AsuraAce:codex/gallery-masonry-layout
Open

feat(gallery): add masonry gallery layout mode#9124
AsuraAce wants to merge 3 commits intoinvoke-ai:mainfrom
AsuraAce:codex/gallery-masonry-layout

Conversation

@AsuraAce
Copy link
Copy Markdown

@AsuraAce AsuraAce commented May 5, 2026

Summary

Adds a new gallery layout mode for browsing images in a masonry layout while preserving the existing square grid as the default.

This PR adds:

  • A persisted grid | masonry gallery layout setting, defaulting to grid with a persisted-state migration.
  • A masonry-only non-paged gallery path with DTO batching, thumbnail preloading, keyboard navigation scroll handling, and static masonry rendering for smaller boards.
  • Header icon controls for switching between grid and masonry layouts.
  • Explicit behavior that paged gallery remains grid-only and selecting masonry disables paged gallery.
View screenshots Masonry View: image

Grid (Regular Default)
image

Related Issues / Discussions

N/A

QA Instructions

Validated locally with:

  • pnpm --dir invokeai/frontend/web exec vitest run src/features/gallery/components/GalleryImageGridMasonry.test.ts src/features/gallery/components/galleryLayout.test.ts src/features/gallery/store/types.test.ts
  • pnpm --dir invokeai/frontend/web exec tsc --noEmit
  • pnpm --dir invokeai/frontend/web run lint:eslint
  • pnpm --dir invokeai/frontend/web run lint:prettier
  • pnpm --dir invokeai/frontend/web run lint:dpdm

Manual browser QA covered:

  • Switching between grid and masonry from the gallery header.
  • Masonry scrolling with large boards and mixed aspect ratios.
  • Keyboard navigation and alt-compare navigation in masonry.
  • Paged gallery remaining grid-only.
  • Header remaining visible when switching layout modes after scrolling.

Merge Plan

No special merge handling expected.

Checklist

  • The PR has a short but descriptive title, suitable for a changelog
  • Tests added / updated (if applicable)
  • Changes to a redux slice have a corresponding migration
  • Documentation added / updated (if applicable)
  • Updated What's New copy (if doing a release after this PR)

@github-actions github-actions Bot added Root frontend-deps PRs that change frontend dependencies frontend PRs that change frontend files labels May 5, 2026
@AsuraAce AsuraAce changed the title [codex] Add masonry gallery layout mode feat(gallery): add masonry gallery layout mode May 5, 2026
@AsuraAce AsuraAce force-pushed the codex/gallery-masonry-layout branch from 036e2e9 to 0adeaa8 Compare May 5, 2026 10:23
@AsuraAce AsuraAce marked this pull request as ready for review May 5, 2026 13:26
@AsuraAce AsuraAce marked this pull request as draft May 6, 2026 05:52
@AsuraAce AsuraAce marked this pull request as ready for review May 6, 2026 11:46
@lstein lstein added the 6.14.x label May 7, 2026
@lstein lstein moved this to 6.14.x Theme: LIBRARY UPDATES in Invoke - Community Roadmap May 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

6.14.x frontend PRs that change frontend files frontend-deps PRs that change frontend dependencies Root

Projects

Status: 6.14.x Theme: LIBRARY UPDATES

Development

Successfully merging this pull request may close these issues.

3 participants