Skip to content

Commit e37b01b

Browse files
emir-karabegemir-karabeg
authored
improvement: code subblock, action bar, connections (#2024)
* improvement: action bar, connections * fix: code block draggable resize
1 parent 7e3e38a commit e37b01b

File tree

4 files changed

+27
-94
lines changed

4 files changed

+27
-94
lines changed

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

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ export const ActionBar = memo(
7474
return (
7575
<div
7676
className={cn(
77-
'-right-20 absolute top-0',
78-
'flex flex-col items-center',
77+
'-top-[46px] absolute right-0',
78+
'flex flex-row items-center',
7979
'opacity-0 transition-opacity duration-200 group-hover:opacity-100',
80-
'gap-[6px] rounded-[10px] bg-[var(--surface-3)] p-[6px]'
80+
'gap-[5px] rounded-[10px] bg-[var(--surface-3)] p-[5px]'
8181
)}
8282
>
8383
<Tooltip.Root>
@@ -90,17 +90,17 @@ export const ActionBar = memo(
9090
collaborativeToggleBlockEnabled(blockId)
9191
}
9292
}}
93-
className='h-[30px] w-[30px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
93+
className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
9494
disabled={disabled}
9595
>
9696
{isEnabled ? (
97-
<Circle className='h-[14px] w-[14px]' />
97+
<Circle className='h-[11px] w-[11px]' />
9898
) : (
99-
<CircleOff className='h-[14px] w-[14px]' />
99+
<CircleOff className='h-[11px] w-[11px]' />
100100
)}
101101
</Button>
102102
</Tooltip.Trigger>
103-
<Tooltip.Content side='right'>
103+
<Tooltip.Content side='top'>
104104
{getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
105105
</Tooltip.Content>
106106
</Tooltip.Root>
@@ -116,13 +116,13 @@ export const ActionBar = memo(
116116
collaborativeDuplicateBlock(blockId)
117117
}
118118
}}
119-
className='h-[30px] w-[30px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
119+
className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
120120
disabled={disabled}
121121
>
122-
<Duplicate className='h-[14px] w-[14px]' />
122+
<Duplicate className='h-[11px] w-[11px]' />
123123
</Button>
124124
</Tooltip.Trigger>
125-
<Tooltip.Content side='right'>{getTooltipMessage('Duplicate Block')}</Tooltip.Content>
125+
<Tooltip.Content side='top'>{getTooltipMessage('Duplicate Block')}</Tooltip.Content>
126126
</Tooltip.Root>
127127
)}
128128

@@ -139,15 +139,13 @@ export const ActionBar = memo(
139139
)
140140
}
141141
}}
142-
className='h-[30px] w-[30px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
142+
className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
143143
disabled={disabled || !userPermissions.canEdit}
144144
>
145-
<LogOut className='h-[14px] w-[14px]' />
145+
<LogOut className='h-[11px] w-[11px]' />
146146
</Button>
147147
</Tooltip.Trigger>
148-
<Tooltip.Content side='right'>
149-
{getTooltipMessage('Remove From Subflow')}
150-
</Tooltip.Content>
148+
<Tooltip.Content side='top'>{getTooltipMessage('Remove from Subflow')}</Tooltip.Content>
151149
</Tooltip.Root>
152150
)}
153151

@@ -161,17 +159,17 @@ export const ActionBar = memo(
161159
collaborativeToggleBlockHandles(blockId)
162160
}
163161
}}
164-
className='h-[30px] w-[30px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
162+
className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
165163
disabled={disabled}
166164
>
167165
{horizontalHandles ? (
168-
<ArrowLeftRight className='h-[14px] w-[14px]' />
166+
<ArrowLeftRight className='h-[11px] w-[11px]' />
169167
) : (
170-
<ArrowUpDown className='h-[14px] w-[14px]' />
168+
<ArrowUpDown className='h-[11px] w-[11px]' />
171169
)}
172170
</Button>
173171
</Tooltip.Trigger>
174-
<Tooltip.Content side='right'>
172+
<Tooltip.Content side='top'>
175173
{getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
176174
</Tooltip.Content>
177175
</Tooltip.Root>
@@ -186,13 +184,13 @@ export const ActionBar = memo(
186184
collaborativeRemoveBlock(blockId)
187185
}
188186
}}
189-
className='h-[30px] w-[30px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)] '
187+
className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)] '
190188
disabled={disabled}
191189
>
192-
<Trash2 className='h-[14px] w-[14px]' />
190+
<Trash2 className='h-[11px] w-[11px]' />
193191
</Button>
194192
</Tooltip.Trigger>
195-
<Tooltip.Content side='right'>{getTooltipMessage('Delete Block')}</Tooltip.Content>
193+
<Tooltip.Content side='top'>{getTooltipMessage('Delete Block')}</Tooltip.Content>
196194
</Tooltip.Root>
197195
</div>
198196
)

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

Lines changed: 5 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,23 @@
1-
import { RepeatIcon, SplitIcon } from 'lucide-react'
2-
import {
3-
type ConnectedBlock,
4-
useBlockConnections,
5-
} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/hooks/use-block-connections'
6-
import { getBlock } from '@/blocks'
1+
import { useBlockConnections } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/hooks/use-block-connections'
72

83
interface ConnectionsProps {
94
blockId: string
10-
horizontalHandles: boolean
115
}
126

137
/**
14-
* Retrieves the icon component for a given connection block
15-
* @param connection - The connected block to get the icon for
16-
* @returns The icon component or null if not found
8+
* Displays incoming connections at the bottom left of the workflow block
179
*/
18-
function getConnectionIcon(connection: ConnectedBlock) {
19-
const blockConfig = getBlock(connection.type)
20-
21-
if (blockConfig?.icon) {
22-
return blockConfig.icon
23-
}
24-
25-
if (connection.type === 'loop') {
26-
return RepeatIcon
27-
}
28-
29-
if (connection.type === 'parallel') {
30-
return SplitIcon
31-
}
32-
33-
return null
34-
}
35-
36-
/**
37-
* Displays incoming connections as compact floating text above the workflow block
38-
*/
39-
export function Connections({ blockId, horizontalHandles }: ConnectionsProps) {
10+
export function Connections({ blockId }: ConnectionsProps) {
4011
const { incomingConnections, hasIncomingConnections } = useBlockConnections(blockId)
4112

4213
if (!hasIncomingConnections) return null
4314

4415
const connectionCount = incomingConnections.length
45-
const maxVisibleIcons = 4
46-
const visibleConnections = incomingConnections.slice(0, maxVisibleIcons)
47-
const remainingCount = connectionCount - maxVisibleIcons
48-
4916
const connectionText = `${connectionCount} ${connectionCount === 1 ? 'connection' : 'connections'}`
5017

51-
const connectionIcons = (
52-
<>
53-
{visibleConnections.map((connection: ConnectedBlock) => {
54-
const Icon = getConnectionIcon(connection)
55-
if (!Icon) return null
56-
return (
57-
<Icon key={connection.id} className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
58-
)
59-
})}
60-
{remainingCount > 0 && (
61-
<span className='text-[14px] text-[var(--text-tertiary)]'>+{remainingCount}</span>
62-
)}
63-
</>
64-
)
65-
66-
if (!horizontalHandles) {
67-
return (
68-
<div className='-translate-x-full -translate-y-1/2 pointer-events-none absolute top-1/2 left-0 flex flex-col items-end gap-[8px] pr-[8px] opacity-0 transition-opacity group-hover:opacity-100'>
69-
<span className='text-[14px] text-[var(--text-tertiary)] leading-[14px]'>
70-
{connectionText}
71-
</span>
72-
<div className='flex items-center justify-end gap-[4px]'>{connectionIcons}</div>
73-
</div>
74-
)
75-
}
76-
7718
return (
78-
<div className='pointer-events-none absolute bottom-full left-0 ml-[8px] flex items-center gap-[8px] pb-[8px] opacity-0 transition-opacity group-hover:opacity-100'>
79-
<span className='text-[14px] text-[var(--text-tertiary)]'>{connectionText}</span>
80-
<div className='h-[14px] w-[1px] bg-[var(--text-tertiary)]' />
81-
<div className='flex items-center gap-[4px]'>{connectionIcons}</div>
19+
<div className='pointer-events-none absolute top-full left-0 ml-[8px] flex items-center gap-[8px] pt-[8px] opacity-0 transition-opacity group-hover:opacity-100'>
20+
<span className='text-[12px] text-[var(--text-tertiary)]'>{connectionText}</span>
8221
</div>
8322
)
8423
}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -723,9 +723,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
723723

724724
<ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
725725

726-
{shouldShowDefaultHandles && (
727-
<Connections blockId={id} horizontalHandles={horizontalHandles} />
728-
)}
726+
{shouldShowDefaultHandles && <Connections blockId={id} />}
729727

730728
{shouldShowDefaultHandles && (
731729
<Handle

‎apps/sim/components/emcn/components/code/code.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,9 +81,7 @@ function Container({
8181
'bg-[#1F1F1F] font-medium font-mono text-sm transition-colors',
8282
'dark:border-[var(--border-strong)]',
8383
// Overflow handling for long content
84-
'overflow-x-auto',
85-
// Vertical resize handle
86-
'resize-y overflow-y-auto',
84+
'overflow-x-auto overflow-y-auto',
8785
// Streaming state
8886
isStreaming && 'streaming-effect',
8987
className

0 commit comments

Comments
 (0)