Add loading state and disable interactions during page generation

components/editor/generate-page-modal.tsx

@@ -8,6 +8,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogClose,
 } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
@@ -53,7 +54,7 @@ export function GeneratePageModal({
     }
   }, [isOpen, isRedrawMode, existingPrompt]);
 
-  // Keyboard shortcut for form submission
+  // Keyboard shortcut for form submission (disabled during generation)
   useKeyboardShortcut(() => {
     if (isOpen && !isGenerating && prompt.trim()) {
       handleGenerate();
@@ -135,14 +136,26 @@ export function GeneratePageModal({
 
 
 
+  const handleOpenChange = (open: boolean) => {
+    // Prevent closing the modal if generation is running
+    if (!open && isGenerating) {
+      return;
+    }
+    onClose();
+  };
+
   return (
     <>
-      <Dialog open={isOpen} onOpenChange={onClose}>
+      <Dialog open={isOpen} onOpenChange={handleOpenChange}>
         <DialogContent className="border border-border/50 rounded-lg bg-background max-w-lg">
           <DialogHeader>
             <DialogTitle className="text-xl text-white font-heading">
               {isRedrawMode ? `Redraw Page ${pageNumber}` : `Generate Page ${pageNumber}`}
             </DialogTitle>
+            <DialogClose disabled={isGenerating} className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogClose>
           </DialogHeader>
 
           <div className="space-y-4 mt-4">