1. Dialog Portal: Render inside #woonoow-admin-app container instead
of document.body to fix Tailwind CSS scoping in WordPress admin
2. Variables Panel: Redesigned from flat list to collapsible accordion
- Collapsed by default (less visual noise)
- Categorized: Order (blue), Customer (green), Shipping (orange), Store (purple)
- Color-coded pills for quick recognition
- Shows count of available variables
3. StarterKit: Disable built-in Link to prevent duplicate extension warning
## Issue #1: Back Button Navigation Fixed
**Problem:** Back button navigated too far to Notifications.tsx
**Root Cause:** Wrong route - should go to /staff or /customer page with templates tab
**Solution:**
- Detect if staff or customer event
- Navigate to `/settings/notifications/{staff|customer}?tab=templates`
- Staff.tsx and Customer.tsx read tab query param
- Auto-open templates tab on return
**Files:**
- `routes/Settings/Notifications/EditTemplate.tsx`
- `routes/Settings/Notifications/Staff.tsx`
- `routes/Settings/Notifications/Customer.tsx`
## Issue #2: Dialog Pattern - Use Existing, Dont Reinvent!
**Problem:** Created new DialogBody component, over-engineered
**Root Cause:** Didnt check existing dialog usage in project
**Solution:**
- Reverted dialog.tsx to original
- Use existing pattern from Shipping.tsx:
```tsx
<DialogContent className="max-h-[90vh] overflow-y-auto">
```
- Simple, proven, works!
**Files:**
- `components/ui/dialog.tsx` - Reverted to original
- `components/ui/rich-text-editor.tsx` - Use existing pattern
**Lesson Learned:**
Always scan project for existing patterns before creating new ones!
Both issues fixed! ✅
✅ Issue 1: Modal Z-Index Fixed
- Increased dialog z-index: z-[9999] → z-[99999]
- Now properly appears above fullscreen mode (z-50)
✅ Issue 2: Searchable Select for Large Lists
- Replaced Select with SearchableSelect for:
- Countries (200+ options)
- Currencies (100+ options)
- Timezones (400+ options)
- Users can now type to search instead of scrolling
- Better UX for large datasets
✅ Issue 3: Input Type Support
- Input component already supports type attribute
- No changes needed (already working)
✅ Issue 4: Timezone Options Fixed
- Replaced optgroup (not supported) with flat list
- SearchableSelect handles filtering by continent name
- Shows: 'Asia/Jakarta (UTC+7:00)'
- Search includes continent, city, and offset
📊 Result:
- ✅ Modal always on top
- ✅ Easy search for countries/currencies/timezones
- ✅ No more scrolling through hundreds of options
- ✅ Better accessibility
Addresses user feedback issues 1-4
