From 47263231af58ac2e9a5d5f600a08389f411c55ff Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Fri, 26 Dec 2025 17:40:41 +0100
Subject: [PATCH] Move info and redraw actions to ComicCanvas, update sidebar
 UI

Shifted the info and redraw buttons from the editor toolbar to the ComicCanvas component, allowing for contextual actions per page. Enhanced ComicCanvas to support page navigation via image clicks and added optional callbacks for info and navigation. Updated the page sidebar to display page thumbnails instead of numbers, improved the add page button, and adjusted button sizes for better usability.
---
 app/editor/[storySlug]/page.tsx      | 16 ++++-----
 components/editor/comic-canvas.tsx   | 44 +++++++++++++++++++++--
 components/editor/editor-toolbar.tsx | 53 +++++++++-------------------
 components/editor/page-sidebar.tsx   | 51 +++++++++++++++++---------
 4 files changed, 101 insertions(+), 63 deletions(-)

diff --git a/app/editor/[storySlug]/page.tsx b/app/editor/[storySlug]/page.tsx
index cc14c41..8551d40 100644
--- a/app/editor/[storySlug]/page.tsx
+++ b/app/editor/[storySlug]/page.tsx
@@ -128,14 +128,10 @@ export default function StoryEditorPage() {
     if (wasGenerating) {
       setShowGenerateModal(true);
     }
-
-    toast({
-      title: "API key saved",
-      description: "Your Together API key has been saved successfully",
-      duration: 3000,
-    });
   };
 
+
+
   const handleGeneratePage = async (data: {
     prompt: string;
     style: string;
@@ -216,7 +212,6 @@ export default function StoryEditorPage() {
     <div className="h-screen flex flex-col bg-background">
       <EditorToolbar
         title={story.title}
-        onInfoClick={() => setShowInfoSheet(true)}
         onContinueStory={handleAddPage}
       />
 
@@ -229,7 +224,12 @@ export default function StoryEditorPage() {
           loadingPageId={loadingPageId}
           onApiKeyClick={handleApiKeyClick}
         />
-        <ComicCanvas page={pages[currentPage]} />
+        <ComicCanvas
+          page={pages[currentPage]}
+          onInfoClick={() => setShowInfoSheet(true)}
+          onNextPage={() => setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev))}
+          onPrevPage={() => setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev))}
+        />
       </div>
 
       <ApiKeyModal
diff --git a/components/editor/comic-canvas.tsx b/components/editor/comic-canvas.tsx
index 54de1d4..8cc63c1 100644
--- a/components/editor/comic-canvas.tsx
+++ b/components/editor/comic-canvas.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RefreshCw, Download } from "lucide-react";
+import { RefreshCw, Download, Info } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 interface PageData {
@@ -14,9 +14,12 @@ interface PageData {
 
 interface ComicCanvasProps {
   page: PageData;
+  onInfoClick?: () => void;
+  onNextPage?: () => void;
+  onPrevPage?: () => void;
 }
 
-export function ComicCanvas({ page }: ComicCanvasProps) {
+export function ComicCanvas({ page, onInfoClick, onNextPage, onPrevPage }: ComicCanvasProps) {
   return (
     <main className="flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center relative">
       {/* Dot grid background */}
@@ -32,7 +35,20 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
               <img
                 src={page.image || "/placeholder.svg"}
                 alt={`Page ${page.id}`}
-                className="w-full h-full object-cover opacity-90 grayscale-10 contrast-110"
+                className="w-full h-full object-cover opacity-90 grayscale-10 contrast-110 cursor-pointer"
+                onClick={(e) => {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const clickX = e.clientX - rect.left;
+                  const imageWidth = rect.width;
+
+                  if (clickX > imageWidth / 2) {
+                    // Right half - next page
+                    onNextPage?.();
+                  } else {
+                    // Left half - previous page
+                    onPrevPage?.();
+                  }
+                }}
               />
             </div>
             <div className="scan-line opacity-30" />
@@ -44,6 +60,28 @@ export function ComicCanvas({ page }: ComicCanvasProps) {
           </div>
         </div>
 
+        {/* Action buttons below the page image */}
+        <div className="flex items-center justify-center gap-2 mt-4">
+          {onInfoClick && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="hover:bg-secondary text-muted-foreground hover:text-white h-9 w-9"
+              onClick={onInfoClick}
+            >
+              <Info className="w-4 h-4" />
+            </Button>
+          )}
+
+          <Button
+            variant="ghost"
+            className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
+          >
+            <RefreshCw className="w-4 h-4" />
+            <span>Redraw</span>
+          </Button>
+        </div>
+
         <div className="flex flex-col items-center gap-3 mt-4">
           {/* <div className="text-xs text-muted-foreground">Page {page.id}</div> */}
 
diff --git a/components/editor/editor-toolbar.tsx b/components/editor/editor-toolbar.tsx
index 8682f30..c5ed48c 100644
--- a/components/editor/editor-toolbar.tsx
+++ b/components/editor/editor-toolbar.tsx
@@ -6,13 +6,11 @@ import { useRouter } from "next/navigation";
 
 interface EditorToolbarProps {
   title: string;
-  onInfoClick: () => void;
   onContinueStory?: () => void;
 }
 
 export function EditorToolbar({
   title,
-  onInfoClick,
   onContinueStory,
 }: EditorToolbarProps) {
   const router = useRouter();
@@ -34,41 +32,24 @@ export function EditorToolbar({
         </h1>
       </div>
 
-      <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="hover:bg-secondary text-muted-foreground hover:text-white h-8 w-8 sm:h-9 sm:w-9"
-          onClick={onInfoClick}
-        >
-          <Info className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-        </Button>
+       <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+         <Button
+           variant="ghost"
+           className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
+         >
+           <Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+           <span>Download PDF</span>
+         </Button>
 
-        <Button
-          variant="ghost"
-          className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
-        >
-          <RefreshCw className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
-          <span>Redraw</span>
-        </Button>
-
-        <Button
-          variant="ghost"
-          className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
-        >
-          <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>
+         <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/page-sidebar.tsx b/components/editor/page-sidebar.tsx
index 12d9f18..6153315 100644
--- a/components/editor/page-sidebar.tsx
+++ b/components/editor/page-sidebar.tsx
@@ -31,37 +31,56 @@ export function PageSidebar({
   onApiKeyClick,
 }: PageSidebarProps) {
   return (
-    <aside className="w-16 md:w-20 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
-      {/* Top section: page numbers */}
-      <div className="flex flex-col items-center gap-2">
+    <aside className="w-20 md:w-24 border-r border-border/50 bg-background/50 flex flex-col items-center py-4 gap-2 justify-between">
+      {/* Top section: page thumbnails */}
+      <div className="flex flex-col items-center gap-3">
         {pages.map((page, index) => (
           <button
             key={page.id}
             onClick={() => onPageSelect(index)}
             disabled={loadingPageId === page.id}
             className={`
-              w-9 h-9 rounded-md transition-all
-              flex items-center justify-center font-medium text-sm tracking-tight
+              w-16 h-16 rounded-lg transition-all relative overflow-hidden
               ${
                 currentPage === index
-                  ? "bg-black border-2 border-indigo text-white shadow-lg shadow-indigo/20"
-                  : "glass-panel glass-panel-hover text-muted-foreground hover:text-white"
+                  ? "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 === page.id ? <Loader2 className="w-4 h-4 animate-spin" /> : index + 1}
+            {loadingPageId === page.id ? (
+              <div className="w-full h-full flex items-center justify-center">
+                <Loader2 className="w-6 h-6 animate-spin text-white" />
+              </div>
+            ) : (
+              <>
+                <img
+                  src={page.image || "/placeholder.svg"}
+                  alt={`Page ${index + 1}`}
+                  className="w-full h-full object-cover"
+                />
+                <div className={`
+                  absolute bottom-1 left-1 px-1.5 py-0.5 rounded text-[10px] font-medium tracking-tight
+                  ${
+                    currentPage === index
+                      ? "bg-indigo text-white"
+                      : "bg-black/70 text-white"
+                  }
+                `}>
+                  {index + 1}
+                </div>
+              </>
+            )}
           </button>
         ))}
 
-        <Button
+        <button
           onClick={onAddPage}
-          variant="ghost"
-          size="icon"
-          className="w-9 h-9 bg-white hover:bg-neutral-200 text-black border-0 transition-all group"
+          className="w-16 h-16 rounded-lg border-2 border-dashed border-border/50 hover:border-indigo/50 bg-background/50 hover:bg-background/80 transition-all group flex items-center justify-center"
         >
-          <Plus className="w-4 h-4 text-black transition-transform group-hover:scale-110" />
-        </Button>
+          <Plus className="w-6 h-6 text-muted-foreground group-hover:text-indigo transition-transform group-hover:scale-110" />
+        </button>
       </div>
 
       <div className="flex flex-col items-center gap-3">
@@ -70,13 +89,13 @@ export function PageSidebar({
           onClick={onApiKeyClick}
           variant="ghost"
           size="icon"
-          className="w-9 h-9 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
+          className="w-10 h-10 glass-panel glass-panel-hover text-muted-foreground hover:text-white"
           title="Manage API Key"
         >
           <Key className="w-4 h-4" />
         </Button>
 
-        <div className="w-9 h-9 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
+        <div className="w-10 h-10 glass-panel glass-panel-hover rounded-md flex items-center justify-center text-muted-foreground hover:text-white transition-colors">
           <UserButton
             appearance={{
               elements: {