Add arrow key navigation and 'C' shortcut to add page, update UI hints

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

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>
   );