From 9895200db67a885c1dee3d5e0201c9e6dc1efc79 Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Fri, 26 Dec 2025 17:30:08 +0100
Subject: [PATCH] wip

---
 app/editor/[storySlug]/page.tsx           |   1 +
 components/editor/editor-toolbar.tsx      |  36 ++-
 components/editor/generate-page-modal.tsx | 310 +++++++++++-----------
 3 files changed, 179 insertions(+), 168 deletions(-)

diff --git a/app/editor/[storySlug]/page.tsx b/app/editor/[storySlug]/page.tsx
index 461d913..cc14c41 100644
--- a/app/editor/[storySlug]/page.tsx
+++ b/app/editor/[storySlug]/page.tsx
@@ -217,6 +217,7 @@ export default function StoryEditorPage() {
       <EditorToolbar
         title={story.title}
         onInfoClick={() => setShowInfoSheet(true)}
+        onContinueStory={handleAddPage}
       />
 
       <div className="flex-1 flex overflow-hidden">
diff --git a/components/editor/editor-toolbar.tsx b/components/editor/editor-toolbar.tsx
index b9ad214..8682f30 100644
--- a/components/editor/editor-toolbar.tsx
+++ b/components/editor/editor-toolbar.tsx
@@ -1,16 +1,21 @@
-"use client"
+"use client";
 
-import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { useRouter } from "next/navigation"
+import { ArrowLeft, RefreshCw, Download, Plus, Info } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 interface EditorToolbarProps {
-  title: string
-  onInfoClick: () => void
+  title: string;
+  onInfoClick: () => void;
+  onContinueStory?: () => void;
 }
 
-export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
-  const router = useRouter()
+export function EditorToolbar({
+  title,
+  onInfoClick,
+  onContinueStory,
+}: EditorToolbarProps) {
+  const router = useRouter();
 
   return (
     <header className="h-14 border-b border-border/50 bg-background/80 backdrop-blur-md flex items-center justify-between px-3 sm:px-4">
@@ -24,7 +29,9 @@ export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
           <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
         </Button>
 
-        <h1 className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate">{title}</h1>
+        <h1 className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate">
+          {title}
+        </h1>
       </div>
 
       <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
@@ -52,7 +59,16 @@ export function EditorToolbar({ title, onInfoClick }: EditorToolbarProps) {
           <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
           <span>Download PDF</span>
         </Button>
+
+        <Button
+          onClick={onContinueStory}
+          className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
+        >
+          <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+          <span className="hidden sm:inline">Continue story</span>
+          <span className="sm:hidden">Add</span>
+        </Button>
       </div>
     </header>
-  )
+  );
 }
diff --git a/components/editor/generate-page-modal.tsx b/components/editor/generate-page-modal.tsx
index 453c03a..cff4299 100644
--- a/components/editor/generate-page-modal.tsx
+++ b/components/editor/generate-page-modal.tsx
@@ -1,33 +1,38 @@
-"use client"
+"use client";
 
-import { useState, useRef, useEffect, useMemo } from "react"
-import { Upload, X, Loader2 } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { useToast } from "@/hooks/use-toast"
-import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils"
-import { COMIC_STYLES } from "@/lib/constants"
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Upload, X, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useToast } from "@/hooks/use-toast";
+import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils";
+import { COMIC_STYLES } from "@/lib/constants";
 
 interface PageReference {
-  pageNumber: number
-  characterImages: string[]
-  prompt: string
-  imageUrl?: string
-  style: string
+  pageNumber: number;
+  characterImages: string[];
+  prompt: string;
+  imageUrl?: string;
+  style: string;
 }
 
 interface GeneratePageModalProps {
-  isOpen: boolean
-  onClose: () => void
+  isOpen: boolean;
+  onClose: () => void;
   onGenerate: (data: {
-    prompt: string
-    style: string
-    characterFiles?: File[]
-    characterUrls?: string[]
-    isContinuation?: boolean
-  }) => void
-  pageNumber: number
-  allPages: PageReference[]
+    prompt: string;
+    style: string;
+    characterFiles?: File[];
+    characterUrls?: string[];
+    isContinuation?: boolean;
+  }) => void;
+  pageNumber: number;
+  allPages: PageReference[];
 }
 
 export function GeneratePageModal({
@@ -37,40 +42,46 @@ export function GeneratePageModal({
   pageNumber,
   allPages,
 }: GeneratePageModalProps) {
-  const [prompt, setPrompt] = useState("")
-  const [uploadedFiles, setUploadedFiles] = useState<File[]>([])
-  const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<string[]>([])
-  const [referencePageNumber, setReferencePageNumber] = useState<number>(allPages.length > 0 ? allPages.length : 1)
-  const [pageImage, setPageImage] = useState<string | null>(null)
-  const [previews, setPreviews] = useState<string[]>([])
-  const [showPreview, setShowPreview] = useState<number | null>(null)
-  const [isGenerating, setIsGenerating] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const { toast } = useToast()
+  const [prompt, setPrompt] = useState("");
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
+  const [selectedExistingCharacters, setSelectedExistingCharacters] = useState<
+    string[]
+  >([]);
+  const [referencePageNumber, setReferencePageNumber] = useState<number>(
+    allPages.length > 0 ? allPages.length : 1
+  );
+  const [pageImage, setPageImage] = useState<string | null>(null);
+  const [previews, setPreviews] = useState<string[]>([]);
+  const [showPreview, setShowPreview] = useState<number | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { toast } = useToast();
 
-  const referencePage = allPages.find((p) => p.pageNumber === referencePageNumber) || null
-  const referenceStyleId = referencePage?.style || "noir"
-  const selectedStyleName = COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir"
-  const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId])
+  const referencePage =
+    allPages.find((p) => p.pageNumber === referencePageNumber) || null;
+  const referenceStyleId = referencePage?.style || "noir";
+  const selectedStyleName =
+    COMIC_STYLES.find((s) => s.id === referenceStyleId)?.name || "Noir";
+  const selectedStyle = useMemo(() => selectedStyleName, [referenceStyleId]);
 
   useEffect(() => {
     if (isOpen && referencePage) {
-      setSelectedExistingCharacters(referencePage.characterImages)
-      setPageImage(referencePage.imageUrl || null)
+      setSelectedExistingCharacters(referencePage.characterImages);
+      setPageImage(referencePage.imageUrl || null);
     } else if (isOpen && !referencePage) {
-      setPageImage(null)
+      setPageImage(null);
     }
-  }, [isOpen, referencePage])
+  }, [isOpen, referencePage]);
 
   const handleFiles = async (newFiles: FileList | null) => {
-    if (!newFiles) return
+    if (!newFiles) return;
 
-    const filesArray = Array.from(newFiles)
+    const filesArray = Array.from(newFiles);
 
-    const validationResults = filesArray.map(file => ({
+    const validationResults = filesArray.map((file) => ({
       file,
-      validation: validateFileForUpload(file, true)
-    }))
+      validation: validateFileForUpload(file, true),
+    }));
 
     validationResults.forEach(({ validation }) => {
       if (!validation.valid && validation.error) {
@@ -79,72 +90,74 @@ export function GeneratePageModal({
           description: validation.error,
           variant: "destructive",
           duration: 4000,
-        })
+        });
       }
-    })
+    });
 
     const validFiles = validationResults
       .filter(({ validation }) => validation.valid)
-      .map(({ file }) => file)
+      .map(({ file }) => file);
 
-    if (validFiles.length === 0) return
+    if (validFiles.length === 0) return;
 
-    const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2)
-    setUploadedFiles(totalFiles)
+    const totalFiles = [...uploadedFiles, ...validFiles].slice(0, 2);
+    setUploadedFiles(totalFiles);
 
     const newPreviews = await Promise.all(
       totalFiles.map((file) => generateFilePreview(file))
-    )
-    setPreviews(newPreviews)
-  }
+    );
+    setPreviews(newPreviews);
+  };
 
   const removeFile = (index: number) => {
-    const newFiles = uploadedFiles.filter((_, i) => i !== index)
-    const newPreviews = previews.filter((_, i) => i !== index)
-    setUploadedFiles(newFiles)
-    setPreviews(newPreviews)
-    setShowPreview(null)
+    const newFiles = uploadedFiles.filter((_, i) => i !== index);
+    const newPreviews = previews.filter((_, i) => i !== index);
+    setUploadedFiles(newFiles);
+    setPreviews(newPreviews);
+    setShowPreview(null);
     if (fileInputRef.current) {
-      fileInputRef.current.value = ""
+      fileInputRef.current.value = "";
     }
-  }
+  };
 
   const toggleExistingCharacter = (characterUrl: string) => {
-    setSelectedExistingCharacters(prev =>
+    setSelectedExistingCharacters((prev) =>
       prev.includes(characterUrl)
-        ? prev.filter(url => url !== characterUrl)
+        ? prev.filter((url) => url !== characterUrl)
         : [...prev, characterUrl]
-    )
-  }
+    );
+  };
 
   const togglePageImage = () => {
-    setPageImage(prev => prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null)
-  }
+    setPageImage((prev) =>
+      prev === null && referencePage?.imageUrl ? referencePage.imageUrl : null
+    );
+  };
 
   const handleGenerate = async () => {
-    if (!prompt.trim()) return
-    setIsGenerating(true)
+    if (!prompt.trim()) return;
+    setIsGenerating(true);
 
     const fileDataUrls = await Promise.all(
       uploadedFiles.map((file, index) => {
         return new Promise<string>((resolve) => {
-          const reader = new FileReader()
+          const reader = new FileReader();
           reader.onload = (e) => {
-            const base64 = e.target?.result as string
-            const [header, base64Data] = base64.split(",")
-            const base64String = base64Data.replace(/_/g, "/")
-            resolve(`data:image/jpeg;base64,${base64String}`)
-          }
-          reader.readAsDataURL(file)
-        })
+            const base64 = e.target?.result as string;
+            const [header, base64Data] = base64.split(",");
+            // Send just the base64 data without the data URL prefix
+            resolve(base64Data);
+          };
+          reader.readAsDataURL(file);
+        });
       })
-    )
+    );
 
     const allCharacterUrls: string[] = [
       ...selectedExistingCharacters,
       ...fileDataUrls,
       ...(pageImage ? [pageImage] : []),
-    ]
+    ];
 
     onGenerate({
       prompt,
@@ -152,28 +165,30 @@ export function GeneratePageModal({
       characterFiles: uploadedFiles.length > 0 ? uploadedFiles : undefined,
       characterUrls: allCharacterUrls,
       isContinuation: false,
-    })
-  }
+    });
+  };
 
   useEffect(() => {
     if (!isOpen) {
-      setIsGenerating(false)
-      setPrompt("")
-      setUploadedFiles([])
-      setSelectedExistingCharacters([])
-      setPageImage(null)
+      setIsGenerating(false);
+      setPrompt("");
+      setUploadedFiles([]);
+      setSelectedExistingCharacters([]);
+      setPageImage(null);
       if (allPages.length > 0) {
-        setReferencePageNumber(allPages.length)
+        setReferencePageNumber(allPages.length);
       }
     }
-  }, [isOpen])
+  }, [isOpen]);
 
   return (
     <>
       <Dialog open={isOpen} onOpenChange={onClose}>
         <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}</DialogTitle>
+            <DialogTitle className="text-xl text-white font-heading">
+              Generate Page {pageNumber}
+            </DialogTitle>
           </DialogHeader>
 
           <div className="space-y-4 mt-4">
@@ -185,7 +200,9 @@ export function GeneratePageModal({
                 </label>
                 <select
                   value={referencePageNumber}
-                  onChange={(e) => setReferencePageNumber(Number(e.target.value))}
+                  onChange={(e) =>
+                    setReferencePageNumber(Number(e.target.value))
+                  }
                   className="w-full bg-background/80 border border-border/50 rounded-md px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo/50"
                 >
                   {allPages.map((page) => (
@@ -216,72 +233,47 @@ export function GeneratePageModal({
                 />
 
                 <div className="mt-3 pt-3 border-t border-border/30 space-y-3">
-                  {/* Reference Page Image Toggle */}
-                  {referencePage && referencePage.imageUrl && (
-                    <div className="space-y-2">
-                      <div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
-                        Include Page Image
-                      </div>
-                      <button
-                        onClick={togglePageImage}
-                        className={`w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
-                          pageImage
-                            ? "border-indigo shadow-sm shadow-indigo/20"
-                            : "border-border/50 hover:border-indigo/50"
-                        }`}
-                      >
-                        {pageImage ? (
-                          <img
-                            src={pageImage}
-                            alt="Page image"
-                            className="w-full h-full object-cover"
-                          />
-                        ) : (
-                          <span className="text-xs text-muted-foreground flex items-center justify-center h-full">
-                            Page
-                          </span>
-                        )}
-                      </button>
-                    </div>
-                  )}
-
                   {/* Existing Characters */}
-                  {referencePage && referencePage.characterImages.length > 0 && (
-                    <div className="space-y-2">
-                      <div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
-                        Reuse Characters
-                      </div>
-                      <div className="flex items-center gap-2 flex-wrap">
-                        {referencePage.characterImages.map((characterUrl) => {
-                          const isSelected = selectedExistingCharacters.includes(characterUrl)
-                          return (
-                            <button
-                              key={characterUrl}
-                              onClick={() => toggleExistingCharacter(characterUrl)}
-                              className={`relative w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
-                                isSelected
-                                  ? "border-indigo shadow-sm shadow-indigo/20"
-                                  : "border-border/50 hover:border-indigo/50"
-                              }`}
-                            >
-                              <img
-                                src={characterUrl}
-                                alt="Existing character"
-                                className="w-full h-full object-cover"
-                              />
-                              {isSelected && (
-                                <div className="absolute inset-0 bg-indigo/20 flex items-center justify-center">
-                                  <div className="w-3 h-3 bg-indigo rounded-full flex items-center justify-center">
-                                    <div className="w-1 h-1 bg-white rounded-full" />
+                  {referencePage &&
+                    referencePage.characterImages.length > 0 && (
+                      <div className="space-y-2">
+                        <div className="text-xs text-muted-foreground uppercase tracking-[0.02em] font-medium">
+                          Reuse Characters
+                        </div>
+                        <div className="flex items-center gap-2 flex-wrap">
+                          {referencePage.characterImages.map((characterUrl) => {
+                            const isSelected =
+                              selectedExistingCharacters.includes(characterUrl);
+                            return (
+                              <button
+                                key={characterUrl}
+                                onClick={() =>
+                                  toggleExistingCharacter(characterUrl)
+                                }
+                                className={`relative w-8 h-8 rounded-md overflow-hidden border-2 transition-all ${
+                                  isSelected
+                                    ? "border-indigo shadow-sm shadow-indigo/20"
+                                    : "border-border/50 hover:border-indigo/50"
+                                }`}
+                              >
+                                <img
+                                  src={characterUrl}
+                                  alt="Existing character"
+                                  className="w-full h-full object-cover"
+                                />
+                                {isSelected && (
+                                  <div className="absolute inset-0 bg-indigo/20 flex items-center justify-center">
+                                    <div className="w-3 h-3 bg-indigo rounded-full flex items-center justify-center">
+                                      <div className="w-1 h-1 bg-white rounded-full" />
+                                    </div>
                                   </div>
-                                </div>
-                              )}
-                            </button>
-                          )
-                        })}
+                                )}
+                              </button>
+                            );
+                          })}
+                        </div>
                       </div>
-                    </div>
-                  )}
+                    )}
 
                   {/* New Character Uploads */}
                   <div className="flex items-center justify-between gap-2">
@@ -302,8 +294,8 @@ export function GeneratePageModal({
                               </button>
                               <button
                                 onClick={(e) => {
-                                  e.stopPropagation()
-                                  removeFile(index)
+                                  e.stopPropagation();
+                                  removeFile(index);
                                 }}
                                 className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity"
                               >
@@ -327,7 +319,9 @@ export function GeneratePageModal({
                         >
                           <Upload className="w-3.5 h-3.5" />
                           <span>Upload New Characters</span>
-                          <span className="text-muted-foreground/50">(Max 2)</span>
+                          <span className="text-muted-foreground/50">
+                            (Max 2)
+                          </span>
                         </button>
                       )}
                     </div>
@@ -386,5 +380,5 @@ export function GeneratePageModal({
         </div>
       )}
     </>
-  )
+  );
 }