From fe243a42cb8ed085c3f67ce6a7b9ea72f80ca90e Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Sun, 11 Jan 2026 23:15:59 +0700
Subject: [PATCH] fix: Create Page dialog improvements

- Add horizontal padding to dialog content (px-1)
- Show real site URL from WNW_CONFIG.siteUrl instead of 'yoursite.com'
- Improve error handling to extract message from response.data.message
- Better slug generation regex (removes special chars properly)
- Reset form when modal closes
- Use theme colors (text-muted-foreground, hover:bg-accent/50)
---
 .../Pages/components/CreatePageModal.tsx      | 44 +++++++++++++------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx b/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
index a12607e..107cf7f 100644
--- a/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import { __ } from '@/lib/i18n';
@@ -36,6 +36,9 @@ export function CreatePageModal({ open, onOpenChange, onCreated }: CreatePageMod
     const [title, setTitle] = useState('');
     const [slug, setSlug] = useState('');
 
+    // Get site URL from WordPress config
+    const siteUrl = window.WNW_CONFIG?.siteUrl?.replace(/\/$/, '') || window.location.origin;
+
     // Create page mutation
     const createMutation = useMutation({
         mutationFn: async () => {
@@ -61,21 +64,36 @@ export function CreatePageModal({ open, onOpenChange, onCreated }: CreatePageMod
             }
         },
         onError: (error: any) => {
-            toast.error(error?.message || __('Failed to create page'));
+            // Extract error message from the response
+            const message = error?.response?.data?.message ||
+                error?.message ||
+                __('Failed to create page');
+            toast.error(message);
         },
     });
 
     // Auto-generate slug from title
     const handleTitleChange = (value: string) => {
         setTitle(value);
-        if (!slug || slug === title.toLowerCase().replace(/\s+/g, '-')) {
-            setSlug(value.toLowerCase().replace(/\s+/g, '-'));
+        // Auto-generate slug only if slug matches the previously auto-generated value
+        const autoSlug = title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
+        if (!slug || slug === autoSlug) {
+            setSlug(value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''));
         }
     };
 
+    // Reset form when modal closes
+    useEffect(() => {
+        if (!open) {
+            setTitle('');
+            setSlug('');
+            setPageType('page');
+        }
+    }, [open]);
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-[425px]">
+            <DialogContent className="sm:max-w-[500px]">
                 <DialogHeader>
                     <DialogTitle>{__('Create New Page')}</DialogTitle>
                     <DialogDescription>
@@ -83,30 +101,30 @@ export function CreatePageModal({ open, onOpenChange, onCreated }: CreatePageMod
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="space-y-6 py-4">
+                <div className="space-y-6 py-4 px-1">
                     {/* Page Type Selection */}
                     <RadioGroup value={pageType} onValueChange={(v) => setPageType(v as 'page' | 'template')}>
-                        <div className="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer hover:bg-gray-50">
+                        <div className="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer hover:bg-accent/50 transition-colors">
                             <RadioGroupItem value="page" id="page" className="mt-1" />
                             <div className="flex-1">
                                 <Label htmlFor="page" className="flex items-center gap-2 cursor-pointer font-medium">
                                     <FileText className="w-4 h-4" />
                                     {__('Structural Page')}
                                 </Label>
-                                <p className="text-sm text-gray-500 mt-1">
+                                <p className="text-sm text-muted-foreground mt-1">
                                     {__('Static content like About, Contact, Terms')}
                                 </p>
                             </div>
                         </div>
 
-                        <div className="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer hover:bg-gray-50 opacity-50">
+                        <div className="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer opacity-50">
                             <RadioGroupItem value="template" id="template" className="mt-1" disabled />
                             <div className="flex-1">
                                 <Label htmlFor="template" className="flex items-center gap-2 cursor-pointer font-medium">
                                     <Layout className="w-4 h-4" />
                                     {__('CPT Template')}
                                 </Label>
-                                <p className="text-sm text-gray-500 mt-1">
+                                <p className="text-sm text-muted-foreground mt-1">
                                     {__('Templates are auto-created for each post type')}
                                 </p>
                             </div>
@@ -131,11 +149,11 @@ export function CreatePageModal({ open, onOpenChange, onCreated }: CreatePageMod
                                 <Input
                                     id="slug"
                                     value={slug}
-                                    onChange={(e) => setSlug(e.target.value)}
+                                    onChange={(e) => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
                                     placeholder={__('e.g., about-us')}
                                 />
-                                <p className="text-xs text-gray-500">
-                                    {__('URL will be: ')}yoursite.com/{slug || 'page-slug'}
+                                <p className="text-xs text-muted-foreground">
+                                    {__('URL will be: ')}<span className="font-mono text-primary">{siteUrl}/{slug || 'page-slug'}</span>
                                 </p>
                             </div>
                         </div>