Skip to content

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

Open
AsuraAce wants to merge 1 commit intoinvoke-ai:mainfrom
AsuraAce:codex/gallery-masonry-layout
Open

feat(gallery): add masonry gallery layout mode#9124
AsuraAce wants to merge 1 commit 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend PRs that change frontend files frontend-deps PRs that change frontend dependencies Root

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant