From cb00498df1dde4d341b4b2d1f095d57abc5f0a52 Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Sat, 27 Dec 2025 12:12:51 +0100
Subject: [PATCH] Add page navigation buttons and update info button text for
 mobile and d

---
 components/editor/comic-canvas.tsx | 74 +++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 28 deletions(-)

diff --git a/components/editor/comic-canvas.tsx b/components/editor/comic-canvas.tsx
index c7277cd..ec860c6 100644
--- a/components/editor/comic-canvas.tsx
+++ b/components/editor/comic-canvas.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { RefreshCw, Share, Info, Loader2, Trash2 } from "lucide-react";
+import { RefreshCw, Share, Info, Loader2, Trash2, ChevronLeft, ChevronRight } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
 
@@ -81,18 +81,18 @@ export function ComicCanvas({
            </div>
          </div>
 
-         {/* Action buttons below the page image */}
-        <div className="hidden md: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>
-          )}
+          {/* Action buttons below the page image */}
+         <div className="hidden md:flex items-center justify-center gap-2 mt-4">
+           {onInfoClick && (
+             <Button
+               variant="ghost"
+               className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
+               onClick={onInfoClick}
+             >
+               <Info className="w-4 h-4" />
+               <span>Info (i)</span>
+             </Button>
+           )}
 
           {isOwner && (
             <Button
@@ -123,22 +123,40 @@ export function ComicCanvas({
         </div>
 
         <div className="flex flex-col items-center gap-3 mt-4">
-          <div className="text-xs text-muted-foreground md:hidden">
-            Page {pageIndex + 1} of {totalPages}
-          </div>
+           <div className="flex items-center gap-2 text-xs text-muted-foreground md:hidden">
+             <Button
+               variant="ghost"
+               size="icon"
+               className="h-6 w-6 hover:bg-secondary text-muted-foreground hover:text-white"
+               onClick={onPrevPage}
+               disabled={pageIndex === 0}
+             >
+               <ChevronLeft className="w-3 h-3" />
+             </Button>
+             <span>Page {pageIndex + 1} of {totalPages}</span>
+             <Button
+               variant="ghost"
+               size="icon"
+               className="h-6 w-6 hover:bg-secondary text-muted-foreground hover:text-white"
+               onClick={onNextPage}
+               disabled={pageIndex === totalPages - 1}
+             >
+               <ChevronRight className="w-3 h-3" />
+             </Button>
+           </div>
 
-          {/* Mobile action buttons */}
-          <div className="flex items-center gap-2 md:hidden">
-            {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>
-            )}
+           {/* Mobile action buttons */}
+           <div className="flex items-center gap-2 md:hidden">
+             {onInfoClick && (
+               <Button
+                 variant="ghost"
+                 className="hover:bg-secondary text-muted-foreground hover:text-white gap-2 text-xs h-9 px-3"
+                 onClick={onInfoClick}
+               >
+                 <Info className="w-4 h-4" />
+                 <span>Info (i)</span>
+               </Button>
+             )}
 
             {isOwner && (
               <Button