improvement(ui): share browser toolbar actions

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import type { BrowserDownloadInfo } from '@sim/desktop-bridge'
 import {
-  Button,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -18,6 +17,7 @@ import {
   showBrowserDownloadInFolder,
   showBrowserDownloadsMenu,
 } from '@/lib/browser-agent/transport'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 
 /** Aggregate byte progress for the toolbar rail; unknown-size downloads are ignored. */
 export function aggregateDownloadPercent(downloads: BrowserDownloadInfo[]): number | null {
@@ -127,14 +127,11 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Button
+        <BrowserToolbarButton
           ref={buttonRef}
-          type='button'
-          variant='ghost-secondary'
-          size='sm'
           aria-label={label}
           title={label}
-          className='relative size-[30px] shrink-0 overflow-hidden p-0'
+          className='relative overflow-hidden'
           onClick={() => setHasUnviewedCompletion(false)}
         >
           {hasActiveDownloads ? (
@@ -160,7 +157,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
               />
             </span>
           )}
-        </Button>
+        </BrowserToolbarButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' sideOffset={5} className='w-[320px]'>
         <DropdownMenuLabel>Downloads</DropdownMenuLabel>

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx

@@ -16,7 +16,6 @@ import type {
   DesktopAppearanceTheme,
 } from '@sim/desktop-bridge'
 import {
-  Button,
   ChipConfirmModal,
   ChipInput,
   chipVariants,
@@ -82,6 +81,7 @@ import {
   useBrowserPanelOcclusion,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-panel-occlusion'
 import { BrowserThemeNotice } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-theme-notice'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 import {
   buildOmniboxSuggestions,
   googleSearchUrl,
@@ -1034,38 +1034,26 @@ export function BrowserSession({
     <div ref={panelRef} className='flex h-full flex-col overflow-hidden'>
       <div className='relative shrink-0 border-[var(--border)] border-b bg-[var(--bg)]'>
         <div className='flex items-center gap-1 px-2.5 py-1.5'>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          <BrowserToolbarButton
             aria-label='Back'
             disabled={!pageState?.canGoBack}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('back', {}, scopeId)}
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Forward'
             disabled={!pageState?.canGoForward}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('forward', {}, scopeId)}
           >
             <ArrowRight className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Reload page'
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('reload', {}, scopeId)}
           >
             <RefreshCw className='size-[14px]' />
-          </Button>
+          </BrowserToolbarButton>
           {/* URL bar: Enter navigates the agent browser. */}
           <Popover
             open={suggestionsOpen}
@@ -1266,17 +1254,13 @@ export function BrowserSession({
               }}
             >
               <DropdownMenuTrigger asChild>
-                <Button
+                <BrowserToolbarButton
                   ref={fillButtonRef}
-                  type='button'
-                  variant='ghost-secondary'
-                  size='sm'
                   aria-label='Fill a saved password'
                   title='Fill a saved password'
-                  className='size-[30px] shrink-0 p-0'
                 >
                   <Key className='size-[14px]' />
-                </Button>
+                </BrowserToolbarButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end' sideOffset={5} className='w-[240px]'>
                 {fillOptions.map((credential) => (

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+type BrowserToolbarButtonProps = Omit<
+  ComponentProps<typeof Button>,
+  'variant' | 'size' | 'iconSize' | 'iconPadding'
+> & {
+  'aria-label': string
+}
+
+/** Browser navigation and utility action; forwards menu-anchor refs and native events. */
+export const BrowserToolbarButton = forwardRef<HTMLButtonElement, BrowserToolbarButtonProps>(
+  ({ className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      type='button'
+      variant='ghost-secondary'
+      size='sm'
+      className={cn('size-[30px] shrink-0 p-0', className)}
+    />
+  )
+)
+
+BrowserToolbarButton.displayName = 'BrowserToolbarButton'