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">

components/editor/editor-toolbar.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft, RefreshCw, Share, Plus, Info, Download } from "lucide-react"
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { useToast } from "@/hooks/use-toast";
+import { useState, useRef, useEffect } from "react";
 
 interface EditorToolbarProps {
   title: string;
@@ -11,6 +12,7 @@ interface EditorToolbarProps {
   onDownloadPDF?: () => void;
   isGeneratingPDF?: boolean;
   isOwner?: boolean;
+  onTitleUpdate?: (newTitle: string) => void;
 }
 
 export function EditorToolbar({
@@ -19,9 +21,79 @@ export function EditorToolbar({
   onDownloadPDF,
   isGeneratingPDF = false,
   isOwner = true,
+  onTitleUpdate,
 }: EditorToolbarProps) {
   const router = useRouter();
   const { toast } = useToast();
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(title);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setEditingTitle(title);
+  }, [title]);
+
+  useEffect(() => {
+    if (isEditingTitle && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditingTitle]);
+
+  const handleTitleClick = () => {
+    if (isOwner && onTitleUpdate) {
+      setIsEditingTitle(true);
+    }
+  };
+
+  const handleTitleSave = async () => {
+    const newTitle = editingTitle.trim();
+    if (newTitle && newTitle !== title) {
+      try {
+        const response = await fetch(`/api/stories/${window.location.pathname.split('/').pop()}`, {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ title: newTitle }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to update title');
+        }
+
+        onTitleUpdate?.(newTitle);
+        toast({
+          title: "Title updated",
+          description: "Story title has been updated successfully.",
+          duration: 2000,
+        });
+      } catch (error) {
+        console.error('Error updating title:', error);
+        toast({
+          title: "Failed to update title",
+          description: "Could not update the story title.",
+          variant: "destructive",
+          duration: 3000,
+        });
+        setEditingTitle(title); // Reset to original
+      }
+    }
+    setIsEditingTitle(false);
+  };
+
+  const handleTitleCancel = () => {
+    setEditingTitle(title);
+    setIsEditingTitle(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleTitleSave();
+    } else if (e.key === 'Escape') {
+      handleTitleCancel();
+    }
+  };
 
   return (
     <header className="h-14 border-b border-border/50 bg-background/80 backdrop-blur-md flex items-center justify-between px-3 sm:px-4">
@@ -35,9 +107,25 @@ export function EditorToolbar({
           <ArrowLeft className="w-4 h-4 sm:w-5 sm:h-5" />
         </Button>
 
-        <h1 className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate">
+        {isEditingTitle ? (
+          <input
+            ref={inputRef}
+            type="text"
+            value={editingTitle}
+            onChange={(e) => setEditingTitle(e.target.value)}
+            onBlur={handleTitleSave}
+            onKeyDown={handleKeyDown}
+            className="text-sm sm:text-base text-white font-normal tracking-[-0.02em] bg-transparent border-none outline-none truncate min-w-0 flex-1"
+            style={{ width: `${editingTitle.length}ch` }}
+          />
+        ) : (
+          <h1
+            className={`text-sm sm:text-base text-white font-normal tracking-[-0.02em] truncate ${isOwner && onTitleUpdate ? 'cursor-pointer hover:text-gray-300' : ''}`}
+            onClick={handleTitleClick}
+          >
             {title}
           </h1>
+        )}
       </div>
 
       <div className="flex items-center gap-1 sm:gap-2 shrink-0">