refactor: Eliminate bloated settings tabs (13→5)

## Changes

### 1. Eliminated Unnecessary Tabs 

**Before:** 13 tabs (bloated!)
**After:** 5 tabs (clean, focused)

**Removed:**
-  WooNooW (nonsense toggles for essential features)
-  Checkout (mirror WooCommerce, not essential)
-  Customer Accounts (mirror WooCommerce, not essential)
-  Brand & Appearance (merged into Store Details)
-  Advanced (just redirected to WC)
-  Integrations (just redirected to WC)
-  System Status (just redirected to WC)
-  Extensions (just redirected to WC)

**Kept:**
-  Store Details (will enhance with branding)
-  Payments (existing, working)
-  Shipping & Delivery (existing, working)
-  Tax (existing, working)
-  Notifications (existing, working)

**Added:**
-  Developer (debug mode, API logs, system info)

---

### 2. Created Refined Implementation Plan V2 

**Document:** SETTINGS_PAGES_PLAN_V2.md

**Key Decisions:**

####  What We Build:
- Essential settings accessed frequently
- Simplified UI for complex WooCommerce features
- Industry best practices (Shopify, marketplaces)
- Critical features that enhance WooCommerce

####  What We Don't Build:
- Mirroring WooCommerce as-is
- Nonsense toggles for essential features
- Settings for non-tech users to break things
- Redundant configuration options

#### Philosophy:
> "We do the best config. Users focus on their business, not system configuration."

---

### 3. Specific Rejections (Based on Feedback)

**WooNooW Settings - ALL REJECTED:**
-  Plugin Version (can be anywhere)
-  Enable SPA Mode (plugin activation = enabled)
-  Admin Theme toggle (will be in topbar)
-  Items per page (per-table setting)
-  Enable caching (we do best config)
-  Cache duration (confusing for non-tech)
-  Preload data (we optimize)
-  Enable quick edit (essential, always on)
-  Enable bulk actions (essential, always on)
-  Enable keyboard shortcuts (essential, always on)
-  Enable auto-save (essential, always on)

**Brand & Appearance - MERGED TO STORE DETAILS:**
-  Store logo (merge to Store Details)
-  Store icon (merge to Store Details)
-  Store tagline (merge to Store Details)
-  Brand colors (merge to Store Details)
-  Typography (breaks design)
-  Font size (use browser zoom)
-  Sidebar position (we optimize)
-  Sidebar collapsed (we optimize)
-  Show breadcrumbs (we optimize)
-  Compact mode (we optimize)
-  Custom CSS (hard to use, move to Developer if needed)

**Checkout & Customer Accounts - NOT BUILDING:**
- We do the best config (industry standard)
- No need to mirror WooCommerce complexity
- Focus on business, not system configuration
- Users can use WC native settings if needed

---

### 4. Final Structure

```
Settings (5 tabs)
├── Store Details (enhanced with branding)
├── Payments (existing)
├── Shipping & Delivery (existing)
├── Tax (existing)
├── Notifications (existing)
└── Developer (new - debug, system info, cache)
```

---

### 5. Updated Both Backend and Frontend

**Backend:** NavigationRegistry.php
- Removed 8 tabs
- Added Developer tab
- Changed main settings path to /settings/store

**Frontend:** nav/tree.ts (fallback)
- Synced with backend
- Removed WooNooW tab
- Added Developer tab

---

## Philosophy

**We do the best config:**
- Essential features always enabled
- No confusing toggles
- Industry best practices
- Focus on business, not system

**Result:**
- 13 tabs → 5 tabs (62% reduction!)
- Clean, focused interface
- Professional
- Easy to use
- No bloat
This commit is contained in:
dwindown
2025-11-10 21:50:28 +07:00
parent da84c9ec8a
commit b39c1f1a95
3 changed files with 484 additions and 19 deletions

481
SETTINGS_PAGES_PLAN_V2.md Normal file
View File

@@ -0,0 +1,481 @@
# Settings Pages Implementation Plan V2
## Overview - Refined Approach
**Final Settings Structure (5 tabs only):**
1. **Store Details** - Store identity, branding, contact info (merge Brand & Appearance here)
2. **Payments** - Payment gateway management ✅ Already built
3. **Shipping & Delivery** - Shipping zones and methods ✅ Already built
4. **Tax** - Tax rates and settings ✅ Already built
5. **Notifications** - Email templates and notifications ✅ Already built
6. **Developer** - Debug mode, API logs, React DevTools (NEW - only for maintenance)
**Eliminated:**
- ❌ WooNooW Settings (nonsense toggles)
- ❌ Checkout Settings (mirror WooCommerce, not essential)
- ❌ Customer Accounts (mirror WooCommerce, not essential)
- ❌ Brand & Appearance (merge into Store Details)
---
## Philosophy
### ✅ What We Build:
- **Essential settings accessed frequently**
- **Simplified UI for complex WooCommerce features**
- **Industry best practices (Shopify, marketplaces)**
- **Critical features that enhance WooCommerce**
### ❌ What We Don't Build:
- Mirroring WooCommerce as-is
- Nonsense toggles for essential features
- Settings for non-tech users to break things
- Redundant configuration options
### 🎯 Principle:
> "We do the best config. Users focus on their business, not system configuration."
---
## 1. Store Details (Enhanced)
**File:** `admin-spa/src/routes/Settings/Store.tsx` (UPDATE existing)
**Purpose:** Complete store identity and branding in one place
### Current Structure (Keep):
- ✅ Store name
- ✅ Contact email
- ✅ Customer support email
- ✅ Store phone
- ✅ Store address
### Add to Existing:
#### Store Identity Section (NEW)
```tsx
<SettingsSection title="Store Identity">
<ImageUploadField
label="Store Logo"
description="Recommended: 200x60px PNG with transparent background"
value={settings.store_logo}
onChange={(url) => updateSetting('store_logo', url)}
/>
<ImageUploadField
label="Store Icon"
description="Favicon for browser tabs (32x32px)"
value={settings.store_icon}
onChange={(url) => updateSetting('store_icon', url)}
/>
<TextField
label="Store Tagline"
placeholder="Your store's tagline or slogan"
value={settings.store_tagline}
onChange={(value) => updateSetting('store_tagline', value)}
/>
</SettingsSection>
```
#### Brand Colors Section (NEW)
```tsx
<SettingsSection
title="Brand Colors"
description="Customize your admin interface colors. Changes apply immediately."
>
<div className="grid grid-cols-3 gap-4">
<ColorPickerField
label="Primary"
value={settings.primary_color || '#3b82f6'}
onChange={(color) => updateSetting('primary_color', color)}
/>
<ColorPickerField
label="Accent"
value={settings.accent_color || '#10b981'}
onChange={(color) => updateSetting('accent_color', color)}
/>
<ColorPickerField
label="Error"
value={settings.error_color || '#ef4444'}
onChange={(color) => updateSetting('error_color', color)}
/>
</div>
<div className="flex items-center gap-2 mt-4">
<Button
variant="outline"
size="sm"
onClick={() => resetColors()}
>
Reset to Default
</Button>
<Button
variant="ghost"
size="sm"
onClick={() => toggleTheme()}
>
{theme === 'dark' ? '🌙 Dark' : '☀️ Light'}
</Button>
</div>
</SettingsSection>
```
### Implementation Notes:
**Theme Toggle:**
- Add to topbar (not settings page)
- Store in localStorage: `woonoow_theme`
- Options: `light`, `dark`, `auto`
- Apply via CSS class on `<html>`
**Color System:**
- Store in options: `woonoow_primary_color`, etc.
- Inject CSS variables in admin head
- Live preview (no page reload)
**API Endpoints:**
```php
// GET /woonoow/v1/settings/store
// POST /woonoow/v1/settings/store
// New options:
- woonoow_store_logo
- woonoow_store_icon
- woonoow_store_tagline
- woonoow_primary_color
- woonoow_accent_color
- woonoow_error_color
```
---
## 2. Developer Settings (NEW)
**File:** `admin-spa/src/routes/Settings/Developer.tsx`
**Purpose:** Maintenance and debugging tools for developers only
### Sections:
#### Debug Mode
```tsx
<SettingsSection
title="Debug Mode"
description="Enable debugging features for troubleshooting"
>
<ToggleField
label="Enable Debug Mode"
description="Show detailed error messages and logs"
checked={settings.debug_mode}
onChange={(checked) => updateSetting('debug_mode', checked)}
/>
{settings.debug_mode && (
<>
<ToggleField
label="Show API Logs"
description="Log all API requests and responses to browser console"
checked={settings.show_api_logs}
onChange={(checked) => updateSetting('show_api_logs', checked)}
/>
<ToggleField
label="Enable React DevTools"
description="Allow React DevTools extension to inspect components"
checked={settings.enable_react_devtools}
onChange={(checked) => updateSetting('enable_react_devtools', checked)}
/>
</>
)}
</SettingsSection>
```
#### System Information (Read-only)
```tsx
<SettingsSection title="System Information">
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-muted-foreground">WooNooW Version:</span>
<span className="font-mono">{systemInfo.woonoow_version}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">WooCommerce Version:</span>
<span className="font-mono">{systemInfo.woocommerce_version}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">WordPress Version:</span>
<span className="font-mono">{systemInfo.wordpress_version}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">PHP Version:</span>
<span className="font-mono">{systemInfo.php_version}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">HPOS Enabled:</span>
<span className="font-mono">{systemInfo.hpos_enabled ? 'Yes' : 'No'}</span>
</div>
</div>
</SettingsSection>
```
#### Cache Management
```tsx
<SettingsSection title="Cache Management">
<div className="space-y-3">
<Button
variant="outline"
onClick={() => clearCache('navigation')}
disabled={clearingCache}
>
Clear Navigation Cache
</Button>
<Button
variant="outline"
onClick={() => clearCache('settings')}
disabled={clearingCache}
>
Clear Settings Cache
</Button>
<Button
variant="destructive"
onClick={() => clearCache('all')}
disabled={clearingCache}
>
Clear All Caches
</Button>
</div>
</SettingsSection>
```
### API Endpoints:
```php
// GET /woonoow/v1/settings/developer
// POST /woonoow/v1/settings/developer
// POST /woonoow/v1/cache/clear
// Options:
- woonoow_debug_mode
- woonoow_show_api_logs
- woonoow_enable_react_devtools
```
---
## 3. What About Checkout & Customer Accounts?
### Industry Best Practices Analysis:
#### Shopify Checkout Settings:
**Essential Only:**
- Customer contact method (email/phone)
- Customer information (require first/last name)
- Shipping address (require company name: optional/required/hidden)
- Marketing opt-in
- Abandoned checkout recovery
**NOT in settings:**
- Guest checkout (always enabled)
- Account creation (automatic)
- Order notes (always available)
#### Marketplace Best Practices:
**Focus on:**
- Payment flow optimization
- Shipping calculation accuracy
- Tax compliance
- Order fulfillment speed
**NOT configurable:**
- Basic checkout fields (always there)
- Account creation flow (standardized)
- Login/registration (automatic)
### Our Approach:
**✅ We do the best config:**
- Enable guest checkout (always)
- Allow account creation during checkout (always)
- Generate username from email (always)
- All essential fields enabled (always)
- Order notes available (always)
**❌ We don't build settings for:**
- Toggling essential features
- Breaking standard checkout flow
- Confusing non-tech users
- Mirroring WooCommerce as-is
**If users need advanced customization:**
- Use WooCommerce native settings
- Use hooks and filters
- Use custom code
- We focus on 80% use case
---
## Final Settings Structure
```
Settings
├── Store Details (Enhanced)
│ ├── Store Information
│ ├── Contact Details
│ ├── Store Address
│ ├── Store Identity (NEW)
│ │ ├── Logo
│ │ ├── Icon
│ │ └── Tagline
│ └── Brand Colors (NEW)
│ ├── Primary
│ ├── Accent
│ ├── Error
│ └── Theme Toggle
├── Payments (Existing ✅)
│ └── Payment gateway management
├── Shipping & Delivery (Existing ✅)
│ └── Shipping zones and methods
├── Tax (Existing ✅)
│ └── Tax rates and settings
├── Notifications (Existing ✅)
│ └── Email templates
└── Developer (NEW)
├── Debug Mode
├── System Information
└── Cache Management
```
**Total: 6 tabs (down from 13!)**
---
## Implementation Priority
### Phase 1: Store Details Enhancement (Week 1)
1. Add Store Identity section
2. Add Brand Colors section
3. Implement color system with CSS variables
4. Add theme toggle to topbar
5. Test and polish
### Phase 2: Developer Settings (Week 1)
1. Create Developer settings page
2. Add debug mode toggles
3. Add system information display
4. Add cache management
5. Test and polish
### Phase 3: Polish (Week 2)
1. Add help text and tooltips
2. Add color preview
3. Add validation
4. Final testing
5. Documentation
**Total: 2 weeks**
---
## Components Needed
### New Components:
1. `ColorPickerField.tsx` - Color picker with preview
2. `ImageUploadField.tsx` - Image upload with preview
### Existing Components (Reuse):
-`SettingsLayout.tsx`
-`SettingsSection.tsx`
-`SettingsCard.tsx`
-`ToggleField.tsx`
-`TextField.tsx`
-`Button.tsx`
---
## Key Decisions
### ✅ What We Decided:
1. **Merge Brand & Appearance into Store Details**
- More logical grouping
- Fewer tabs
- Better UX
2. **No Checkout/Customer Accounts Settings**
- We do the best config
- No need to expose WooCommerce complexity
- Focus on business, not system config
3. **Developer Settings Separate**
- Only for maintenance
- Not for regular users
- Clear separation of concerns
4. **Theme Toggle in Topbar**
- Quick access
- Not buried in settings
- Industry standard (GitHub, VS Code)
5. **Essential Colors Only**
- Primary, Accent, Error
- No overwhelming options
- Easy to customize
### ❌ What We Rejected:
1. **Nonsense Toggles**
- Enable SPA Mode (plugin activation = enabled)
- Enable Quick Edit (essential feature)
- Enable Bulk Actions (essential feature)
- Enable Keyboard Shortcuts (essential feature)
2. **Performance Settings**
- Enable caching (we do best config)
- Cache duration (we optimize)
- Preload data (we handle)
3. **Typography Settings**
- Font selection (breaks design)
- Font size (use browser zoom)
4. **Admin UI Settings**
- Sidebar position (we optimize)
- Sidebar collapsed (we handle)
- Compact mode (we optimize)
5. **Custom CSS**
- Hard to use (no selectors)
- Better in theme
- Only for developers (if needed, add to Developer page)
---
## Summary
**From 13 tabs to 6 tabs:**
- ✅ Store Details (enhanced with branding)
- ✅ Payments (existing)
- ✅ Shipping & Delivery (existing)
- ✅ Tax (existing)
- ✅ Notifications (existing)
- ✅ Developer (new, for maintenance)
**Philosophy:**
> "We do the best config. Users focus on their business, not system configuration."
**Result:**
- Clean, focused settings
- Industry best practices
- No bloat
- Easy to use
- Professional

View File

@@ -100,22 +100,17 @@ function getStaticFallbackTree(): MainNode[] {
{
key: 'settings',
label: 'Settings',
path: '/settings',
path: '/settings/store',
icon: 'settings',
// Settings submenu available in all modes for consistent experience
children: [
// WooNooW Settings
{ label: 'WooNooW', mode: 'spa' as const, path: '/settings' },
// Core Settings (Shopify-inspired)
{ label: 'Store Details', mode: 'spa' as const, path: '/settings/store' },
{ label: 'Payments', mode: 'spa' as const, path: '/settings/payments' },
{ label: 'Shipping & Delivery', mode: 'spa' as const, path: '/settings/shipping' },
{ label: 'Tax', mode: 'spa' as const, path: '/settings/tax' },
{ label: 'Checkout', mode: 'spa' as const, path: '/settings/checkout' },
{ label: 'Customer Accounts', mode: 'spa' as const, path: '/settings/customers' },
{ label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' },
{ label: 'Brand & Appearance', mode: 'spa' as const, path: '/settings/brand' },
{ label: 'Developer', mode: 'spa' as const, path: '/settings/developer' },
],
},
];

View File

@@ -170,9 +170,6 @@ class NavigationRegistry {
$admin = admin_url('admin.php');
$children = [
// WooNooW Settings
['label' => __('WooNooW', 'woonoow'), 'mode' => 'spa', 'path' => '/settings'],
// Core Settings (Shopify-inspired)
['label' => __('Store Details', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/store'],
['label' => __('Payments', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/payments'],
@@ -185,16 +182,8 @@ class NavigationRegistry {
}
$children = array_merge($children, [
['label' => __('Checkout', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/checkout'],
['label' => __('Customer Accounts', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/customers'],
['label' => __('Notifications', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/notifications'],
['label' => __('Brand & Appearance', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/brand'],
// Advanced (Bridge to WP Admin)
['label' => __('Advanced', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=advanced'],
['label' => __('Integrations', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-settings&tab=integration'],
['label' => __('System Status', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-status'],
['label' => __('Extensions', 'woonoow'), 'mode' => 'bridge', 'href' => $admin . '?page=wc-addons'],
['label' => __('Developer', 'woonoow'), 'mode' => 'spa', 'path' => '/settings/developer'],
]);
return $children;