improvement(ui): align resource tab titles and actions with sidebar

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

@@ -1,14 +1,20 @@
 'use client'
 
-import { chipVariants, cn, DropdownMenuItem, OverflowText } from '@sim/emcn'
+import {
+  chipVariants,
+  cn,
+  DropdownMenuItem,
+  OverflowText,
+  RowActions,
+  rowActionsGroupClass,
+} from '@sim/emcn'
 import { MoreHorizontal, Pin, Task } from '@sim/emcn/icons'
 import type { OrganizationChat } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
 import { useOrganizationChatActions } from '@/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-chat-actions'
 import {
   ChatNavigationLink,
   CollapsedChatFlyoutItem,
   CollapsedSidebarMenu,
-  SidebarRowActions,
   SidebarSection,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
 import { SidebarRenameRow } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-rename-row'
@@ -51,12 +57,12 @@ function ChatRow({
       isCurrentRoute={isCurrentRoute}
       className={cn(
         chipVariants({ active: isCurrentRoute || isMenuOpen, fullWidth: true }),
-        'group/sidebar-row'
+        rowActionsGroupClass
       )}
       onContextMenu={(e) => onContextMenu(e, chat.id)}
     >
       <OverflowText label={chat.name} className='flex-1 text-[var(--text-body)]' />
-      <SidebarRowActions
+      <RowActions
         open={isMenuOpen}
         indicator={
           showStatusDot ? (
@@ -81,7 +87,7 @@ function ChatRow({
         >
           <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
         </SidebarRowAction>
-      </SidebarRowActions>
+      </RowActions>
     </ChatNavigationLink>
   )
 }

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

@@ -7,6 +7,8 @@ import {
   DropdownMenuItem,
   DropdownMenuItemAction,
   OverflowText,
+  RowActions,
+  rowActionsGroupClass,
   toast,
 } from '@sim/emcn'
 import { MoreHorizontal, Pin } from '@sim/emcn/icons'
@@ -17,10 +19,7 @@ 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 {
-  SidebarRowAction,
-  SidebarRowActions,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
+import { SidebarRowAction } 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'
@@ -176,12 +175,12 @@ export function WorkspaceList({ organizationId, pathname, flyout }: WorkspaceLis
             href={href}
             className={cn(
               chipVariants({ active: isActive || isMenuOpen, fullWidth: true }),
-              'group/sidebar-row'
+              rowActionsGroupClass
             )}
             onContextMenu={(event) => openMenu(event, workspace.id)}
           >
             {label}
-            <SidebarRowActions
+            <RowActions
               open={isMenuOpen}
               indicator={
                 isPinned ? (
@@ -201,7 +200,7 @@ export function WorkspaceList({ organizationId, pathname, flyout }: WorkspaceLis
               >
                 <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
               </SidebarRowAction>
-            </SidebarRowActions>
+            </RowActions>
           </SettingsGuardedLink>
         )
       })}

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

@@ -1,4 +1,3 @@
-export { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
 export { ChatNavigationLink } from './chat-navigation-link/chat-navigation-link'
 export {
   CollapsedChatFlyoutItem,

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

@@ -1,54 +1,4 @@
-import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
-import { cn } from '@sim/emcn'
-
-interface SidebarRowActionsProps {
-  children: ReactNode
-  indicator?: ReactNode
-  open?: boolean
-  revealOnHover?: boolean
-}
-
-/** Reclaims idle action space while retaining indicators and touch/keyboard access. */
-export function SidebarRowActions({
-  children,
-  indicator,
-  open = false,
-  revealOnHover = true,
-}: SidebarRowActionsProps) {
-  return (
-    <div
-      className={cn(
-        'relative size-[18px] shrink-0 items-center justify-center gap-1.5 [@media(hover:none)]:w-auto',
-        indicator || open ? 'flex' : 'hidden',
-        revealOnHover &&
-          'group-focus-within/sidebar-row:flex group-hover/sidebar-row:flex [@media(hover:none)]:flex'
-      )}
-    >
-      {indicator && (
-        <span
-          className={cn(
-            'pointer-events-none flex size-[18px] shrink-0 items-center justify-center transition-opacity',
-            open && '[@media(hover:hover)]:opacity-0',
-            revealOnHover &&
-              '[@media(hover:hover)]:group-focus-within/sidebar-row:opacity-0 [@media(hover:hover)]:group-hover/sidebar-row:opacity-0'
-          )}
-        >
-          {indicator}
-        </span>
-      )}
-      <div
-        className={cn(
-          'pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 transition-opacity [@media(hover:none)]:static',
-          open && 'pointer-events-auto opacity-100',
-          revealOnHover &&
-            'group-focus-within/sidebar-row:pointer-events-auto group-focus-within/sidebar-row:opacity-100 group-hover/sidebar-row:pointer-events-auto group-hover/sidebar-row:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100'
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
+import { type ButtonHTMLAttributes, forwardRef } from 'react'
 
 interface SidebarRowActionProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type'> {

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

@@ -7,6 +7,8 @@ import {
   cn,
   disclosureChevronClass,
   OverflowText,
+  RowActions,
+  rowActionsGroupClass,
   toast,
 } from '@sim/emcn'
 import { ChevronRight, Folder, FolderOpen, Lock, MoreHorizontal } from '@sim/emcn/icons'
@@ -17,10 +19,7 @@ import { useRouter } from 'next/navigation'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/mothership/resource-types'
 import { generateSubfolderName } from '@/lib/workspaces/naming'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import {
-  SidebarRowAction,
-  SidebarRowActions,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
+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 {
@@ -504,7 +503,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
         aria-label={`${folder.name} folder, ${isExpanded ? 'expanded' : 'collapsed'}`}
         className={cn(
           chipVariants({ active: isSelected || isContextMenuOpen, fullWidth: true }),
-          'group/sidebar-row',
+          rowActionsGroupClass,
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
         onClick={handleFolderSelect}
@@ -550,7 +549,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
             >
               <OverflowText label={folder.name} className='flex-1 text-[var(--text-body)]' />
             </div>
-            <SidebarRowActions
+            <RowActions
               open={isContextMenuOpen}
               revealOnHover={!isAnyDragActive}
               indicator={
@@ -571,7 +570,7 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
               >
                 <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
               </SidebarRowAction>
-            </SidebarRowActions>
+            </RowActions>
           </div>
         )}
       </div>

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

@@ -1,15 +1,12 @@
 'use client'
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { chipVariants, cn, OverflowText } from '@sim/emcn'
+import { chipVariants, cn, OverflowText, RowActions, rowActionsGroupClass } from '@sim/emcn'
 import { Lock, MoreHorizontal } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/mothership/resource-types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import {
-  SidebarRowAction,
-  SidebarRowActions,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
+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 { Avatars } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars'
@@ -414,7 +411,7 @@ export const WorkflowItem = memo(function WorkflowItem({
             active: active || isContextMenuOpen || (isSelected && selectedWorkflows.size > 1),
             fullWidth: true,
           }),
-          'group/sidebar-row',
+          rowActionsGroupClass,
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
         draggable={!isEditing && !dragDisabled && !effectiveLocked}
@@ -453,7 +450,7 @@ export const WorkflowItem = memo(function WorkflowItem({
           </div>
         </div>
         {!isEditing && (
-          <SidebarRowActions
+          <RowActions
             open={isContextMenuOpen}
             revealOnHover={!isAnyDragActive}
             indicator={
@@ -474,7 +471,7 @@ export const WorkflowItem = memo(function WorkflowItem({
             >
               <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
             </SidebarRowAction>
-          </SidebarRowActions>
+          </RowActions>
         )}
       </Link>
 

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

@@ -15,6 +15,8 @@ import {
   Library,
   Loader,
   OverflowText,
+  RowActions,
+  rowActionsGroupClass,
   scrollFadeAttributes,
   scrollFadeClass,
   Tooltip,
@@ -75,7 +77,6 @@ import {
   SidebarFooter,
   SidebarNavChip,
   type SidebarNavItemData,
-  SidebarRowActions,
   SidebarSection,
   SidebarTooltip,
   StatusNotice,
@@ -245,7 +246,7 @@ const SidebarChatItem = memo(function SidebarChatItem({
             active: isCurrentRoute || isSelected || isMenuOpen,
             fullWidth: true,
           }),
-          'group/sidebar-row'
+          rowActionsGroupClass
         )}
         onClick={(e) => {
           if (e.metaKey || e.ctrlKey) return
@@ -263,7 +264,7 @@ const SidebarChatItem = memo(function SidebarChatItem({
       >
         <OverflowText label={chat.name} className='flex-1 text-[var(--text-body)]' />
         {chat.id !== 'new' && (
-          <SidebarRowActions
+          <RowActions
             open={isMenuOpen}
             indicator={
               showStatusDot ? (
@@ -288,7 +289,7 @@ const SidebarChatItem = memo(function SidebarChatItem({
             >
               <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
             </SidebarRowAction>
-          </SidebarRowActions>
+          </RowActions>
         )}
       </ChatNavigationLink>
     </SidebarTooltip>

packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx

@@ -22,6 +22,7 @@
 
 import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { RowActions, rowActionsGroupClass } from '@sim/emcn'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, ChevronRight, Circle, Search } from '../../icons'
 import { cn } from '../../lib/cn'
@@ -375,7 +376,7 @@ const DropdownMenuItem = React.forwardRef<
     if (action) {
       return (
         <div
-          className='group/dropdownitem relative'
+          className={cn('group/dropdownitem relative', rowActionsGroupClass)}
           onKeyDown={(event) => {
             if (
               event.defaultPrevented ||
@@ -412,7 +413,9 @@ const DropdownMenuItem = React.forwardRef<
               actionIndicator || actionOpen
                 ? 'pr-[28px]'
                 : '[@media(hover:hover)]:group-focus-within/dropdownitem:pr-[28px] [@media(hover:hover)]:group-hover/dropdownitem:pr-[28px]',
-              actionIndicator ? '[@media(hover:none)]:pr-[52px]' : '[@media(hover:none)]:pr-[28px]',
+              actionIndicator
+                ? '[@media(any-pointer:coarse)]:pr-[52px] [@media(hover:none)]:pr-[52px]'
+                : '[@media(any-pointer:coarse)]:pr-[28px] [@media(hover:none)]:pr-[28px]',
               inset && 'pl-7',
               className
             )}
@@ -421,27 +424,14 @@ const DropdownMenuItem = React.forwardRef<
           >
             {content}
           </DropdownMenuPrimitive.Item>
-          <div className='-translate-y-1/2 pointer-events-none absolute top-1/2 right-1 flex size-[18px] items-center gap-1.5 [@media(hover:none)]:w-auto'>
-            {actionIndicator && (
-              <div
-                className={cn(
-                  'pointer-events-none flex size-[18px] shrink-0 items-center justify-center [@media(hover:hover)]:group-focus-within/dropdownitem:opacity-0 [@media(hover:hover)]:group-hover/dropdownitem:opacity-0',
-                  actionOpen && '[@media(hover:hover)]:opacity-0'
-                )}
-              >
-                {actionIndicator}
-              </div>
-            )}
-            <div
-              ref={actionRef}
-              className={cn(
-                'pointer-events-none absolute inset-0 flex items-center opacity-0 transition-opacity group-focus-within/dropdownitem:pointer-events-auto group-focus-within/dropdownitem:opacity-100 group-hover/dropdownitem:pointer-events-auto group-hover/dropdownitem:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:static [@media(hover:none)]:opacity-100',
-                actionOpen && 'pointer-events-auto opacity-100'
-              )}
-            >
-              {action}
-            </div>
-          </div>
+          <RowActions
+            indicator={actionIndicator}
+            open={actionOpen}
+            actionRef={actionRef}
+            className='-translate-y-1/2 absolute top-1/2 right-1'
+          >
+            {action}
+          </RowActions>
         </div>
       )
     }

packages/emcn/src/components/index.ts

@@ -213,6 +213,7 @@ export {
 } from './popover/popover'
 export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation'
 export { ProgressItem } from './progress-item/progress-item'
+export { RowActions, type RowActionsProps, rowActionsGroupClass } from './row-actions/row-actions'
 export { SecretInput } from './secret-input/secret-input'
 export { SecretReveal } from './secret-reveal/secret-reveal'
 export { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from './sim-wordmark/paths'
@@ -229,7 +230,6 @@ export {
 } from './status-page/status-page'
 export { Switch } from './switch/switch'
 export {
-  isTabTitleTruncated,
   TabStrip,
   type TabStripDragContext,
   type TabStripItem,