From ab3885eaa1797773760d9106f5cc25e705a9d2c8 Mon Sep 17 00:00:00 2001
From: Riccardo Giorato <riccardoemanuelegiorato@gmail.com>
Date: Fri, 26 Dec 2025 19:29:49 +0100
Subject: [PATCH] Add keyboard shortcut for form submission and remove unused
 useEffect

---
 components/editor/editor-toolbar.tsx       |  4 +--
 components/editor/generate-page-modal.tsx  | 16 ++++++---
 components/landing/comic-creation-form.tsx | 29 ++++------------
 hooks/use-keyboard-shortcut.ts             | 39 ++++++++++++++++++++++
 4 files changed, 60 insertions(+), 28 deletions(-)
 create mode 100644 hooks/use-keyboard-shortcut.ts

diff --git a/components/editor/editor-toolbar.tsx b/components/editor/editor-toolbar.tsx
index c5ed48c..bc8942f 100644
--- a/components/editor/editor-toolbar.tsx
+++ b/components/editor/editor-toolbar.tsx
@@ -22,7 +22,7 @@ export function EditorToolbar({
           variant="ghost"
           size="icon"
           onClick={() => router.push("/stories")}
-          className="hover:bg-secondary text-muted-foreground hover:text-white flex-shrink-0"
+          className="hover:bg-secondary text-muted-foreground hover:text-white shrink-0"
         >
           <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
         </Button>
@@ -32,7 +32,7 @@ export function EditorToolbar({
         </h1>
       </div>
 
-       <div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
+        <div className="flex items-center gap-1 sm:gap-2 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"
diff --git a/components/editor/generate-page-modal.tsx b/components/editor/generate-page-modal.tsx
index 2cb1134..ae0f2a2 100644
--- a/components/editor/generate-page-modal.tsx
+++ b/components/editor/generate-page-modal.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useRef, useEffect } from "react";
 import { Upload, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -10,6 +10,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils";
 import { COMIC_STYLES } from "@/lib/constants";
 
@@ -49,6 +50,13 @@ export function GeneratePageModal({
     }
   }, [isOpen]);
 
+  // Keyboard shortcut for form submission
+  useKeyboardShortcut(() => {
+    if (isOpen && !isGenerating && prompt.trim()) {
+      handleGenerate();
+    }
+  }, { disabled: !isOpen || isGenerating });
+
   const handleFiles = async (newFiles: FileList | null) => {
     if (!newFiles) return;
 
@@ -242,14 +250,14 @@ export function GeneratePageModal({
       {/* Character Preview Modal */}
       {showPreview !== null && previews[showPreview] && (
         <div
-          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-[100] flex items-center justify-center p-4"
+          className="fixed inset-0 bg-black/80 backdrop-blur-sm z-100 flex items-center justify-center p-4"
           onClick={() => setShowPreview(null)}
         >
-          <div className="relative max-w-sm max-h-[80vh] glass-panel p-4 rounded-xl z-[101]">
+          <div className="relative max-w-sm max-h-[80vh] glass-panel p-4 rounded-xl z-101">
             <Button
               variant="ghost"
               size="icon"
-              className="absolute top-2 right-2 h-8 w-8 hover:bg-white/10 z-[102]"
+              className="absolute top-2 right-2 h-8 w-8 hover:bg-white/10 z-102"
               onClick={() => setShowPreview(null)}
             >
               <X className="w-4 h-4" />
diff --git a/components/landing/comic-creation-form.tsx b/components/landing/comic-creation-form.tsx
index 77abcd6..47f346a 100644
--- a/components/landing/comic-creation-form.tsx
+++ b/components/landing/comic-creation-form.tsx
@@ -8,6 +8,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useS3Upload } from "next-s3-upload";
 import { useAuth, SignInButton } from "@clerk/nextjs";
 import { COMIC_STYLES } from "@/lib/constants";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 
 interface ComicCreationFormProps {
   prompt: string;
@@ -68,27 +69,12 @@ export function ComicCreationForm({
     }
   }, []);
 
-  useEffect(() => {
-    if (!isLoading) return;
-
-    const steps = [
-      "Enhancing prompt...",
-      "Generating scenes...",
-      "Creating your comic...",
-    ];
-    let currentStep = 0;
-
-    const interval = setInterval(() => {
-      currentStep += 1;
-      if (currentStep < steps.length) {
-        setLoadingStep(currentStep);
-      } else {
-        clearInterval(interval);
-      }
-    }, 2500);
-
-    return () => clearInterval(interval);
-  }, [isLoading]);
+  // Keyboard shortcut for form submission
+  useKeyboardShortcut(() => {
+    if (!isLoading && prompt.trim()) {
+      handleCreate();
+    }
+  }, { disabled: isLoading });
 
   const handleFiles = (newFiles: FileList | null) => {
     if (!newFiles) return;
@@ -228,7 +214,6 @@ export function ComicCreationForm({
             ref={textareaRef}
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
-            onKeyDown={handleKeyDown}
             placeholder="A cyberpunk detective standing in neon rain, holding a glowing datapad, moody lighting, noir style..."
             disabled={isLoading}
             className="w-full bg-transparent border-none text-sm text-white placeholder-muted-foreground/50 focus:ring-0 focus:outline-none resize-none h-16 leading-relaxed disabled:opacity-50 disabled:cursor-not-allowed"
diff --git a/hooks/use-keyboard-shortcut.ts b/hooks/use-keyboard-shortcut.ts
new file mode 100644
index 0000000..5ddea11
--- /dev/null
+++ b/hooks/use-keyboard-shortcut.ts
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+export function useKeyboardShortcut(
+  callback: () => void,
+  options: {
+    ctrlOrCmd?: boolean;
+    shift?: boolean;
+    key?: string;
+    disabled?: boolean;
+  } = {}
+) {
+  const {
+    ctrlOrCmd = true,
+    shift = false,
+    key = 'Enter',
+    disabled = false,
+  } = options;
+
+  useEffect(() => {
+    if (disabled) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const isKeyPressed = e.key === key;
+      const isModifierPressed = ctrlOrCmd
+        ? (e.ctrlKey || e.metaKey) // Ctrl on Windows/Linux, Cmd on Mac
+        : shift
+        ? e.shiftKey
+        : false;
+
+      if (isKeyPressed && isModifierPressed) {
+        e.preventDefault();
+        callback();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [callback, ctrlOrCmd, shift, key, disabled]);
+}
\ No newline at end of file