Gate the Add chapter button behind CreateContent, matching characters/beats

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
This commit is contained in:
Claude
2026-08-17 00:13:53 +00:00
parent e2a2e69631
commit b4f4b35e3c
+15 -9
View File
@@ -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} />}