- {/* Left side - Info skeleton */}
-
- {/* Top section skeleton */}
-
-
-
-
- {/* Bottom section skeleton */}
-
- {/* Icon skeleton */}
-
- {/* Title skeleton */}
-
-
+
+ {/* Workflow preview skeleton */}
+
- {/* Star and Use button skeleton */}
-
-
- {/* Description skeleton */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Stars section - hidden on smaller screens */}
- (input.blocks || {})) {
+ if (!raw || !raw.type) continue
+ normalizedBlocks[id] = {
+ id: raw.id ?? id,
+ type: raw.type,
+ name: raw.name ?? raw.type,
+ position: raw.position ?? { x: 0, y: 0 },
+ subBlocks: raw.subBlocks ?? {},
+ outputs: raw.outputs ?? {},
+ enabled: typeof raw.enabled === 'boolean' ? raw.enabled : true,
+ horizontalHandles: raw.horizontalHandles,
+ height: raw.height,
+ advancedMode: raw.advancedMode,
+ triggerMode: raw.triggerMode,
+ data: raw.data ?? {},
+ layout: raw.layout,
+ }
+ }
+
+ const normalized: WorkflowState = {
+ blocks: normalizedBlocks,
+ edges: Array.isArray(input.edges) ? input.edges : [],
+ loops: input.loops ?? {},
+ parallels: input.parallels ?? {},
+ lastSaved: input.lastSaved,
+ lastUpdate: input.lastUpdate,
+ metadata: input.metadata,
+ variables: input.variables,
+ isDeployed: input.isDeployed,
+ deployedAt: input.deployedAt,
+ deploymentStatuses: input.deploymentStatuses,
+ needsRedeployment: input.needsRedeployment,
+ dragStartPosition: input.dragStartPosition ?? null,
+ }
+
+ return normalized
+}
+
+function TemplateCardInner({
id,
title,
description,
@@ -225,18 +147,16 @@ export function TemplateCard({
authorImageUrl,
usageCount,
stars = 0,
+ icon,
+ iconColor = 'bg-blue-500',
blocks = [],
- tags = [],
+ onClick,
className,
state,
isStarred = false,
+ onTemplateUsed,
onStarChange,
isAuthenticated = true,
- onTemplateUsed,
- status,
- isSuperUser,
- onApprove,
- onReject,
}: TemplateCardProps) {
const router = useRouter()
const params = useParams()
@@ -245,17 +165,39 @@ export function TemplateCard({
const [localIsStarred, setLocalIsStarred] = useState(isStarred)
const [localStarCount, setLocalStarCount] = useState(stars)
const [isStarLoading, setIsStarLoading] = useState(false)
- const [isApproving, setIsApproving] = useState(false)
- const [isRejecting, setIsRejecting] = useState(false)
+
+ // Memoize normalized workflow state to avoid recalculation on every render
+ const normalizedState = useMemo(() => normalizeWorkflowState(state), [state])
+
+ // Use IntersectionObserver to defer rendering the heavy WorkflowPreview until in viewport
+ const previewRef = useRef(null)
+ const [isInView, setIsInView] = useState(false)
+
+ useEffect(() => {
+ if (!previewRef.current) return
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setIsInView(true)
+ observer.disconnect()
+ }
+ },
+ { root: null, rootMargin: '200px', threshold: 0 }
+ )
+ observer.observe(previewRef.current)
+ return () => observer.disconnect()
+ }, [])
// Extract block types from state if provided, otherwise use the blocks prop
// Filter out starter blocks in both cases and sort for consistent rendering
- const blockTypes = state
- ? extractBlockTypesFromState(state)
- : blocks.filter((blockType) => blockType !== 'starter').sort()
-
- // Determine if we're in a workspace context
- const workspaceId = params?.workspaceId as string | undefined
+ // Memoized to prevent recalculation on every render
+ const blockTypes = useMemo(
+ () =>
+ state
+ ? extractBlockTypesFromState(state)
+ : blocks.filter((blockType) => blockType !== 'starter').sort(),
+ [state, blocks]
+ )
// Handle star toggle with optimistic updates
const handleStarClick = async (e: React.MouseEvent) => {
@@ -311,305 +253,162 @@ export function TemplateCard({
}
/**
- * Handles template use action
- * - In workspace context: Creates workflow instance via API
- * - Outside workspace: Navigates to template detail page
+ * Get the appropriate template detail page URL based on context.
+ * If we're in a workspace context, navigate to the workspace template page.
+ * Otherwise, navigate to the global template page.
+ * Memoized to avoid recalculation on every render.
*/
- const handleUseClick = async (e: React.MouseEvent) => {
- e.stopPropagation()
-
+ const templateUrl = useMemo(() => {
+ const workspaceId = params?.workspaceId as string | undefined
if (workspaceId) {
- // Workspace context: Use API to create workflow instance
- try {
- const response = await fetch(`/api/templates/${id}/use`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ workspaceId }),
- })
-
- if (response.ok) {
- const data = await response.json()
- logger.info('Template use API response:', data)
-
- if (!data.workflowId) {
- logger.error('No workflowId returned from API:', data)
- return
- }
-
- const workflowUrl = `/workspace/${workspaceId}/w/${data.workflowId}`
- logger.info('Template used successfully, navigating to:', workflowUrl)
-
- if (onTemplateUsed) {
- onTemplateUsed()
- }
-
- window.location.href = workflowUrl
- } else {
- const errorText = await response.text()
- logger.error('Failed to use template:', response.statusText, errorText)
- }
- } catch (error) {
- logger.error('Error using template:', error)
- }
- } else {
- // Non-workspace context: Navigate to template detail page
- router.push(`/templates/${id}`)
+ return `/workspace/${workspaceId}/templates/${id}`
}
- }
+ return `/templates/${id}`
+ }, [params?.workspaceId, id])
/**
- * Handles card click navigation
- * - In workspace context: Navigate to workspace template detail
- * - Outside workspace: Navigate to global template detail
+ * Handle use button click - navigate to template detail page
*/
- const handleCardClick = (e: React.MouseEvent) => {
- const target = e.target as HTMLElement
- if (target.closest('button') || target.closest('[data-action]')) {
- return
- }
-
- if (workspaceId) {
- router.push(`/workspace/${workspaceId}/templates/${id}`)
- } else {
- router.push(`/templates/${id}`)
- }
- }
+ const handleUseClick = useCallback(
+ (e: React.MouseEvent) => {
+ e.stopPropagation()
+ router.push(templateUrl)
+ },
+ [router, templateUrl]
+ )
/**
- * Handles template approval (super user only)
+ * Handle card click - navigate to template detail page
*/
- const handleApprove = async (e: React.MouseEvent) => {
- e.stopPropagation()
- if (isApproving || !onApprove) return
-
- setIsApproving(true)
- try {
- const response = await fetch(`/api/templates/${id}/approve`, {
- method: 'POST',
- })
-
- if (response.ok) {
- onApprove(id)
- } else {
- logger.error('Failed to approve template:', response.statusText)
+ const handleCardClick = useCallback(
+ (e: React.MouseEvent) => {
+ // Don't navigate if clicking on action buttons
+ const target = e.target as HTMLElement
+ if (target.closest('button') || target.closest('[data-action]')) {
+ return
}
- } catch (error) {
- logger.error('Error approving template:', error)
- } finally {
- setIsApproving(false)
- }
- }
- /**
- * Handles template rejection (super user only)
- */
- const handleReject = async (e: React.MouseEvent) => {
- e.stopPropagation()
- if (isRejecting || !onReject) return
-
- setIsRejecting(true)
- try {
- const response = await fetch(`/api/templates/${id}/reject`, {
- method: 'POST',
- })
-
- if (response.ok) {
- onReject(id)
- } else {
- logger.error('Failed to reject template:', response.statusText)
- }
- } catch (error) {
- logger.error('Error rejecting template:', error)
- } finally {
- setIsRejecting(false)
- }
- }
+ router.push(templateUrl)
+ },
+ [router, templateUrl]
+ )
return (
-
-
-
-
+ {/* Title and blocks row skeleton */}
+
+
+
- {/* Right side - Block Icons skeleton */}
-
+ {Array.from({ length: 3 }).map((_, index) => (
+
+ ))}
- {Array.from({ length: 3 }).map((_, index) => (
-
- ))}
+ {/* Creator and stats row skeleton */}
+
)
@@ -211,13 +87,59 @@ const extractBlockTypesFromState = (state?: {
return [...new Set(blockTypes)]
}
-// Utility function to get block display name
+// Utility function to get the full block config for colored icon display
const getBlockConfig = (blockType: string) => {
const block = getBlock(blockType)
return block
}
-export function TemplateCard({
+/**
+ * Normalize an arbitrary workflow-like object into a valid WorkflowState for preview rendering.
+ * Ensures required fields exist: blocks with required properties, edges array, loops and parallels maps.
+ */
+function normalizeWorkflowState(input?: any): WorkflowState | null {
+ if (!input || !input.blocks) return null
+
+ const normalizedBlocks: WorkflowState['blocks'] = {}
+ for (const [id, raw] of Object.entries
+
+
+
+
+
+
+
+
+
+
- {/* Left side - Info */}
-
- {/* Top section */}
-
+
+ )
+}
diff --git a/apps/sim/app/templates/layout.tsx b/apps/sim/app/templates/layout.tsx
index 306ad11c60..d1078c0793 100644
--- a/apps/sim/app/templates/layout.tsx
+++ b/apps/sim/app/templates/layout.tsx
@@ -1,12 +1,9 @@
-'use client'
-
-import { Tooltip } from '@/components/emcn'
-import { season } from '@/app/fonts/season/season'
+import TemplatesLayoutClient from './layout-client'
+/**
+ * Templates layout - server component wrapper for client layout.
+ * Redirect logic is handled by individual pages to preserve paths.
+ */
export default function TemplatesLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
- )
+ return {children}
}
diff --git a/apps/sim/app/templates/page.tsx b/apps/sim/app/templates/page.tsx
index e159b42125..c233949a45 100644
--- a/apps/sim/app/templates/page.tsx
+++ b/apps/sim/app/templates/page.tsx
@@ -1,99 +1,66 @@
import { db } from '@sim/db'
-import { settings, templateCreators, templateStars, templates, user } from '@sim/db/schema'
-import { and, desc, eq, sql } from 'drizzle-orm'
+import { permissions, templateCreators, templates, workspace } from '@sim/db/schema'
+import { and, desc, eq } from 'drizzle-orm'
+import { redirect } from 'next/navigation'
import { getSession } from '@/lib/auth'
import type { Template } from '@/app/templates/templates'
import Templates from '@/app/templates/templates'
+/**
+ * Public templates list page.
+ * Redirects authenticated users to their workspace-scoped templates page.
+ * Allows unauthenticated users to view templates for SEO and discovery.
+ */
export default async function TemplatesPage() {
const session = await getSession()
- // Check if user is a super user and if super user mode is enabled
- let effectiveSuperUser = false
+ // Authenticated users: redirect to workspace-scoped templates
if (session?.user?.id) {
- const currentUser = await db
- .select({ isSuperUser: user.isSuperUser })
- .from(user)
- .where(eq(user.id, session.user.id))
- .limit(1)
- const userSettings = await db
- .select({ superUserModeEnabled: settings.superUserModeEnabled })
- .from(settings)
- .where(eq(settings.userId, session.user.id))
+ const userWorkspaces = await db
+ .select({
+ workspace: workspace,
+ })
+ .from(permissions)
+ .innerJoin(workspace, eq(permissions.entityId, workspace.id))
+ .where(and(eq(permissions.userId, session.user.id), eq(permissions.entityType, 'workspace')))
+ .orderBy(desc(workspace.createdAt))
.limit(1)
- const isSuperUser = currentUser[0]?.isSuperUser || false
- const superUserModeEnabled = userSettings[0]?.superUserModeEnabled ?? true
-
- // Effective super user = database status AND UI mode enabled
- effectiveSuperUser = isSuperUser && superUserModeEnabled
+ if (userWorkspaces.length > 0) {
+ const firstWorkspace = userWorkspaces[0].workspace
+ redirect(`/workspace/${firstWorkspace.id}/templates`)
+ }
}
- // Fetch templates based on user status
- let templatesData
-
- if (session?.user?.id) {
- // Build where condition based on super user status
- const whereCondition = effectiveSuperUser ? undefined : eq(templates.status, 'approved')
-
- // Logged-in users: include star status
- templatesData = await db
- .select({
- id: templates.id,
- workflowId: templates.workflowId,
- name: templates.name,
- details: templates.details,
- creatorId: templates.creatorId,
- creator: templateCreators,
- views: templates.views,
- stars: templates.stars,
- status: templates.status,
- tags: templates.tags,
- requiredCredentials: templates.requiredCredentials,
- state: templates.state,
- createdAt: templates.createdAt,
- updatedAt: templates.updatedAt,
- isStarred: sql`CASE WHEN ${templateStars.id} IS NOT NULL THEN true ELSE false END`,
- })
- .from(templates)
- .leftJoin(
- templateStars,
- and(eq(templateStars.templateId, templates.id), eq(templateStars.userId, session.user.id))
- )
- .leftJoin(templateCreators, eq(templates.creatorId, templateCreators.id))
- .where(whereCondition)
- .orderBy(desc(templates.views), desc(templates.createdAt))
- } else {
- // Non-logged-in users: only approved templates, no star status
- templatesData = await db
- .select({
- id: templates.id,
- workflowId: templates.workflowId,
- name: templates.name,
- details: templates.details,
- creatorId: templates.creatorId,
- creator: templateCreators,
- views: templates.views,
- stars: templates.stars,
- status: templates.status,
- tags: templates.tags,
- requiredCredentials: templates.requiredCredentials,
- state: templates.state,
- createdAt: templates.createdAt,
- updatedAt: templates.updatedAt,
- })
- .from(templates)
- .leftJoin(templateCreators, eq(templates.creatorId, templateCreators.id))
- .where(eq(templates.status, 'approved'))
- .orderBy(desc(templates.views), desc(templates.createdAt))
- .then((rows) => rows.map((row) => ({ ...row, isStarred: false })))
- }
+ // Unauthenticated users: show public templates
+ const templatesData = await db
+ .select({
+ id: templates.id,
+ workflowId: templates.workflowId,
+ name: templates.name,
+ details: templates.details,
+ creatorId: templates.creatorId,
+ creator: templateCreators,
+ views: templates.views,
+ stars: templates.stars,
+ status: templates.status,
+ tags: templates.tags,
+ requiredCredentials: templates.requiredCredentials,
+ state: templates.state,
+ createdAt: templates.createdAt,
+ updatedAt: templates.updatedAt,
+ })
+ .from(templates)
+ .leftJoin(templateCreators, eq(templates.creatorId, templateCreators.id))
+ .where(eq(templates.status, 'approved'))
+ .orderBy(desc(templates.views), desc(templates.createdAt))
+ .then((rows) => rows.map((row) => ({ ...row, isStarred: false })))
return (
(initialTemplates)
const [loading, setLoading] = useState(false)
- const handleTabClick = (tabId: string) => {
- setActiveTab(tabId)
- }
+ // Redirect authenticated users to workspace templates
+ useEffect(() => {
+ if (currentUserId) {
+ const redirectToWorkspace = async () => {
+ try {
+ const response = await fetch('/api/workspaces')
+ if (response.ok) {
+ const data = await response.json()
+ const defaultWorkspace = data.workspaces?.[0]
+ if (defaultWorkspace) {
+ router.push(`/workspace/${defaultWorkspace.id}/templates`)
+ }
+ }
+ } catch (error) {
+ logger.error('Error redirecting to workspace:', error)
+ }
+ }
+ redirectToWorkspace()
+ }
+ }, [currentUserId, router])
- // Handle star change callback from template card
+ /**
+ * Update star status for a template
+ */
const handleStarChange = (templateId: string, isStarred: boolean, newStarCount: number) => {
setTemplates((prevTemplates) =>
prevTemplates.map((template) =>
@@ -73,239 +91,137 @@ export default function Templates({
)
}
- const matchesSearch = (template: Template) => {
- if (!searchQuery) return true
+ /**
+ * Filter templates based on active tab and search query
+ * Memoized to prevent unnecessary recalculations on render
+ */
+ const filteredTemplates = useMemo(() => {
const query = searchQuery.toLowerCase()
- return (
- template.name.toLowerCase().includes(query) ||
- template.details?.tagline?.toLowerCase().includes(query) ||
- template.creator?.name?.toLowerCase().includes(query)
- )
- }
- const ownedTemplates = currentUserId
- ? templates.filter(
- (template) =>
- template.creator?.referenceType === 'user' &&
- template.creator?.referenceId === currentUserId
- )
- : []
- const starredTemplates = currentUserId
- ? templates.filter(
- (template) =>
- template.isStarred &&
- !(
- template.creator?.referenceType === 'user' &&
- template.creator?.referenceId === currentUserId
- )
- )
- : []
+ return templates.filter((template) => {
+ // Filter by tab - only gallery and pending for public page
+ const tabMatch =
+ activeTab === 'gallery' ? template.status === 'approved' : template.status === 'pending'
- const filteredOwnedTemplates = ownedTemplates.filter(matchesSearch)
- const filteredStarredTemplates = starredTemplates.filter(matchesSearch)
+ if (!tabMatch) return false
- const galleryTemplates = templates
- .filter((template) => template.status === 'approved')
- .filter(matchesSearch)
+ // Filter by search query
+ if (!query) return true
- const pendingTemplates = templates
- .filter((template) => template.status === 'pending')
- .filter(matchesSearch)
+ const searchableText = [template.name, template.details?.tagline, template.creator?.name]
+ .filter(Boolean)
+ .join(' ')
+ .toLowerCase()
- // Helper function to render template cards
- const renderTemplateCard = (template: Template) => (
- }}
- isStarred={template.isStarred}
- onStarChange={handleStarChange}
- isAuthenticated={!!currentUserId}
- />
- )
+ return searchableText.includes(query)
+ })
+ }, [templates, activeTab, searchQuery])
- // Render skeleton cards for loading state
- const renderSkeletonCards = () => {
- return Array.from({ length: 8 }).map((_, index) => (
-
-
-
- {/* Bottom section */}
-
-
-
- {/* Description */}
-
- {/* Template name */}
-
-
- {/* Actions */}
- - {title} -
-
- {/* Super user approval buttons for pending templates */}
- {isSuperUser && status === 'pending' ? (
- <>
-
-
-
- ) : (
- <>
- {/* Star button - only for authenticated users */}
- {isAuthenticated && (
-
- - {description} -
- - {/* Tags */} - {tags && tags.length > 0 && ( -
- {tags.slice(0, 3).map((tag, index) => (
-
- {tag}
-
- ))}
- {tags.length > 3 && (
-
- +{tags.length - 3}
-
- )}
-
- )}
-
- {authorImageUrl ? (
-
+ {/* Workflow Preview */}
+
- 
-
- ) : (
-
- •
-
-
+ {normalizedState && isInView ? (
+
- {/* Right side - Block Icons */}
-
- {blockTypes.length > 3 ? (
- <>
- {/* Show first 2 blocks when there are more than 3 */}
- {blockTypes.slice(0, 2).map((blockType, index) => {
+ {/* Title and Blocks Row */}
+
)
}
+
+export const TemplateCard = memo(TemplateCardInner)
diff --git a/apps/sim/app/templates/layout-client.tsx b/apps/sim/app/templates/layout-client.tsx
new file mode 100644
index 0000000000..7051428881
--- /dev/null
+++ b/apps/sim/app/templates/layout-client.tsx
@@ -0,0 +1,12 @@
+'use client'
+
+import { Tooltip } from '@/components/emcn'
+import { season } from '@/app/fonts/season/season'
+
+export default function TemplatesLayoutClient({ children }: { children: React.ReactNode }) {
+ return (
+
+ {/* Template Name */}
+
+
+ {/* Creator and Stats Row */}
+ {title}
+ + {/* Block Icons */} +
+ {blockTypes.length > 4 ? (
+ <>
+ {/* Show first 3 blocks when there are more than 4 */}
+ {blockTypes.slice(0, 3).map((blockType, index) => {
+ const blockConfig = getBlockConfig(blockType)
+ if (!blockConfig) return null
+
+ return (
+
- )
- })
- )}
+ )
+ })
+ )}
+
+ 0 ? '-4px' : '0',
+ }}
+ >
+
+ )
+ })}
+ {/* Show +n for remaining blocks */}
+
+ +{blockTypes.length - 3}
+
+
+ ) : (
+ /* Show all blocks when 4 or fewer */
+ blockTypes.map((blockType, index) => {
const blockConfig = getBlockConfig(blockType)
if (!blockConfig) return null
return (
-
-
- )
- })}
- {/* Show +n block for remaining blocks */}
-
-
-
-
-
- ) : (
- /* Show all blocks when 3 or fewer */
- blockTypes.map((blockType, index) => {
- const blockConfig = getBlockConfig(blockType)
- if (!blockConfig) return null
-
- return (
-
- +{blockTypes.length - 2}
-
- 0 ? '-4px' : '0',
}}
>
-
-
+ {/* Creator Info */}
+
+ {authorImageUrl ? (
+
+
+ {/* Stats */}
+
+
+
+ ) : (
+
+
+ )}
+ {author}
+
+
{children}
+ {children}
-
-
- {/* Header with Back Button */}
-
- {currentUserId && (
-
- )}
-
- Templates -
-
- Grab a template and start building, or make
-
- one from scratch.
+
+
+
- {/* Search */}
-
+
+
+
+ Templates
++ Grab a template and start building, or make one from scratch.
-
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/[id]/page.tsx b/apps/sim/app/workspace/[workspaceId]/templates/[id]/page.tsx
index 4ff6373ac0..98408c23dc 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/[id]/page.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/[id]/page.tsx
@@ -16,12 +16,12 @@ interface TemplatePageProps {
* Uses the shared TemplateDetails component with workspace context.
*/
export default async function TemplatePage({ params }: TemplatePageProps) {
- const { workspaceId } = await params
+ const { workspaceId, id } = await params
const session = await getSession()
- // Require authentication
+ // Redirect unauthenticated users to public template detail page
if (!session?.user?.id) {
- redirect('/login')
+ redirect(`/templates/${id}`)
}
// Verify workspace membership
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/page.tsx b/apps/sim/app/workspace/[workspaceId]/templates/page.tsx
index e87419eee5..3605f98cd0 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/page.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/page.tsx
@@ -21,9 +21,9 @@ export default async function TemplatesPage({ params }: TemplatesPageProps) {
const { workspaceId } = await params
const session = await getSession()
- // Require authentication
+ // Redirect unauthenticated users to public templates page
if (!session?.user?.id) {
- redirect('/login')
+ redirect('/templates')
}
// Verify workspace membership
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/template-deploy/template-deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/template-deploy/template-deploy.tsx
index c78c4bf06f..de096f89ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/template-deploy/template-deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/template-deploy/template-deploy.tsx
@@ -2,11 +2,11 @@
import { useEffect, useState } from 'react'
import { zodResolver } from '@hookform/resolvers/zod'
-import { CheckCircle2, Loader2, Plus, Trash2 } from 'lucide-react'
+import { CheckCircle2, Loader2, Plus } from 'lucide-react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
+import { Badge, Button, Input, Textarea, Trash } from '@/components/emcn'
import {
- Button,
Dialog,
DialogContent,
DialogHeader,
@@ -17,13 +17,11 @@ import {
FormItem,
FormLabel,
FormMessage,
- Input,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
- Textarea,
} from '@/components/ui'
import { TagInput } from '@/components/ui/tag-input'
import { useSession } from '@/lib/auth-client'
@@ -273,18 +271,23 @@ export function TemplateDeploy({ workflowId, onDeploymentComplete }: TemplateDep
return (
-
+
- {/* Navigation - only show if multiple tabs */}
- {showTabs && (
-
+
+
+
+ {isSuperUser && (
+
+ )}
+
-
- )}
+
- {loading ? (
-
- {renderSkeletonCards()}
-
- ) : activeTab === 'your' ? (
- filteredOwnedTemplates.length === 0 && filteredStarredTemplates.length === 0 ? (
-
+
+ {loading ? (
+ Array.from({ length: 8 }).map((_, index) => (
+
-
- {searchQuery ? 'No templates found' : 'No templates yet'} -
-- {searchQuery - ? 'Try a different search term' - : 'Create or star templates to see them here'} -
+{emptyState.title}
+{emptyState.description}
- {filteredOwnedTemplates.length > 0 && (
-
-
- )}
-
- {filteredStarredTemplates.length > 0 && (
-
-
- )}
-
- )
- ) : (
- Your Templates
-
- {filteredOwnedTemplates.map((template) => renderTemplateCard(template))}
-
- Starred Templates
-
- {filteredStarredTemplates.map((template) => renderTemplateCard(template))}
-
-
- {(activeTab === 'gallery' ? galleryTemplates : pendingTemplates).length === 0 ? (
-
- )}
+ filteredTemplates.map((template) => (
+
-
- ) : (
- (activeTab === 'gallery' ? galleryTemplates : pendingTemplates).map((template) =>
- renderTemplateCard(template)
- )
- )}
-
-
- - {searchQuery - ? 'No templates found' - : activeTab === 'pending' - ? 'No pending templates' - : 'No templates available'} -
-- {searchQuery - ? 'Try a different search term' - : activeTab === 'pending' - ? 'New submissions will appear here' - : 'Templates will appear once approved'} -
-
{existingTemplate && (
-
-
-
- Template Connected
+
+
+
) : (
@@ -432,7 +433,7 @@ export function TemplateDeploy({ workflowId, onDeploymentComplete }: TemplateDep
)}
/>
-
+
+ Template Connected
+
{existingTemplate.status === 'pending' && (
-
+
Under Review
-
+
)}
{existingTemplate.status === 'approved' && existingTemplate.views > 0 && (
-
+
• {existingTemplate.views} views
{existingTemplate.stars > 0 && ` • ${existingTemplate.stars} stars`}
@@ -294,11 +297,10 @@ export function TemplateDeploy({ workflowId, onDeploymentComplete }: TemplateDep
)}
@@ -362,8 +364,6 @@ export function TemplateDeploy({ workflowId, onDeploymentComplete }: TemplateDep
+
{existingTemplate && (