From 9497a534c475e88f7079b22bd1f8e76159ee9885 Mon Sep 17 00:00:00 2001 From: dwindown Date: Mon, 10 Nov 2025 23:30:06 +0700 Subject: [PATCH] fix: Dark mode headings, settings redirect, upload nonce, mobile theme toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 1. Fix Dark Mode Headings ✅ **Issue:** h1-h6 headings not changing color in dark mode **Fix:** ```css h1, h2, h3, h4, h5, h6 { @apply text-foreground; } ``` **Result:** All headings now use foreground color (adapts to theme) --- ## 2. Fix Settings Default Route ✅ **Issue:** Main Settings menu goes to /settings with placeholder page **Fix:** - Changed /settings to redirect to /settings/store - Store Details is now the default settings page - No more placeholder "Settings interface coming soon" **Code:** ```tsx useEffect(() => { navigate('/settings/store', { replace: true }); }, [navigate]); ``` --- ## 3. Fix "Cookie check failed" Upload Error ✅ **Issue:** Image upload failing with "Cookie check failed" **Root Cause:** WordPress REST API nonce not available **Fix:** - Added `wpApiSettings` to both dev and prod modes - Provides `root` and `nonce` for WordPress REST API - Image upload component already checks multiple nonce sources **Backend Changes:** ```php // Dev mode wp_localize_script($handle, 'wpApiSettings', [ 'root' => esc_url_raw(rest_url()), 'nonce' => wp_create_nonce('wp_rest'), ]); // Prod mode (same) ``` **Result:** Image upload now works with proper authentication --- ## 4. Add Theme Toggle to Mobile ✅ **Recommendation:** Yes, mobile should have theme toggle **Implementation:** Added to More page (mobile hub) **UI:** - 3-column grid with theme cards - ☀️ Light | 🌙 Dark | 🖥️ System - Active theme highlighted with primary border - Placed under "Appearance" section **Location:** ``` More Page ├── Coupons ├── Settings ├── Appearance (NEW) │ ├── ☀️ Light │ ├── 🌙 Dark │ └── 🖥️ System └── Exit Fullscreen / Logout ``` **Why More page?** - Mobile users go there for additional options - Natural place for appearance settings - Doesn't clutter main navigation - Desktop has header toggle, mobile has More page --- ## Summary ✅ **Dark mode headings** - Fixed with text-foreground ✅ **Settings redirect** - /settings → /settings/store ✅ **Upload nonce** - wpApiSettings added (dev + prod) ✅ **Mobile theme toggle** - Added to More page with 3-card grid **All issues resolved!** 🎉 **Note:** CSS lint warnings (@tailwind, @apply) are false positives - Tailwind directives are valid. --- admin-spa/src/index.css | 1 + admin-spa/src/routes/More/index.tsx | 31 +++++++++++++++++++- admin-spa/src/routes/Settings/index.tsx | 39 +++++++------------------ includes/Admin/Assets.php | 14 +++++++++ 4 files changed, 55 insertions(+), 30 deletions(-) diff --git a/admin-spa/src/index.css b/admin-spa/src/index.css index 6dded1a..e3c6e76 100644 --- a/admin-spa/src/index.css +++ b/admin-spa/src/index.css @@ -65,6 +65,7 @@ @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } + h1, h2, h3, h4, h5, h6 { @apply text-foreground; } } /* Command palette input: remove native borders/shadows to match shadcn */ diff --git a/admin-spa/src/routes/More/index.tsx b/admin-spa/src/routes/More/index.tsx index 79197b1..8934830 100644 --- a/admin-spa/src/routes/More/index.tsx +++ b/admin-spa/src/routes/More/index.tsx @@ -1,10 +1,11 @@ import React, { useEffect } from 'react'; import { useNavigate, Link } from 'react-router-dom'; -import { Tag, Settings as SettingsIcon, ChevronRight, Minimize2, LogOut } from 'lucide-react'; +import { Tag, Settings as SettingsIcon, ChevronRight, Minimize2, LogOut, Sun, Moon, Monitor } from 'lucide-react'; import { __ } from '@/lib/i18n'; import { usePageHeader } from '@/contexts/PageHeaderContext'; import { useApp } from '@/contexts/AppContext'; import { Button } from '@/components/ui/button'; +import { useTheme } from '@/components/ThemeProvider'; interface MenuItem { icon: React.ReactNode; @@ -32,6 +33,7 @@ export default function MorePage() { const navigate = useNavigate(); const { setPageHeader, clearPageHeader } = usePageHeader(); const { isStandalone, exitFullscreen } = useApp(); + const { theme, setTheme } = useTheme(); useEffect(() => { setPageHeader(__('More')); @@ -48,6 +50,12 @@ export default function MorePage() { // Clear auth and redirect to login window.location.href = window.WNW_CONFIG?.wpAdminUrl || '/wp-admin'; }; + + const themeOptions = [ + { value: 'light', icon: , label: __('Light') }, + { value: 'dark', icon: , label: __('Dark') }, + { value: 'system', icon: , label: __('System') }, + ]; return (
@@ -80,6 +88,27 @@ export default function MorePage() { ))}
+ {/* Theme Selector */} +
+

{__('Appearance')}

+
+ {themeOptions.map((option) => ( + + ))} +
+
+ {/* Exit Fullscreen / Logout */}
{isStandalone ? ( diff --git a/admin-spa/src/routes/Settings/index.tsx b/admin-spa/src/routes/Settings/index.tsx index 1fb8627..10f16a3 100644 --- a/admin-spa/src/routes/Settings/index.tsx +++ b/admin-spa/src/routes/Settings/index.tsx @@ -1,32 +1,13 @@ -import React from 'react'; -import { __ } from '@/lib/i18n'; +import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; export default function SettingsIndex() { - return ( -
-

{__('WooNooW Settings')}

-

- {__('Configure WooNooW plugin settings and preferences.')} -

- -
-
-

{__('Plugin Configuration')}

-

- {__('Settings interface coming soon.')} -

-
- -
-

{__('Quick Links')}

-
-

- {__('WooCommerce Settings:')}{' '} - {__('Use the navigation menu to access General, Payments, Shipping, and other WooCommerce settings.')} -

-
-
-
-
- ); + const navigate = useNavigate(); + + useEffect(() => { + // Redirect to Store Details as the default settings page + navigate('/settings/store', { replace: true }); + }, [navigate]); + + return null; } \ No newline at end of file diff --git a/includes/Admin/Assets.php b/includes/Admin/Assets.php index 6d97362..e3fc648 100644 --- a/includes/Admin/Assets.php +++ b/includes/Admin/Assets.php @@ -47,6 +47,13 @@ class Assets { 'adminUrl' => admin_url('admin.php'), ]); wp_add_inline_script($handle, 'window.WNW_API = window.WNW_API || WNW_API;', 'after'); + + // WordPress REST API settings (for media upload compatibility) + wp_localize_script($handle, 'wpApiSettings', [ + 'root' => esc_url_raw(rest_url()), + 'nonce' => wp_create_nonce('wp_rest'), + ]); + wp_add_inline_script($handle, 'window.wpApiSettings = window.wpApiSettings || wpApiSettings;', 'after'); // Also expose compact global for convenience wp_localize_script($handle, 'wnw', [ @@ -134,6 +141,13 @@ class Assets { 'adminScreen' => 'woonoow', 'adminUrl' => admin_url('admin.php'), ]); + + // WordPress REST API settings (for media upload compatibility) + wp_localize_script($handle, 'wpApiSettings', [ + 'root' => esc_url_raw(rest_url()), + 'nonce' => wp_create_nonce('wp_rest'), + ]); + wp_localize_script($handle, 'WNW_STORE', self::store_runtime()); wp_add_inline_script($handle, 'window.WNW_STORE = window.WNW_STORE || WNW_STORE;', 'after');