feat: All 4 issues fixed - back nav, variables, defaults, code mode

## ✅ All 4 Issues Resolved!

### 1. Back Navigation Button ✅
**Before:** Back button in action area (right side)
**After:** Arrow before page title (left side)

```tsx
title={
  <div className="flex items-center gap-2">
    <Button variant="ghost" onClick={() => navigate(-1)}>
      <ArrowLeft className="h-5 w-5" />
    </Button>
    <span>{template?.event_label}</span>
  </div>
}
```

- Cleaner UX (← Edit Template)
- Navigates to previous page (staff/customer)
- Maintains active tab state
- More intuitive placement

### 2. Variables in RichText ✅
**Issue:** Lost variable insertion when moved to subpage
**Fix:** Variables prop still passed to RichTextEditor

```tsx
<RichTextEditor
  content={body}
  onChange={setBody}
  variables={variableKeys}  // ✅ Variables available
/>
```

- Variable insertion works
- Dropdown in toolbar
- Click to insert {variable_name}

### 3. Default Values Loading ✅
**Issue:** Template data not setting in inputs
**Fix:** Better useEffect condition + console logging

```tsx
useEffect(() => {
  if (template && template.subject !== undefined && template.body !== undefined) {
    console.log(\"Setting template data:\", template);
    setSubject(template.subject || \"\");
    setBody(template.body || \"\");
    setVariables(template.variables || {});
  }
}, [template]);
```

**Backend Fix:**
- API returns event_label and channel_label
- Default templates load from TemplateProvider
- Rich default content for all events

**Why it works now:**
- Proper undefined check
- Template data from API includes all fields
- RichTextEditor syncs with content prop

### 4. Code Mode Toggle ✅
**TipTap doesnt have built-in code mode**
**Solution:** Custom code/visual toggle

```tsx
{codeMode ? (
  <textarea
    value={body}
    onChange={(e) => setBody(e.target.value)}
    className="font-mono text-sm"
  />
) : (
  <RichTextEditor content={body} onChange={setBody} />
)}
```

**Features:**
- Toggle button: "Code Mode" / "Visual Editor"
- Code mode: Raw HTML textarea (monospace font)
- Visual mode: TipTap WYSIWYG editor
- Seamless switching
- Helpful descriptions for each mode

---

## Additional Improvements:

**SettingsLayout Enhancement:**
- Title now accepts `string | ReactNode`
- Allows custom title with back button
- Backward compatible (string still works)
- Contextual header shows string version

**UX Benefits:**
- ✅ Intuitive back navigation
- ✅ Variables easily insertable
- ✅ Default templates load immediately
- ✅ Code mode for advanced users
- ✅ Visual mode for easy editing

**Next:** Card insert buttons + Email appearance settings 🚀

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -4,7 +4,7 @@ import { Loader2 } from 'lucide-react';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
 
 interface SettingsLayoutProps {
-  title: string;
+  title: string | React.ReactNode;
   description?: string;
   children: React.ReactNode;
   onSave?: () => Promise<void>;
@@ -38,9 +38,12 @@ export function SettingsLayout({
   // Set page header ONLY when there's an action (Save button or custom action)
   // This saves vertical space on pages without actions
   useEffect(() => {
+    // Extract string title if it's a ReactNode
+    const titleString = typeof title === 'string' ? title : '';
+    
     if (onSave) {
       setPageHeader(
-        title,
+        titleString,
         <Button
           onClick={handleSave}
           disabled={isSaving || isLoading}
@@ -58,7 +61,7 @@ export function SettingsLayout({
       );
     } else if (action) {
       // If there's a custom action, use it
-      setPageHeader(title, action);
+      setPageHeader(titleString, action);
     } else {
       // No action = no header (save vertical space)
       clearPageHeader();