refactor(ui): centralize destructive ghost button colors in EMCN

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -15,7 +15,6 @@ import {
   handleKeyboardActivation,
   Label,
 } from '@sim/emcn'
-import { Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
 import {
@@ -27,6 +26,7 @@ import {
 } from '@/lib/knowledge/constants'
 import type { DocumentTag } from '@/lib/knowledge/tags/types'
 import type { DocumentData } from '@/lib/knowledge/types'
+import { KnowledgeTagRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row'
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
@@ -385,40 +385,24 @@ export function DocumentTagsModal({
           <div className='space-y-2'>
             {documentTags.map((tag, index) => (
               <div key={tag.displayName} className='space-y-2'>
-                <div
+                <KnowledgeTagRow
                   role='button'
                   tabIndex={0}
-                  className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
                   onClick={() => startEditingTag(index)}
                   onKeyDown={(event) => {
                     if (event.target !== event.currentTarget) return
                     handleKeyboardActivation(event, () => startEditingTag(index))
                   }}
-                >
-                  <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
-                    {tag.displayName}
-                  </span>
-                  <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
-                    {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
-                  </span>
-                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
-                  <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-caption'>
-                    {formatValueForDisplay(tag.value, tag.fieldType)}
-                  </span>
-                  <div className='flex shrink-0 items-center gap-1'>
-                    <Button
-                      aria-label='Remove tag'
-                      variant='ghost'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleRemoveTag(index)
-                      }}
-                      className='size-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
-                    >
-                      <Trash className='size-3' />
-                    </Button>
-                  </div>
-                </div>
+                  name={tag.displayName}
+                  typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
+                  detail={formatValueForDisplay(tag.value, tag.fieldType)}
+                  truncateDetail
+                  removeLabel='Remove tag'
+                  onRemove={(e) => {
+                    e.stopPropagation()
+                    handleRemoveTag(index)
+                  }}
+                />
 
                 {editingTagIndex === index && (
                   <div className='space-y-2 rounded-md border p-3'>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -14,7 +14,6 @@ import {
   type ComboboxOption,
   handleKeyboardActivation,
 } from '@sim/emcn'
-import { Trash } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { TagUsageData } from '@/lib/api/contracts/knowledge'
@@ -24,6 +23,7 @@ import {
   SUPPORTED_FIELD_TYPES,
   TAG_SLOT_CONFIG,
 } from '@/lib/knowledge/constants'
+import { KnowledgeTagRow } from '@/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row'
 import {
   type TagDefinition,
   useKnowledgeBaseTagDefinitions,
@@ -270,41 +270,28 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
               {kbTagDefinitions.map((tag) => {
                 const usage = getTagUsage(tag.tagSlot)
                 return (
-                  <div
+                  <KnowledgeTagRow
                     key={tag.id}
                     role='button'
                     tabIndex={0}
-                    className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
                     onClick={() => handleViewDocuments(tag)}
                     onKeyDown={(event) => {
                       if (event.target !== event.currentTarget) return
                       handleKeyboardActivation(event, () => handleViewDocuments(tag))
                     }}
-                  >
-                    <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
-                      {tag.displayName}
-                    </span>
-                    <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
-                      {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
-                    </span>
-                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
-                    <span className='min-w-0 flex-1 text-[var(--text-muted)] text-caption'>
-                      {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
-                    </span>
-                    <div className='flex shrink-0 items-center gap-1'>
-                      <Button
-                        aria-label='Delete Tag'
-                        variant='ghost'
-                        onClick={(e) => {
-                          e.stopPropagation()
-                          handleDeleteTagClick(tag)
-                        }}
-                        className='size-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
-                      >
-                        <Trash className='size-3' />
-                      </Button>
-                    </div>
-                  </div>
+                    name={tag.displayName}
+                    typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
+                    detail={
+                      <>
+                        {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
+                      </>
+                    }
+                    removeLabel='Delete Tag'
+                    onRemove={(e) => {
+                      e.stopPropagation()
+                      handleDeleteTagClick(tag)
+                    }}
+                  />
                 )
               })}
 

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.tsx

@@ -0,0 +1,55 @@
+import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react'
+import { Button, cn } from '@sim/emcn'
+import { Trash } from '@sim/emcn/icons'
+
+interface KnowledgeTagRowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+  name: string
+  typeLabel: string
+  detail: ReactNode
+  truncateDetail?: boolean
+  removeLabel: string
+  onRemove: MouseEventHandler<HTMLButtonElement>
+}
+
+/** Shared tag summary; callers retain activation, keyboard and removal behavior. */
+export function KnowledgeTagRow({
+  name,
+  typeLabel,
+  detail,
+  truncateDetail = false,
+  removeLabel,
+  onRemove,
+  ...props
+}: KnowledgeTagRowProps) {
+  return (
+    <div
+      {...props}
+      className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
+    >
+      <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>{name}</span>
+      <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
+        {typeLabel}
+      </span>
+      <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
+      <span
+        className={cn(
+          'min-w-0 flex-1 text-[var(--text-muted)] text-caption',
+          truncateDetail && 'truncate'
+        )}
+      >
+        {detail}
+      </span>
+      <div className='flex shrink-0 items-center gap-1'>
+        <Button
+          aria-label={removeLabel}
+          variant='ghost-destructive-muted'
+          onClick={onRemove}
+          className='size-4 p-0'
+        >
+          <Trash className='size-3' />
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -1020,12 +1020,12 @@ export function ConditionInput({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
-                      variant='ghost'
+                      variant='ghost-destructive'
                       onClick={() => removeBlock(block.id)}
                       disabled={
                         isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                       }
-                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+                      className='h-auto p-0'
                     >
                       <Trash className='size-[14px]' />
                       <span className='sr-only'>Delete Block</span>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx

@@ -274,10 +274,10 @@ export function DocumentTagEntry({
           <span className='sr-only'>Add Tag</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => removeTag(tag.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Tag</span>

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

@@ -159,10 +159,10 @@ export function EvalInput({
         <Tooltip.Root key={`remove-${metric.id}`}>
           <Tooltip.Trigger asChild>
             <Button
-              variant='ghost'
+              variant='ghost-destructive'
               onClick={() => removeMetric(metric.id)}
               disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+              className='h-auto p-0'
             >
               <Trash className='size-[14px]' />
               <span className='sr-only'>Delete Metric</span>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx

@@ -142,10 +142,10 @@ export function FilterRuleRow({
           <span className='sr-only'>Add Condition</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Condition</span>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx

@@ -266,13 +266,13 @@ export function KnowledgeTagFilters({
           <span className='sr-only'>Add Filter</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={(e) => {
             e.stopPropagation()
             removeFilter(filter.id)
           }}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Filter</span>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx

@@ -101,10 +101,10 @@ export function SortRuleRow({
           <span className='sr-only'>Add Sort</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
+          className='h-auto p-0'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Sort</span>

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

@@ -422,10 +422,10 @@ export function FieldFormat({
           <span className='sr-only'>Add {title}</span>
         </Button>
         <Button
-          variant='ghost'
+          variant='ghost-destructive'
           onClick={() => removeField(field.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)] hover-hover:opacity-90'
+          className='h-auto p-0 hover-hover:opacity-90'
         >
           <Trash className='size-[14px]' />
           <span className='sr-only'>Delete Field</span>