feat: Add button dialog with text, link, and style options
## ✨ Better Button Insert!
### What Changed:
**Before:**
- Click [+ Button] → Inserts generic button immediately
- No customization
- Always same text/link
**After:**
- Click [+ Button] → Opens dialog
- Configure before inserting
- Professional UX
### Button Dialog Features:
**3 Configuration Options:**
1. **Button Text**
- Input field for custom text
- Placeholder: "e.g., View Order, Track Shipment"
- Default: "Click Here"
2. **Button Link**
- Input field for URL or variable
- Placeholder: "e.g., {order_url}, {product_url}"
- Default: "{order_url}"
- Hint: "Use variables like {order_url} or enter a full URL"
3. **Button Style** (NEW!)
- **Solid** - High priority, urgent action
- Purple background, white text
- For primary CTAs (View Order, Complete Payment)
- **Outline** - Secondary action, less urgent
- Purple border, purple text, transparent bg
- For secondary actions (Learn More, Contact Support)
### Visual Style Selector:
```
○ [Solid] High priority, urgent action
○ [Outline] Secondary action, less urgent
```
Shows actual button preview in dialog!
### Why 2 Button Types?
**Solid (Primary):**
- Urgent actions: "Complete Order", "Pay Now", "Track Shipment"
- High conversion priority
- Stands out in email
**Outline (Secondary):**
- Optional actions: "View Details", "Learn More", "Contact Us"
- Lower priority
- Doesn't compete with primary CTA
**Email Best Practice:**
- 1 solid button per email (primary action)
- 0-2 outline buttons (secondary actions)
- Clear visual hierarchy = better conversions
### Output:
**Solid:**
```html
<a href="{order_url}" class="button">View Order</a>
```
**Outline:**
```html
<a href="{order_url}" class="button-outline">Learn More</a>
```
### Preview Support:
- Both styles render correctly in preview
- Solid: Purple background
- Outline: Purple border, transparent bg
Next: Email content builder? 🤔
74e084caa6