Add redraw page functionality with pageId support and UI updates

components/editor/comic-canvas.tsx

@@ -15,11 +15,12 @@ interface PageData {
 interface ComicCanvasProps {
   page: PageData;
   onInfoClick?: () => void;
+  onRedrawClick?: () => void;
   onNextPage?: () => void;
   onPrevPage?: () => void;
 }
 
-export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: ComicCanvasProps) {
+export function ComicCanvas({ page, onInfoClick, onRedrawClick, onNextPage, onPrevPage }: ComicCanvasProps) {
   return (
     <main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
       {/* Dot grid background */}
@@ -76,6 +77,7 @@ export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: Comic
           <Button
             variant="ghost"
             className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
+            onClick={onRedrawClick}
           >
             <RefreshCw className="w-4 h-4" />
             <span>Redraw</span>
@@ -90,6 +92,7 @@ export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: Comic
             <Button
               variant="ghost"
               className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3 flex-1"
+              onClick={onRedrawClick}
             >
               <RefreshCw className="w-4 h-4" />
               <span>Redraw</span>

components/editor/generate-page-modal.tsx

@@ -12,7 +12,6 @@ import {
 import { useToast } from "@/hooks/use-toast";
 import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils";
-import { COMIC_STYLES } from "@/lib/constants";
 
 interface GeneratePageModalProps {
   isOpen: boolean;
@@ -23,6 +22,8 @@ interface GeneratePageModalProps {
     characterUrls?: string[];
   }) => void;
   pageNumber: number;
+  isRedrawMode?: boolean;
+  existingPrompt?: string;
 }
 
 export function GeneratePageModal({
@@ -30,6 +31,8 @@ export function GeneratePageModal({
   onClose,
   onGenerate,
   pageNumber,
+  isRedrawMode = false,
+  existingPrompt = "",
 }: GeneratePageModalProps) {
   const [prompt, setPrompt] = useState("");
   const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
@@ -42,13 +45,13 @@ export function GeneratePageModal({
   // Reset form when modal opens
   useEffect(() => {
     if (isOpen) {
-      setPrompt("");
+      setPrompt(isRedrawMode ? existingPrompt : "");
       setUploadedFiles([]);
       setPreviews([]);
       setShowPreview(null);
       setIsGenerating(false);
     }
-  }, [isOpen]);
+  }, [isOpen, isRedrawMode, existingPrompt]);
 
   // Keyboard shortcut for form submission
   useKeyboardShortcut(() => {
@@ -138,7 +141,7 @@ export function GeneratePageModal({
         <DialogContent className="border border-border/50 rounded-lg bg-background max-w-lg">
           <DialogHeader>
             <DialogTitle className="text-xl text-white font-heading">
-              Generate Page {pageNumber}
+              {isRedrawMode ? `Redraw Page ${pageNumber}` : `Generate Page ${pageNumber}`}
             </DialogTitle>
           </DialogHeader>
 
@@ -155,7 +158,7 @@ export function GeneratePageModal({
                 <textarea
                   value={prompt}
                   onChange={(e) => setPrompt(e.target.value)}
-                  placeholder="Continue the story... Describe what happens next."
+                  placeholder={isRedrawMode ? "Tweak the prompt to improve this page..." : "Continue the story... Describe what happens next."}
                   disabled={isGenerating}
                   className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-20 leading-relaxed tracking-tight"
                 />
@@ -226,7 +229,10 @@ export function GeneratePageModal({
             </div>
 
             <div className="text-xs text-muted-foreground/70">
-              Automatically references previous pages and existing characters from your story.
+              {isRedrawMode
+                ? "This will replace the current page with a new version. Previous pages and characters are automatically referenced."
+                : "Automatically references previous pages and existing characters from your story."
+              }
             </div>
 
             <Button
@@ -237,10 +243,10 @@ export function GeneratePageModal({
               {isGenerating ? (
                 <>
                   <Loader2 className="w-4 h-4 animate-spin" />
-                  <span>Generating page...</span>
+                  <span>{isRedrawMode ? "Redrawing page..." : "Generating page..."}</span>
                 </>
               ) : (
-                `Generate Page ${pageNumber}`
+                `${isRedrawMode ? "Redraw" : "Generate"} Page ${pageNumber}`
               )}
             </Button>
           </div>

components/editor/page-sidebar.tsx

@@ -38,7 +38,7 @@ export function PageSidebar({
           <button
             key={page.id}
             onClick={() => onPageSelect(index)}
-            disabled={loadingPageId === page.id}
+            disabled={loadingPageId === index}
             className={`
               w-16 h-16 rounded-lg transition-all relative overflow-hidden
               ${
@@ -46,10 +46,10 @@ export function PageSidebar({
                   ? "ring-2 ring-indigo shadow-lg shadow-indigo/20"
                   : "glass-panel glass-panel-hover hover:ring-1 hover:ring-white/20"
               }
-              ${loadingPageId === page.id ? "opacity-50" : ""}
+              ${loadingPageId === index ? "opacity-50" : ""}
             `}
           >
-            {loadingPageId === page.id ? (
+            {loadingPageId === index ? (
               <div className="w-full h-full flex items-center justify-center">
                 <Loader2 className="w-6 h-6 animate-spin text-white" />
               </div>