Add redraw page functionality with pageId support and UI updates

app/api/add-page/route.ts

@@ -1,6 +1,9 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { auth } from "@clerk/nextjs/server";
 import Together from "together-ai";
+import { db } from "@/lib/db";
+import { pages } from "@/lib/schema";
+import { eq } from "drizzle-orm";
 import {
   updatePage,
   createPage,
@@ -34,7 +37,7 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    const { storyId, prompt, characterImages = [] } = await request.json();
+    const { storyId, pageId, prompt, characterImages = [] } = await request.json();
 
     if (!storyId || !prompt) {
       return NextResponse.json(
@@ -76,13 +79,35 @@ export async function POST(request: NextRequest) {
       }
     }
 
-    const nextPageNumber = await getNextPageNumber(story.id);
+    let page;
-    const page = await createPage({
+    let pageNumber;
-      storyId: story.id,
+    let isRedraw = false;
-      pageNumber: nextPageNumber,
+
-      prompt,
+    if (pageId) {
-      characterImageUrls: characterImages,
+      // Redraw mode: update existing page
-    });
+      isRedraw = true;
+      const storyData = await getStoryWithPagesBySlug(storyId);
+      if (!storyData) {
+        return NextResponse.json({ error: "Story not found" }, { status: 404 });
+      }
+
+      const existingPage = storyData.pages.find(p => p.id === pageId);
+      if (!existingPage) {
+        return NextResponse.json({ error: "Page not found" }, { status: 404 });
+      }
+
+      page = existingPage;
+      pageNumber = existingPage.pageNumber;
+    } else {
+      // Add new page mode
+      pageNumber = await getNextPageNumber(story.id);
+      page = await createPage({
+        storyId: story.id,
+        pageNumber,
+        prompt,
+        characterImageUrls: characterImages,
+      });
+    }
 
     const dimensions = FIXED_DIMENSIONS;
 
@@ -90,10 +115,22 @@ export async function POST(request: NextRequest) {
     let referenceImages: string[] = [];
 
     // Get previous page image for style consistency (unless it's page 1)
-    if (nextPageNumber > 1) {
+    if (pageNumber > 1) {
-      const lastPageImage = await getLastPageImage(story.id);
+      if (isRedraw) {
-      if (lastPageImage) {
+        // For redraw, get all pages and find the previous page's image
-        referenceImages.push(lastPageImage);
+        const storyData = await getStoryWithPagesBySlug(storyId);
+        if (storyData) {
+          const previousPage = storyData.pages.find(p => p.pageNumber === pageNumber - 1);
+          if (previousPage?.generatedImageUrl) {
+            referenceImages.push(previousPage.generatedImageUrl);
+          }
+        }
+      } else {
+        // For new page, use the last page image
+        const lastPageImage = await getLastPageImage(story.id);
+        if (lastPageImage) {
+          referenceImages.push(lastPageImage);
+        }
       }
     }
 

app/editor/[storySlug]/page.tsx

@@ -9,6 +9,7 @@ import { ComicCanvas } from "@/components/editor/comic-canvas";
 import { ApiKeyModal } from "@/components/api-key-modal";
 import { PageInfoSheet } from "@/components/editor/page-info-sheet";
 import { GeneratePageModal } from "@/components/editor/generate-page-modal";
+import { StoryLoader } from "@/components/ui/story-loader";
 
 interface PageData {
   id: number; // pageNumber for component compatibility
@@ -119,6 +120,67 @@ export default function StoryEditorPage() {
     setShowGenerateModal(true);
   };
 
+  const handleRedrawPage = async () => {
+    const storedKey = localStorage.getItem("together_api_key");
+    if (!storedKey) {
+      setShowApiModal(true);
+      return;
+    }
+
+    const currentPageData = pages[currentPage];
+    if (!currentPageData) return;
+
+    setLoadingPageId(currentPage);
+
+    try {
+      const response = await fetch("/api/add-page", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": storedKey,
+        },
+        body: JSON.stringify({
+          storyId: story?.slug,
+          pageId: currentPageData.dbId, // Add pageId to override existing page
+          prompt: currentPageData.prompt,
+          characterImages: currentPageData.characterUploads || [],
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to redraw page");
+      }
+
+      const result = await response.json();
+
+      // Update the current page with the new image
+      setPages((prevPages) =>
+        prevPages.map((page, index) =>
+          index === currentPage
+            ? { ...page, image: result.imageUrl }
+            : page
+        )
+      );
+
+      toast({
+        title: "Page redrawn successfully",
+        description: "The page has been regenerated with a fresh image.",
+        duration: 3000,
+      });
+    } catch (error) {
+      console.error("Error redrawing page:", error);
+      toast({
+        title: "Failed to redraw page",
+        description: error instanceof Error ? error.message : "Failed to redraw page",
+        variant: "destructive",
+        duration: 4000,
+      });
+    } finally {
+      setLoadingPageId(null);
+    }
+  };
+
   const handleApiKeyClick = () => {
     setShowApiModal(true);
   };
@@ -132,8 +194,6 @@ export default function StoryEditorPage() {
     }
   };
 
-
-
   const handleGeneratePage = async (data: {
     prompt: string;
     characterFiles?: File[];
@@ -146,6 +206,7 @@ export default function StoryEditorPage() {
         return;
       }
 
+      // Add new page mode
       const response = await fetch("/api/add-page", {
         method: "POST",
         headers: {
@@ -175,16 +236,20 @@ export default function StoryEditorPage() {
           prompt: data.prompt,
           characterUploads: data.characterUrls || [],
           style: story?.style || "noir",
+          dbId: result.pageId,
         },
       ]);
       setCurrentPage(pages.length);
+
       setShowGenerateModal(false);
     } catch (error) {
       console.error("Error generating page:", error);
       toast({
         title: "Failed to generate page",
         description:
-          error instanceof Error ? error.message : "Failed to generate page",
+          error instanceof Error
+            ? error.message
+            : "Failed to generate page",
         variant: "destructive",
         duration: 4000,
       });
@@ -194,7 +259,7 @@ export default function StoryEditorPage() {
   if (isLoading) {
     return (
       <div className="h-screen flex items-center justify-center bg-background">
-        <div className="text-white">Loading story...</div>
+        <StoryLoader />
       </div>
     );
   }
@@ -209,10 +274,7 @@ export default function StoryEditorPage() {
 
   return (
     <div className="h-screen flex flex-col bg-background">
-      <EditorToolbar
+      <EditorToolbar title={story.title} onContinueStory={handleAddPage} />
-        title={story.title}
-        onContinueStory={handleAddPage}
-      />
 
       <div className="flex-1 flex overflow-hidden">
         <PageSidebar
@@ -226,8 +288,15 @@ export default function StoryEditorPage() {
         <ComicCanvas
           page={pages[currentPage]}
           onInfoClick={() => setShowInfoSheet(true)}
-          onNextPage={() => setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev))}
+          onRedrawClick={handleRedrawPage}
-          onPrevPage={() => setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))}
+          onNextPage={() =>
+            setCurrentPage((prev) =>
+              prev < pages.length - 1 ? prev + 1 : prev
+            )
+          }
+          onPrevPage={() =>
+            setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))
+          }
         />
       </div>
 

app/stories/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Plus, Loader2 } from "lucide-react";
 import { Navbar } from "@/components/landing/navbar";
+import { StoryLoader } from "@/components/ui/story-loader";
 
 interface Story {
   id: string;
@@ -51,10 +52,7 @@ export default function StoriesPage() {
         <Navbar />
 
         <main className="flex-1 flex items-center justify-center">
-          <div className="text-center">
+          <StoryLoader text="Loading your comic library..." />
-            <Loader2 className="w-8 h-8 animate-spin mx-auto mb-4" />
-            <p className="text-muted-foreground">Loading your comic library...</p>
-          </div>
         </main>
       </div>
     );

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>