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

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(),
 });