From 2721e07027abbe3f0067b00d9e9dde646ffdb123 Mon Sep 17 00:00:00 2001
From: DankerMu <mumzy@mail.ustc.edu.cn>
Date: Sat, 21 Feb 2026 20:41:41 +0800
Subject: [PATCH 1/2] feat(frontend): add book/chapter/scene create buttons in
 project tree (#49)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add inline creation buttons for books, chapters, and scenes in the sidebar
project tree. Click the button → type title → Enter to create, Escape to cancel.
Tree auto-refreshes after creation.

Closes #49

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/project-tree.tsx | 216 ++++++++++++++++++++---
 1 file changed, 189 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/project-tree.tsx b/frontend/src/components/project-tree.tsx
index fddf6b7..aa66f2d 100644
--- a/frontend/src/components/project-tree.tsx
+++ b/frontend/src/components/project-tree.tsx
@@ -1,14 +1,24 @@
 'use client'
 
-import { useQuery } from '@tanstack/react-query'
+import { useRef, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { apiFetch } from '@/lib/api'
 import { useWorkspace } from '@/hooks/use-workspace'
-import type { ProjectTree } from '@/lib/types'
-import { useState } from 'react'
+import type { Book, Chapter, ProjectTree, Scene } from '@/lib/types'
+
+type AddingTarget =
+  | { type: 'book' }
+  | { type: 'chapter'; bookId: number }
+  | { type: 'scene'; chapterId: number }
+  | null
 
 export function ProjectTreePanel() {
   const { projectId, selectedSceneId, selectScene } = useWorkspace()
+  const queryClient = useQueryClient()
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
+  const [adding, setAdding] = useState<AddingTarget>(null)
+  const [newTitle, setNewTitle] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const { data: tree } = useQuery({
     queryKey: ['project-tree', projectId],
@@ -20,6 +30,70 @@ export function ProjectTreePanel() {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }))
   }
 
+  const invalidateTree = () => {
+    queryClient.invalidateQueries({ queryKey: ['project-tree', projectId] })
+  }
+
+  const resetAdding = () => {
+    setAdding(null)
+    setNewTitle('')
+  }
+
+  const createBook = useMutation({
+    mutationFn: (title: string) =>
+      apiFetch<Book>('/api/books', {
+        method: 'POST',
+        body: JSON.stringify({ project_id: projectId, title }),
+      }),
+    onSuccess: () => {
+      invalidateTree()
+      resetAdding()
+    },
+  })
+
+  const createChapter = useMutation({
+    mutationFn: ({ bookId, title }: { bookId: number; title: string }) =>
+      apiFetch<Chapter>('/api/chapters', {
+        method: 'POST',
+        body: JSON.stringify({ book_id: bookId, title }),
+      }),
+    onSuccess: () => {
+      invalidateTree()
+      resetAdding()
+    },
+  })
+
+  const createScene = useMutation({
+    mutationFn: ({ chapterId, title }: { chapterId: number; title: string }) =>
+      apiFetch<Scene>('/api/scenes', {
+        method: 'POST',
+        body: JSON.stringify({ chapter_id: chapterId, title }),
+      }),
+    onSuccess: () => {
+      invalidateTree()
+      resetAdding()
+    },
+  })
+
+  const handleSubmit = () => {
+    const t = newTitle.trim()
+    if (!t || !adding) return
+    if (adding.type === 'book') createBook.mutate(t)
+    else if (adding.type === 'chapter') createChapter.mutate({ bookId: adding.bookId, title: t })
+    else createScene.mutate({ chapterId: adding.chapterId, title: t })
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleSubmit()
+    else if (e.key === 'Escape') resetAdding()
+  }
+
+  const startAdding = (target: AddingTarget) => {
+    setAdding(target)
+    setNewTitle('')
+    setTimeout(() => inputRef.current?.focus(), 0)
+  }
+
   if (!projectId) {
     return <div className="p-4 text-gray-400">请选择项目</div>
   }
@@ -28,9 +102,12 @@ export function ProjectTreePanel() {
     return <div className="p-4 text-gray-400">加载中...</div>
   }
 
+  const isPending = createBook.isPending || createChapter.isPending || createScene.isPending
+
   return (
     <div className="p-2 text-sm">
       <h2 className="font-bold text-base mb-2 px-2">{tree.title}</h2>
+
       {tree.books.map((book) => (
         <div key={book.id}>
           <button
@@ -39,35 +116,120 @@ export function ProjectTreePanel() {
           >
             {collapsed[`book-${book.id}`] ? '▶' : '▼'} {book.title}
           </button>
-          {!collapsed[`book-${book.id}`] && book.chapters.map((chapter) => (
-            <div key={chapter.id} className="ml-3">
-              <button
-                className="w-full text-left px-2 py-0.5 hover:bg-gray-100 rounded flex items-center gap-1"
-                onClick={() => toggle(`ch-${chapter.id}`)}
-              >
-                {collapsed[`ch-${chapter.id}`] ? '▶' : '▼'}
-                <span>{chapter.title}</span>
-                {chapter.status === 'done' && (
-                  <span className="text-green-600 text-xs">✓</span>
-                )}
-              </button>
-              {!collapsed[`ch-${chapter.id}`] && chapter.scenes.map((scene) => (
+
+          {!collapsed[`book-${book.id}`] && (
+            <>
+              {book.chapters.map((chapter) => (
+                <div key={chapter.id} className="ml-3">
+                  <button
+                    className="w-full text-left px-2 py-0.5 hover:bg-gray-100 rounded flex items-center gap-1"
+                    onClick={() => toggle(`ch-${chapter.id}`)}
+                  >
+                    {collapsed[`ch-${chapter.id}`] ? '▶' : '▼'}
+                    <span>{chapter.title}</span>
+                    {chapter.status === 'done' && (
+                      <span className="text-green-600 text-xs">✓</span>
+                    )}
+                  </button>
+
+                  {!collapsed[`ch-${chapter.id}`] && (
+                    <>
+                      {chapter.scenes.map((scene) => (
+                        <button
+                          key={scene.id}
+                          className={`w-full text-left ml-4 px-2 py-0.5 rounded text-xs ${
+                            selectedSceneId === scene.id
+                              ? 'bg-blue-100 text-blue-700 font-medium'
+                              : 'hover:bg-gray-50'
+                          }`}
+                          onClick={() => selectScene(scene.id, chapter.id, book.id)}
+                        >
+                          {scene.title}
+                        </button>
+                      ))}
+
+                      {/* Inline: add scene */}
+                      {adding?.type === 'scene' && adding.chapterId === chapter.id ? (
+                        <div className="ml-4 mt-0.5">
+                          <input
+                            ref={inputRef}
+                            className="w-full border border-blue-300 rounded px-2 py-0.5 text-xs
+                              focus:outline-none focus:border-blue-500"
+                            placeholder="场景标题"
+                            value={newTitle}
+                            onChange={(e) => setNewTitle(e.target.value)}
+                            onKeyDown={handleKeyDown}
+                            onBlur={() => { if (!newTitle.trim()) resetAdding() }}
+                            disabled={isPending}
+                          />
+                        </div>
+                      ) : (
+                        <button
+                          className="w-full text-left ml-4 px-2 py-0.5 text-xs text-slate-400
+                            hover:text-blue-600 cursor-pointer"
+                          onClick={() => startAdding({ type: 'scene', chapterId: chapter.id })}
+                        >
+                          + 新建场景
+                        </button>
+                      )}
+                    </>
+                  )}
+                </div>
+              ))}
+
+              {/* Inline: add chapter */}
+              {adding?.type === 'chapter' && adding.bookId === book.id ? (
+                <div className="ml-3 mt-0.5">
+                  <input
+                    ref={inputRef}
+                    className="w-full border border-blue-300 rounded px-2 py-0.5 text-sm
+                      focus:outline-none focus:border-blue-500"
+                    placeholder="章节标题"
+                    value={newTitle}
+                    onChange={(e) => setNewTitle(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => { if (!newTitle.trim()) resetAdding() }}
+                    disabled={isPending}
+                  />
+                </div>
+              ) : (
                 <button
-                  key={scene.id}
-                  className={`w-full text-left ml-4 px-2 py-0.5 rounded text-xs ${
-                    selectedSceneId === scene.id
-                      ? 'bg-blue-100 text-blue-700 font-medium'
-                      : 'hover:bg-gray-50'
-                  }`}
-                  onClick={() => selectScene(scene.id, chapter.id, book.id)}
+                  className="w-full text-left ml-3 px-2 py-0.5 text-xs text-slate-400
+                    hover:text-blue-600 cursor-pointer"
+                  onClick={() => startAdding({ type: 'chapter', bookId: book.id })}
                 >
-                  {scene.title}
+                  + 新建章节
                 </button>
-              ))}
-            </div>
-          ))}
+              )}
+            </>
+          )}
         </div>
       ))}
+
+      {/* Inline: add book */}
+      {adding?.type === 'book' ? (
+        <div className="mt-1">
+          <input
+            ref={inputRef}
+            className="w-full border border-blue-300 rounded px-2 py-1 text-sm
+              focus:outline-none focus:border-blue-500"
+            placeholder="卷标题"
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={() => { if (!newTitle.trim()) resetAdding() }}
+            disabled={isPending}
+          />
+        </div>
+      ) : (
+        <button
+          className="w-full text-left px-2 py-1 mt-1 text-xs text-slate-400
+            hover:text-blue-600 cursor-pointer"
+          onClick={() => startAdding({ type: 'book' })}
+        >
+          + 新建卷
+        </button>
+      )}
     </div>
   )
 }

From a00927aac2380f6f0b871b75d55ee0f51f108df3 Mon Sep 17 00:00:00 2001
From: DankerMu <mumzy@mail.ustc.edu.cn>
Date: Sat, 21 Feb 2026 20:46:25 +0800
Subject: [PATCH 2/2] fix(project-tree): add error handling, blur-submit,
 useEffect focus

Address review findings:
- Add onError callbacks to all three mutations with user-facing toast
- Auto-submit on blur when input is non-empty (instead of discarding)
- Replace setTimeout focus hack with useEffect on adding state

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/project-tree.tsx | 44 ++++++++++++++++--------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/project-tree.tsx b/frontend/src/components/project-tree.tsx
index aa66f2d..298de14 100644
--- a/frontend/src/components/project-tree.tsx
+++ b/frontend/src/components/project-tree.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { apiFetch } from '@/lib/api'
 import { useWorkspace } from '@/hooks/use-workspace'
@@ -18,8 +18,13 @@ export function ProjectTreePanel() {
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
   const [adding, setAdding] = useState<AddingTarget>(null)
   const [newTitle, setNewTitle] = useState('')
+  const [error, setError] = useState('')
   const inputRef = useRef<HTMLInputElement>(null)
 
+  useEffect(() => {
+    if (adding) inputRef.current?.focus()
+  }, [adding])
+
   const { data: tree } = useQuery({
     queryKey: ['project-tree', projectId],
     queryFn: () => apiFetch<ProjectTree>(`/api/projects/${projectId}/tree`),
@@ -39,16 +44,19 @@ export function ProjectTreePanel() {
     setNewTitle('')
   }
 
+  const onMutationError = () => {
+    setError('创建失败，请重试')
+    setTimeout(() => setError(''), 3000)
+  }
+
   const createBook = useMutation({
     mutationFn: (title: string) =>
       apiFetch<Book>('/api/books', {
         method: 'POST',
         body: JSON.stringify({ project_id: projectId, title }),
       }),
-    onSuccess: () => {
-      invalidateTree()
-      resetAdding()
-    },
+    onSuccess: () => { invalidateTree(); resetAdding() },
+    onError: onMutationError,
   })
 
   const createChapter = useMutation({
@@ -57,10 +65,8 @@ export function ProjectTreePanel() {
         method: 'POST',
         body: JSON.stringify({ book_id: bookId, title }),
       }),
-    onSuccess: () => {
-      invalidateTree()
-      resetAdding()
-    },
+    onSuccess: () => { invalidateTree(); resetAdding() },
+    onError: onMutationError,
   })
 
   const createScene = useMutation({
@@ -69,10 +75,8 @@ export function ProjectTreePanel() {
         method: 'POST',
         body: JSON.stringify({ chapter_id: chapterId, title }),
       }),
-    onSuccess: () => {
-      invalidateTree()
-      resetAdding()
-    },
+    onSuccess: () => { invalidateTree(); resetAdding() },
+    onError: onMutationError,
   })
 
   const handleSubmit = () => {
@@ -88,10 +92,15 @@ export function ProjectTreePanel() {
     else if (e.key === 'Escape') resetAdding()
   }
 
+  const handleBlur = () => {
+    if (newTitle.trim()) handleSubmit()
+    else resetAdding()
+  }
+
   const startAdding = (target: AddingTarget) => {
     setAdding(target)
     setNewTitle('')
-    setTimeout(() => inputRef.current?.focus(), 0)
+    setError('')
   }
 
   if (!projectId) {
@@ -106,6 +115,11 @@ export function ProjectTreePanel() {
 
   return (
     <div className="p-2 text-sm">
+      {error && (
+        <div className="text-xs text-red-600 bg-red-50 rounded p-1.5 mb-2 mx-1">
+          {error}
+        </div>
+      )}
       <h2 className="font-bold text-base mb-2 px-2">{tree.title}</h2>
 
       {tree.books.map((book) => (
@@ -159,7 +173,7 @@ export function ProjectTreePanel() {
                             value={newTitle}
                             onChange={(e) => setNewTitle(e.target.value)}
                             onKeyDown={handleKeyDown}
-                            onBlur={() => { if (!newTitle.trim()) resetAdding() }}
+                            onBlur={handleBlur}
                             disabled={isPending}
                           />
                         </div>