feat: Polish Email Builder - Perfect UX! ✨

## 🎨 4 Major Improvements Based on Feedback:

### 1. ✅ Move Tabs to Message Body Section
**Before:**
- Tabs at top level
- Subject shown in preview (unnecessary)

**After:**
- Tabs inside Message Body section
- Subject removed from preview (it's just a string)
- Cleaner, more focused UI

**Layout:**
```
Subject / Title
[input field]

Message Body
                    [Editor | Preview]  [Code Mode]
┌─────────────────────────────────────────────────┐
│ Email Builder / Preview                         │
└─────────────────────────────────────────────────┘
```

### 2. ✅ Darker Canvas Background
**Before:**
- Light gray canvas (bg-gray-50)
- White email wrapper
- Cards hard to see

**After:**
- Darker canvas (bg-gray-100)
- Light gray email wrapper (bg-gray-50)
- Cards stand out clearly
- Better visual hierarchy

### 3. ✅ Editor Matches Preview Exactly
**Problem:**
- Editor used Tailwind classes
- Preview used inline styles
- Different rendering!

**Solution:**
- Editor now uses inline styles
- Matches email rendering exactly
- WYSIWYG is truly WYSIWYG

**Card Styles (Inline):**
```tsx
default: {
  background: "#ffffff",
  borderRadius: "8px",
  padding: "32px 40px"
}

success: {
  background: "#e8f5e9",
  border: "1px solid #4caf50",
  ...
}
```

**Button Styles (Inline):**
```tsx
solid: {
  background: "#7f54b3",
  color: "#fff",
  padding: "14px 28px",
  ...
}

outline: {
  border: "2px solid #7f54b3",
  color: "#7f54b3",
  ...
}
```

**Result:**
- What you see in editor = What you get in email
- No surprises!
- Honest rendering

### 4. ✅ RichTextEditor in Edit Dialog
**Before:**
- Plain textarea for content
- Manual HTML typing
- No formatting toolbar

**After:**
- Full RichTextEditor with toolbar
- Bold, Italic, Lists, Links
- Variable insertion
- HTML generated automatically

**Benefits:**
- ✅ Easy to use
- ✅ No HTML knowledge needed
- ✅ Professional formatting
- ✅ Variable support
- ✅ Much better UX

**Dialog UI:**
```
Edit Card
─────────────────────────────
Card Type: [Default ▼]

Content:
┌─────────────────────────────┐
│ [B] [I] [List] [Link] [Undo]│
│                             │
│ Your content here...        │
│                             │
└─────────────────────────────┘

Available Variables:
{customer_name} {order_number} ...

[Cancel] [Save Changes]
```

## Summary:

All 4 improvements implemented:
1. ✅ Tabs moved to Message Body
2. ✅ Darker canvas for better contrast
3. ✅ Editor matches preview exactly
4. ✅ RichTextEditor for easy editing

**The Email Builder is now PERFECT for non-technical users!** 🎉

admin-spa/src/components/EmailBuilder/EmailBuilder.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
+import { RichTextEditor } from '@/components/ui/rich-text-editor';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Plus, Type, Square, MousePointer, Minus, Space } from 'lucide-react';
@@ -179,8 +180,8 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
       </div>
 
       {/* Email Canvas */}
-      <div className="bg-gray-50 rounded-lg p-6 min-h-[400px]">
-        <div className="max-w-2xl mx-auto bg-white rounded-lg shadow-sm p-8 space-y-6">
+      <div className="bg-gray-100 rounded-lg p-6 min-h-[400px]">
+        <div className="max-w-2xl mx-auto bg-gray-50 rounded-lg shadow-sm p-8 space-y-6">
           {blocks.length === 0 ? (
             <div className="text-center py-12 text-muted-foreground">
               <p>{__('No blocks yet. Add blocks using the toolbar above.')}</p>
@@ -221,14 +222,16 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
           <div className="space-y-4 py-4">
             {(editingBlock?.type === 'header' || editingBlock?.type === 'text') && (
               <div className="space-y-2">
-                <Label htmlFor="content">{__('Content (HTML)')}</Label>
-                <Textarea
-                  id="content"
-                  value={editingContent}
-                  onChange={(e) => setEditingContent(e.target.value)}
-                  rows={6}
-                  className="font-mono text-sm"
+                <Label htmlFor="content">{__('Content')}</Label>
+                <RichTextEditor
+                  content={editingContent}
+                  onChange={setEditingContent}
+                  placeholder={__('Enter your content...')}
+                  variables={variables}
                 />
+                <p className="text-xs text-muted-foreground">
+                  {__('Use the toolbar to format text. HTML will be generated automatically.')}
+                </p>
               </div>
             )}
 
@@ -250,14 +253,16 @@ export function EmailBuilder({ blocks, onChange, variables = [] }: EmailBuilderP
                   </Select>
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="card-content">{__('Content (HTML)')}</Label>
-                  <Textarea
-                    id="card-content"
-                    value={editingContent}
-                    onChange={(e) => setEditingContent(e.target.value)}
-                    rows={8}
-                    className="font-mono text-sm"
+                  <Label htmlFor="card-content">{__('Content')}</Label>
+                  <RichTextEditor
+                    content={editingContent}
+                    onChange={setEditingContent}
+                    placeholder={__('Enter card content...')}
+                    variables={variables}
                   />
+                  <p className="text-xs text-muted-foreground">
+                    {__('Use the toolbar to format text. HTML will be generated automatically.')}
+                  </p>
                 </div>
               </>
             )}