Library page — scaling to many frames

Static HTML wireframes for the five concepts in the BMAD design memo. Each uses the same design tokens as the real Vue app, fake content set at five devices and ten photos so chip-count pain is visible.

• 🚫 Current state (for reference)

  What's shipping today. Five chip-buttons per photo × twice (approve + lock) at N=5 frames.

• 🅐 Photo card + status badge → DevicePicker sheet (recommended)

  Strip the card to image + one-line summary. Tap photo opens the existing DevicePicker bottom sheet.

• 🅑 Device-first tab

  My Photos / By Frame toggle. By-Frame groups photos by device row.

• 🅒 Multi-select + bulk action bar

  Long-press a photo to enter selection mode. Top bar morphs to Send-to/Lock/Delete.

• 🅓 Device chip filter + photo dots

  Top row of device chips filters the grid. Each photo shows tiny dots for the other frames it's on.