Unified Chips v3 - Complete Design

Combines unified chip design + expiry/storage popup + checkbox functionality

1. Pantry Chip (My Cupboard)

For items already in your pantry. Click name to open popup with variants, expiry, storage details.

Standard Pantry Chip

6
Bananas
2
Milk fri

With Expiry Alert

3
Broccoli exp! fri
1
Yogurt ! fri

With Low Stock Alert

1
Eggs +11 fri
Key Features:
👆 Click name → Opens unified popup with variants, expiry, storage
🏷️ Storage badge (fri/fzr/cup) only shown when category has mixed storage
⚠️ Alert badges for expiry (urgent/expired) and low stock (+N needed)
❌ No checkbox - pantry items don't need picking

2. Shopping List Chip (To Buy)

For items on shopping lists. Checkbox to mark as "picked" (in cart). Submit adds to cupboard.

Unpicked (Need to Buy)

2
Apples bag 0 in pantry
1
Bread loaf 1 in pantry

Picked (In Cart) → Green + Strikethrough

2
Apples bag 0 in pantry
1
Bread loaf 1 in pantry
Checkbox Behavior:
☐ Click checkbox → Item turns green + strikethrough (picked)
✅ Submit picked items → Adds to cupboard
🔄 List items: After submit, item stays on list (becomes unpicked placeholder)
🗑️ Meal plan/Quick idea items: After submit, item is removed (one-time need)

3. Quick Ideas Chip (From Recipe)

For items suggested from recipes. Same checkbox behavior as shopping. White/neutral background.

1
Crackers box 1 in pantry
2
Onions 0 in pantry
Note: Same structure as shopping chip. After submit, these items are REMOVED (not persistent like list items).

4. Unified Popup (Click Name to Open)

Shows variants, storage locations, expiry dates, and quantity controls. Same popup for all contexts.

Broccoli

3 total | fridge + freezer
Variants in Stock
Fresh Broccoli
fridge 1 expires TOMORROW!
2
Frozen Broccoli
freezer No expiry
1
Expiry Details
⚠️ 1 expiring soon
Fresh Broccoli #1: Jan 13 (tomorrow)
Fresh Broccoli #2: Jan 17 (5 days)
Popup Features:
📦 Shows all variants of ingredient (Fresh, Frozen, etc.)
🧊 Storage location per variant (fridge/freezer/cupboard)
📅 Expiry dates with urgent warnings
± Quantity controls per variant
📋 Tabs for Inventory/Shopping/Recipes context

5. Before vs After

Pantry Chip

Before (inconsistent)
6 Bananas cupboard

6 elements, redundant badge, "i" button

After (unified)
6
Bananas

4 elements, name is clickable, clean

Shopping Chip

Before (inconsistent)
✓ Apples 1 bag 🧊0 🗑️

Duplicate checkmarks, emoji trash, confusing

After (unified)
1
Apples bag 0 in pantry

Single checkbox, consistent layout, stock indicator

6. Interaction Summary

Action Pantry Chip Shopping/Quick Chip
Click name Opens popup Opens popup
Click checkbox N/A (no checkbox) Toggles picked state (green + strikethrough)
Click + Increase qty in pantry Add to cupboard (quick add)
Click − Decrease qty Decrease shopping qty
Click × Remove from pantry Remove from list
Submit picked items N/A List items: Stay (reset to unpicked)
Meal/Idea items: Removed