feat: gate custom step creation tab by permission

Viewers who cannot create steps will only see the "Browse Library"
tab in the CustomStepModal, hiding the "Type My Own" creation form.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-05 23:39:45 -05:00
parent 722e030ba6
commit 741938cf1f

View File

@@ -1,6 +1,7 @@
import { useState } from 'react' import { useState } from 'react'
import { X } from 'lucide-react' import { X } from 'lucide-react'
import { cn } from '@/lib/utils' import { cn } from '@/lib/utils'
import { usePermissions } from '@/hooks/usePermissions'
import { StepForm } from './StepForm' import { StepForm } from './StepForm'
import { StepLibraryBrowser } from './StepLibraryBrowser' import { StepLibraryBrowser } from './StepLibraryBrowser'
import type { Step, StepCreate } from '@/types/step' import type { Step, StepCreate } from '@/types/step'
@@ -30,7 +31,8 @@ interface CustomStepModalProps {
type Tab = 'create' | 'browse' type Tab = 'create' | 'browse'
export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepModalProps) { export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepModalProps) {
const [activeTab, setActiveTab] = useState<Tab>('create') const { canCreateSteps } = usePermissions()
const [activeTab, setActiveTab] = useState<Tab>(canCreateSteps ? 'create' : 'browse')
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
@@ -78,6 +80,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
{/* Tabs */} {/* Tabs */}
<div className="flex border-b border-border"> <div className="flex border-b border-border">
{canCreateSteps && (
<button <button
onClick={() => setActiveTab('create')} onClick={() => setActiveTab('create')}
className={cn( className={cn(
@@ -89,6 +92,7 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
> >
Type My Own Type My Own
</button> </button>
)}
<button <button
onClick={() => setActiveTab('browse')} onClick={() => setActiveTab('browse')}
className={cn( className={cn(