# 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

(search area)

Cart

2 records

## 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.

### 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)

- Steven Wilson

  The Harmony Codex

  CD

- Steven Wilson

  The Raven That Refused to Sing

  Vinyl

Floating trigger (popover closed)

(search + results)

## 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.