From b4f4b35e3c7c9939c5823e72934c016c81a425a2 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 17 Aug 2026 00:13:53 +0000
Subject: [PATCH] Gate the Add chapter button behind CreateContent, matching
 characters/beats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Editors and Reviewers could see and click Add chapter even though the
API rejects the create with 403 for anyone without CreateContent — the
gate existed everywhere else (characters, beats) but was missed here.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JC8Q7Gkv8K7LnJrwkx1xrh
---
 src/Novelly.Web/src/pages/ChaptersPage.tsx | 24 ++++++++++++++--------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/Novelly.Web/src/pages/ChaptersPage.tsx b/src/Novelly.Web/src/pages/ChaptersPage.tsx
index 2c26891..733c7e4 100644
--- a/src/Novelly.Web/src/pages/ChaptersPage.tsx
+++ b/src/Novelly.Web/src/pages/ChaptersPage.tsx
@@ -1,15 +1,19 @@
 import { Link, useParams } from 'react-router-dom'
-import { useChapters, useCreateChapter } from '../api/hooks'
+import { useChapters, useCreateChapter, useProject } from '../api/hooks'
 import { EmptyState, ErrorNote, Spinner, StatusBadge } from '../components/ui'
 import { TagChip } from '../components/TagEditor'
+import { useAuth } from '../auth/AuthContext'
 import { useHotkey } from '../keyboard/HotkeysContext'
 
 export default function ChaptersPage() {
   const { projectId = '' } = useParams()
   const { data: chapters, isPending, error } = useChapters(projectId)
+  const { data: project } = useProject(projectId)
+  const { can } = useAuth()
+  const canCreate = can('CreateContent', project)
   const create = useCreateChapter(projectId)
 
-  useHotkey('n', 'Add chapter', () => create.mutate({ title: 'Untitled chapter' }), { group: 'Chapters' })
+  useHotkey('n', 'Add chapter', () => canCreate && create.mutate({ title: 'Untitled chapter' }), { group: 'Chapters' })
 
   if (isPending) return <Spinner label="Loading chapters" />
   if (error) return <ErrorNote error={error} />
@@ -18,13 +22,15 @@ export default function ChaptersPage() {
     <div>
       <div className="mb-5 flex items-center justify-between gap-4">
         <h2 className="text-xl font-semibold">Chapters</h2>
-        <button
-          className="btn btn-primary"
-          onClick={() => create.mutate({ title: 'Untitled chapter' })}
-          disabled={create.isPending}
-        >
-          Add chapter
-        </button>
+        {canCreate && (
+          <button
+            className="btn btn-primary"
+            onClick={() => create.mutate({ title: 'Untitled chapter' })}
+            disabled={create.isPending}
+          >
+            Add chapter
+          </button>
+        )}
       </div>
 
       {create.error && <ErrorNote error={create.error} />}