gui/components/Gallery

The photo gallery grid — a browseable feed of every image saved to output/, each paired with its .json metadata sidecar. A virtualized responsive grid of lazy-loaded thumbnails with a keyword search box; clicking a thumbnail opens it in the single-image view (a sibling top-level view).

Virtualized so it scales to very large galleries (100k+ images) with no performance loss: only the cells inside (and just around) the viewport are in the DOM, positioned with a leading spacer and a full-height container so the scrollbar stays honest. The math lives in the pure, unit-tested lib/virtual/windowRange helper. Cells are uniform squares (object-fit: cover) — the fixed cell size is what makes row-windowing exact at scale.

This is a controlled component: the feed (items), loading flag, and search query live in App so the gallery keeps its place when you switch tabs (the view stays mounted, just hidden). Local-only: the feed needs the dev server's filesystem access, so a static/online build passes an empty list and the grid shows an explanatory note.

Two extras layer onto the grid:

  • a composer slot rendered above the header (the narrow prompt box atop the Gallery), and
  • pending placeholder cells prepended to the grid — busy skeletons for images that are generating right now (from the gallery's own prompt box), which drop out as the finished images land in the feed. And a multi-select mode: a per-cell checkbox with select-all / clear and a mass delete.
Description:

  • The photo gallery grid — a browseable feed of every image saved to output/, each paired with its .json metadata sidecar. A virtualized responsive grid of lazy-loaded thumbnails with a keyword search box; clicking a thumbnail opens it in the single-image view (a sibling top-level view).

    Virtualized so it scales to very large galleries (100k+ images) with no performance loss: only the cells inside (and just around) the viewport are in the DOM, positioned with a leading spacer and a full-height container so the scrollbar stays honest. The math lives in the pure, unit-tested lib/virtual/windowRange helper. Cells are uniform squares (object-fit: cover) — the fixed cell size is what makes row-windowing exact at scale.

    This is a controlled component: the feed (items), loading flag, and search query live in App so the gallery keeps its place when you switch tabs (the view stays mounted, just hidden). Local-only: the feed needs the dev server's filesystem access, so a static/online build passes an empty list and the grid shows an explanatory note.

    Two extras layer onto the grid:

    • a composer slot rendered above the header (the narrow prompt box atop the Gallery), and
    • pending placeholder cells prepended to the grid — busy skeletons for images that are generating right now (from the gallery's own prompt box), which drop out as the finished images land in the feed. And a multi-select mode: a per-cell checkbox with select-all / clear and a mass delete.
Source:

(require("gui/components/Gallery"))(props) → {JSX.Element}

Description:

  • The photo gallery grid (virtualized).

Source:
Parameters:
Name Type Description
props object
Properties
Name Type Attributes Description
items Array.<object>

The feed items (newest first).
loading boolean

Whether the feed is still loading.
query string

The current search query (lives in App).
onQueryChange function

(value).
onOpen function

(item) — open an image in the single view.
onRefresh function

Re-scan the output folder.
onDelete function <optional>

(item) — delete an image (+ sidecar) from disk.
onDeleteMany function <optional>

(paths) — mass-delete images (+ sidecars) from disk.
pending Array.<object> <optional>

Live placeholder descriptors { id, label } for in-flight gens.
Returns:
Type
JSX.Element

Methods

(inner) PlaceholderCell()

Description:

  • A busy placeholder cell for an image that's generating right now (from the gallery's prompt box). It shows a shimmer + spinner and the prompt text, and is replaced by the real thumbnail once the finished image lands in the feed.

Source:

(inner) Thumb()

Description:

  • A thumbnail that fades in once loaded. Hovering reveals the same actions as the generate thumbnails: open in the OS default app, reveal in the file explorer, and delete. In multi-select mode the whole cell becomes a toggle (checkbox), and the hover actions are hidden.

Source: