fix(spa-nav): refresh navigation immediately when modules are toggled

admin-spa/src/hooks/useActiveSection.ts

@@ -1,8 +1,23 @@
 import { useLocation } from 'react-router-dom';
-import { navTree, MainNode, NAV_TREE_VERSION } from '../nav/tree';
+import { useEffect, useState } from 'react';
+import { navTree as initialNavTree, MainNode } from '../nav/tree';
+
+function getCurrentNavTree(): MainNode[] {
+  const tree = window.WNW_NAV_TREE;
+  return Array.isArray(tree) && tree.length > 0
+    ? (tree as MainNode[])
+    : initialNavTree;
+}
 
 export function useActiveSection(): { main: MainNode; all: MainNode[] } {
   const { pathname } = useLocation();
+  const [navTree, setNavTree] = useState<MainNode[]>(getCurrentNavTree);
+
+  useEffect(() => {
+    const handleNavUpdate = () => setNavTree(getCurrentNavTree());
+    window.addEventListener('woonoow:navigation-updated', handleNavUpdate);
+    return () => window.removeEventListener('woonoow:navigation-updated', handleNavUpdate);
+  }, []);
 
   function pick(): MainNode {
     // Special case: /settings should match settings section
@@ -32,8 +47,5 @@ export function useActiveSection(): { main: MainNode; all: MainNode[] } {
   const main = pick();
   const children = Array.isArray(main.children) ? main.children : [];
 
-  // Debug: ensure we are using the latest tree module (driven by PHP-localized window.wnw.isDev)
-  const isDev = Boolean((window as any).wnw?.isDev);
-
   return { main: { ...main, children }, all: navTree } as const;
-}
+}

admin-spa/src/routes/Settings/Modules.tsx

@@ -51,8 +51,20 @@ export default function Modules() {
     mutationFn: async ({ moduleId, enabled }: { moduleId: string; enabled: boolean }) => {
       return api.post('/modules/toggle', { module_id: moduleId, enabled });
     },
-    onSuccess: (data, variables) => {
+    onSuccess: (data: any, variables) => {
+      if (Array.isArray(data?.enabled_modules)) {
+        queryClient.setQueryData(['modules-enabled'], { enabled: data.enabled_modules });
+      }
+
+      if (Array.isArray(data?.nav_tree)) {
+        window.WNW_NAV_TREE = data.nav_tree;
+        window.dispatchEvent(new CustomEvent('woonoow:navigation-updated', {
+          detail: { moduleId: variables.moduleId, enabled: variables.enabled },
+        }));
+      }
+
       queryClient.invalidateQueries({ queryKey: ['modules'] });
+      queryClient.invalidateQueries({ queryKey: ['modules-enabled'] });
       toast.success(
         variables.enabled
           ? __('Module enabled successfully')

admin-spa/src/types/window.d.ts

@@ -60,6 +60,14 @@ interface WNW_Store {
   position?: string;
 }
 
+interface WNW_NavNode {
+  key: string;
+  path: string;
+  icon: string;
+  label: string;
+  children?: any[];
+}
+
 declare global {
   interface Window {
     WNW_API: WNW_API_Config; // Make required to avoid "possibly undefined" check in every usage if we are sure it exists
@@ -67,19 +75,20 @@ declare global {
     WNW_WC_MENUS?: WNW_WC_MENUS;
     WNW_CONFIG?: WNW_CONFIG;
     WNW_STORE?: WNW_Store;
-    WNW_NAV_TREE?: Array<{
-      key: string;
-      path: string;
-      icon: string;
-      label: string;
-      children?: any[];
-    }>;
+    WNW_NAV_TREE?: WNW_NavNode[];
     WNW_ADDON_ROUTES?: Array<{
       path: string;
       component_url: string;
       props?: Record<string, any>;
     }>;
   }
+
+  interface WindowEventMap {
+    'woonoow:navigation-updated': CustomEvent<{
+      moduleId?: string;
+      enabled?: boolean;
+    }>;
+  }
 }
 
 export { };