diff --git a/app/story/[storySlug]/story-editor-client.tsx b/app/story/[storySlug]/story-editor-client.tsx index 89cf32d..0cdf86f 100644 --- a/app/story/[storySlug]/story-editor-client.tsx +++ b/app/story/[storySlug]/story-editor-client.tsx @@ -4,6 +4,7 @@ import { useState, useEffect } from "react"; import { useParams } from "next/navigation"; import { useToast } from "@/hooks/use-toast"; import { useApiKey } from "@/hooks/use-api-key"; +import { useAuth } from "@clerk/nextjs"; import { EditorToolbar } from "@/components/editor/editor-toolbar"; import { PageSidebar } from "@/components/editor/page-sidebar"; import { ComicCanvas } from "@/components/editor/comic-canvas"; @@ -45,6 +46,7 @@ interface StoryData { export function StoryEditorClient() { const params = useParams(); const slug = params.storySlug as string; + const { isSignedIn, isLoaded } = useAuth(); const [story, setStory] = useState(null); const [isOwner, setIsOwner] = useState(false); @@ -161,6 +163,9 @@ export function StoryEditorClient() { }, [pages.length]); const handleAddPage = () => { + if (!isLoaded || !isSignedIn) { + return; + } if (!apiKey && pages.length >= 1) { setShowApiModal(true); return; @@ -169,6 +174,9 @@ export function StoryEditorClient() { }; const handleRedrawPage = () => { + if (!isLoaded || !isSignedIn) { + return; + } if (!apiKey) { setShowApiModal(true); return; diff --git a/components/landing/comic-creation-form.tsx b/components/landing/comic-creation-form.tsx index 03d3ef8..01980d8 100644 --- a/components/landing/comic-creation-form.tsx +++ b/components/landing/comic-creation-form.tsx @@ -6,7 +6,7 @@ import { Upload, X, Check, ArrowRight, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { useToast } from "@/hooks/use-toast"; import { useS3Upload } from "next-s3-upload"; -import { useAuth, SignInButton } from "@clerk/nextjs"; +import { useAuth, SignInButton, useClerk } from "@clerk/nextjs"; import { COMIC_STYLES } from "@/lib/constants"; import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut"; import { useApiKey } from "@/hooks/use-api-key"; @@ -38,6 +38,7 @@ export function ComicCreationForm({ const { toast } = useToast(); const { uploadToS3 } = useS3Upload(); const { isSignedIn, isLoaded } = useAuth(); + const { openSignIn } = useClerk(); const [apiKey] = useApiKey(); const hasApiKey = !!apiKey; const [previews, setPreviews] = useState([]); @@ -46,6 +47,8 @@ export function ComicCreationForm({ const fileInputRef = useRef(null); const textareaRef = useRef(null); + const PROMPT_STORAGE_KEY = 'comic-prompt-draft'; + useEffect(() => { if (isLoading) { @@ -60,12 +63,31 @@ export function ComicCreationForm({ } }, []); + // Persist prompt to localStorage + useEffect(() => { + if (prompt) { + localStorage.setItem(PROMPT_STORAGE_KEY, prompt); + } + }, [prompt]); + + // Restore prompt from localStorage only once on mount + useEffect(() => { + const saved = localStorage.getItem(PROMPT_STORAGE_KEY); + if (saved && !prompt) { + setPrompt(saved); + } + }, []); // Run only on mount + // Keyboard shortcut for form submission useKeyboardShortcut(() => { if (!isLoading && prompt.trim()) { - handleCreate(); + if (!isSignedIn) { + openSignIn(); + } else { + handleCreate(); + } } - }, { disabled: isLoading }); + }, { disabled: isLoading || !isLoaded }); const handleFiles = (newFiles: FileList | null) => { if (!newFiles) return; @@ -168,6 +190,8 @@ export function ComicCreationForm({ const result = await response.json(); + // Clear the draft since submission was successful + localStorage.removeItem(PROMPT_STORAGE_KEY); // Redirect to the story editor using slug router.push(`/story/${result.storySlug}`); } catch (error) {