Skip to content

Commit ad51f94

Browse files
Bill LeoutsakosBill Leoutsakos
Bill Leoutsakos
authored and
Bill Leoutsakos
committed
improvement(ui): share sidebar row action buttons
1 parent ed282d6 commit ad51f94

6 files changed

Lines changed: 44 additions & 24 deletions

File tree

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
SidebarSection,
1313
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
1414
import { SidebarRenameRow } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-rename-row'
15+
import { SidebarRowAction } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
1516
import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
1617
import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
1718
import {
@@ -78,19 +79,17 @@ function ChatRow({
7879
) : undefined
7980
}
8081
>
81-
<button
82-
type='button'
82+
<SidebarRowAction
8383
aria-label='Chat options'
8484
onPointerDown={onMorePointerDown}
8585
onClick={(e) => {
8686
e.preventDefault()
8787
e.stopPropagation()
8888
onMoreClick(e, chat.id)
8989
}}
90-
className='flex size-[18px] items-center justify-center rounded-sm'
9190
>
9291
<MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
93-
</button>
92+
</SidebarRowAction>
9493
</SidebarRowActions>
9594
</ChatNavigationLink>
9695
)

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ import { WorkspaceContextMenu } from '@/components/workspaces/workspace-context-
1818
import { getWorkspaceInitial } from '@/lib/workspaces/initials'
1919
import { useOrganizationWorkspaces } from '@/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces'
2020
import { SidebarRenameRow } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-rename-row'
21-
import { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
21+
import {
22+
SidebarRowAction,
23+
SidebarRowActions,
24+
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
2225
import { useFlyoutInlineRename } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-flyout-inline-rename'
2326
import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu'
2427
import { useToggleWorkspacePin, useUpdateWorkspace } from '@/hooks/queries/workspace'
@@ -198,15 +201,13 @@ export function WorkspaceList({ organizationId, pathname, flyout }: WorkspaceLis
198201
) : undefined
199202
}
200203
>
201-
<button
202-
type='button'
204+
<SidebarRowAction
203205
aria-label={`Options for ${workspace.name}`}
204206
onPointerDown={() => menu.preventDismiss()}
205207
onClick={onMoreClick}
206-
className='flex size-[18px] items-center justify-center rounded-sm'
207208
>
208209
<MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
209-
</button>
210+
</SidebarRowAction>
210211
</SidebarRowActions>
211212
</SettingsGuardedLink>
212213
)

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ReactNode } from 'react'
1+
import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react'
22
import { cn } from '@sim/emcn'
33

44
interface SidebarRowActionsProps {
@@ -49,3 +49,22 @@ export function SidebarRowActions({
4949
</div>
5050
)
5151
}
52+
53+
interface SidebarRowActionProps
54+
extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'type'> {
55+
'aria-label': string
56+
}
57+
58+
/** The compact action within a sidebar row; callers retain icons and menu event handling. */
59+
export const SidebarRowAction = forwardRef<HTMLButtonElement, SidebarRowActionProps>(
60+
(props, ref) => (
61+
<button
62+
{...props}
63+
ref={ref}
64+
type='button'
65+
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)]'
66+
/>
67+
)
68+
)
69+
70+
SidebarRowAction.displayName = 'SidebarRowAction'

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import { useRouter } from 'next/navigation'
1717
import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
1818
import { generateSubfolderName } from '@/lib/workspaces/naming'
1919
import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
20-
import { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
20+
import {
21+
SidebarRowAction,
22+
SidebarRowActions,
23+
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
2124
import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
2225
import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
2326
import {
@@ -561,15 +564,13 @@ export const FolderItem = memo(function FolderItem({ workspaceId, folder }: Fold
561564
) : undefined
562565
}
563566
>
564-
<button
565-
type='button'
567+
<SidebarRowAction
566568
aria-label='Folder options'
567569
onPointerDown={handleMorePointerDown}
568570
onClick={handleMoreClick}
569-
className='flex size-[18px] items-center justify-center rounded-sm'
570571
>
571572
<MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
572-
</button>
573+
</SidebarRowAction>
573574
</SidebarRowActions>
574575
</div>
575576
)}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import { Lock, MoreHorizontal } from '@sim/emcn/icons'
66
import Link from 'next/link'
77
import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
88
import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
9-
import { SidebarRowActions } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
9+
import {
10+
SidebarRowAction,
11+
SidebarRowActions,
12+
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
1013
import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
1114
import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
1215
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({
464467
) : undefined
465468
}
466469
>
467-
<button
468-
type='button'
470+
<SidebarRowAction
469471
aria-label='Workflow options'
470472
onPointerDown={handleMorePointerDown}
471473
onClick={handleMoreClick}
472-
className='flex size-[18px] items-center justify-center rounded-sm'
473474
>
474475
<MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
475-
</button>
476+
</SidebarRowAction>
476477
</SidebarRowActions>
477478
)}
478479
</Link>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ import type {
9292
LogItem,
9393
PageActionContext,
9494
} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
95+
import { SidebarRowAction } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-row-actions'
9596
import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
9697
import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
9798
import {
@@ -287,19 +288,17 @@ const SidebarChatItem = memo(function SidebarChatItem({
287288
) : undefined
288289
}
289290
>
290-
<button
291-
type='button'
291+
<SidebarRowAction
292292
aria-label='Chat options'
293293
onPointerDown={onMorePointerDown}
294294
onClick={(e) => {
295295
e.preventDefault()
296296
e.stopPropagation()
297297
onMoreClick(e, chat.id)
298298
}}
299-
className='flex size-[18px] items-center justify-center rounded-sm'
300299
>
301300
<MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
302-
</button>
301+
</SidebarRowAction>
303302
</SidebarRowActions>
304303
)}
305304
</ChatNavigationLink>

0 commit comments

Comments
 (0)