feat(marketplace): load workflows into marketplace

emir-karabeg · emir-karabeg · commit 31012fcaeb56 · 2025-03-23T17:57:15.000-07:00
diff --git a/sim/app/api/marketplace/[id]/state/route.ts b/sim/app/api/marketplace/[id]/state/route.ts
@@ -0,0 +1,56 @@
+import { NextRequest } from 'next/server'
+import { eq, sql } from 'drizzle-orm'
+import { createLogger } from '@/lib/logs/console-logger'
+import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/utils'
+import { db } from '@/db'
+import * as schema from '@/db/schema'
+
+const logger = createLogger('MarketplaceStateAPI')
+
+// Cache for 1 hour
+export const revalidate = 3600
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const requestId = crypto.randomUUID().slice(0, 8)
+
+  try {
+    const { id } = await params
+
+    // Fetch marketplace data to get the state
+    const marketplaceEntry = await db
+      .select({
+        id: schema.marketplace.id,
+        state: schema.marketplace.state,
+      })
+      .from(schema.marketplace)
+      .where(eq(schema.marketplace.workflowId, id))
+      .limit(1)
+      .then((rows) => rows[0])
+
+    if (!marketplaceEntry) {
+      logger.warn(`[${requestId}] No marketplace entry found for workflow: ${id}`)
+      return createErrorResponse('Workflow not found in marketplace', 404)
+    }
+
+    // Increment the view count for this workflow
+    await db
+      .update(schema.marketplace)
+      .set({ 
+        views: sql`${schema.marketplace.views} + 1` 
+      })
+      .where(eq(schema.marketplace.workflowId, id))
+
+    logger.info(`[${requestId}] Retrieved workflow state for marketplace item: ${id}`)
+
+    return createSuccessResponse({
+      id: marketplaceEntry.id,
+      state: marketplaceEntry.state,
+    })
+  } catch (error) {
+    logger.error(
+      `[${requestId}] Error getting workflow state for marketplace item: ${(await params).id}`,
+      error
+    )
+    return createErrorResponse('Failed to get workflow state', 500)
+  }
+} 
diff --git a/sim/app/api/marketplace/featured/route.ts b/sim/app/api/marketplace/featured/route.ts
@@ -0,0 +1,121 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { desc, eq, sql } from 'drizzle-orm'
+import { createLogger } from '@/lib/logs/console-logger'
+import { db } from '@/db'
+import { marketplace } from '@/db/schema'
+import { CATEGORIES } from '@/app/w/marketplace/constants/categories'
+
+const logger = createLogger('MarketplaceFeaturedAPI')
+
+// 1 hour cache
+export const revalidate = 3600
+
+export async function GET(request: NextRequest) {
+  const requestId = crypto.randomUUID().slice(0, 8)
+  
+  try {
+    // Parse query parameters
+    const url = new URL(request.url)
+    const categoryParam = url.searchParams.get('category')
+    const limitParam = url.searchParams.get('limit') || '6'
+    const limit = parseInt(limitParam, 10)
+    
+    const result: {
+      popular: any[]
+      recent: any[]
+      byCategory: Record<string, any[]>
+    } = {
+      popular: [],
+      recent: [],
+      byCategory: {}
+    }
+
+    // Get popular items (most stars)
+    result.popular = await db
+      .select({
+        id: marketplace.id,
+        workflowId: marketplace.workflowId,
+        name: marketplace.name,
+        description: marketplace.description,
+        authorName: marketplace.authorName,
+        stars: marketplace.stars,
+        views: marketplace.views,
+        category: marketplace.category,
+        createdAt: marketplace.createdAt,
+        updatedAt: marketplace.updatedAt,
+      })
+      .from(marketplace)
+      .orderBy(desc(marketplace.stars), desc(marketplace.views))
+      .limit(limit)
+    
+    // Get recent items (most recent first)
+    result.recent = await db
+      .select({
+        id: marketplace.id,
+        workflowId: marketplace.workflowId,
+        name: marketplace.name,
+        description: marketplace.description,
+        authorName: marketplace.authorName,
+        stars: marketplace.stars,
+        views: marketplace.views,
+        category: marketplace.category,
+        createdAt: marketplace.createdAt,
+        updatedAt: marketplace.updatedAt,
+      })
+      .from(marketplace)
+      .orderBy(desc(marketplace.createdAt))
+      .limit(limit)
+    
+    // If a specific category is requested
+    if (categoryParam) {
+      result.byCategory[categoryParam] = await db
+        .select({
+          id: marketplace.id,
+          workflowId: marketplace.workflowId,
+          name: marketplace.name,
+          description: marketplace.description,
+          authorName: marketplace.authorName,
+          stars: marketplace.stars,
+          views: marketplace.views,
+          category: marketplace.category,
+          createdAt: marketplace.createdAt,
+          updatedAt: marketplace.updatedAt,
+        })
+        .from(marketplace)
+        .where(eq(marketplace.category, categoryParam))
+        .orderBy(desc(marketplace.stars), desc(marketplace.views))
+        .limit(limit)
+    } else {
+      // Get items for each category
+      // Using Promise.all for parallel fetching to improve performance
+      await Promise.all(
+        CATEGORIES.map(async (category) => {
+          result.byCategory[category.value] = await db
+            .select({
+              id: marketplace.id,
+              workflowId: marketplace.workflowId,
+              name: marketplace.name,
+              description: marketplace.description,
+              authorName: marketplace.authorName,
+              stars: marketplace.stars,
+              views: marketplace.views,
+              category: marketplace.category,
+              createdAt: marketplace.createdAt,
+              updatedAt: marketplace.updatedAt,
+            })
+            .from(marketplace)
+            .where(eq(marketplace.category, category.value))
+            .orderBy(desc(marketplace.stars), desc(marketplace.views))
+            .limit(limit)
+        })
+      )
+    }
+
+    logger.info(`[${requestId}] Fetched featured marketplace items successfully`)
+    
+    return NextResponse.json(result)
+  } catch (error: any) {
+    logger.error(`[${requestId}] Error fetching marketplace items`, error)
+    return NextResponse.json({ error: error.message }, { status: 500 })
+  }
+} 
diff --git a/sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx b/sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx
@@ -54,6 +54,12 @@ import { useNotificationStore } from '@/stores/notifications/store'
 import { getWorkflowWithValues } from '@/stores/workflows'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+import {
+  CATEGORIES,
+  getCategoryColor,
+  getCategoryIcon,
+  getCategoryLabel,
+} from '@/app/w/marketplace/constants/categories'
 
 const logger = createLogger('MarketplaceModal')
 
@@ -114,41 +120,6 @@ const marketplaceFormSchema = z.object({
 
 type MarketplaceFormValues = z.infer<typeof marketplaceFormSchema>
 
-// Categories for the dropdown with icons
-const CATEGORIES = [
-  //   {
-  //     value: 'project_management',
-  //     label: 'Project Management',
-  //     icon: <ChartBar className="h-4 w-4 mr-2" />,
-  //   },
-  { value: 'data', label: 'Data Analysis', icon: <Database className="h-4 w-4 mr-2" /> },
-  { value: 'marketing', label: 'Marketing', icon: <MailIcon className="h-4 w-4 mr-2" /> },
-  { value: 'sales', label: 'Sales', icon: <Store className="h-4 w-4 mr-2" /> },
-  //   { value: 'productivity', label: 'Productivity', icon: <TimerIcon className="h-4 w-4 mr-2" /> },
-  //   { value: 'content', label: 'Content Creation', icon: <NotebookPen className="h-4 w-4 mr-2" /> },
-  {
-    value: 'customer_service',
-    label: 'Customer Service',
-    icon: <BotMessageSquare className="h-4 w-4 mr-2" />,
-  },
-  { value: 'research', label: 'Research', icon: <Atom className="h-4 w-4 mr-2" /> },
-  { value: 'finance', label: 'Finance', icon: <LineChart className="h-4 w-4 mr-2" /> },
-  { value: 'programming', label: 'Programming', icon: <Code className="h-4 w-4 mr-2" /> },
-  { value: 'other', label: 'Other', icon: <Brain className="h-4 w-4 mr-2" /> },
-]
-
-// Find category label by value
-const getCategoryLabel = (value: string) => {
-  const category = CATEGORIES.find((cat) => cat.value === value)
-  return category ? category.label : value
-}
-
-// Find category icon by value
-const getCategoryIcon = (value: string) => {
-  const category = CATEGORIES.find((cat) => cat.value === value)
-  return category ? category.icon : <Store className="h-4 w-4 mr-2" />
-}
-
 // Tooltip texts
 const TOOLTIPS = {
   category: 'Categorizing your workflow helps users find it more easily.',
@@ -601,25 +572,3 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
     </Dialog>
   )
 }
-
-// Add this helper function after the getCategoryLabel function
-const getCategoryColor = (value: string): string => {
-  switch (value) {
-    case 'data':
-      return '#0ea5e9' // sky-500
-    case 'marketing':
-      return '#f43f5e' // rose-500
-    case 'sales':
-      return '#10b981' // emerald-500
-    case 'customer_service':
-      return '#8b5cf6' // violet-500
-    case 'research':
-      return '#f59e0b' // amber-500
-    case 'finance':
-      return '#14b8a6' // teal-500
-    case 'programming':
-      return '#6366f1' // indigo-500
-    default:
-      return '#7F2FFF' // Brand purple
-  }
-}
diff --git a/sim/app/w/marketplace/components/toolbar/toolbar.tsx b/sim/app/w/marketplace/components/toolbar/toolbar.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react'
 import {
   BotMessageSquare,
+  Clock,
   Code,
   LineChart,
   MailIcon,
@@ -15,7 +16,7 @@ import {
 import { Button } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { mockWorkflows } from '../../marketplace'
+import { CATEGORIES, getCategoryIcon } from '../../constants/categories'
 
 export type MarketplaceCategory = 'popular' | 'programming' | 'marketing' | 'all'
 
@@ -24,21 +25,27 @@ interface ToolbarProps {
   activeSection: string | null
 }
 
-// Map of category icons
-const categoryIcons: Record<string, React.ReactNode> = {
+// Map of special section icons
+const specialIcons: Record<string, React.ReactNode> = {
   popular: <Star className="h-4 w-4 mr-2" />,
-  programming: <Code className="h-4 w-4 mr-2" />,
-  marketing: <MailIcon className="h-4 w-4 mr-2" />,
-  sales: <Store className="h-4 w-4 mr-2" />,
+  recent: <Clock className="h-4 w-4 mr-2" />,
 }
 
 export function Toolbar({ scrollToSection, activeSection }: ToolbarProps) {
   const [categories, setCategories] = useState<string[]>([])
 
-  // Extract all available categories from mockWorkflows
+  // Set categories including special sections
   useEffect(() => {
-    const availableCategories = Object.keys(mockWorkflows)
-    setCategories(availableCategories)
+    // Start with special sections like 'popular' and 'recent'
+    const specialSections = ['popular']
+
+    // Add categories from centralized definitions
+    const categoryValues = CATEGORIES.map((cat) => cat.value)
+
+    // Add 'recent' as the last item
+    const allCategories = [...specialSections, ...categoryValues, 'recent']
+
+    setCategories(allCategories)
   }, [])
 
   return (
@@ -54,7 +61,7 @@ export function Toolbar({ scrollToSection, activeSection }: ToolbarProps) {
             }`}
             onClick={() => scrollToSection(category)}
           >
-            {categoryIcons[category] || <Star className="h-4 w-4 mr-2" />}
+            {specialIcons[category] || getCategoryIcon(category)}
             {category}
           </Button>
         ))}
diff --git a/sim/app/w/marketplace/constants/categories.tsx b/sim/app/w/marketplace/constants/categories.tsx
diff --git a/sim/app/w/marketplace/marketplace.tsx b/sim/app/w/marketplace/marketplace.tsx
