docs: Update all documentation for standalone mode and settings structure

PROJECT_SOP.md

@@ -857,7 +857,69 @@ Use Orders as the template for building new core modules.
 
 ---
 
-## 7. 🤖 AI Agent Collaboration Rules
+## 7. 🎨 Admin Interface Modes
+
+WooNooW provides **three distinct admin interface modes** to accommodate different workflows and user preferences:
+
+### **1. Normal Mode (wp-admin)**
+- **Access:** `/wp-admin/admin.php?page=woonoow`
+- **Layout:** Traditional WordPress admin with WooNooW SPA in content area
+- **Use Case:** Standard WordPress admin workflow
+- **Features:**
+  - WordPress admin bar and sidebar visible
+  - Full WordPress admin functionality
+  - WooNooW SPA integrated seamlessly
+  - Settings submenu hidden (use WooCommerce settings)
+- **When to use:** When you need access to other WordPress admin features alongside WooNooW
+
+### **2. Fullscreen Mode**
+- **Access:** Toggle button in WooNooW header
+- **Layout:** WooNooW SPA only (no WordPress chrome)
+- **Use Case:** Focused work sessions, order processing
+- **Features:**
+  - Maximized workspace
+  - Distraction-free interface
+  - All WooNooW features accessible
+  - Settings submenu hidden
+- **When to use:** When you want to focus exclusively on WooNooW tasks
+
+### **3. Standalone Mode** ✨
+- **Access:** `https://yoursite.com/admin`
+- **Layout:** Complete standalone application with custom login
+- **Use Case:** Quick daily access, mobile-friendly, bookmark-able
+- **Features:**
+  - Custom login page (`/admin#/login`)
+  - WordPress authentication integration
+  - Settings submenu visible (SPA settings pages)
+  - "WordPress" button to access wp-admin
+  - "Logout" button in header
+  - Admin bar link in wp-admin to standalone
+  - Session persistence across modes
+- **When to use:** As your primary WooNooW interface, especially on mobile or for quick access
+
+### **Mode Switching**
+- **From wp-admin to Standalone:** Click "WooNooW" in admin bar
+- **From Standalone to wp-admin:** Click "WordPress" button in header
+- **To Fullscreen:** Click fullscreen toggle in any mode
+- **Session persistence:** Login state is shared across all modes
+
+### **Settings Submenu Behavior**
+- **Normal Mode:** No settings submenu (use WooCommerce settings in wp-admin)
+- **Fullscreen Mode:** No settings submenu
+- **Standalone Mode:** Full settings submenu visible with SPA pages
+
+**Implementation:** Settings submenu uses dynamic getter in `admin-spa/src/nav/tree.ts`:
+```typescript
+get children() {
+  const isStandalone = (window as any).WNW_CONFIG?.standaloneMode;
+  if (!isStandalone) return [];
+  return [ /* settings items */ ];
+}
+```
+
+---
+
+## 8. 🤖 AI Agent Collaboration Rules
 
 When using an AI IDE agent (ChatGPT, Claude, etc.):