Skip to content

fix(blocks): give a block one tile everywhere it is listed - #6634

Merged
waleedlatif1 merged 1 commit into
stagingfrom
fix/cmdk-block-color
Aug 12, 2026
Merged

fix(blocks): give a block one tile everywhere it is listed#6634
waleedlatif1 merged 1 commit into
stagingfrom
fix/cmdk-block-color

Conversation

@waleedlatif1

Copy link
Copy Markdown
Collaborator

Summary

  • A block's tile disagreed with the card it named: the canvas brands only third-party integrations and gives everything first-party its role accent, but the command palette, connection lists, tag menus and output pickers painted straight from the catalog bgColor. Webhook Trigger showed green in the palette and blue on the canvas it was about to be dropped onto (reported by Emir), and the five roleless first-party triggers (api_trigger, chat_trigger, circleback, input_trigger, manual_trigger) showed catalog blues where the canvas shows neutral.
  • Read the canvas rule from one place (hasBlockAccent) and render it through one component (BlockTile), then point every surface that lists a block at them — canvas, editor header, preview, toolbar, palette, connection picker, terminal, logs trace rows, connection lists, tag menus, output pickers, tables workflow sidebar.
  • Folded in the duplication the split had grown: 3 copies of TagIcon, 5 hand-rolled tile divs, the toolbar's second encoding of the accent rule, a third icon-contrast helper running its own brightness threshold (0.63 vs 0.75 everywhere else), and the dead showColoredIcon prop that every caller passed as true.
  • Tiles now share the chip radius, and the tile forces its own icon colour — popover and command rows paint descendants through [&_svg]:text-*, which outranks a plain utility and was washing out pale brand tiles.

Type of Change

  • Bug fix

Testing

bun run type-check clean; 2711 workspace tests pass. New blocks/accent.test.ts pins the rule (verified it goes red against the previous one), and a palette test pins that a first-party trigger renders the accent chip while a third-party one keeps its brand tile.

Not yet clicked through in a browser — the colour rule is test-covered, but the radius/size unification is worth a visual pass.

Notes

  • Large detail headers (preview panel, trace-view detail) keep their own 18px treatment and are left for a follow-up; this PR unifies row/list tiles.
  • Public landing pages deliberately keep their own tile — BlockTile reaches the block registry and must not pull it into that bundle.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

A block's tile disagreed with the card it named. The canvas brands only
third-party integrations and gives everything first-party its role accent,
but the command palette, connection lists, tag menus and output pickers all
painted straight from the catalog `bgColor` — so Webhook Trigger showed green
in the palette and blue on the canvas it was about to be dropped onto, and the
five roleless first-party triggers showed catalog blues where the canvas shows
neutral.

Read the canvas rule from one place (`hasBlockAccent`) and render it through
one component (`BlockTile`), then point every surface that lists a block at
them: canvas, editor header, preview, toolbar, palette, connection picker,
terminal, logs trace rows, connection lists, tag menus, output pickers and the
tables workflow sidebar.

Folds in the duplication the split had grown: three copies of `TagIcon`, five
hand-rolled tile divs, the toolbar's second encoding of the accent rule, a
third icon-contrast helper on its own brightness threshold, and the dead
`showColoredIcon` prop every caller passed. Tiles now share the chip radius,
and the tile forces its own icon colour so popover and command rows painting
`[&_svg]:text-*` can no longer wash out a pale brand tile.

Large detail headers (preview panel, trace-view detail) keep their own
treatment and are left for a follow-up.
@vercel

vercel Bot commented Aug 12, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Aug 12, 2026 6:31pm

Request Review

@cursor

cursor Bot commented Aug 12, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
Wide UI refactor across many workspace surfaces; behavior is test-covered but visual consistency (tile sizes/radius) may still need a manual pass on large detail headers left unchanged.

Overview
Fixes list/palette tiles disagreeing with the canvas: first-party blocks and triggers now use the role accent (via WorkflowTypeIcon), while third-party integrations keep catalog brand colors.

Adds hasBlockAccent and BlockTile as the single source of truth, then wires them through the command palette, connection picker, toolbar, tag menus, output pickers, connection lists, terminal rows, and trace tree rows. isIntegration on canvas/preview now keys off hasBlockAccent instead of category === 'tools'.

Removes duplicated TagIcon helpers, hand-rolled tile divs, getEntryAccentType, the logs iconColorClass helper (contrast moves to getTileIconColorClass), and workflowType / showColoredIcon on search command items in favor of blockType. Tests cover the accent rule and palette behavior for first-party vs third-party triggers.

Reviewed by Cursor Bugbot for commit 0dbc209. Configure here.

@greptile-apps

greptile-apps Bot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

The PR centralizes block-tile accent selection and rendering so block-listing surfaces use the same visual identity as the workflow canvas.

  • Adds shared hasBlockAccent and BlockTile primitives.
  • Migrates palette, editor, preview, terminal, logs, connection, output, tag, and table surfaces to the shared tile behavior.
  • Adds focused tests for accent selection and palette rendering.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename Overview
apps/sim/blocks/accent.ts Centralizes the rule distinguishing role-accented first-party blocks from brand-colored third-party integrations.
apps/sim/blocks/block-tile.tsx Introduces the shared tile renderer used to keep block color, icon contrast, sizing, and radius consistent.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.test.tsx Adds palette coverage for first-party accent tiles and uses a valid statement-level rationale comment inside the test.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx Migrates the canvas block node to the shared tile component without an eligible unresolved finding.

Reviews (2): Last reviewed commit: "fix(blocks): give a block one tile every..." | Re-trigger Greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1

Copy link
Copy Markdown
Collaborator Author

@cursor review

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 0dbc209. Configure here.

@waleedlatif1
waleedlatif1 merged commit 8a0b328 into staging Aug 12, 2026
30 checks passed
@waleedlatif1
waleedlatif1 deleted the fix/cmdk-block-color branch August 12, 2026 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant