Collection detail

Source: artifex/frontend/src/components/CollectionDetail.jsx Category: View

Collection detail — a single collection’s page: an editable header (name, description, cover, item count) and a masonry grid of its images. Edit mode swaps the header text for inputs; Save persists.

What it is

Two halves: a small header that toggles between read and edit modes, and the image grid below. The grid is the same MasonryGrid used for the main gallery — filtered to this collection’s images.

Why it exists

Collections need a dedicated page: the grid view is what users actually want, and the header is where management happens (rename, describe, add/remove images, delete). Keeping these two on one page reduces navigation — no separate “settings” page.

Live

← collections

Landscapes

Outdoor scenes, mostly atmospheric. Updated semi-regularly.

48 images · updated 3 days ago

Edit mode toggle

const [editing, setEditing] = useState(false);

return (
  <header>
    {editing ? (
      <form onSubmit={handleSave}>
        <input name="name" defaultValue={collection.name} />
        <textarea name="description" defaultValue={collection.description} />
        <button type="submit">Save</button>
      </form>
    ) : (
      <>
        <h1>{collection.name}</h1>
        <p>{collection.description}</p>
        <button onClick={() => setEditing(true)}>Edit</button>
      </>
    )}
  </header>
);

How it’s used

Artifex — /collections/:id route; entered from the collections page
Pattern generalizes to any single-resource page with an inline-editable header

Gotchas

Inline-edit form submission. Enter in the name field should save; Escape should cancel (keep original values).
Optimistic save. The form UI goes to “Saved!” immediately. If the API call fails, show an error and revert. Don’t block the UI for the round-trip.
Delete confirmation is mandatory. Collections take time to curate; an accidental delete is painful. Confirm with the collection’s name (“type Landscapes to confirm”) for extra-paranoid cases.
Remove-from-collection vs delete. Dragging an image out of the collection removes the association. Deleting the image deletes it everywhere. The UI must make the difference obvious.
Add images. The ”+ Add images” UI can be a modal showing the main gallery with checkboxes. Or drag images from the main gallery onto the tab. Or “select images, action bar says Add to Collection”. Pick one primary path.
Ownership. If collections can be shared, only the owner sees Edit / Delete. Viewers see a read-only header. Check permissions on every render.
Large collections. A collection with 2000 items needs pagination or virtualized grid; don’t render all thumbnails at once.