Add loading state and style constants, enhance API key modal with delete

app/api/generate-comic/route.ts

@@ -6,102 +6,21 @@ import {
   createStory,
   createPage,
   getNextPageNumber,
+  getStoryById,
 } from "@/lib/db-actions";
 import { freeTierRateLimit } from "@/lib/rate-limit";
+import { COMIC_STYLES } from "@/lib/constants";
 
 const NEW_MODEL = false;
+
 const IMAGE_MODEL = NEW_MODEL
   ? "google/gemini-3-pro-image"
   : "google/flash-image-2.5";
+
 const FIXED_DIMENSIONS = NEW_MODEL
   ? { width: 896, height: 1200 }
   : { width: 864, height: 1184 };
 
-async function analyzeCharacterImage(
-  imageBase64: string,
-  apiKey: string,
-  characterNumber: number
-): Promise<string> {
-  try {
-    // Clean base64 string
-    const base64Data = imageBase64.replace(/^data:image\/[^;]+;base64,/, "");
-
-    const response = await fetch(
-      "https://api.together.xyz/v1/chat/completions",
-      {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${apiKey}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          model: "meta-llama/Llama-3.2-11B-Vision-Instruct-Turbo",
-          messages: [
-            {
-              role: "user",
-              content: [
-                {
-                  type: "text",
-                  text: `Analyze this person for a comic book character reference. Provide a detailed physical description in one paragraph. Include:
-- Gender and approximate age
-- Face shape (round, oval, square, etc.)
-- Hair: color, length, style, texture
-- Eye color and shape
-- Skin tone
-- Body type/build
-- Any distinctive features (glasses, facial hair, freckles, etc.)
-- Current outfit/clothing style and colors
-
-Be VERY specific and detailed. This description will be used to draw this exact person as a comic character. Respond ONLY with the physical description, no other text.`,
-                },
-                {
-                  type: "image_url",
-                  image_url: {
-                    url: `data:image/jpeg;base64,${base64Data}`,
-                  },
-                },
-              ],
-            },
-          ],
-          max_tokens: 500,
-          temperature: 0.3,
-        }),
-      }
-    );
-
-    if (!response.ok) {
-      console.error(
-        `Vision API error for character ${characterNumber}:`,
-        await response.text()
-      );
-      return `Character ${characterNumber}`;
-    }
-
-    const data = await response.json();
-    const description =
-      data.choices?.[0]?.message?.content || `Character ${characterNumber}`;
-    console.log(`Character ${characterNumber} description:`, description);
-    return description;
-  } catch (error) {
-    console.error(`Error analyzing character ${characterNumber}:`, error);
-    return `Character ${characterNumber}`;
-  }
-}
-
-const STYLE_DESCRIPTIONS: Record<string, string> = {
-  noir: "film noir style, high contrast black and white, deep dramatic shadows, 1940s detective aesthetic, heavy bold inking, moody atmospheric lighting",
-  manga:
-    "Japanese manga style, clean precise black linework, screen tone shading, expressive eyes, dynamic speed lines, black and white with impact effects",
-  superhero:
-    "classic American superhero comic style, bold vibrant colors, dynamic heroic poses, detailed muscular anatomy, Jim Lee and Jack Kirby inspired",
-  vintage:
-    "Golden Age 1950s comic style, visible halftone Ben-Day dots, limited retro color palette, nostalgic warm tones, classic adventure comics",
-  modern:
-    "contemporary digital comic art, smooth gradient coloring, detailed realistic backgrounds, cinematic widescreen composition, graphic novel quality",
-  watercolor:
-    "painted watercolor comic style, soft blended edges, flowing artistic colors, delicate linework with painted fills, ethereal atmosphere",
-};
-
 export async function POST(request: NextRequest) {
   try {
     const { userId } = await auth();
@@ -123,8 +42,6 @@ export async function POST(request: NextRequest) {
       previousContext = "",
     } = await request.json();
 
-    console.log("Received request:", { storyId, prompt: prompt?.substring(0, 50), characterImagesCount: characterImages.length, userId, hasApiKey: !!apiKey });
-
     if (!prompt) {
       return NextResponse.json(
         { error: "Missing required fields" },
@@ -142,7 +59,9 @@ export async function POST(request: NextRequest) {
 
       if (!success) {
         const resetDate = new Date(reset);
-        const timeUntilReset = Math.ceil((reset - Date.now()) / (1000 * 60 * 60 * 24)); // days
+        const timeUntilReset = Math.ceil(
+          (reset - Date.now()) / (1000 * 60 * 60 * 24)
+        ); // days
 
         return NextResponse.json(
           {
@@ -158,7 +77,9 @@ export async function POST(request: NextRequest) {
       finalApiKey = process.env.TOGETHER_API_KEY_DEFAULT;
       if (!finalApiKey) {
         return NextResponse.json(
-          { error: "Server configuration error - default API key not available" },
+          {
+            error: "Server configuration error - default API key not available",
+          },
           { status: 500 }
         );
       }
@@ -168,39 +89,37 @@ export async function POST(request: NextRequest) {
     let story;
 
     if (storyId) {
-      // Create page for existing story
+      const story = await getStoryById(storyId);
-      console.log("Creating page for existing story:", storyId);
+      if (!story) {
+        return NextResponse.json({ error: "Story not found" }, { status: 404 });
+      }
+
       const nextPageNumber = await getNextPageNumber(storyId);
       page = await createPage({
         storyId,
         pageNumber: nextPageNumber,
         prompt,
         characterImageUrls: characterImages,
-        style,
       });
-      console.log("Page created:", page.id);
     } else {
-      // Create new story and first page
-      console.log("Creating new story for user:", userId);
       story = await createStory({
         title: prompt.length > 50 ? prompt.substring(0, 50) + "..." : prompt,
         description: undefined,
         userId: userId,
+        style,
       });
-      console.log("Story created:", story.id);
 
       page = await createPage({
         storyId: story.id,
         pageNumber: 1,
         prompt,
         characterImageUrls: characterImages,
-        style,
       });
-      console.log("First page created:", page.id);
     }
 
     const dimensions = FIXED_DIMENSIONS;
-    const styleDesc = STYLE_DESCRIPTIONS[style] || STYLE_DESCRIPTIONS.noir;
+    const styleInfo = COMIC_STYLES.find((s) => s.id === style);
+    const styleDesc = styleInfo?.prompt || COMIC_STYLES[2].prompt;
 
     const continuationContext =
       isContinuation && previousContext
@@ -268,8 +187,6 @@ COMPOSITION:
 
     const fullPrompt = `${systemPrompt}\n\nSTORY:\n${prompt}`;
 
-    console.log("Generating comic with prompt length:", fullPrompt.length, "using tier:", isUsingFreeTier ? "free" : "paid");
-
     const client = new Together({ apiKey: finalApiKey });
 
     let response;
@@ -329,7 +246,6 @@ COMPOSITION:
     // Update page in database
     try {
       await updatePage(page.id, imageUrl);
-      console.log("Page updated with image:", page.id);
     } catch (dbError) {
       console.error("Error updating page in database:", dbError);
       return NextResponse.json(

app/api/stories/[storySlug]/route.ts

@@ -20,7 +20,6 @@ export async function GET(
     }
 
     const { storySlug: slug } = await params;
-    console.log("API: Fetching story with slug:", slug, "for user:", userId);
 
     // Special case: if slug is "all", return user's stories for debugging
     if (slug === "all") {

app/editor/[storySlug]/page.tsx

@@ -64,7 +64,7 @@ export default function StoryEditorPage() {
           image: page.generatedImageUrl || "",
           prompt: page.prompt,
           characterUploads: page.characterImageUrls,
-          style: "noir",
+          style: storyData.style || "noir",
           dbId: page.id,
         })))
 
@@ -76,7 +76,7 @@ export default function StoryEditorPage() {
         console.error("Error loading story:", error)
         toast({
           title: "Error loading story",
-          description: "Failed to load the story data.",
+          description: "Failed to load story data.",
           variant: "destructive",
           duration: 4000,
         })
@@ -90,6 +90,20 @@ export default function StoryEditorPage() {
     }
   }, [slug, toast])
 
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      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))
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [pages.length])
+
   const handleAddPage = () => {
     const storedKey = localStorage.getItem("together_api_key")
     if (!storedKey && pages.length >= 1) {

app/page.tsx

@@ -12,6 +12,7 @@ export default function Home() {
   const [prompt, setPrompt] = useState("")
   const [style, setStyle] = useState("noir")
   const [characterFiles, setCharacterFiles] = useState<File[]>([])
+  const [isLoading, setIsLoading] = useState(false)
 
   // Auto-loop through pages every 6 seconds
   useEffect(() => {
@@ -51,10 +52,17 @@ export default function Home() {
                   setStyle={setStyle}
                   characterFiles={characterFiles}
                   setCharacterFiles={setCharacterFiles}
+                  isLoading={isLoading}
                 />
               </div>
               <div className="opacity-0 animate-fade-in-up animation-delay-200">
-                <CreateButton prompt={prompt} style={style} characterFiles={characterFiles} />
+                <CreateButton
+                  prompt={prompt}
+                  style={style}
+                  characterFiles={characterFiles}
+                  isLoading={isLoading}
+                  setIsLoading={setIsLoading}
+                />
               </div>
             </div>
           </div>

components/api-key-modal.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react";
 import { useState, useEffect } from "react";
-import { Key, ExternalLink, ArrowRight } from "lucide-react";
+import { Key, ExternalLink, ArrowRight, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -49,6 +49,13 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
     setApiKey("");
   };
 
+  const handleDelete = () => {
+    localStorage.removeItem("together_api_key");
+    setExistingKey(null);
+    setApiKey("");
+    onClose();
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="border border-border/50 rounded-lg bg-background max-w-md">
@@ -67,19 +74,30 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
 
           <DialogDescription className="text-center text-muted-foreground">
             {existingKey
-              ? "Update your Together API key or add a new one."
+              ? "Update your Together API key or add a new one. You can also delete your existing key."
               : "Your first page was free! Add your Together API key to generate more pages."}
           </DialogDescription>
         </DialogHeader>
 
         <form onSubmit={handleSubmit} className="space-y-4 mt-4">
-          <Input
+          <div className="relative">
-            type="password"
+            <Input
-            value={apiKey}
+              type="password"
-            onChange={(e) => setApiKey(e.target.value)}
+              value={apiKey}
-            placeholder="Enter your API key..."
+              onChange={(e) => setApiKey(e.target.value)}
-            className="bg-secondary border-border/50 text-white placeholder-muted-foreground py-5"
+              placeholder={existingKey ? "Your current API key" : "Enter your API key..."}
-          />
+              className="bg-secondary border-border/50 text-white placeholder-muted-foreground py-5 pr-10"
+            />
+            {apiKey && (
+              <button
+                type="button"
+                onClick={() => setApiKey("")}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-white transition-colors"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            )}
+          </div>
 
           <a
             href={TOGETHER_LINK}
@@ -95,10 +113,10 @@ export function ApiKeyModal({ isOpen, onClose, onSubmit }: ApiKeyModalProps) {
             <Button
               type="button"
               variant="ghost"
-              onClick={onClose}
+              onClick={existingKey ? handleDelete : onClose}
               className="flex-1 text-muted-foreground hover:text-white hover:bg-secondary"
             >
-              Maybe Later
+              {existingKey ? "Delete API Key" : "Maybe Later"}
             </Button>
             <Button
               type="submit"

components/editor/generate-page-modal.tsx

@@ -1,18 +1,12 @@
 "use client"
 
-import { useState, useRef, useEffect } from "react"
+import { useState, useRef, useEffect, useMemo } from "react"
 import { Upload, X, Loader2 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { useToast } from "@/hooks/use-toast"
 import { validateFileForUpload, generateFilePreview } from "@/lib/file-utils"
-
+import { COMIC_STYLES } from "@/lib/constants"
-const COMIC_STYLES = [
-  { id: "american-modern", name: "American Modern" },
-  { id: "manga", name: "Manga" },
-  { id: "noir", name: "Noir" },
-  { id: "vintage", name: "Vintage" },
-]
 
 interface GeneratePageModalProps {
   isOpen: boolean
@@ -51,7 +45,11 @@ export function GeneratePageModal({
   const fileInputRef = useRef<HTMLInputElement>(null)
   const { toast } = useToast()
 
-  const selectedStyle = previousPageStyle || "noir"
+  const selectedStyleId = previousPageStyle || "noir"
+  const selectedStyle = useMemo(
+    () => COMIC_STYLES.find((s) => s.id === selectedStyleId)?.name || "Noir",
+    [selectedStyleId]
+  )
 
   useEffect(() => {
     if (previousCharacters && previousCharacters.length > 0) {

components/editor/page-info-sheet.tsx

@@ -1,29 +1,39 @@
-"use client"
+"use client";
 
-import { FileText, ImageIcon, Palette } from "lucide-react"
+import { FileText, ImageIcon, Palette } from "lucide-react";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { COMIC_STYLES } from "@/lib/constants";
 
 interface PageData {
-  id: number
+  id: number;
-  title: string
+  title: string;
-  image: string
+  image: string;
-  prompt: string
+  prompt: string;
-  characterUploads?: string[]
+  characterUploads?: string[];
-  style: string
+  style: string;
 }
 
 interface PageInfoSheetProps {
-  isOpen: boolean
+  isOpen: boolean;
-  onClose: () => void
+  onClose: () => void;
-  page: PageData
+  page: PageData;
 }
 
 export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
+  const styleName = COMIC_STYLES.find((s) => s.id === page.style)?.name || page.style;
+
   return (
     <Sheet open={isOpen} onOpenChange={onClose}>
       <SheetContent className="w-full sm:max-w-md border-l border-border/50 bg-background px-6">
         <SheetHeader className="pb-4 border-b border-border/50 px-0">
-          <SheetTitle className="text-base font-medium text-white">Page {page.id} Details</SheetTitle>
+          <SheetTitle className="text-base font-medium text-white">
+            Page {page.id} Details
+          </SheetTitle>
         </SheetHeader>
 
         <div className=" space-y-6">
@@ -34,7 +44,9 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
               <span>Prompt</span>
             </div>
             <div className="p-3 glass-panel rounded-lg">
-              <p className="text-sm text-foreground leading-relaxed">{page.prompt}</p>
+              <p className="text-sm text-foreground leading-relaxed">
+                {page.prompt}
+              </p>
             </div>
           </div>
 
@@ -45,7 +57,7 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
               <span>Style</span>
             </div>
             <div className="inline-flex items-center px-3 py-1.5 glass-panel rounded-md">
-              <span className="text-sm text-foreground">{page.style}</span>
+              <span className="text-sm text-foreground">{styleName}</span>
             </div>
           </div>
 
@@ -57,7 +69,10 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
             {page.characterUploads && page.characterUploads.length > 0 ? (
               <div className="flex gap-2">
                 {page.characterUploads.map((upload, index) => (
-                  <div key={index} className="relative h-24 w-24 rounded-lg overflow-hidden glass-panel">
+                  <div
+                    key={index}
+                    className="relative h-24 w-24 rounded-lg overflow-hidden glass-panel"
+                  >
                     <img
                       src={upload || "/placeholder.svg"}
                       alt={`Uploaded character ${index + 1}`}
@@ -68,12 +83,14 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
               </div>
             ) : (
               <div className="p-4 glass-panel rounded-lg text-center">
-                <p className="text-sm text-muted-foreground">No characters uploaded</p>
+                <p className="text-sm text-muted-foreground">
+                  No characters uploaded
+                </p>
               </div>
             )}
           </div>
 
-          {/* Generated Image Preview */}
+          {/* Generated Image Preview
           <div className="space-y-2">
             <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
               <ImageIcon className="w-3.5 h-3.5" />
@@ -86,9 +103,9 @@ export function PageInfoSheet({ isOpen, onClose, page }: PageInfoSheetProps) {
                 className="w-full h-full object-cover"
               />
             </div>
-          </div>
+          </div> */}
         </div>
       </SheetContent>
     </Sheet>
-  )
+  );
 }

components/landing/create-button.tsx

@@ -12,15 +12,18 @@ interface CreateButtonProps {
   prompt: string;
   style: string;
   characterFiles: File[];
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
 }
 
 export function CreateButton({
   prompt,
   style,
   characterFiles,
+  isLoading,
+  setIsLoading,
 }: CreateButtonProps) {
   const router = useRouter();
-  const [isLoading, setIsLoading] = useState(false);
   const [loadingStep, setLoadingStep] = useState(0);
   const { toast } = useToast();
   const { uploadToS3 } = useS3Upload();

components/landing/navbar.tsx

@@ -5,16 +5,12 @@ import { usePathname } from "next/navigation";
 import { Github, Key, BookOpen, User, Plus } from "lucide-react";
 import Link from "next/link";
 import { ApiKeyModal } from "@/components/api-key-modal";
-import {
+import { SignInButton, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";
-  SignInButton,
-  SignUpButton,
-  SignedIn,
-  SignedOut,
-  UserButton,
-} from "@clerk/nextjs";
 
 export function Navbar() {
   const [showApiModal, setShowApiModal] = useState(false);
+
+  const { isLoaded } = useAuth();
   const pathname = usePathname();
 
   const handleApiKeySubmit = (key: string) => {
@@ -24,10 +20,15 @@ export function Navbar() {
 
   const isOnStoriesPage = pathname === "/stories";
 
+  if (!isLoaded) return null;
+
   return (
     <>
       <nav className="w-full h-14 sm:h-16 border-b border-border/50 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-50 bg-background/80 backdrop-blur-md">
-        <Link href="/" className="flex items-center gap-1 hover:opacity-80 transition-opacity">
+        <Link
+          href="/"
+          className="flex items-center gap-1 hover:opacity-80 transition-opacity"
+        >
           <div className="w-8 h-8 sm:w-10 sm:h-10 flex items-center justify-center">
             <img
               src="/images/makecomics-logo.png"

components/landing/story-input.tsx

@@ -5,13 +5,7 @@ import { useState } from "react";
 import { useRef, useEffect } from "react";
 import { Upload, X, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
-
+import { COMIC_STYLES } from "@/lib/constants";
-const COMIC_STYLES = [
-  { id: "american-modern", name: "American Modern" },
-  { id: "manga", name: "Manga" },
-  { id: "noir", name: "Noir" },
-  { id: "vintage", name: "Vintage" },
-];
 
 interface StoryInputProps {
   prompt: string;
@@ -20,6 +14,7 @@ interface StoryInputProps {
   setStyle: (style: string) => void;
   characterFiles: File[];
   setCharacterFiles: (files: File[]) => void;
+  isLoading: boolean;
 }
 
 export function StoryInput({
@@ -29,12 +24,19 @@ export function StoryInput({
   setStyle,
   characterFiles,
   setCharacterFiles,
+  isLoading,
 }: StoryInputProps) {
   const [previews, setPreviews] = useState<string[]>([]);
   const [showPreview, setShowPreview] = useState<number | null>(null);
   const [showStyleDropdown, setShowStyleDropdown] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    if (isLoading) {
+      setShowStyleDropdown(false);
+    }
+  }, [isLoading]);
+
   const handleFiles = (newFiles: FileList | null) => {
     if (!newFiles) return;
 
@@ -96,7 +98,8 @@ export function StoryInput({
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             placeholder="A cyberpunk detective standing in neon rain, holding a glowing datapad, moody lighting, noir style..."
-            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={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"
           />
 
           <div className="mt-3 pt-3 border-t border-border/30 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-2">
@@ -118,9 +121,10 @@ export function StoryInput({
                       <button
                         onClick={(e) => {
                           e.stopPropagation();
-                          removeFile(index);
+                          if (!isLoading) removeFile(index);
                         }}
-                        className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity"
+                        disabled={isLoading}
+                        className="absolute -top-1.5 -right-1.5 w-4 h-4 bg-red-500 hover:bg-red-600 rounded-full flex items-center justify-center opacity-0 group-hover/thumb:opacity-100 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         <X className="w-2.5 h-2.5 text-white" />
                       </button>
@@ -128,8 +132,9 @@ export function StoryInput({
                   ))}
                   {characterFiles.length < 2 && (
                     <button
-                      onClick={() => fileInputRef.current?.click()}
+                      onClick={() => !isLoading && fileInputRef.current?.click()}
-                      className="w-8 h-8 rounded-md border border-dashed border-border/50 hover:border-indigo/50 flex items-center justify-center text-muted-foreground hover:text-white transition-colors"
+                      disabled={isLoading}
+                      className="w-8 h-8 rounded-md border border-dashed border-border/50 hover:border-indigo/50 flex items-center justify-center text-muted-foreground hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-border/50 disabled:hover:text-muted-foreground"
                     >
                       <Upload className="w-3.5 h-3.5" />
                     </button>
@@ -137,8 +142,9 @@ export function StoryInput({
                 </div>
               ) : (
                 <button
-                  onClick={() => fileInputRef.current?.click()}
+                  onClick={() => !isLoading && fileInputRef.current?.click()}
-                  className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors"
+                  disabled={isLoading}
+                  className="flex items-center gap-2 text-xs text-muted-foreground hover:text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-muted-foreground"
                 >
                   <Upload className="w-3.5 h-3.5" />
                   <span>Upload Characters</span>
@@ -153,9 +159,10 @@ export function StoryInput({
               <div className="relative dropdown-container z-60">
                 <button
                   onClick={() => {
-                    setShowStyleDropdown(!showStyleDropdown);
+                    if (!isLoading) setShowStyleDropdown(!showStyleDropdown);
                   }}
-                  className="flex items-center gap-2 px-2.5 py-1.5 rounded-md glass-panel glass-panel-hover transition-all text-xs text-muted-foreground hover:text-white"
+                  disabled={isLoading}
+                  className="flex items-center gap-2 px-2.5 py-1.5 rounded-md glass-panel glass-panel-hover transition-all text-xs text-muted-foreground hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-muted-foreground"
                 >
                   <svg
                     className="w-3 h-3"

components/landing/style-selector.tsx

@@ -1,18 +1,15 @@
 "use client"
 
-import { useState } from "react"
 import { Check } from "lucide-react"
 import { Label } from "@/components/ui/label"
+import { COMIC_STYLES } from "@/lib/constants"
 
-const COMIC_STYLES = [
+interface StyleSelectorProps {
-  { id: "american-modern", name: "American Modern" },
+  style: string
-  { id: "manga", name: "Manga" },
+  setStyle: (style: string) => void
-  { id: "noir", name: "Noir" },
+}
-  { id: "vintage", name: "Vintage" },
-]
 
-export function StyleSelector() {
+export function StyleSelector({ style, setStyle }: StyleSelectorProps) {
-  const [selectedStyle, setSelectedStyle] = useState("noir")
 
   return (
     <div className="space-y-3">
@@ -20,28 +17,30 @@ export function StyleSelector() {
 
       {/* Grid for style selection */}
       <div className="grid grid-cols-2 gap-3">
-        {COMIC_STYLES.map((style) => (
+        {COMIC_STYLES.map((styleOption) => (
           <button
-            key={style.id}
+            key={styleOption.id}
-            onClick={() => setSelectedStyle(style.id)}
+            onClick={() => setStyle(styleOption.id)}
             className={`
               relative text-left transition-all duration-200 rounded-lg p-3.5 border-2 group
               hover:scale-[1.02] active:scale-[0.98]
               ${
-                selectedStyle === style.id
+                style === styleOption.id
-                  ? "border-primary bg-primary/5 shadow-sm"
+                  ? "border-indigo bg-indigo shadow-md"
-                  : "border-border hover:border-primary/30 bg-card hover:bg-muted/50"
+                  : "border-border hover:border-indigo/50 bg-card hover:bg-muted/20"
               }
             `}
           >
             <div className="flex items-start justify-between gap-2">
               <div>
                 <div className="flex items-center gap-2">
-                  <h3 className="font-semibold text-sm text-foreground font-display">{style.name}</h3>
+                  <h3 className={`font-semibold text-sm font-display ${
+                    style === styleOption.id ? "text-white" : "text-foreground"
+                  }`}>{styleOption.name}</h3>
                 </div>
               </div>
-              {selectedStyle === style.id && (
+              {style === styleOption.id && (
-                <div className="bg-primary text-primary-foreground p-1 rounded-full shrink-0">
+                <div className="bg-white text-indigo p-1 rounded-full shrink-0">
                   <Check className="w-3 h-3" />
                 </div>
               )}

drizzle/0004_real_maggott.sql

@@ -0,0 +1,2 @@
+ALTER TABLE "stories" ALTER COLUMN "user_id" SET NOT NULL;--> statement-breakpoint
+ALTER TABLE "stories" ADD COLUMN "style" text DEFAULT 'noir' NOT NULL;

drizzle/meta/0004_snapshot.json

@@ -0,0 +1,171 @@
+{
+  "id": "e7151eda-1d1b-4ade-b25c-7b9e719f7b87",
+  "prevId": "d4fd5445-071f-469e-9bc8-ccb05ead5ef9",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.pages": {
+      "name": "pages",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "story_id": {
+          "name": "story_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "page_number": {
+          "name": "page_number",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "prompt": {
+          "name": "prompt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "character_image_urls": {
+          "name": "character_image_urls",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'[]'::jsonb"
+        },
+        "generated_image_url": {
+          "name": "generated_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "pages_story_id_stories_id_fk": {
+          "name": "pages_story_id_stories_id_fk",
+          "tableFrom": "pages",
+          "tableTo": "stories",
+          "columnsFrom": [
+            "story_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.stories": {
+      "name": "stories",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "slug": {
+          "name": "slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "style": {
+          "name": "style",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'noir'"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "stories_slug_unique": {
+          "name": "stories_slug_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "slug"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}

drizzle/meta/_journal.json

@@ -29,6 +29,13 @@
       "when": 1766674926877,
       "tag": "0003_harsh_molecule_man",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "7",
+      "when": 1766745845651,
+      "tag": "0004_real_maggott",
+      "breakpoints": true
     }
   ]
 }

lib/constants.ts

@@ -0,0 +1,22 @@
+export const COMIC_STYLES = [
+  {
+    id: "american-modern",
+    name: "American Modern",
+    prompt: "contemporary American superhero comic style, bold vibrant colors, dynamic heroic poses, detailed muscular anatomy, cinematic action scenes, modern digital art",
+  },
+  {
+    id: "manga",
+    name: "Manga",
+    prompt: "Japanese manga style, clean precise black linework, screen tone shading, expressive eyes, dynamic speed lines, black and white with impact effects",
+  },
+  {
+    id: "noir",
+    name: "Noir",
+    prompt: "film noir style, high contrast black and white, deep dramatic shadows, 1940s detective aesthetic, heavy bold inking, moody atmospheric lighting",
+  },
+  {
+    id: "vintage",
+    name: "Vintage",
+    prompt: "Golden Age 1950s comic style, visible halftone Ben-Day dots, limited retro color palette, nostalgic warm tones, classic adventure comics",
+  },
+] as const;

lib/db-actions.ts

@@ -3,7 +3,7 @@ import { stories, pages, type Story, type Page } from './schema';
 import { eq } from 'drizzle-orm';
 import { generateComicSlug } from './slug-generator';
 
-export async function createStory(data: { title: string; description?: string; userId: string }): Promise<Story> {
+export async function createStory(data: { title: string; description?: string; userId: string; style?: string }): Promise<Story> {
   // Generate a unique slug
   let slug = generateComicSlug();
   let attempts = 0;
@@ -31,7 +31,6 @@ export async function createPage(data: {
   pageNumber: number;
   prompt: string;
   characterImageUrls: string[];
-  style: string;
 }): Promise<Page> {
   const [page] = await db.insert(pages).values(data).returning();
   return page;
@@ -60,23 +59,22 @@ export async function getStoryWithPages(storyId: string): Promise<{ story: Story
   };
 }
 
+export async function getStoryById(storyId: string): Promise<Story | null> {
+  const result = await db.select().from(stories).where(eq(stories.id, storyId)).limit(1);
+  return result.length > 0 ? result[0] : null;
+}
+
 export async function getStoryWithPagesBySlug(slug: string): Promise<{ story: Story; pages: Page[] } | null> {
-  console.log("DB: Searching for slug:", slug);
   const storyResult = await db.select().from(stories).where(eq(stories.slug, slug)).limit(1);
-  console.log("DB: Story result count:", storyResult.length);
 
   if (storyResult.length === 0) {
-    console.log("DB: No story found with slug:", slug);
     return null;
   }
 
-  console.log("DB: Found story:", storyResult[0].id, storyResult[0].slug);
   const storyPages = await db.select().from(pages)
     .where(eq(pages.storyId, storyResult[0].id))
     .orderBy(pages.pageNumber);
 
-  console.log("DB: Found pages count:", storyPages.length);
-
   return {
     story: storyResult[0],
     pages: storyPages,

lib/schema.ts

@@ -7,7 +7,8 @@ export const stories = pgTable('stories', {
   title: text('title').notNull(),
   slug: text('slug').notNull().unique(),
   description: text('description'),
-  userId: text('user_id').notNull(), // Required Clerk user ID
+  style: text('style').default('noir').notNull(),
+  userId: text('user_id').notNull(),
   createdAt: timestamp('created_at').defaultNow().notNull(),
   updatedAt: timestamp('updated_at').defaultNow().notNull(),
 });