Unified Ingredient Chips

Current Problems

Cupboard Chip (Current)

6 Bananas cupboard

6 buttons! Redundant "cupboard" badge. Crowded.

List Chip (Current)

✓ Apples 1 bag 🧊0 🗑️

Different layout, trash icon, duplicate checkmarks

Quick Ideas Chip (Current)

✓ Crackers 1 box

Yet another layout, different "i" button color

Issues Summary

3 different chip designs
X vs 🗑️ for remove
"cupboard" badge is redundant
"i" button could be the name itself
Different quantity display positions
Inconsistent checkbox usage

Proposed Unified Design

1. Pantry Chip (Cupboard/Inventory)

For items already in your pantry. Click name to open unified popup.

New Design

6

Bananas

Changes: Removed redundant "cupboard" badge & "i" button. Name is clickable (opens popup). Cleaner layout.

2. Shopping List Chip (To Buy)

For items to buy. Checkbox marks as "picked" (in cart but not home yet).

Unpicked

1

Apples bag 0 in pantry

Picked (in cart)

1

Apples bag 0 in pantry

Changes: Single checkbox (left side). Picked = green background + strikethrough. Stock indicator shows pantry status.

3. Quick Ideas Chip (From Recipe)

For items suggested from recipes. Same checkbox behavior as shopping list.

New Design

1

Crackers box 1 in pantry

Changes: Same structure as shopping chip. Removed "i" button (name is clickable). Shows pantry stock.

Interaction Summary

Click/Tap Actions

Click name → Opens Unified Ingredient Popup (replaces "i" button)
Click checkbox → Marks as picked (green + strikethrough)
Click +/- → Adjusts quantity
Click × → Removes item
Long-press / Drag → Reorder or drag to different list

Terminology Unified

cupboard → pantry (consistent everywhere)
"i" button → clickable name
🗑️ trash → × button (consistent)
duplicate checkmarks → single checkbox

Visual Hierarchy

Pantry chips = Green gradient (you have it)
Shopping chips = Yellow/amber (need to buy)
Quick idea chips = White/neutral (suggested)
Picked state = Green border + strikethrough

Before vs After Comparison

Before (6 elements)