# UI/UX Specifications - Multilingual Press Zone
> **Complete design specifications for all 5 WordPress admin screens**
---
## Design System
### Colors (From comments-press-zone)
```scss
// Primary colors
--presszone-primary: #2563eb; // Blue
--presszone-primary-hover: #1d4ed8;
--presszone-secondary: #64748b; // Gray
--presszone-danger: #dc2626; // Red
--presszone-success: #16a34a; // Green
--presszone-warning: #f59e0b; // Orange
// Background
--presszone-bg: #ffffff;
--presszone-bg-secondary: #f8fafc;
--presszone-border: #e2e8f0;
--presszone-text: #1e293b;
--presszone-text-muted: #64748b;
// Dark mode
body.dark-mode {
--presszone-bg: #0f172a;
--presszone-bg-secondary: #1e293b;
--presszone-border: #334155;
--presszone-text: #f1f5f9;
--presszone-text-muted: #94a3b8;
}
```
### Typography
```scss
--presszone-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--presszone-font-size-sm: 0.875rem; // 14px
--presszone-font-size-base: 1rem; // 16px
--presszone-font-size-lg: 1.125rem; // 18px
--presszone-font-size-xl: 1.25rem; // 20px
--presszone-font-size-2xl: 1.5rem; // 24px
```
### Spacing
```scss
--presszone-spacing-xs: 0.25rem; // 4px
--presszone-spacing-sm: 0.5rem; // 8px
--presszone-spacing-md: 1rem; // 16px
--presszone-spacing-lg: 1.5rem; // 24px
--presszone-spacing-xl: 2rem; // 32px
--presszone-spacing-2xl: 3rem; // 48px
```
### Transitions
```scss
--presszone-transition: all 0.2s ease;
--presszone-transition-fast: all 0.15s ease;
--presszone-transition-slow: all 0.3s ease;
```
---
## Application Shell
### Layout Structure
```
┌─────────────────────────────────────────────────────────────┐
│ ╔═══════════════════════════════════════════════════════╗ │
│ ║ WordPress Admin Bar ║ │
│ ╚═══════════════════════════════════════════════════════╝ │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────┬─────────────────────────────────────────┐ │
│ │ Sidebar │ Main Content Area │ │
│ │ (250px) │ │ │
│ │ │ │ │
│ │ 📊 Dashboard│ ┌─────────────────────────────────────┐ │ │
│ │ 🌍 Languages│ │ Page Header │ │ │
│ │ 📝 Translate│ │ - Title │ │ │
│ │ ⚙️ Settings│ │ - Actions (buttons) │ │ │
│ │ 🔑 Licensing│ │ - Breadcrumbs │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ │ │ │ │
│ │ │ ┌─────────────────────────────────────┐ │ │
│ │ │ │ Page Content │ │ │
│ │ │ │ (varies by screen) │ │ │
│ │ │ │ │ │ │
│ │ │ │ │ │ │
│ │ │ └─────────────────────────────────────┘ │ │
│ └─────────────┴─────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### Sidebar Component
```javascript
// Vanilla JS structure
const navItems = [
{ id: 'dashboard', label: 'Dashboard', icon: '📊' },
{ id: 'languages', label: 'Languages', icon: '🌍' },
{ id: 'translations', label: 'Translations', icon: '📝' },
{ id: 'settings', label: 'Settings', icon: '⚙️' },
{ id: 'licensing', label: 'Licensing', icon: '🔑' }
];
```
**CSS Classes**:
```scss
.presszone-mpz-sidebar {
width: 250px;
background: var(--presszone-bg-secondary);
border-right: 1px solid var(--presszone-border);
&__header {
padding: var(--presszone-spacing-lg);
border-bottom: 1px solid var(--presszone-border);
}
&__nav {
padding: var(--presszone-spacing-md);
}
&__link {
display: flex;
align-items: center;
padding: var(--presszone-spacing-md);
color: var(--presszone-text);
border-radius: var(--presszone-radius-md);
transition: var(--presszone-transition);
&:hover {
background: var(--presszone-bg);
}
&--active {
background: var(--presszone-primary);
color: white;
}
}
}
```
---
## Screen 1: Dashboard
### Purpose
Overview of translation status, recent activity, and quick actions.
### Wireframe (ASCII)
```
┌─────────────────────────────────────────────────────────────┐
│ Dashboard [+ Add Language] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 🌍 Languages│ │ 📝 Posts │ │ ✅ Translated│ │
│ │ 3 │ │ 12,450 │ │ 78% │ │
│ │ Active │ │ Total │ │ 9,711/12,450│ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ ⏱️ Pending │ │ 📊 Coverage │ │ ⚡ Performance│ │
│ │ 234 │ │ Spanish │ │ 45ms │ │
│ │ Review │ │ 92% │ │ Avg Load │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
│ Translation Progress by Language │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ English (en_US) ██████████████████████████████ 100% │ │
│ │ Spanish (es_ES) ████████████████████████░░░░░ 92% │ │
│ │ French (fr_FR) ████████████████████░░░░░░░░░ 78% │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Recent Activity [View All] │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 📝 "Homepage" translated to Spanish 2 min ago │ │
│ │ ✅ "About Us" approved in French 15 min ago │ │
│ │ 🌍 German language added 1 hour ago │ │
│ │ 📝 "Contact" translation pending review 2 hours ago │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Quick Actions │
│ [Translate New Content] [Review Pending] [Add Language] │
└─────────────────────────────────────────────────────────────┘
```
### Components Used
1. **StatCard** (6 cards)
- Languages count
- Total posts
- Translation percentage
- Pending reviews
- Coverage by language
- Average performance
2. **ProgressBar** (3 bars)
- One per language showing translation coverage
- Color coding: 0-30% red, 30-70% orange, 70-100% green
3. **Table** (Recent Activity)
- Post title
- Action (translated, approved, pending)
- Language
- Timestamp (relative)
4. **Button** (Quick Actions)
- Primary: "Translate New Content"
- Secondary: "Review Pending"
- Secondary: "Add Language"
### State Management
```javascript
// Dashboard state
const dashboardState = {
stats: {
languages: 0,
totalPosts: 0,
translatedPercentage: 0,
pendingReviews: 0,
averagePerformance: 0
},
languageProgress: [
{ code: 'en_US', name: 'English', progress: 100, total: 12450, translated: 12450 },
{ code: 'es_ES', name: 'Spanish', progress: 92, total: 12450, translated: 11454 },
{ code: 'fr_FR', name: 'French', progress: 78, total: 12450, translated: 9711 }
],
recentActivity: []
};
```
### API Calls
```javascript
// Fetch dashboard data
GET /wp-json/multilingual-press-zone/v1/dashboard/stats
GET /wp-json/multilingual-press-zone/v1/dashboard/activity?limit=10
```
---
## Screen 2: Languages
### Purpose
Manage languages: add, edit, reorder priority, activate/deactivate.
### Wireframe (ASCII)
```
┌─────────────────────────────────────────────────────────────┐
│ Languages [+ Add Language]│
├─────────────────────────────────────────────────────────────┤
│ │
│ Active Languages (Drag to reorder priority) │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ⋮⋮ 🇺🇸 English (en_US) ✅ Active [Edit ▼]│ │
│ │ Default Language │ │
│ │ 12,450 posts • 100% translated │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ⋮⋮ 🇪🇸 Spanish (es_ES) ✅ Active [Edit ▼]│ │
│ │ 11,454 posts • 92% translated │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ ⋮⋮ 🇫🇷 French (fr_FR) ✅ Active [Edit ▼]│ │
│ │ 9,711 posts • 78% translated │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ Inactive Languages │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 🇩🇪 German (de_DE) ⏸️ Inactive [Edit]│ │
│ │ 0 posts • 0% translated │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### Add/Edit Language Modal
```
┌─────────────────────────────────────────────────┐
│ Add Language [✕] │
├─────────────────────────────────────────────────┤
│ │
│ Language Code * │
│ ┌──────────────────────────────────────────┐ │
│ │ en_US [🔍] │ │
│ └──────────────────────────────────────────┘ │
│ │
│ Language Name * │
│ ┌──────────────────────────────────────────┐ │
│ │ English (US) │ │
│ └──────────────────────────────────────────┘ │
│ │
│ Flag Icon │
│ ┌──────────────────────────────────────────┐ │
│ │ 🇺🇸 [Choose Flag] │ │
│ └──────────────────────────────────────────┘ │
│ │
│ Direction │
│ ◉ Left-to-Right (LTR) │
│ ○ Right-to-Left (RTL) │
│ │
│ Status │
│ ☑ Active (make available immediately) │
│ │
│ URL Structure │
│ ◉ Directory (/en-us/page) │
│ ○ Parameter (?lang=en-us) │
│ ○ Subdomain (en.example.com) │
│ │
│ [Cancel] [Add Language] │
└─────────────────────────────────────────────────┘
```
### Components Used
1. **SortableList** (NEW component)
- Drag handles (⋮⋮)
- Reorderable language cards
- Touch support for mobile
2. **Card** (Language items)
- Flag emoji
- Language name + code
- Status badge (Active/Inactive)
- Translation stats
- Action dropdown
3. **Modal** (Add/Edit)
- Form fields
- FlagPicker component
- Radio buttons (direction, URL structure)
- Toggle (active status)
4. **Badge** (NEW component)
- Status indicators (Active, Inactive, Draft)
- Color variants (success, secondary, warning)
5. **FlagPicker** (NEW component)
- Search/filter flags
- Grid of country flags
- Custom upload option
### State Management
```javascript
const languagesState = {
languages: [
{
id: 1,
code: 'en_US',
name: 'English (US)',
flag: '🇺🇸',
direction: 'ltr',
status: 'active',
isDefault: true,
priority: 1,
translatedPosts: 12450,
totalPosts: 12450,
percentage: 100
}
],
editingLanguage: null,
modalOpen: false
};
```
### API Calls
```javascript
GET /wp-json/multilingual-press-zone/v1/languages
POST /wp-json/multilingual-press-zone/v1/languages
PUT /wp-json/multilingual-press-zone/v1/languages/{id}
DELETE /wp-json/multilingual-press-zone/v1/languages/{id}
POST /wp-json/multilingual-press-zone/v1/languages/reorder
```
---
## Screen 3: Translations
### Purpose
Browse and manage all content translations.
### Wireframe (ASCII)
```
┌─────────────────────────────────────────────────────────────┐
│ Translations │
├─────────────────────────────────────────────────────────────┤
│ │
│ Filters: │
│ [All Types ▼] [All Languages ▼] [All Status ▼] [Search...] │
│ │
│ Bulk Actions: [Select Action ▼] [Apply] │
│ │
│ ┌───┬─────────────────────┬──────────────────┬──────────┐ │
│ │ ☐ │ Title │ Languages │ Status │ │
│ ├───┼─────────────────────┼──────────────────┼──────────┤ │
│ │ ☐ │ Homepage │ 🇺🇸 🇪🇸 🇫🇷 │ ✅ 3/3 │ │
│ │ │ Post • #1 │ en_US es_ES fr_FR│ │ │
│ │ │ Last update: 2 hr │ │ [Edit] │ │
│ ├───┼─────────────────────┼──────────────────┼──────────┤ │
│ │ ☐ │ About Us │ 🇺🇸 🇪🇸 ⏸️ │ ⚠️ 2/3 │ │
│ │ │ Page • #5 │ en_US es_ES │ │ │
│ │ │ Last update: 1 day │ fr_FR missing │ [Edit] │ │
│ ├───┼─────────────────────┼──────────────────┼──────────┤ │
│ │ ☐ │ Contact Form │ 🇺🇸 ⏳ ⏸️ │ ⏳ 1/3 │ │
│ │ │ Page • #8 │ en_US │ │ │
│ │ │ Last update: 3 days │ es_ES pending │ [Edit] │ │
│ └───┴─────────────────────┴──────────────────┴──────────┘ │
│ │
│ Showing 1-25 of 12,450 [1] [2] [3] ... [498] [→] │
└─────────────────────────────────────────────────────────────┘
```
### Translation Editor (Modal)
```
┌─────────────────────────────────────────────────────────────┐
│ Edit Translation: Homepage [✕] │
├─────────────────────────────────────────────────────────────┤
│ │
│ Original (English) │ Spanish Translation │
│ ─────────────────────────────────────────────────────────── │
│ Homepage │ Página de inicio │
│ │ │
│ Welcome to our │ Bienvenido a nuestro sitio web │
│ website │ │
│ │ │
│ ─────────────────────────────────────────────────────────── │
│ │ │
│ Translation Memory: [AI Translate] [Copy from English] │
│ │
│ Status: ○ Draft ◉ Published ○ Pending Review │
│ │
│ [Cancel] [Save Draft] [Publish] │
└─────────────────────────────────────────────────────────────┘
```
### Components Used
1. **Table** (Translations list)
- Checkbox column (bulk select)
- Title + metadata
- Language flags
- Status badges
- Actions dropdown
2. **Select** (Filters)
- Content type filter
- Language filter
- Status filter
3. **GridTable** (Alternative view)
- Card-based layout for mobile
- Swipe actions
4. **Modal** (Translation Editor)
- Side-by-side view
- Original content (read-only)
- Translation textarea
- AI translate button
- Status radio buttons
5. **Badge** (Status indicators)
- Complete: Green checkmark
- Partial: Yellow warning
- Pending: Blue clock
- Missing: Red x
### State Management
```javascript
const translationsState = {
filters: {
type: 'all',
language: 'all',
status: 'all',
search: ''
},
selectedItems: [],
currentPage: 1,
perPage: 25,
total: 12450,
translations: [],
editingTranslation: null
};
```
### API Calls
```javascript
GET /wp-json/multilingual-press-zone/v1/translations?type=all&lang=all&status=all&page=1
POST /wp-json/multilingual-press-zone/v1/translations/{id}/translate
PUT /wp-json/multilingual-press-zone/v1/translations/{id}
DELETE /wp-json/multilingual-press-zone/v1/translations/{id}
POST /wp-json/multilingual-press-zone/v1/translations/bulk-action
```
---
## Screen 4: Settings
### Purpose
Configure plugin settings across multiple categories.
### Wireframe (ASCII)
```
┌─────────────────────────────────────────────────────────────┐
│ Settings │
├─────────────────────────────────────────────────────────────┤
│ │
│ [General] [Workflow] [Notifications] [API] [Advanced] │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ General Settings │ │
│ │ │ │
│ │ Default Language │ │
│ │ ┌─────────────────────────────────────────────────┐ │ │
│ │ │ English (en_US) [▼] │ │ │
│ │ └─────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ URL Structure │ │
│ │ ◉ Directories (/en-us/page) │ │
│ │ ○ Parameters (?lang=en-us) │ │
│ │ ○ Subdomains (en.example.com) │ │
│ │ │ │
│ │ Show Language Switcher │ │
│ │ ☑ Display on frontend │ │
│ │ ☑ Include flags │ │
│ │ ☑ Show language names │ │
│ │ │ │
│ │ Translation Memory │ │
│ │ ☑ Enable translation memory │ │
│ │ ☑ Suggest similar translations │ │
│ │ Minimum similarity: [80]% │ │
│ │ │ │
│ │ [Save Changes] │ │
│ └─────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### Tabs Content
#### General Tab
- Default language selector
- URL structure (radio buttons)
- Language switcher options (toggles)
- Translation memory settings
- Auto-detect browser language (toggle)
#### Workflow Tab (Pro/Enterprise only)
- Approval workflow (toggle)
- Required roles for approval
- Auto-publish vs manual review
- Translation assignment rules
- Deadline notifications
#### Notifications Tab
- Email notifications (toggle)
- Slack integration
- Notification triggers (checkboxes)
- Custom webhook URL
#### API Tab
- REST API enabled (toggle)
- API rate limiting
- Webhook endpoints
- API documentation link
#### Advanced Tab
- Debug mode (toggle)
- Database optimization
- Cache configuration
- Import/Export settings
- Reset to defaults (danger button)
### Components Used
1. **Tabs** (Navigation)
- 5 tabs (General, Workflow, Notifications, API, Advanced)
- Active state highlighting
2. **Card** (Settings sections)
- Grouped related settings
- Section headers
3. **FormField** (Various inputs)
- Text inputs
- Number inputs
- Select dropdowns
- Radio buttons
- Checkboxes
- Textareas
4. **Toggle** (Boolean settings)
- On/off switches
- Disabled state for locked features
5. **Button** (Actions)
- Primary: "Save Changes"
- Danger: "Reset to Defaults"
- Secondary: "Import/Export"
### State Management
```javascript
const settingsState = {
activeTab: 'general',
general: {
defaultLanguage: 'en_US',
urlStructure: 'directories',
showSwitcher: true,
includeFlags: true,
translationMemory: true
},
workflow: {
approvalRequired: false,
autoPublish: true
},
notifications: {
emailEnabled: true,
slackEnabled: false
},
api: {
enabled: true,
rateLimit: 100
},
advanced: {
debugMode: false,
cacheEnabled: true
},
hasChanges: false
};
```
### API Calls
```javascript
GET /wp-json/multilingual-press-zone/v1/settings
POST /wp-json/multilingual-press-zone/v1/settings
POST /wp-json/multilingual-press-zone/v1/settings/reset
GET /wp-json/multilingual-press-zone/v1/settings/export
POST /wp-json/multilingual-press-zone/v1/settings/import
```
---
## Screen 5: Licensing
### Purpose
Manage license, view subscription details, upgrade tier.
### Wireframe (ASCII)
```
┌─────────────────────────────────────────────────────────────┐
│ Licensing │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ License Information PRO │ │
│ │ │ │
│ │ Status: ✅ Active │ │
│ │ Tier: Professional │ │
│ │ Sites: 2 / 3 used │ │
│ │ Updates Valid Until: January 25, 2027 │ │
│ │ │ │
│ │ License Key: MPZ-P-****-****-**** │ │
│ │ [Show Full Key] │ │
│ │ │ │
│ │ [Manage Subscription] [Deactivate License] │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Active Sites │ │
│ │ │ │
│ │ 1. https://example.com │ │
│ │ Activated: Jan 1, 2026 │ │
│ │ Last Seen: 2 minutes ago │ │
│ │ [Deactivate] │ │
│ │ │ │
│ │ 2. https://staging.example.com │ │
│ │ Activated: Jan 15, 2026 │ │
│ │ Last Seen: 5 hours ago │ │
│ │ [Deactivate] │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ Features Included │ │
│ │ │ │
│ │ ✅ Unlimited Languages │ │
│ │ ✅ Translation Memory │ │
│ │ ✅ Team Management │ │
│ │ ✅ Translation Workflow │ │
│ │ ✅ Audit Logging │ │
│ │ ✅ Priority Support (24h response) │ │
│ │ ❌ 24/7 Support (Enterprise only) │ │
│ │ ❌ Dedicated Account Manager (Enterprise only) │ │
│ │ │ │
│ │ [Upgrade to Enterprise] │ │
│ └───────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### Activation Screen (No License)
```
┌─────────────────────────────────────────────────────────────┐
│ Activate License │
├─────────────────────────────────────────────────────────────┤
│ │
│ Enter your license key to activate Multilingual Press Zone │
│ and receive updates. │
│ │
│ License Key * │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ MPZ- │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
│ [Activate License] │
│ │
│ Don't have a license? │
│ [Purchase License] - Starting at $50/year │
│ │
│ Need help? Visit our documentation or contact support. │
└─────────────────────────────────────────────────────────────┘
```
### Manage Subscription (External Link)
**Flow**:
1. User clicks "Manage Subscription"
2. Opens https://press.zone/account/multilingual in new tab
3. User sees Press.zone React admin panel with:
- Billing history
- Invoice downloads
- Payment method update
- Cancel subscription
- Upgrade/downgrade tier
**WordPress side only shows**:
- License status
- Active sites
- Features included
- Quick actions
### Components Used
1. **Card** (License info, sites, features)
- Section headers
- Key-value pairs
- Action buttons
2. **Badge** (Status, tier)
- Active: Green
- Expired: Red
- Tier badges: PRO, ENTERPRISE
3. **Button** (Actions)
- Primary: "Manage Subscription" (opens Press.zone)
- Secondary: "Deactivate License"
- Success: "Activate License"
- Warning: "Upgrade to Enterprise"
4. **FormField** (License key input)
- Text input with mask
- "Show Full Key" toggle
### State Management
```javascript
const licensingState = {
hasLicense: false,
licenseData: null,
activating: false,
error: null
};
// After activation
const activeLicenseState = {
hasLicense: true,
licenseData: {
status: 'active',
tier: 'pro',
sitesAllowed: 3,
sitesUsed: 2,
updatesUntil: '2027-01-25',
features: {
teamManagement: true,
workflow: true,
prioritySupport: true,
dedicatedManager: false
},
activeSites: [
{ url: 'https://example.com', activatedAt: '2026-01-01', lastSeen: '2026-01-25T10:00:00Z' },
{ url: 'https://staging.example.com', activatedAt: '2026-01-15', lastSeen: '2026-01-25T05:00:00Z' }
]
}
};
```
### API Calls
```javascript
// WordPress REST API (to save license key)
POST /wp-json/multilingual-press-zone/v1/license/activate
// api.press.zone (for license validation)
POST https://api.press.zone/v1/multilingual/license/activate
GET https://api.press.zone/v1/multilingual/license/status
POST https://api.press.zone/v1/multilingual/license/deactivate
```
---
## Responsive Design
### Breakpoints
```scss
// Mobile
$mobile: 320px;
$mobile-landscape: 576px;
// Tablet
$tablet: 768px;
$tablet-landscape: 992px;
// Desktop
$desktop: 1200px;
$desktop-xl: 1400px;
```
### Mobile Adaptations
**< 768px**:
- Sidebar collapses to hamburger menu
- Tables convert to card layout (GridTable component)
- Modal covers full screen
- Stats cards stack vertically
- Language list items expand to full width
**Hamburger Menu**:
```
┌─────────────────────────────────┐
│ ☰ Multilingual Press Zone │
├─────────────────────────────────┤
│ (Main content area) │
│ │
└─────────────────────────────────┘
// Sidebar opens as overlay
┌─────────────────────────────────┐
│ ╔════════════════╗ │
│ ║ 📊 Dashboard ║ │
│ ║ 🌍 Languages ║ │
│ ║ 📝 Translate ║ │
│ ║ ⚙️ Settings ║ │
│ ║ 🔑 Licensing ║ │
│ ╚════════════════╝ │
│ (Overlay) (Content) │
└─────────────────────────────────┘
```
---
## Accessibility (a11y)
### ARIA Labels
```javascript
// Example: Language item
🇺🇸 English (en_US)
// Example: Action button
```
### Keyboard Navigation
- **Tab**: Navigate between interactive elements
- **Enter/Space**: Activate buttons, toggles
- **Arrow keys**: Navigate lists, tabs
- **Escape**: Close modals, dropdowns
- **Home/End**: Jump to start/end of lists
### Focus Management
```scss
.presszone-mpz-btn:focus-visible,
.presszone-mpz-link:focus-visible {
outline: 2px solid var(--presszone-primary);
outline-offset: 2px;
}
// Never use outline: none without alternative
```
### Screen Reader Support
- Announce dynamic content changes (live regions)
- Provide text alternatives for icons
- Label form fields properly
- Use semantic HTML (nav, main, aside)
---
## Animation & Transitions
### Page Transitions
```scss
// Fade in content on route change
.presszone-mpz-page-enter {
opacity: 0;
transform: translateY(10px);
}
.presszone-mpz-page-enter-active {
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease;
}
```
### Component Animations
**Toast Notifications**:
```scss
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.presszone-mpz-toast {
animation: slideInRight 0.3s ease;
}
```
**Progress Bars**:
```scss
.presszone-mpz-progress__fill {
transition: width 0.5s ease;
}
```
**Loading Spinners**:
```scss
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.presszone-mpz-spinner {
animation: spin 1s linear infinite;
}
```
### Reduced Motion
```scss
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
---
## Error States
### Empty States
```javascript
// Example: No languages configured
EmptyState({
icon: '🌍',
title: 'No Languages Configured',
message: 'Add your first language to start translating content.',
action: Button({
label: 'Add Language',
variant: 'primary',
onClick: openAddLanguageModal
})
})
```
### Error States
```javascript
// Example: Failed to load data
ErrorState({
icon: '⚠️',
title: 'Failed to Load Translations',
message: 'An error occurred while fetching translations. Please try again.',
action: Button({
label: 'Retry',
variant: 'secondary',
onClick: retryFetch
})
})
```
### Loading States
```javascript
// Skeleton loader for table
Skeleton({ type: 'table', rows: 10 })
// Spinner for inline actions
Spinner({ size: 'sm' })
// Placeholder text for forms
Placeholders({ count: 3 })
```
---
## Performance Considerations
### Code Splitting
```javascript
// Lazy load pages
const renderDashboard = () => import('./pages/dashboard.js');
const renderLanguages = () => import('./pages/languages.js');
const renderTranslations = () => import('./pages/translations.js');
const renderSettings = () => import('./pages/settings.js');
const renderLicensing = () => import('./pages/licensing.js');
```
### Pagination
- Default: 25 items per page
- Options: 25, 50, 100, 250
- Lazy load on scroll (optional)
### Caching
- Cache API responses (5 minutes)
- Invalidate on mutations
- Use localStorage for UI preferences
---
## Related Documents
- `ADMIN-PANEL-ARCHITECTURE.md` - Technical implementation details
- `LICENSING-IMPLEMENTATION-PLAN.md` - License page backend integration
- `WPML-MIGRATION-GUIDE.md` - Migration wizard UI
- `PHASE1-CORE-FOUNDATION.md` - Admin panel implementation tasks
---
## Summary
**5 Core Admin Screens**:
1. **Dashboard**: Overview, stats, recent activity, quick actions
2. **Languages**: Add/edit/reorder languages, drag-and-drop priority
3. **Translations**: Browse/filter/edit all content translations
4. **Settings**: Tabbed settings (General, Workflow, Notifications, API, Advanced)
5. **Licensing**: Activate license, view subscription, manage sites
**Design System**:
- Colors, typography, spacing from comments-press-zone
- Dark mode support via `body.dark-mode`
- Consistent component library (25 copied + 5 new)
- Responsive breakpoints (mobile, tablet, desktop)
- Accessibility (ARIA, keyboard nav, screen readers)
**Key Components**:
- **Existing**: Button, Card, Modal, Table, Toggle, FormField, Select, Tabs, Badge, Toast
- **New**: SortableList, ProgressBar, LinkSelector, FlagPicker
**Performance**:
- Code splitting per page
- Pagination (25/page)
- API response caching
- Lazy loading
**Build with Vanilla JS + Webpack + SCSS like Lego blocks!**