← Back to Dev

Staples Carousel — Design Options (#376)

How should staples appear in meal slots? Testing 3 levels of information density. Click arrows to browse staples, checkmark to confirm, X to dismiss.

Option A: Minimal

Just the staple name + emoji. No macros visible until confirmed/logged. Least visual weight — the carousel is unobtrusive, almost like a gentle suggestion. Trade-off: you can't see macro impact without logging it first.

Breakfast
🫐Protein Yogurt + Berries
Lunch
Grilled Chicken Breast
284 cal53g P
Brown Rice
216 cal5g P
Steamed Broccoli
55 cal4g P
Dinner
Snack
🍿Popcorn + Protein Pudding

Test Notes

  • - Click the arrows to swipe between staples in breakfast/snack slots
  • - Click checkmark to confirm (logs immediately, shows green confirmed row)
  • - Click X to dismiss (carousel disappears, + Add button still works)
  • - Lunch has no staples — shows manually logged items only
  • - Dinner has no staples and no items — empty state
  • - On Option C, click the staple name to expand/collapse ingredient list
  • - Consider: which option makes the "fixed cost" concept click fastest?