improvement(ui): share sidebar row action buttons

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx

@@ -12,6 +12,7 @@ import {
   SidebarSection,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
 import { SidebarRenameRow } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-rename-row'
+import { SidebarRowAction } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import {
@@ -78,19 +79,17 @@ function ChatRow({
           ) : undefined
         }
       >
-        <button
-          type='button'
+        <SidebarRowAction
           aria-label='Chat options'
           onPointerDown={onMorePointerDown}
           onClick={(e) => {
             e.preventDefault()
             e.stopPropagation()
             onMoreClick(e, chat.id)
           }}
-          className='flex size-[18px] items-center justify-center rounded-sm'
         >
           <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
-        </button>
+        </SidebarRowAction>
       </SidebarRowActions>
     </ChatNavigationLink>
   )

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-section/workspace-list.tsx

@@ -18,7 +18,10 @@ import { WorkspaceContextMenu } from '@/components/workspaces/workspace-context-
 import { getWorkspaceInitial } from '@/lib/workspaces/initials'
 import { useOrganizationWorkspaces } from '@/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces'
 import { SidebarRenameRow } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-rename-row'
-import { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
+import {
+  SidebarRowAction,
+  SidebarRowActions,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
 import { useFlyoutInlineRename } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-flyout-inline-rename'
 import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu'
 import { useToggleWorkspacePin, useUpdateWorkspace } from '@/hooks/queries/workspace'
@@ -198,15 +201,13 @@ export function WorkspaceList({ organizationId, pathname, flyout }: WorkspaceLis
                 ) : undefined
               }
             >
-              <button
-                type='button'
+              <SidebarRowAction
                 aria-label={`Options for ${workspace.name}`}
                 onPointerDown={() => menu.preventDismiss()}
                 onClick={onMoreClick}
-                className='flex size-[18px] items-center justify-center rounded-sm'
               >
                 <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
-              </button>
+              </SidebarRowAction>
             </SidebarRowActions>
           </SettingsGuardedLink>
         )

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
 import { cn } from '@sim/emcn'
 
 interface SidebarRowActionsProps {
@@ -49,3 +49,22 @@ export function SidebarRowActions({
     </div>
   )
 }
+
+interface SidebarRowActionProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type'> {
+  'aria-label': string
+}
+
+/** The compact action within a sidebar row; callers retain icons and menu event handling. */
+export const SidebarRowAction = forwardRef<HTMLButtonElement, SidebarRowActionProps>(
+  (props, ref) => (
+    <button
+      {...props}
+      ref={ref}
+      type='button'
+      className='flex size-[18px] items-center justify-center rounded-sm focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+    />
+  )
+)
+
+SidebarRowAction.displayName = 'SidebarRowAction'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -17,7 +17,10 @@ import { useRouter } from 'next/navigation'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { generateSubfolderName } from '@/lib/workspaces/naming'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
+import {
+  SidebarRowAction,
+  SidebarRowActions,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import {
@@ -561,15 +564,13 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
                 ) : undefined
               }
             >
-              <button
-                type='button'
+              <SidebarRowAction
                 aria-label='Folder options'
                 onPointerDown={handleMorePointerDown}
                 onClick={handleMoreClick}
-                className='flex size-[18px] items-center justify-center rounded-sm'
               >
                 <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
-              </button>
+              </SidebarRowAction>
             </SidebarRowActions>
           </div>
         )}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -6,7 +6,10 @@ import { Lock, MoreHorizontal } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
+import {
+  SidebarRowAction,
+  SidebarRowActions,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import { Avatars } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars'
@@ -464,15 +467,13 @@ export const WorkflowItem = memo(function WorkflowItem({
               ) : undefined
             }
           >
-            <button
-              type='button'
+            <SidebarRowAction
               aria-label='Workflow options'
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
-              className='flex size-[18px] items-center justify-center rounded-sm'
             >
               <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
-            </button>
+            </SidebarRowAction>
           </SidebarRowActions>
         )}
       </Link>

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

@@ -92,6 +92,7 @@ import type {
   LogItem,
   PageActionContext,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
+import { SidebarRowAction } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
 import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import {
@@ -287,19 +288,17 @@ const SidebarChatItem = memo(function SidebarChatItem({
               ) : undefined
             }
           >
-            <button
-              type='button'
+            <SidebarRowAction
               aria-label='Chat options'
               onPointerDown={onMorePointerDown}
               onClick={(e) => {
                 e.preventDefault()
                 e.stopPropagation()
                 onMoreClick(e, chat.id)
               }}
-              className='flex size-[18px] items-center justify-center rounded-sm'
             >
               <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
-            </button>
+            </SidebarRowAction>
           </SidebarRowActions>
         )}
       </ChatNavigationLink>