Add PUT endpoint and in-place title editing for stories

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

@@ -1,6 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { auth } from "@clerk/nextjs/server";
-import { getStoryWithPagesBySlug } from "@/lib/db-actions";
+import { getStoryWithPagesBySlug, updateStory } from "@/lib/db-actions";
 import { db } from "@/lib/db";
 import { stories } from "@/lib/schema";
 import { eq } from "drizzle-orm";
@@ -67,3 +67,58 @@ export async function GET(
     );
   }
 }
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ storySlug: string }> }
+) {
+  try {
+    const { userId } = await auth();
+
+    if (!userId) {
+      return NextResponse.json(
+        { error: "Authentication required" },
+        { status: 401 }
+      );
+    }
+
+    const { storySlug: slug } = await params;
+
+    if (!slug) {
+      return NextResponse.json(
+        { error: "Story slug is required" },
+        { status: 400 }
+      );
+    }
+
+    const result = await getStoryWithPagesBySlug(slug);
+
+    if (!result) {
+      return NextResponse.json({ error: "Story not found" }, { status: 404 });
+    }
+
+    // Check if the story belongs to the authenticated user
+    if (result.story.userId !== userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 403 });
+    }
+
+    const { title } = await request.json();
+
+    if (!title || typeof title !== "string" || title.trim().length === 0) {
+      return NextResponse.json(
+        { error: "Title is required and must be a non-empty string" },
+        { status: 400 }
+      );
+    }
+
+    await updateStory(result.story.id, { title: title.trim() });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Error updating story:", error);
+    return NextResponse.json(
+      { error: "Failed to update story" },
+      { status: 500 }
+    );
+  }
+}

app/story/[storySlug]/story-editor-client.tsx

@@ -65,6 +65,10 @@ export function StoryEditorClient() {
   const { toast } = useToast();
   const [apiKey, setApiKey] = useApiKey();
 
+  const handleTitleUpdate = (newTitle: string) => {
+    setStory(prev => prev ? { ...prev, title: newTitle } : null);
+  };
+
   // Load story and pages from API
   useEffect(() => {
     const loadStoryData = async () => {
@@ -423,6 +427,7 @@ export function StoryEditorClient() {
         onDownloadPDF={downloadPDF}
         isGeneratingPDF={isGeneratingPDF}
         isOwner={isOwner}
+        onTitleUpdate={handleTitleUpdate}
       />
 
       <div className="flex-1 flex overflow-hidden">