refactor(ui): share resource bulk-action button styles

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar-styles.ts

@@ -0,0 +1,7 @@
+import { chipFilledFillTokens, chipRadiusClass } from '@sim/emcn'
+
+/** Shared geometry and hover treatment for resource bulk-action buttons. */
+export const RESOURCE_ACTION_BUTTON_BASE = `${chipRadiusClass} size-[28px] p-0 hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!`
+
+/** Resource and knowledge actions follow the chip fill in both themes. */
+export const RESOURCE_ACTION_BUTTON_FILLED = `${chipFilledFillTokens} ${RESOURCE_ACTION_BUTTON_BASE}`

apps/sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx

@@ -3,7 +3,6 @@
 import type { ComponentType } from 'react'
 import {
   Button,
-  chipFilledFillTokens,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -15,12 +14,7 @@ import {
 import { Download } from '@sim/emcn/icons'
 import type { MoveOptionNode } from '@/app/workspace/[workspaceId]/components/folders'
 import { renderMoveOptions } from '@/app/workspace/[workspaceId]/components/folders'
-
-/** Shared chrome for every action button, so the bar reads as one control strip. */
-const ACTION_BUTTON_CLASS = cn(
-  chipFilledFillTokens,
-  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 hover-hover:bg-[var(--brand-secondary)]'
-)
+import { RESOURCE_ACTION_BUTTON_FILLED } from '@/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar-styles'
 
 interface ActionButtonProps {
   icon: ComponentType<{ className?: string }>
@@ -38,7 +32,7 @@ function ActionButton({ icon: Icon, label, onClick, disabled }: ActionButtonProp
           variant='ghost'
           onClick={onClick}
           disabled={disabled}
-          className={ACTION_BUTTON_CLASS}
+          className={RESOURCE_ACTION_BUTTON_FILLED}
         >
           <Icon className='size-[12px]' />
         </Button>
@@ -133,7 +127,7 @@ export function ResourceActionBar({
                       aria-label='Move'
                       variant='ghost'
                       disabled={actionsDisabled}
-                      className={ACTION_BUTTON_CLASS}
+                      className={RESOURCE_ACTION_BUTTON_FILLED}
                     >
                       <Folder className='size-[12px]' />
                     </Button>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx

@@ -1,14 +1,9 @@
-import { Button, chipFilledFillTokens, cn, Tooltip } from '@sim/emcn'
+import { Button, cn, Tooltip } from '@sim/emcn'
 import { Ban, Circle, Trash } from '@sim/emcn/icons'
 import { domAnimation, LazyMotion, m } from 'framer-motion'
+import { RESOURCE_ACTION_BUTTON_FILLED } from '@/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar-styles'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 
-/** One source of truth for the button chrome, so the three actions read as one control strip. */
-const ACTION_BUTTON_CLASS = cn(
-  chipFilledFillTokens,
-  'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 hover-hover:bg-[var(--brand-secondary)]'
-)
-
 interface ActionBarProps {
   selectedCount: number
   onEnable?: () => void
@@ -97,7 +92,7 @@ export function ActionBar({
                     aria-label='Enable'
                     onClick={onEnable}
                     disabled={isLoading}
-                    className={ACTION_BUTTON_CLASS}
+                    className={RESOURCE_ACTION_BUTTON_FILLED}
                   >
                     <Circle className='size-[12px]' />
                   </Button>
@@ -114,7 +109,7 @@ export function ActionBar({
                     aria-label='Disable'
                     onClick={onDisable}
                     disabled={isLoading}
-                    className={ACTION_BUTTON_CLASS}
+                    className={RESOURCE_ACTION_BUTTON_FILLED}
                   >
                     <Ban className='size-[12px]' />
                   </Button>
@@ -131,7 +126,7 @@ export function ActionBar({
                     aria-label='Delete'
                     onClick={onDelete}
                     disabled={isLoading}
-                    className={ACTION_BUTTON_CLASS}
+                    className={RESOURCE_ACTION_BUTTON_FILLED}
                   >
                     <Trash className='size-[12px]' />
                   </Button>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-action-bar/table-action-bar.tsx

@@ -4,6 +4,7 @@ import type React from 'react'
 import { Button, cn, Tooltip } from '@sim/emcn'
 import { Eye, PlayOutline, RefreshCw, Square } from '@sim/emcn/icons'
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
+import { RESOURCE_ACTION_BUTTON_BASE } from '@/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar-styles'
 
 interface TableActionBarProps {
   /** Number of (row × group) cells the run/stop buttons would target. Drives
@@ -157,7 +158,7 @@ function ActionIconButton({ label, onClick, disabled, children }: ActionIconButt
           variant='ghost'
           onClick={onClick}
           disabled={disabled}
-          className='size-[28px] rounded-lg bg-[var(--surface-5)] p-0 hover-hover:bg-[var(--brand-secondary)] hover-hover:text-[var(--text-inverse)]!'
+          className={cn(RESOURCE_ACTION_BUTTON_BASE, 'bg-[var(--surface-5)]')}
           aria-label={label}
         >
           {children}