WooNooW

Files

dwindown e8b8082eda 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 🚀