From f5d74c04cb3fc6e66e56e7256300a637f4933bd0 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 13 Aug 2026 12:21:51 -0700 Subject: [PATCH] fix(blocks): give the detail headers the same tile as everything else MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The tile consolidation left the large detail headers on their own treatment, so a block wore one colour on the canvas and another in the header naming it: the preview panel behind the deploy modal and the logs trace detail both painted straight from the catalog `bgColor`, showing Start's catalog blue over a neutral card, and hardcoded `#2FB3FF`/`#FEE12B` for the two subflows. Adds the 18px header slot to `BlockTile` and points all three headers at it — preview panel, trace detail, and the editor header, which had been carrying its own inline copy of the accent rule. `WorkflowTypeIcon` takes an icon class so the accent chip can draw the larger glyph the header uses. --- .../components/trace-view/trace-view.tsx | 16 ++++---- .../panel/components/editor/editor.tsx | 37 ++--------------- .../preview-editor/preview-editor.tsx | 40 ++----------------- apps/sim/blocks/block-tile.tsx | 27 +++++++++++-- .../workflow-block/workflow-block-view.tsx | 17 +++++++- 5 files changed, 53 insertions(+), 84 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx index 80c4fea424f..5670cb048e4 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx @@ -47,7 +47,6 @@ import { } from '@/app/workspace/[workspaceId]/logs/components/log-details/utils' import { BlockTile } from '@/blocks/block-tile' import { isCustomBlockType } from '@/blocks/custom/build-config' -import { getTileIconColorClass } from '@/blocks/icon-color' import { useCodeViewerFeatures } from '@/hooks/use-code-viewer' const DEFAULT_TREE_PANE_WIDTH = 240 @@ -708,14 +707,13 @@ const TraceDetailPane = memo(function TraceDetailPane({ span }: { span: TraceSpa
{!isIterationType(span.type) && ( -
- {BlockIcon && ( - - )} -
+ )}

-/** - * Icon component for rendering block icons. - * - * @param icon - The icon component to render - * @param className - Optional CSS classes - * @returns Rendered icon or null if no icon provided - */ -const IconComponent = ({ icon: Icon, className }: { icon: any; className?: string }) => { - if (!Icon) return null - return -} - /** * Editor panel component. * Provides editor configuration and customization options for the workflow. @@ -107,8 +93,6 @@ export function Editor() { const currentWorkflow = useCurrentWorkflow() const currentBlock = currentBlockId ? currentWorkflow.getBlockById(currentBlockId) : null const blockConfig = currentBlock ? getBlock(currentBlock.type) : null - const typeAccent = getWorkflowTypeAccent(currentBlock?.type ?? '') - const isIntegration = blockConfig != null && !hasBlockAccent(blockConfig.type) const title = currentBlock?.name || 'Editor' const isBlockNameSearchHighlighted = activeSearchTarget?.targetKind === 'block-name' && activeSearchTarget.blockId === currentBlockId @@ -440,21 +424,8 @@ export function Editor() { {/* Header */}
- {(blockConfig || isSubflow) && ( - - - + {currentBlock && (blockConfig || isSubflow) && ( + )} {isRenaming ? ( -} - /** * Configuration for subflow types (loop and parallel) - matches use-subflow-editor.ts */ @@ -1083,20 +1066,13 @@ function PreviewEditorContent({ if (isSubflow) { const isLoop = block.type === 'loop' - const SubflowIcon = isLoop ? Repeat : Split - const subflowBgColor = isLoop ? '#2FB3FF' : '#FEE12B' const subflowName = block.name || (isLoop ? 'Loop' : 'Parallel') return (
{/* Header - styled like subflow header */}
-
- -
+ {subflowName} @@ -1183,17 +1159,7 @@ function PreviewEditorContent({
{/* Header - styled like editor */}
- {block.type !== 'note' && ( -
- -
- )} + {block.type !== 'note' && } {block.name || blockConfig.name} diff --git a/apps/sim/blocks/block-tile.tsx b/apps/sim/blocks/block-tile.tsx index c43c77ac94b..a87523d7944 100644 --- a/apps/sim/blocks/block-tile.tsx +++ b/apps/sim/blocks/block-tile.tsx @@ -6,12 +6,23 @@ import { WorkflowTypeIcon } from '@sim/workflow-renderer' import { getBlockTileColor, getBlockTileIcon, hasBlockAccent } from '@/blocks/accent' import { getTileIconColorClass } from '@/blocks/icon-color' -/** Slot sizes the tile ships in: the canvas 16px chip, or 14px for dense rows. */ +/** + * Slot sizes the tile ships in: the 18px detail header, the canvas 16px chip, + * or 14px for dense rows. + */ const TILE_SIZE_CLASS = { + lg: 'size-[18px]', md: 'size-[16px]', sm: 'size-[14px]', } as const +/** Icon drawn inside each slot. Only the header tile takes the larger glyph. */ +const TILE_ICON_SIZE_CLASS = { + lg: 'size-[12px]', + md: 'size-[10px]', + sm: 'size-[10px]', +} as const + export interface BlockTileProps extends Omit, 'children' | 'style'> { /** * Block the tile represents; decides whether it takes the canvas role accent. @@ -54,9 +65,18 @@ export function BlockTile({ }: BlockTileProps) { const Icon = icon ?? (blockType ? getBlockTileIcon(blockType) : undefined) const sizeClass = cn(TILE_SIZE_CLASS[size], className) + const iconSizeClass = TILE_ICON_SIZE_CLASS[size] if (blockType && Icon && hasBlockAccent(blockType)) { - return + return ( + + ) } const fill = bgColor ?? (blockType ? getBlockTileColor(blockType) : undefined) @@ -70,7 +90,8 @@ export function BlockTile({ {Icon ? ( diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx index add33886127..de8e59df2b6 100644 --- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx +++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx @@ -183,10 +183,18 @@ export const getWorkflowTypeAccent = (type: string) => export interface WorkflowTypeIconProps extends Omit, 'children'> { type: string Icon: ComponentType<{ className?: string }> + /** Overrides the glyph size when the chip is rendered at a non-default slot. */ + iconClassName?: string } /** Shared compact core-block icon used by workflow discovery surfaces. */ -export function WorkflowTypeIcon({ type, Icon, className, ...props }: WorkflowTypeIconProps) { +export function WorkflowTypeIcon({ + type, + Icon, + className, + iconClassName, + ...props +}: WorkflowTypeIconProps) { const typeAccent = getWorkflowTypeAccent(type) return ( @@ -197,7 +205,12 @@ export function WorkflowTypeIcon({ type, Icon, className, ...props }: WorkflowTy data-workflow-type-icon={type} {...props} > - + ) }