improvement: blocks, preview, avatars

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx

@@ -334,7 +334,6 @@ export function GeneralDeploy({
                     }}
                     onPaneClick={() => setExpandedSelectedBlockId(null)}
                     selectedBlockId={expandedSelectedBlockId}
-                    lightweight
                   />
                 </div>
                 {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/connections/connections.tsx

@@ -1,2 +1 @@
 export { ActionBar } from './action-bar/action-bar'
-export { Connections } from './connections/connections'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/index.ts

@@ -9,10 +9,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import {
-  ActionBar,
-  Connections,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components'
 import {
   useBlockProperties,
   useChildWorkflow,
@@ -934,8 +931,6 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
         )}
 
-        {shouldShowDefaultHandles && <Connections blockId={id} />}
-
         {shouldShowDefaultHandles && (
           <Handle
             type='target'

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

@@ -1156,11 +1156,6 @@ function BlockDetailsSidebarContent({
         <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
           {block.name || blockConfig.name}
         </span>
-        {block.enabled === false && (
-          <Badge variant='red' size='sm'>
-            Disabled
-          </Badge>
-        )}
         {onClose && (
           <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
             <X className='h-[14px] w-[14px]' />

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx

@@ -181,17 +181,18 @@ interface FitViewOnChangeProps {
  */
 function FitViewOnChange({ nodeIds, fitPadding }: FitViewOnChangeProps) {
   const { fitView } = useReactFlow()
-  const hasFittedRef = useRef(false)
+  const lastNodeIdsRef = useRef<string | null>(null)
 
   useEffect(() => {
-    if (nodeIds.length > 0 && !hasFittedRef.current) {
-      hasFittedRef.current = true
-      // Small delay to ensure nodes are rendered before fitting
-      const timeoutId = setTimeout(() => {
-        fitView({ padding: fitPadding, duration: 200 })
-      }, 50)
-      return () => clearTimeout(timeoutId)
-    }
+    if (!nodeIds.length) return
+    const shouldFit = lastNodeIdsRef.current !== nodeIds
+    if (!shouldFit) return
+    lastNodeIdsRef.current = nodeIds
+
+    const timeoutId = setTimeout(() => {
+      fitView({ padding: fitPadding, duration: 200 })
+    }, 50)
+    return () => clearTimeout(timeoutId)
   }, [nodeIds, fitPadding, fitView])
 
   return null

apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx

@@ -342,7 +342,7 @@ export function FolderItem({
             spellCheck='false'
           />
         ) : (
-          <>
+          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
             <span
               className='min-w-0 flex-1 truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
               onDoubleClick={handleDoubleClick}
@@ -357,7 +357,7 @@ export function FolderItem({
             >
               <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
             </button>
-          </>
+          </div>
         )}
       </div>
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { type CSSProperties, useEffect, useMemo } from 'react'
+import { type CSSProperties, useMemo } from 'react'
 import { Avatar, AvatarFallback, AvatarImage, Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getUserColor } from '@/lib/workspaces/colors'
@@ -19,11 +19,6 @@ const AVATAR_CONFIG = {
 
 interface AvatarsProps {
   workflowId: string
-  /**
-   * Callback fired when the presence visibility changes.
-   * Used by parent components to adjust layout (e.g., text truncation spacing).
-   */
-  onPresenceChange?: (hasAvatars: boolean) => void
 }
 
 interface PresenceUser {
@@ -85,7 +80,7 @@ function UserAvatar({ user, index }: UserAvatarProps) {
  * @param props - Component props
  * @returns Avatar stack for workflow presence
  */
-export function Avatars({ workflowId, onPresenceChange }: AvatarsProps) {
+export function Avatars({ workflowId }: AvatarsProps) {
   const { presenceUsers, currentWorkflowId } = useSocket()
   const { data: session } = useSession()
   const currentUserId = session?.user?.id
@@ -127,19 +122,12 @@ export function Avatars({ workflowId, onPresenceChange }: AvatarsProps) {
     return { visibleUsers: visible, overflowCount: overflow }
   }, [workflowUsers, maxVisible])
 
-  useEffect(() => {
-    const hasAnyAvatars = visibleUsers.length > 0
-    if (typeof onPresenceChange === 'function') {
-      onPresenceChange(hasAnyAvatars)
-    }
-  }, [visibleUsers, onPresenceChange])
-
   if (visibleUsers.length === 0) {
     return null
   }
 
   return (
-    <div className='-space-x-1 flex items-center'>
+    <div className='-space-x-1 flex flex-shrink-0 items-center'>
       {overflowCount > 0 && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx

@@ -64,8 +64,6 @@ export function WorkflowItem({
   const [deleteModalNames, setDeleteModalNames] = useState<string | string[]>('')
   const [canDeleteCaptured, setCanDeleteCaptured] = useState(true)
 
-  const [hasAvatars, setHasAvatars] = useState(false)
-
   const capturedSelectionRef = useRef<{
     workflowIds: string[]
     workflowNames: string | string[]
@@ -319,48 +317,50 @@ export function WorkflowItem({
           className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px]'
           style={{ backgroundColor: workflow.color }}
         />
-        <div className={clsx('min-w-0 flex-1', hasAvatars && 'pr-[8px]')}>
-          {isEditing ? (
-            <input
-              ref={inputRef}
-              value={editValue}
-              onChange={(e) => setEditValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onBlur={handleInputBlur}
-              className={clsx(
-                'w-full border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-                active
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-              )}
-              maxLength={100}
-              disabled={isRenaming}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-              }}
-              autoComplete='off'
-              autoCorrect='off'
-              autoCapitalize='off'
-              spellCheck='false'
-            />
-          ) : (
-            <div
-              className={clsx(
-                'truncate font-medium',
-                active
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-              )}
-              onDoubleClick={handleDoubleClick}
-            >
-              {workflow.name}
-            </div>
-          )}
+        <div className='min-w-0 flex-1'>
+          <div className='flex min-w-0 items-center gap-[8px]'>
+            {isEditing ? (
+              <input
+                ref={inputRef}
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={handleInputBlur}
+                className={clsx(
+                  'w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+                  active
+                    ? 'text-[var(--text-primary)]'
+                    : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+                )}
+                maxLength={100}
+                disabled={isRenaming}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
+                spellCheck='false'
+              />
+            ) : (
+              <div
+                className={clsx(
+                  'min-w-0 flex-1 truncate font-medium',
+                  active
+                    ? 'text-[var(--text-primary)]'
+                    : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+                )}
+                onDoubleClick={handleDoubleClick}
+              >
+                {workflow.name}
+              </div>
+            )}
+            {!isEditing && <Avatars workflowId={workflow.id} />}
+          </div>
         </div>
         {!isEditing && (
           <>
-            <Avatars workflowId={workflow.id} onPresenceChange={setHasAvatars} />
             <button
               type='button'
               onPointerDown={handleMorePointerDown}