Add Record — Cart UI Mockups

Three directions for a multi-record import flow. Static HTML, not wired up.

A — Side-by-side panel

Cart lives as a right column inside the existing import modal. Everything on one screen. Strongest when the user is actively curating a batch.

Import records into your collection

Search MusicBrainz, add records to the cart, then import them all at once.

Search for a record

Steven Wilson

The Harmony Codex

2023 · Album

In cart · CD
Steven Wilson

Hand. Cannot. Erase.

2015 · Album
Steven Wilson

The Raven That Refused to Sing

2013 · Album

In cart · Vinyl
Steven Wilson

To The Bone

2017 · Album

Showing 4 of 38 results · scroll to load more

Import cart

2 records ready to import

Steven Wilson

The Harmony Codex
Steven Wilson

The Raven That Refused to Sing

Each import runs as a background job, same pipeline as barcode scan batches.

B — Bottom tray

Search keeps the full width (closest to today's layout). Cart is a collapsible tray pinned to the bottom. Shown here expanded — collapsed state is a slim bar with a count.

Import records into your collection

Search for a record

Steven Wilson

The Harmony Codex

2023 · Album

In cart · CD
Steven Wilson

Hand. Cannot. Erase.

2015 · Album
Steven Wilson

The Raven That Refused to Sing

2013 · Album

In cart · Vinyl

Cart

2 records

Steven Wilson

The Harmony Codex

CD
Steven Wilson

The Raven That Refused to Sing

Vinyl

Collapsed tray state

C — Inline state + floating cart

Smallest footprint: results list looks almost like today, added items flip to an "In cart" chip. A floating badge in the corner opens a popover with the cart and import button.

Floating trigger (popover closed)

Quick tradeoffs

A (side-by-side): best discoverability and clearest mental model, but modal needs to grow (cart column steals width from search). Cramped on narrower viewports.
B (bottom tray): closest to the current layout. Cheap to build on top of today's component. Tray is always reachable but eats vertical room when expanded.
C (inline + floating): smallest visual change; cart hidden behind a badge click. Adds a click between "I want to import" and the import button, but list view feels unchanged.