Skip to content

Browse and Cart

Jump to bottom
Björn Strausmann edited this page May 10, 2026 · 1 revision

Browse mode and the print cart

Two UI patterns that work across every integration (Snipe-IT, Grocy, Spoolman) — orthogonal to the search/scan flow.

Status: design specification, not yet implemented. See issues #26 (browse + grid view), #27 (cart + bulk-print), #28 (item-image proxy + cache). Architecture: ADR 0013.

Browse mode

Each integration tab has three coexisting modes:

Mode Use when
Search You know the asset tag, product code, or spool ID
Scan You have a barcode/QR you can point at the camera
Browse You want to see what's there — visual recognition, not naming

The browse view is a paginated grid of tiles. On a phone the grid is two columns; on a wider screen it expands to four. Each tile shows:

  • the item's image (or a placeholder generated from the item's metadata — for Spoolman, a colour swatch derived from the filament's color_hex)
  • the item's title
  • its primary ID

Tap a tile → detail view: full metadata, layout dropdown (filtered to the integration's compatible layouts — see ADR 0012), live preview rendered with the item's actual data, and two action buttons:

  • Print now — single print, immediate
  • Add to cart — drop into the cart, keep browsing

Filters help narrow large catalogues:

Integration Useful filters
Snipe-IT category, status, location, manufacturer
Grocy location, group, expiry status
Spoolman material, vendor, colour

The cart

The cart is a tiny stateful concept that lives in your browser's localStorage — no server-side session in MVP. Items from any integration can sit in the cart together; they're independent label-print intents that get bundled into batched print jobs at submission time.

Cart icon

A printer icon with a counter badge sits in the top-right of every screen:

┌────────────────────────────────────────┐
│ Label Printer Hub                  🖨️ 5│  ← total quantity across all cart items
│  ─────────────────────────────         │
│  [Snipe-IT] [Grocy] [Spoolman]         │
└────────────────────────────────────────┘

The badge is the sum of all quantities, not the number of distinct items. Adding Item A × 3 and Item B × 2 shows badge 5.

Tap the icon → cart overview.

Cart overview

Items grouped by integration. Per row:

Element Behaviour
Thumbnail The item's cached image (or placeholder)
Title and ID Snapshot taken when added; the actual print uses fresh data at submission time
Layout dropdown Pick a different layout — refreshes the live preview
Tape size Auto-derived from the chosen layout
Quantity stepper − and + buttons, range 1-99; or click the number to type
Remove (✕) Drop this item from the cart

Below the list:

  • Total summary: total label count, estimated tape consumption per tape size, which printer(s) the items target
  • Print all (primary): kicks off the bulk print — see below
  • Clear cart (secondary, with confirmation)

Empty cart shows a friendly message and a link to browse mode.

Print all — what happens

The hub groups your cart by (printer_id, tape_mm) and submits one batch job per group:

Cart:
  3× MacBook Pro 16   (Snipe-IT, ql820, 24mm, layout: snipeit-asset-24mm)
  1× Office Chair     (Snipe-IT, ql820, 24mm, layout: snipeit-asset-24mm)
  2× Tomato Sauce     (Grocy,    pt750w, 12mm, layout: grocy-product-12mm)

→ Confirmation modal:
   ◆ ql820 (24mm tape):  4 pages, ~24 cm tape
   ◆ pt750w (12mm tape): 2 pages, ~12 cm tape
   [ Cancel ]  [ Print all ]

→ Two print jobs created. Each is a single multi-page job in its printer's queue.

Brother printers natively support multi-page jobs (one TCP/9100 stream sends all pages, separated by 0Ch, ending with 1Ah). From the queue's perspective this is one job with one ID and one lifecycle — see ADR 0005.

If a job fails part-way through (e.g. tape runs out at page 3 of 4), the whole job is marked failed; retry creates a new batch with all pages. The hub does not currently support per-page retry — that's a future enhancement if needed.

Cart and notifications

If you've granted notification permission (Install as PWA), the hub shows a single "All N labels printed" toast when a batch completes — not one per page.

What the cart does NOT do (yet)

  • No cross-device sync. Adding items on your phone doesn't make them appear on your desktop. (Tracked in ADR 0013 Option D as a possible v2 feature.)
  • No saved carts ("recurring print sets"). Each cart is one-shot.
  • No partial submission. "Print all" prints all groups; you can't pick a subset without removing the others first.

Tips

  • Long shopping list? Use browse mode to add items, then review the cart. Removing an item is one tap.
  • Same item, multiple labels (e.g. labelling 5 identical boxes): use the quantity stepper rather than tapping "add to cart" five times — it's one cart entry with quantity: 5.
  • Mixed-tape cart: the confirmation modal makes this obvious. Switch the layout of an item to one that uses a different tape if you want to consolidate.
  • Empty browse view: check the integration's filters — you may have one applied that excludes everything.

See also

Label Printer Hub

Getting Started

Integrations

Workflows

Help

Repo

Clone this wiki locally