From ad4ee5c737809e3207f3f5af6b0e6c7d6392014b Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Sat, 27 Dec 2025 11:54:28 +0100
Subject: [PATCH] Add arrow key navigation and 'C' shortcut to add page, update
 UI hints

---
 app/story/[storySlug]/story-editor-client.tsx | 20 ++++++++++++-------
 components/editor/comic-canvas.tsx            | 16 +++++++--------
 components/editor/editor-toolbar.tsx          | 20 +++++++++----------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/story/[storySlug]/story-editor-client.tsx b/app/story/[storySlug]/story-editor-client.tsx
index d2ac2dc..a744fd1 100644
--- a/app/story/[storySlug]/story-editor-client.tsx
+++ b/app/story/[storySlug]/story-editor-client.tsx
@@ -135,13 +135,19 @@ export function StoryEditorClient() {
         return;
       }
 
-      if (e.key === "ArrowRight") {
-        setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
-      } else if (e.key === "ArrowLeft") {
-        setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
-      } else if (e.key === "i" || e.key === "I") {
-        setShowInfoSheet(true);
-      }
+       if (e.key === "ArrowRight") {
+         setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
+       } else if (e.key === "ArrowLeft") {
+         setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
+       } else if (e.key === "ArrowUp") {
+         setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
+       } else if (e.key === "ArrowDown") {
+         setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
+       } else if (e.key === "i" || e.key === "I") {
+         setShowInfoSheet(true);
+       } else if (e.key === "c" || e.key === "C") {
+         handleAddPage();
+       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
diff --git a/components/editor/comic-canvas.tsx b/components/editor/comic-canvas.tsx
index 1a2c468..c7277cd 100644
--- a/components/editor/comic-canvas.tsx
+++ b/components/editor/comic-canvas.tsx
@@ -46,11 +46,11 @@ export function ComicCanvas({
       {/* Dot grid background */}
       <div className="absolute inset-0 dot-grid opacity-20" />
 
-      <div className="relative z-10 w-full max-w-xl">
-        <div
-          className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
-          style={{ maxWidth: "512px" }}
-        >
+       <div className="relative z-10 w-full max-w-xl">
+         <div
+           className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
+           style={{ maxWidth: "512px" }}
+         >
           <div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
             <div className="w-full h-full bg-neutral-900">
               <img
@@ -78,10 +78,10 @@ export function ComicCanvas({
             <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
               Page {page.id}
             </div>
-          </div>
-        </div>
+           </div>
+         </div>
 
-        {/* Action buttons below the page image */}
+         {/* Action buttons below the page image */}
         <div className="hidden md:flex items-center justify-center gap-2 mt-4">
           {onInfoClick && (
             <Button
diff --git a/components/editor/editor-toolbar.tsx b/components/editor/editor-toolbar.tsx
index d6ae512..0331cca 100644
--- a/components/editor/editor-toolbar.tsx
+++ b/components/editor/editor-toolbar.tsx
@@ -64,16 +64,16 @@ export function EditorToolbar({
           <span>Share</span>
         </Button>
 
-        {isOwner && onContinueStory && (
-          <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>
-        )}
+         {isOwner && onContinueStory && (
+           <Button
+             onClick={onContinueStory}
+             className="relative 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 className="text-gray-500 text-[10px]">(C)</span></span>
+             <span className="sm:hidden">Add</span>
+           </Button>
+         )}
       </div>
     </header>
   );