feat(sidebar): context menu for nav items in sidebar, toolbar blocks, added missing docs for various blocks and triggers (#2754)

* feat(sidebar): context menu for nav items in sidebar

* added toolbar context menu, fixed incorrect access pattern in old context menus and added docs for missing blocks

* fixed links

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx

@@ -95,7 +95,12 @@ export function ChunkContextMenu({
   }
 
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      variant='secondary'
+      size='sm'
+    >
       <PopoverAnchor
         style={{
           position: 'fixed',

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/document-context-menu/document-context-menu.tsx

@@ -100,7 +100,12 @@ export function DocumentContextMenu({
   }
 
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      variant='secondary'
+      size='sm'
+    >
       <PopoverAnchor
         style={{
           position: 'fixed',

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx

@@ -99,7 +99,12 @@ export function KnowledgeBaseContextMenu({
   disableDelete = false,
 }: KnowledgeBaseContextMenuProps) {
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      variant='secondary'
+      size='sm'
+    >
       <PopoverAnchor
         style={{
           position: 'fixed',

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-list-context-menu/knowledge-list-context-menu.tsx

@@ -43,7 +43,12 @@ export function KnowledgeListContextMenu({
   disableAdd = false,
 }: KnowledgeListContextMenuProps) {
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      variant='secondary'
+      size='sm'
+    >
       <PopoverAnchor
         style={{
           position: 'fixed',

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/components/snapshot-context-menu.tsx

@@ -44,7 +44,7 @@ export function SnapshotContextMenu({
   return createPortal(
     <Popover
       open={isOpen}
-      onOpenChange={onClose}
+      onOpenChange={(open) => !open && onClose()}
       variant='secondary'
       size='sm'
       colorScheme='inverted'

apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx

@@ -47,7 +47,12 @@ export function LogRowContextMenu({
   const hasWorkflow = Boolean(log?.workflow?.id || log?.workflowId)
 
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      variant='secondary'
+      size='sm'
+    >
       <PopoverAnchor
         style={{
           position: 'fixed',

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx

@@ -56,7 +56,7 @@ export function BlockContextMenu({
   return (
     <Popover
       open={isOpen}
-      onOpenChange={onClose}
+      onOpenChange={(open) => !open && onClose()}
       variant='secondary'
       size='sm'
       colorScheme='inverted'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/pane-context-menu.tsx

@@ -38,7 +38,7 @@ export function PaneContextMenu({
   return (
     <Popover
       open={isOpen}
-      onOpenChange={onClose}
+      onOpenChange={(open) => !open && onClose()}
       variant='secondary'
       size='sm'
       colorScheme='inverted'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx

@@ -673,23 +673,23 @@ function WorkflowInputMapperSyncWrapper({
 
   if (!workflowId) {
     return (
-      <div className='rounded-md border border-gray-600/50 bg-gray-900/20 p-4 text-center text-gray-400 text-sm'>
+      <div className='rounded-md border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] p-4 text-center text-[var(--text-muted)] text-sm'>
         Select a workflow to configure its inputs
       </div>
     )
   }
 
   if (isLoading) {
     return (
-      <div className='flex items-center justify-center rounded-md border border-gray-600/50 bg-gray-900/20 p-8'>
-        <Loader2 className='h-5 w-5 animate-spin text-gray-400' />
+      <div className='flex items-center justify-center rounded-md border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] p-8'>
+        <Loader2 className='h-5 w-5 animate-spin text-[var(--text-muted)]' />
       </div>
     )
   }
 
   if (inputFields.length === 0) {
     return (
-      <div className='rounded-md border border-gray-600/50 bg-gray-900/20 p-4 text-center text-gray-400 text-sm'>
+      <div className='rounded-md border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] p-4 text-center text-[var(--text-muted)] text-sm'>
         This workflow has no custom input fields
       </div>
     )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { BookOpen, Check, ChevronUp, Pencil, RepeatIcon, Settings, SplitIcon } from 'lucide-react'
+import { BookOpen, Check, ChevronUp, Pencil, Settings } from 'lucide-react'
 import { Button, Tooltip } from '@/components/emcn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
@@ -15,6 +15,8 @@ import {
   useEditorBlockProperties,
   useEditorSubblockLayout,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks'
+import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
+import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getSubBlockStableKey } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { getBlock } from '@/blocks/registry'
@@ -58,9 +60,8 @@ export function Editor() {
   const isSubflow =
     currentBlock && (currentBlock.type === 'loop' || currentBlock.type === 'parallel')
 
-  // Get subflow display properties
-  const subflowIcon = isSubflow && currentBlock.type === 'loop' ? RepeatIcon : SplitIcon
-  const subflowBgColor = isSubflow && currentBlock.type === 'loop' ? '#2FB3FF' : '#FEE12B'
+  // Get subflow display properties from configs
+  const subflowConfig = isSubflow ? (currentBlock.type === 'loop' ? LoopTool : ParallelTool) : null
 
   // Refs for resize functionality
   const subBlocksRef = useRef<HTMLDivElement>(null)
@@ -176,8 +177,9 @@ export function Editor() {
    * Handles opening documentation link in a new secure tab.
    */
   const handleOpenDocs = () => {
-    if (blockConfig?.docsLink) {
-      window.open(blockConfig.docsLink, '_blank', 'noopener,noreferrer')
+    const docsLink = isSubflow ? subflowConfig?.docsLink : blockConfig?.docsLink
+    if (docsLink) {
+      window.open(docsLink, '_blank', 'noopener,noreferrer')
     }
   }
 
@@ -195,10 +197,10 @@ export function Editor() {
           {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
             <div
               className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px]'
-              style={{ background: isSubflow ? subflowBgColor : blockConfig?.bgColor }}
+              style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}
             >
               <IconComponent
-                icon={isSubflow ? subflowIcon : blockConfig?.icon}
+                icon={isSubflow ? subflowConfig?.icon : blockConfig?.icon}
                 className='h-[12px] w-[12px] text-[var(--white)]'
               />
             </div>
@@ -295,7 +297,7 @@ export function Editor() {
               </Tooltip.Content>
             </Tooltip.Root>
           )}
-          {currentBlock && !isSubflow && blockConfig?.docsLink && (
+          {currentBlock && (isSubflow ? subflowConfig?.docsLink : blockConfig?.docsLink) && (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button