feat: Complete subpage redesign - all 5 issues fixed!

##  All 5 Issues Resolved!

### 1. Subject in Body 
**Before:** Subject in sticky header
**After:** Subject inside scrollable content (Editor tab)

- More consistent with form patterns
- Better scrolling experience
- Cleaner header

### 2. Tabs Scroll-Proof 
**Before:** Tabs inside scrollable area
**After:** Tabs sticky at top (like GitHub file viewer)

```tsx
<div className="-mt-6 mb-6 sticky top-0 z-10 bg-background pb-4">
  <Tabs>...</Tabs>
</div>
```

- Tabs always visible while scrolling
- Easy to switch Editor ↔ Preview
- Professional UX

### 3. Default Values Loading 
**Before:** Empty editor (bad UX)
**After:** Default templates load automatically

**Backend Fix:**
- Added `event_label` and `channel_label` to API response
- Templates now load from `TemplateProvider::get_default_templates()`
- Rich default content for all events

**Frontend Fix:**
- `useEffect` properly sets subject/body from template
- RichTextEditor syncs with content prop
- Preview shows actual content immediately

### 4. Page Width Matched 
**Before:** Custom max-w-7xl (inconsistent)
**After:** Uses SettingsLayout (max-w-5xl)

- Matches all other settings pages
- Consistent visual width
- Professional appearance

### 5. Mobile + Contextual Header 
**Before:** Custom header implementation
**After:** Uses SettingsLayout with contextual header

**Contextual Header Features:**
- Title + Description in header
- Back button
- Reset to Default button
- Save Template button (from SettingsLayout)
- Mobile responsive (SettingsLayout handles it)

**Mobile Strategy:**
- SettingsLayout handles responsive breakpoints
- Tabs stack nicely on mobile
- Cards adapt to screen size
- Touch-friendly buttons

---

## Architecture Changes:

**Before (Dialog-like):**
```
Custom full-height layout
├── Custom sticky header
├── Subject in header
├── Tabs in body
└── Custom footer
```

**After (Proper Subpage):**
```
SettingsLayout (max-w-5xl)
├── Contextual Header (sticky)
│   ├── Title + Description
│   └── Actions (Back, Reset, Save)
├── Sticky Tabs (scroll-proof)
└── Content (scrollable)
    ├── Editor Tab (Card)
    │   ├── Subject input
    │   └── Rich text editor
    └── Preview Tab (Card)
        ├── Subject preview
        └── Email preview
```

**Benefits:**
-  Consistent with all settings pages
-  Proper contextual header
-  Mobile responsive
-  Default templates load
-  Scroll-proof tabs
-  Professional UX

**Next:** Card insert buttons + Email appearance settings 🚀
This commit is contained in:
dwindown
2025-11-13 00:11:16 +07:00
parent 8c834bdfcc
commit 5097f4b09a
2 changed files with 134 additions and 110 deletions

View File

@@ -559,6 +559,28 @@ class NotificationsController {
);
}
// Add event and channel labels for UI
$events = EventProvider::get_events();
$channels = ChannelProvider::get_channels();
// Find event label
foreach ($events as $category => $event_list) {
foreach ($event_list as $event) {
if ($event['id'] === $event_id) {
$template['event_label'] = $event['label'];
break 2;
}
}
}
// Find channel label
foreach ($channels as $channel) {
if ($channel['id'] === $channel_id) {
$template['channel_label'] = $channel['label'];
break;
}
}
return new WP_REST_Response($template, 200);
}