fix: Page list not refreshing and dialog styling

- Fix api response handling in pages query (api returns JSON directly)
- Fix page-structure query response handling
- Add theme class copying to dialog portal for proper CSS variable inheritance
- Portal container now syncs with document theme (light/dark)
This commit is contained in:
Dwindi Ramadhana
2026-01-11 23:44:25 +07:00
parent 75cd338c60
commit c5b572b2c2
2 changed files with 14 additions and 2 deletions

View File

@@ -40,7 +40,17 @@ const DialogContent = React.forwardRef<
if (!portalRoot) { if (!portalRoot) {
portalRoot = document.createElement('div'); portalRoot = document.createElement('div');
portalRoot.id = 'woonoow-dialog-portal'; portalRoot.id = 'woonoow-dialog-portal';
// Copy theme class from documentElement for proper CSS variable inheritance
const themeClass = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
portalRoot.className = themeClass;
appContainer.appendChild(portalRoot); appContainer.appendChild(portalRoot);
} else {
// Update theme class in case it changed
const themeClass = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
if (!portalRoot.classList.contains(themeClass)) {
portalRoot.classList.remove('light', 'dark');
portalRoot.classList.add(themeClass);
}
} }
return portalRoot; return portalRoot;
}; };

View File

@@ -51,8 +51,9 @@ export default function AppearancePages() {
const { data: pages = [], isLoading: pagesLoading } = useQuery<PageItem[]>({ const { data: pages = [], isLoading: pagesLoading } = useQuery<PageItem[]>({
queryKey: ['pages'], queryKey: ['pages'],
queryFn: async () => { queryFn: async () => {
// api.get returns JSON directly (not wrapped in { data: ... })
const response = await api.get('/pages'); const response = await api.get('/pages');
return response.data; return response; // Return response directly
}, },
}); });
@@ -64,8 +65,9 @@ export default function AppearancePages() {
const endpoint = selectedPage.type === 'page' const endpoint = selectedPage.type === 'page'
? `/pages/${selectedPage.slug}` ? `/pages/${selectedPage.slug}`
: `/templates/${selectedPage.cpt}`; : `/templates/${selectedPage.cpt}`;
// api.get returns JSON directly
const response = await api.get(endpoint); const response = await api.get(endpoint);
return response.data; return response; // Return response directly
}, },
enabled: !!selectedPage, enabled: !!selectedPage,
}); });