From bacc6a4a03c0cd473d17bd9271de644f5f179cfb Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Tue, 22 Sep 2026 15:19:25 -0700
Subject: [PATCH] improvement(ui): reuse chip for PII configuration action

---
 .../grouped-checkbox-list.tsx                 | 31 +++++++++----------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index d385a77ab71..31acd122b8a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -4,11 +4,11 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   Button,
   Checkbox,
+  Chip,
   ChipModal,
   ChipModalBody,
   ChipModalField,
   ChipModalHeader,
-  cn,
 } from '@sim/emcn'
 import { ManageWorkspace } from '@sim/emcn/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -113,25 +113,22 @@ export function GroupedCheckboxList({
 
   return (
     <>
-      <Button
-        variant='ghost'
+      <Chip
+        variant='outline'
+        fullWidth
+        leftIcon={ManageWorkspace}
         disabled={disabled}
         onClick={() => setOpen(true)}
-        className={cn(
-          'flex w-full cursor-pointer justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] font-sans text-[var(--text-primary)] text-sm focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
-          'hover-hover:bg-[var(--surface-active)]'
-        )}
+        rightAdornment={
+          <SelectedCountDisplay
+            noneSelected={noneSelected}
+            allSelected={allSelected}
+            count={selectedValues.length}
+          />
+        }
       >
-        <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
-          <ManageWorkspace className='size-4 shrink-0 opacity-50' />
-          <span className='truncate'>Configure PII Types</span>
-        </span>
-        <SelectedCountDisplay
-          noneSelected={noneSelected}
-          allSelected={allSelected}
-          count={selectedValues.length}
-        />
-      </Button>
+        Configure PII Types
+      </Chip>
       <ChipModal open={open} onOpenChange={setOpen} srTitle='Select PII Types to Detect' size='lg'>
         <ChipModalHeader onClose={() => setOpen(false)}>Select PII Types to Detect</ChipModalHeader>
         <ChipModalBody onWheel={(e) => e.stopPropagation()}>