improvement: marketplace and sidebar

Author: emir-karabeg

sim/app/api/workflows/sync/route.ts

@@ -8,6 +8,12 @@ import { workflow } from '@/db/schema'
 
 const logger = createLogger('WorkflowAPI')
 
+// Define marketplace data schema
+const MarketplaceDataSchema = z.object({
+  id: z.string(),
+  status: z.enum(['owner', 'temp', 'star'])
+}).nullable().optional()
+
 // Schema for workflow data
 const WorkflowStateSchema = z.object({
   blocks: z.record(z.any()),
@@ -20,6 +26,7 @@ const WorkflowStateSchema = z.object({
     .optional()
     .transform((val) => (typeof val === 'string' ? new Date(val) : val)),
   isPublished: z.boolean().optional(),
+  marketplaceData: MarketplaceDataSchema
 })
 
 const WorkflowSchema = z.object({
@@ -28,6 +35,7 @@ const WorkflowSchema = z.object({
   description: z.string().optional(),
   color: z.string().optional(),
   state: WorkflowStateSchema,
+  marketplaceData: MarketplaceDataSchema
 })
 
 const SyncPayloadSchema = z.object({
@@ -114,6 +122,12 @@ export async function POST(req: NextRequest) {
         processedIds.add(id)
         const dbWorkflow = dbWorkflowMap.get(id)
 
+        // Handle legacy published workflows migration
+        // If client workflow has isPublished but no marketplaceData, create marketplaceData with owner status
+        if (clientWorkflow.state.isPublished && !clientWorkflow.marketplaceData) {
+          clientWorkflow.marketplaceData = { id: clientWorkflow.id, status: 'owner' }
+        }
+
         if (!dbWorkflow) {
           // New workflow - create
           operations.push(
@@ -124,6 +138,7 @@ export async function POST(req: NextRequest) {
               description: clientWorkflow.description,
               color: clientWorkflow.color,
               state: clientWorkflow.state,
+              marketplaceData: clientWorkflow.marketplaceData || null,
               lastSynced: now,
               createdAt: now,
               updatedAt: now,
@@ -135,7 +150,8 @@ export async function POST(req: NextRequest) {
             JSON.stringify(dbWorkflow.state) !== JSON.stringify(clientWorkflow.state) ||
             dbWorkflow.name !== clientWorkflow.name ||
             dbWorkflow.description !== clientWorkflow.description ||
-            dbWorkflow.color !== clientWorkflow.color
+            dbWorkflow.color !== clientWorkflow.color ||
+            JSON.stringify(dbWorkflow.marketplaceData) !== JSON.stringify(clientWorkflow.marketplaceData)
 
           if (needsUpdate) {
             operations.push(
@@ -146,6 +162,7 @@ export async function POST(req: NextRequest) {
                   description: clientWorkflow.description,
                   color: clientWorkflow.color,
                   state: clientWorkflow.state,
+                  marketplaceData: clientWorkflow.marketplaceData || null,
                   lastSynced: now,
                   updatedAt: now,
                 })

sim/app/w/[id]/components/control-bar/components/marketplace-modal/marketplace-modal.tsx

@@ -53,7 +53,6 @@ import { cn } from '@/lib/utils'
 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,
@@ -144,8 +143,24 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
   const [marketplaceInfo, setMarketplaceInfo] = useState<MarketplaceInfo | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const { addNotification } = useNotificationStore()
-  const { activeWorkflowId, workflows } = useWorkflowRegistry()
-  const { isPublished, setPublishStatus } = useWorkflowStore()
+  const { activeWorkflowId, workflows, updateWorkflow } = useWorkflowRegistry()
+
+  // Get marketplace data from the registry
+  const getMarketplaceData = () => {
+    if (!activeWorkflowId || !workflows[activeWorkflowId]) return null
+    return workflows[activeWorkflowId].marketplaceData
+  }
+
+  // Check if workflow is published to marketplace
+  const isPublished = () => {
+    return !!getMarketplaceData()
+  }
+
+  // Check if the current user is the owner of the published workflow
+  const isOwner = () => {
+    const marketplaceData = getMarketplaceData()
+    return marketplaceData?.status === 'owner'
+  }
 
   // Initialize form with react-hook-form
   const form = useForm<MarketplaceFormValues>({
@@ -161,7 +176,7 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
   // Fetch marketplace information when the modal opens and the workflow is published
   useEffect(() => {
     async function fetchMarketplaceInfo() {
-      if (!open || !activeWorkflowId || !isPublished) {
+      if (!open || !activeWorkflowId || !isPublished()) {
         setMarketplaceInfo(null)
         return
       }
@@ -185,16 +200,16 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
     }
 
     fetchMarketplaceInfo()
-  }, [open, activeWorkflowId, isPublished, addNotification])
+  }, [open, activeWorkflowId, addNotification])
 
   // Update form values when the active workflow changes or modal opens
   useEffect(() => {
-    if (open && activeWorkflowId && workflows[activeWorkflowId] && !isPublished) {
+    if (open && activeWorkflowId && workflows[activeWorkflowId] && !isPublished()) {
       const workflow = workflows[activeWorkflowId]
       form.setValue('name', workflow.name)
       form.setValue('description', workflow.description || '')
     }
-  }, [open, activeWorkflowId, workflows, form, isPublished])
+  }, [open, activeWorkflowId, workflows, form])
 
   // Listen for the custom event to open the marketplace modal
   useEffect(() => {
@@ -255,8 +270,10 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
         throw new Error(errorData.error || 'Failed to publish workflow')
       }
 
-      // Update the publish status with the current date
-      setPublishStatus(true)
+      // Update the marketplace data in the workflow registry
+      updateWorkflow(activeWorkflowId, {
+        marketplaceData: { id: activeWorkflowId, status: 'owner' },
+      })
 
       // Add a marketplace notification with detailed information
       addNotification(
@@ -293,8 +310,10 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
         throw new Error(errorData.error || 'Failed to unpublish workflow')
       }
 
-      // Update the publish status
-      setPublishStatus(false)
+      // Remove the marketplace data from the workflow registry
+      updateWorkflow(activeWorkflowId, {
+        marketplaceData: null,
+      })
 
       // Add a notification
       addNotification(
@@ -402,26 +421,20 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
           </div>
         </div>
 
-        {/* Action buttons */}
-        <div className="flex justify-end gap-2 pt-2">
-          <Button
-            type="button"
-            variant="destructive"
-            onClick={handleUnpublish}
-            disabled={isUnpublishing}
-            className="gap-2"
-          >
-            <Trash className="h-4 w-4" />
-            {isUnpublishing ? (
-              <span className="flex items-center gap-1.5">
-                <span className="h-2 w-2 animate-pulse rounded-full bg-background"></span>
-                Unpublishing...
-              </span>
-            ) : (
-              'Unpublish'
-            )}
-          </Button>
-        </div>
+        {/* Action buttons - Only show unpublish if owner */}
+        {isOwner() && (
+          <div className="flex justify-end gap-2 pt-2">
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={handleUnpublish}
+              disabled={isUnpublishing}
+              className="gap-2"
+            >
+              {isUnpublishing ? 'Unpublishing...' : 'Unpublish'}
+            </Button>
+          </div>
+        )}
       </div>
     )
   }
@@ -551,7 +564,7 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
         <DialogHeader className="px-6 py-4 border-b">
           <div className="flex items-center justify-between">
             <DialogTitle className="text-lg font-medium">
-              {isPublished ? 'Marketplace Information' : 'Publish to Marketplace'}
+              {isPublished() ? 'Marketplace Information' : 'Publish to Marketplace'}
             </DialogTitle>
             <Button
               variant="ghost"
@@ -566,7 +579,7 @@ export function MarketplaceModal({ open, onOpenChange }: MarketplaceModalProps)
         </DialogHeader>
 
         <div className="pt-4 px-6 pb-6 overflow-y-auto">
-          {isPublished ? renderMarketplaceInfo() : renderPublishForm()}
+          {isPublished() ? renderMarketplaceInfo() : renderPublishForm()}
         </div>
       </DialogContent>
     </Dialog>

sim/app/w/[id]/components/control-bar/control-bar.tsx

@@ -65,15 +65,8 @@ export function ControlBar() {
   // Store hooks
   const { notifications, getWorkflowNotifications, addNotification, showNotification } =
     useNotificationStore()
-  const {
-    history,
-    revertToHistoryState,
-    lastSaved,
-    isDeployed,
-    isPublished,
-    setDeploymentStatus,
-    setPublishStatus,
-  } = useWorkflowStore()
+  const { history, revertToHistoryState, lastSaved, isDeployed, setDeploymentStatus } =
+    useWorkflowStore()
   const { workflows, updateWorkflow, activeWorkflowId, removeWorkflow } = useWorkflowRegistry()
   const { isExecuting, handleRunWorkflow } = useWorkflowExecution()
 
@@ -112,6 +105,24 @@ export function ControlBar() {
     ? getWorkflowNotifications(activeWorkflowId)
     : notifications // Show all if no workflow is active
 
+  // Get the marketplace data from the workflow registry if available
+  const getMarketplaceData = () => {
+    if (!activeWorkflowId || !workflows[activeWorkflowId]) return null
+    return workflows[activeWorkflowId].marketplaceData
+  }
+
+  // Check if the current workflow is published to marketplace
+  const isPublishedToMarketplace = () => {
+    const marketplaceData = getMarketplaceData()
+    return !!marketplaceData
+  }
+
+  // Check if the current user is the owner of the published workflow
+  const isWorkflowOwner = () => {
+    const marketplaceData = getMarketplaceData()
+    return marketplaceData?.status === 'owner'
+  }
+
   // Client-side only rendering for the timestamp
   useEffect(() => {
     setMounted(true)
@@ -149,14 +160,13 @@ export function ControlBar() {
             data.isDeployed,
             data.deployedAt ? new Date(data.deployedAt) : undefined
           )
-          setPublishStatus(data.isPublished)
         }
       } catch (error) {
         logger.error('Failed to check workflow status:', { error })
       }
     }
     checkStatus()
-  }, [activeWorkflowId, setDeploymentStatus, setPublishStatus])
+  }, [activeWorkflowId, setDeploymentStatus])
 
   /**
    * Workflow name handlers
@@ -364,6 +374,7 @@ export function ControlBar() {
     if (!activeWorkflowId) return
 
     // If already published, show marketplace modal with info instead of notifications
+    const isPublished = isPublishedToMarketplace()
     if (isPublished) {
       setIsMarketplaceModalOpen(true)
       return
@@ -488,7 +499,10 @@ export function ControlBar() {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction onClick={handleDeleteWorkflow} className="bg-red-600 hover:bg-red-700">
+          <AlertDialogAction
+            onClick={handleDeleteWorkflow}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
             Delete
           </AlertDialogAction>
         </AlertDialogFooter>
@@ -636,33 +650,37 @@ export function ControlBar() {
   /**
    * Render publish button
    */
-  const renderPublishButton = () => (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handlePublishWorkflow}
-          disabled={isPublishing}
-          className={cn('hover:text-[#802FFF]', isPublished && 'text-[#802FFF]')}
-        >
-          {isPublishing ? (
-            <Loader2 className="h-5 w-5 animate-spin" />
-          ) : (
-            <Store className="h-5 w-5" />
-          )}
-          <span className="sr-only">Publish to Marketplace</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        {isPublishing
-          ? 'Publishing...'
-          : isPublished
-            ? 'Published to Marketplace'
-            : 'Publish to Marketplace'}
-      </TooltipContent>
-    </Tooltip>
-  )
+  const renderPublishButton = () => {
+    const isPublished = isPublishedToMarketplace()
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handlePublishWorkflow}
+            disabled={isPublishing}
+            className={cn('hover:text-[#802FFF]', isPublished && 'text-[#802FFF]')}
+          >
+            {isPublishing ? (
+              <Loader2 className="h-5 w-5 animate-spin" />
+            ) : (
+              <Store className="h-5 w-5" />
+            )}
+            <span className="sr-only">Publish to Marketplace</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {isPublishing
+            ? 'Publishing...'
+            : isPublished
+              ? 'Published to Marketplace'
+              : 'Publish to Marketplace'}
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
 
   /**
    * Render debug mode controls