From d7982005253e651fde4cc5361db25f8b1f9f608d Mon Sep 17 00:00:00 2001
From: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local>
Date: Sat, 19 Sep 2026 11:02:51 -0700
Subject: [PATCH] refactor(ui): share image upload preview tiles

---
 .../components/custom-block-detail.tsx        | 21 ++---
 .../components/whitelabeling-settings.tsx     | 37 +++------
 packages/emcn/src/components/index.ts         |  4 +
 .../upload-preview-button.test.tsx            | 82 +++++++++++++++++++
 .../upload-preview-button.tsx                 | 45 ++++++++++
 5 files changed, 152 insertions(+), 37 deletions(-)
 create mode 100644 packages/emcn/src/components/upload-preview-button/upload-preview-button.test.tsx
 create mode 100644 packages/emcn/src/components/upload-preview-button/upload-preview-button.tsx

diff --git a/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx b/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx
index ac56a55b105..3b79b88f587 100644
--- a/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx
+++ b/apps/sim/ee/custom-blocks/components/custom-block-detail.tsx
@@ -14,11 +14,11 @@ import {
   Expandable,
   ExpandableContent,
   Label,
-  Loader,
   Switch,
   toast,
+  UploadPreviewButton,
 } from '@sim/emcn'
-import { ArrowLeft, ChevronDown, ImageUp as ImageIcon, X } from '@sim/emcn/icons'
+import { ArrowLeft, ChevronDown, X } from '@sim/emcn/icons'
 import { getErrorMessage } from '@sim/utils/errors'
 import { saveDiscardActions } from '@/components/settings/save-discard-actions'
 import {
@@ -522,21 +522,16 @@ export function CustomBlockDetail({ blockId, workspaceId, onBack }: CustomBlockD
           <SettingRow label='Icon' labelTooltip='Square image (PNG, JPEG, or SVG). Optional.'>
             <div className='flex items-center gap-4'>
               <DropZone onDrop={canManageBlock ? iconUpload.handleFileDrop : () => {}}>
-                <button
+                <UploadPreviewButton
                   aria-label={iconUrl ? 'Change icon' : 'Upload icon'}
-                  type='button'
                   onClick={iconUpload.handleThumbnailClick}
-                  disabled={iconUpload.isUploading || !canManageBlock}
-                  className='group relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50'
+                  loading={iconUpload.isUploading}
+                  disabled={!canManageBlock}
                 >
-                  {iconUpload.isUploading ? (
-                    <Loader className='size-5 text-[var(--text-muted)]' animate />
-                  ) : iconUrl ? (
+                  {iconUrl ? (
                     <img src={iconUrl} alt='' className='size-full object-contain p-1.5' />
-                  ) : (
-                    <ImageIcon className='size-5 text-[var(--text-muted)]' />
-                  )}
-                </button>
+                  ) : null}
+                </UploadPreviewButton>
               </DropZone>
               <div className='flex gap-2'>
                 <Button
diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index 1358af3a0a8..933a8d56731 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, ChipInput, cn, Label, Loader, toast } from '@sim/emcn'
-import { ImageUp as ImageIcon, X } from '@sim/emcn/icons'
+import { Button, ChipInput, cn, Label, toast, UploadPreviewButton } from '@sim/emcn'
+import { X } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage, toError } from '@sim/utils/errors'
 import Image from 'next/image'
@@ -288,17 +288,13 @@ function WhitelabelingForm({ initialSettings, orgId, uploadWorkspaceId }: Whitel
             >
               <div className='flex items-center gap-4'>
                 <DropZone onDrop={logoUpload.handleFileDrop}>
-                  <button
-                    type='button'
+                  <UploadPreviewButton
                     onClick={logoUpload.handleThumbnailClick}
-                    disabled={logoUpload.isUploading}
+                    loading={logoUpload.isUploading}
                     aria-label={logoUpload.previewUrl ? 'Change logo' : 'Upload logo'}
                     title={logoUpload.previewUrl ? 'Change logo' : 'Upload logo'}
-                    className='group relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50'
                   >
-                    {logoUpload.isUploading ? (
-                      <Loader className='size-5 text-[var(--text-muted)]' animate />
-                    ) : logoUpload.previewUrl ? (
+                    {logoUpload.previewUrl ? (
                       <Image
                         src={logoUpload.previewUrl}
                         alt='Logo'
@@ -307,10 +303,8 @@ function WhitelabelingForm({ initialSettings, orgId, uploadWorkspaceId }: Whitel
                         className='object-contain p-1'
                         unoptimized
                       />
-                    ) : (
-                      <ImageIcon className='size-5 text-[var(--text-muted)]' />
-                    )}
-                  </button>
+                    ) : null}
+                  </UploadPreviewButton>
                 </DropZone>
                 {logoUpload.previewUrl && (
                   <Button
@@ -339,17 +333,14 @@ function WhitelabelingForm({ initialSettings, orgId, uploadWorkspaceId }: Whitel
             >
               <div className='flex items-center gap-4'>
                 <DropZone onDrop={wordmarkUpload.handleFileDrop} className='min-w-0 flex-1'>
-                  <button
-                    type='button'
+                  <UploadPreviewButton
                     onClick={wordmarkUpload.handleThumbnailClick}
-                    disabled={wordmarkUpload.isUploading}
+                    loading={wordmarkUpload.isUploading}
                     aria-label={wordmarkUpload.previewUrl ? 'Change wordmark' : 'Upload wordmark'}
                     title={wordmarkUpload.previewUrl ? 'Change wordmark' : 'Upload wordmark'}
-                    className='group relative flex h-16 w-full items-center justify-center overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50'
+                    className='w-full'
                   >
-                    {wordmarkUpload.isUploading ? (
-                      <Loader className='size-5 text-[var(--text-muted)]' animate />
-                    ) : wordmarkUpload.previewUrl ? (
+                    {wordmarkUpload.previewUrl ? (
                       <Image
                         src={wordmarkUpload.previewUrl}
                         alt='Wordmark'
@@ -358,10 +349,8 @@ function WhitelabelingForm({ initialSettings, orgId, uploadWorkspaceId }: Whitel
                         className='object-contain p-2'
                         unoptimized
                       />
-                    ) : (
-                      <ImageIcon className='size-5 text-[var(--text-muted)]' />
-                    )}
-                  </button>
+                    ) : null}
+                  </UploadPreviewButton>
                 </DropZone>
                 {wordmarkUpload.previewUrl && (
                   <Button
diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts
index 6628b0a2d1b..c7c2204968a 100644
--- a/packages/emcn/src/components/index.ts
+++ b/packages/emcn/src/components/index.ts
@@ -265,4 +265,8 @@ export {
   useFloatingTooltip,
   useIsOverflowing,
 } from './tooltip/tooltip'
+export {
+  UploadPreviewButton,
+  type UploadPreviewButtonProps,
+} from './upload-preview-button/upload-preview-button'
 export { Wizard } from './wizard/wizard'
diff --git a/packages/emcn/src/components/upload-preview-button/upload-preview-button.test.tsx b/packages/emcn/src/components/upload-preview-button/upload-preview-button.test.tsx
new file mode 100644
index 00000000000..8e094fa89d7
--- /dev/null
+++ b/packages/emcn/src/components/upload-preview-button/upload-preview-button.test.tsx
@@ -0,0 +1,82 @@
+/** @vitest-environment jsdom */
+import { act, createRef, type ReactNode } from 'react'
+import { UploadPreviewButton } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(children: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(children))
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+describe('UploadPreviewButton', () => {
+  it('forwards the label, ref and upload action without submitting an enclosing form', () => {
+    const ref = createRef<HTMLButtonElement>()
+    const onClick = vi.fn()
+    const onSubmit = vi.fn((event) => event.preventDefault())
+    mount(
+      <form onSubmit={onSubmit}>
+        <UploadPreviewButton ref={ref} aria-label='Upload logo' onClick={onClick} />
+      </form>
+    )
+
+    const button = ref.current!
+    expect(button).toBe(container?.querySelector('button'))
+    expect(button.getAttribute('aria-label')).toBe('Upload logo')
+    expect(button.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true')
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('replaces the preview while busy and preserves a separate disabled restriction', () => {
+    const ref = createRef<HTMLButtonElement>()
+    const onClick = vi.fn()
+    const render = (loading: boolean, disabled = false) => (
+      <UploadPreviewButton
+        ref={ref}
+        aria-label='Change logo'
+        loading={loading}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        <img src='/logo.svg' alt='Logo' />
+      </UploadPreviewButton>
+    )
+    mount(render(false))
+    const button = ref.current!
+    expect(button.querySelector('img')?.alt).toBe('Logo')
+
+    act(() => root?.render(render(true)))
+    expect(button.disabled).toBe(true)
+    expect(button.getAttribute('aria-busy')).toBe('true')
+    expect(button.querySelector('img')).toBeNull()
+    act(() => button.click())
+    expect(onClick).not.toHaveBeenCalled()
+
+    act(() => root?.render(render(false, true)))
+    expect(button.disabled).toBe(true)
+    expect(button.hasAttribute('aria-busy')).toBe(false)
+    expect(button.querySelector('img')?.alt).toBe('Logo')
+    act(() => button.click())
+    expect(onClick).not.toHaveBeenCalled()
+
+    act(() => root?.render(render(false)))
+    expect(button.disabled).toBe(false)
+    act(() => button.click())
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/emcn/src/components/upload-preview-button/upload-preview-button.tsx b/packages/emcn/src/components/upload-preview-button/upload-preview-button.tsx
new file mode 100644
index 00000000000..fbc31b8ba03
--- /dev/null
+++ b/packages/emcn/src/components/upload-preview-button/upload-preview-button.tsx
@@ -0,0 +1,45 @@
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import { ImageUp } from '../../icons/image-up'
+import { Loader } from '../../icons/loader'
+import { cn } from '../../lib/cn'
+
+export interface UploadPreviewButtonProps extends Omit<ComponentPropsWithoutRef<'button'>, 'type'> {
+  /** Accessible name describing which image will be uploaded or replaced. */
+  'aria-label': string
+  /** Shows the shared loader and prevents another activation during upload. */
+  loading?: boolean
+}
+
+/**
+ * Image-upload preview tile. Renders the caller's image, an empty-image icon,
+ * or a loading indicator. File selection, validation, and uploads stay with
+ * the caller. The 64px square can expand through layout classes such as `w-full`.
+ *
+ * @example
+ * <UploadPreviewButton aria-label='Change logo' loading={uploading} onClick={selectFile}>
+ *   {logoUrl ? <img src={logoUrl} alt='' className='size-full object-contain p-1' /> : null}
+ * </UploadPreviewButton>
+ */
+export const UploadPreviewButton = forwardRef<HTMLButtonElement, UploadPreviewButtonProps>(
+  ({ children, className, loading = false, disabled, ...props }, ref) => (
+    <button
+      {...props}
+      ref={ref}
+      type='button'
+      disabled={disabled || loading}
+      aria-busy={loading || undefined}
+      className={cn(
+        'group relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-3)] disabled:opacity-50',
+        className
+      )}
+    >
+      {loading ? (
+        <Loader className='size-5 text-[var(--text-muted)]' animate />
+      ) : (
+        (children ?? <ImageUp className='size-5 text-[var(--text-muted)]' />)
+      )}
+    </button>
+  )
+)
+
+UploadPreviewButton.displayName = 'UploadPreviewButton'