# 🎨 Brief: Telegram Toggle UI — Recipe to Grocery List

**For:** Daedalus 🎨  
**From:** Wadsworth 📋 (routing Director's orders)  
**Project:** Icarus Recipe Integration — Phase 1  
**Priority:** High  
**Deadline:** Week 1 Day 4 (tomorrow)

---

## 🎯 Objective

Design a frictionless Telegram inline keyboard UI for recipe ingredient selection. Every ingredient is a toggle. Default all selected. One tap to deselect. Commit writes to database.

---

## 📋 Requirements

### Message Format

```
🍝 Creamy Tomato and Spinach Pasta
From: budgetbytes.com

Tap to deselect items you don't need:

[Commit to Grocery List]
```

### Inline Keyboard Structure

**Ingredient buttons** (one per row for readability):
- Default state: ✅ ingredient text
- Tapped state: ❌ ingredient text (strikethrough)
- Callback data: `toggle:{recipe_id}:{ingredient_index}`

**Commit button** (bottom, separate row):
- Label: "✅ Commit to List (4 items)" 
- Updates count as user toggles
- Callback data: `commit:{recipe_id}`

**Cancel button** (optional, next to commit):
- Label: "❌ Cancel"
- Callback data: `cancel:{recipe_id}`

### Visual States

| State | Button Text | Indicator |
|-------|-------------|-----------|
| Selected | ✅ 2 cups penne pasta | Normal |
| Deselected | ❌ ~~2 cups penne pasta~~ | Strikethrough |

### Interaction Flow

1. **Initial render:** All ingredients shown with ✅, Commit shows total count
2. **User taps ingredient:** 
   - Immediate message edit (no new message)
   - ✅ → ❌ with strikethrough
   - Commit button updates: "✅ Commit to List (3 items)"
3. **User taps again:**
   - ❌ → ✅, remove strikethrough
   - Commit count updates back
4. **User taps Commit:**
   - UI disappears (or shows "Added to list ✓")
   - Selected items sent to backend

---

## 🎨 Design Tokens

Use existing Icarus family colors for subtle accents:
- Header: Family color dot or emoji
- Selected: Default Telegram blue ✅
- Deselected: Gray ❌
- Commit: Green when active, gray if 0 items selected

---

## 📦 Deliverables

| File | Purpose |
|------|---------|
| `shared/design-tokens/recipe-toggle-ui.md` | Spec, ASCII mockups, color codes |
| `icarus/templates/recipe-toggle.html.j2` | (Optional) If web fallback needed |
| Handoff notes in `shared/project-docs/recipe-ui-handoff.md` | Callback data format, edge cases |

---

## 🔌 Interface Contract

**Callback data format (what buttons send):**
```python
# Toggle ingredient
f"toggle:{recipe_id}:{ingredient_index}"

# Commit selections
f"commit:{recipe_id}"

# Cancel
f"cancel:{recipe_id}"
```

**What Socrates provides (what you render):**
```json
{
  "recipe_id": "creamy-tomato-spinach-pasta-abc123",
  "title": "Creamy Tomato and Spinach Pasta",
  "source": "budgetbytes.com",
  "ingredients": [
    {"index": 0, "text": "2 cups penne pasta", "selected": true},
    {"index": 1, "text": "1 Tbsp olive oil", "selected": true},
    {"index": 2, "text": "1 small onion", "selected": true},
    {"index": 3, "text": "2 cloves garlic", "selected": true}
  ],
  "total_selected": 4
}
```

---

## ⚠️ Edge Cases

1. **All deselected:** Commit button disables or shows "Select at least 1 item"
2. **Timeout:** After 5 min of inactivity, show "Timed out — send recipe again"
3. **Recipe too long:** Paginate? Or show first 15 + "...and 8 more"
4. **Mobile width:** Keep ingredient text under 30 chars, truncate with "..."

---

## ✅ Success Criteria

- [ ] ASCII mockup of full flow
- [ ] Button state transitions documented
- [ ] Callback data format specified
- [ ] Handoff doc ready for Socrates

---

**Ready for your design magic.** 🎨