🎨 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

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

🔌 Interface Contract

Callback data format (what buttons send):

# 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):

{
  "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. 🎨