improvement(ui): share workflow panel tab buttons

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/index.ts

@@ -1,3 +1,4 @@
 export { Deploy } from './deploy'
 export { Editor } from './editor'
+export { PanelTabButton } from './panel-tab-button'
 export { Toolbar } from './toolbar'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/panel-tab-button.tsx

@@ -0,0 +1,26 @@
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface PanelTabButtonProps
+  extends Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'iconSize' | 'iconPadding'> {
+  active: boolean
+}
+
+/** The workflow panel's compact tab treatment, with caller-owned selection. */
+export const PanelTabButton = forwardRef<HTMLButtonElement, PanelTabButtonProps>(
+  ({ active, className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      variant={active ? 'active' : 'ghost'}
+      className={cn(
+        'h-[28px] rounded-md border py-[5px] text-small',
+        active
+          ? 'border-[var(--border-1)]'
+          : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]',
+        className
+      )}
+    />
+  )
+)
+PanelTabButton.displayName = 'PanelTabButton'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -55,6 +55,7 @@ import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-uti
 import {
   Deploy,
   Editor,
+  PanelTabButton,
   Toolbar,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components'
 import {
@@ -853,43 +854,29 @@ export const Panel = memo(function Panel() {
           <div className='flex shrink-0 items-center justify-between px-2 pt-3.5'>
             <div className='flex gap-1'>
               {isCopilotTabAvailable && (
-                <Button
-                  className={`h-[28px] truncate rounded-md border py-[5px] text-small ${
-                    _hasHydrated && activeTab === 'copilot'
-                      ? 'border-[var(--border-1)]'
-                      : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                  }`}
-                  variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
+                <PanelTabButton
+                  active={_hasHydrated && activeTab === 'copilot'}
+                  className='truncate'
                   onClick={() => handleTabClick('copilot')}
                   data-tab-button='copilot'
                 >
                   Chat
-                </Button>
+                </PanelTabButton>
               )}
-              <Button
-                className={`h-[28px] rounded-md border py-[5px] text-small ${
-                  _hasHydrated && activeTab === 'toolbar'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
+              <PanelTabButton
+                active={_hasHydrated && activeTab === 'toolbar'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
               >
                 Toolbar
-              </Button>
-              <Button
-                className={`h-[28px] rounded-md border py-[5px] text-small ${
-                  _hasHydrated && activeTab === 'editor'
-                    ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)]'
-                }`}
-                variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
+              </PanelTabButton>
+              <PanelTabButton
+                active={_hasHydrated && activeTab === 'editor'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
               >
                 Editor
-              </Button>
+              </PanelTabButton>
             </div>
           </div>