From 741938cf1fa6d074164df316d66e4a3568822033 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 5 Feb 2026 23:39:45 -0500
Subject: [PATCH] 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>
---
 .../step-library/CustomStepModal.tsx          | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/step-library/CustomStepModal.tsx b/frontend/src/components/step-library/CustomStepModal.tsx
index cd221204..fb02a3b5 100644
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/frontend/src/components/step-library/CustomStepModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { usePermissions } from '@/hooks/usePermissions'
 import { StepForm } from './StepForm'
 import { StepLibraryBrowser } from './StepLibraryBrowser'
 import type { Step, StepCreate } from '@/types/step'
@@ -30,7 +31,8 @@ interface CustomStepModalProps {
 type Tab = 'create' | 'browse'
 
 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 [error, setError] = useState<string | null>(null)
 
@@ -78,17 +80,19 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
 
         {/* Tabs */}
         <div className="flex border-b border-border">
-          <button
-            onClick={() => setActiveTab('create')}
-            className={cn(
-              'flex-1 px-4 py-3 text-sm font-medium transition-colors',
-              activeTab === 'create'
-                ? 'border-b-2 border-primary bg-primary/5 text-primary'
-                : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
-            )}
-          >
-            Type My Own
-          </button>
+          {canCreateSteps && (
+            <button
+              onClick={() => setActiveTab('create')}
+              className={cn(
+                'flex-1 px-4 py-3 text-sm font-medium transition-colors',
+                activeTab === 'create'
+                  ? 'border-b-2 border-primary bg-primary/5 text-primary'
+                  : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+              )}
+            >
+              Type My Own
+            </button>
+          )}
           <button
             onClick={() => setActiveTab('browse')}
             className={cn(