improvement(sidebar): collapsed sidebar UX, quick-create, hover consistency, and UI polish

[waleedlatif1]

Summary

• Add quick-create (+) button in collapsed sidebar for new tasks and workflows
• Add "New workflow" / "New task" primary actions at top of collapsed hover dropdowns
• Replace external ContextMenu with native Radix DropdownMenuSub for workflow actions in collapsed dropdown
• Add --surface-hover CSS token; differentiate hover vs active/selected across all sidebar components
• Standardize three-dots button styling, visibility, and row highlight when menu is open
• Highlight item row when three-dots menu is open across expanded and collapsed sidebar
• Clean up hover styles across emcn form components (combobox, input, date-picker, etc.)
• Improve destructive action confirmation text in knowledge base modals

Type of Change

• Improvement / Enhancement

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 27, 2026 6:48pm

[cursor]

PR Summary

Medium Risk
Moderate UI behavior change in the sidebar (collapsed flyouts, action menus, hover/active state handling) that could introduce interaction regressions, but no backend/data model changes.

Overview
Improves sidebar UX and visual consistency by introducing a dedicated --surface-hover token (separate from --surface-active) and updating sidebar items/buttons to use consistent hover, active, and menu-open highlighting.

Enhances the collapsed sidebar flyouts: adds primary “create” actions, makes the three-dots action button consistently visible when its menu is open, and replaces the previous collapsed-workflow context menu wiring with Radix DropdownMenuSub actions (e.g., open in new tab, rename).

Polishes UI across the app by standardizing hover/active styles in shared form components (Input, Textarea, Combobox, date/time pickers, Popover) and making destructive confirmation copy more explicit/visually emphasized in multiple delete modals (knowledge base, documents, tags, connectors, API keys, notifications, tables, permission groups).

^{Written by Cursor Bugbot for commit e6c169e. Configure here.}

[greptile-apps]

Greptile Summary

This PR polishes the collapsed sidebar UX with a new --surface-hover design token to properly differentiate hover from active/selected states, replaces the external ContextMenu for collapsed workflow actions with a native Radix DropdownMenuSub, adds quick-create (+) buttons and primary actions at the top of hover flyouts, highlights item rows while their context menus are open, and cleans up hover styles across emcn form components and confirmation modals.\n\nKey changes:\n- New --surface-hover CSS token added to globals.css alongside --surface-active; used throughout sidebar and emcn components to give a lighter tint on hover vs. a darker tint on selection.\n- Collapsed workflow actions refactor: CollapsedWorkflowFlyoutItem now manages its own DropdownMenuSub state instead of delegating to a shared external ContextMenu. The large handleCollapsedWorkflow* state block in sidebar.tsx is removed in favour of direct callbacks — cleaner and fewer re-renders.\n- Row-highlight on menu open: isContextMenuOpen / menuOpenTaskId propagated to WorkflowItem, FolderItem, and SidebarTaskItem so the row stays visually active while its dropdown is open.\n- Workspace header upgrade pill: conditionally renders an "Upgrade" button for free-plan users, guarded behind isBillingEnabled.\n- DropdownMenuSubonOpenChange gap (see inline comment): the controlled open state only handles the close signal; Radix's hover-to-open pointer events are silently dropped.\n- FlyoutMoreButton keyboard regression (see inline comment): focus-visible:opacity-100 and group-focus-within:opacity-100 were removed, hiding the three-dots button from keyboard users in the collapsed task flyout.

Confidence Score: 4/5

Safe to merge after addressing the hover-to-open regression in the controlled DropdownMenuSub

One P1 finding: the onOpenChange handler in CollapsedWorkflowFlyoutItem silently drops Radix's open signal, meaning hover-to-open on the three-dots sub-trigger never fires. The right-click and explicit-click paths still work, but the standard Radix sub-menu hover behaviour is broken. A one-line fix resolves it. The P2 keyboard-visibility regression on FlyoutMoreButton is a minor accessibility nit. All other changes are clean.

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx — the DropdownMenuSub onOpenChange logic and FlyoutMoreButton focus styles

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx	Core of the new collapsed sidebar UX — replaces external ContextMenu with DropdownMenuSub for workflow actions; controlled open state only handles closing, breaking hover-to-open; FlyoutMoreButton loses focus-visible keyboard cues
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	Removes collapsed workflow context menu state/handlers in favour of inline DropdownMenuSub; adds menuOpenTaskId for row highlight tracking; surface token updates throughout are consistent
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx	Differentiated hover (--surface-hover) vs active/selected (--surface-active) correctly; three-dots button shows while context menu is open; clean changes
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx	Hover/active differentiation applied to folder row and three-dots button; isContextMenuOpen used to keep row highlighted while menu is open
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx	Adds conditional 'Upgrade' pill for free plans; guards billing data fetch behind isBillingEnabled; planDisplayName logic is correct
apps/sim/app/_styles/globals.css	Adds --surface-hover token (lighter than --surface-active) for both light and dark themes, correctly differentiating hover from selected state
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx	Destructive action text now wrapped in text-[var(--text-error)] for visual emphasis; pure UI polish, no logic changes
apps/sim/components/emcn/components/combobox/combobox.tsx	Removes dark-mode hover overrides and focus-visible:border from trigger base class; dropdown option hover updated to --surface-active (matches Popover's default state token)
apps/sim/components/emcn/components/input/input.tsx	Removes focus-visible:border-[var(--text-muted)] from base class — accessibility concern already discussed in previous thread
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts	Minor refactor: pointer && pointer.executionId simplified to pointer?.executionId; semantically identical

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User hovers collapsed\nWorkflows icon] --> B[CollapsedSidebarMenu\nDropdownMenu opens]
B --> C{Content type}
C --> D[CollapsedFolderItems\nDropdownMenuSub per folder]
C --> E[CollapsedWorkflowFlyoutItem\nroot-level workflows]
D --> F[Nested CollapsedWorkflowFlyoutItem\ninside folder sub-content]
E --> G{User interaction}
F --> G
G --> H[Right-click row\nonContextMenu → setActionsOpen true]
G --> I[Click ••• trigger\nonClick → toggle actionsOpen]
G --> J[Hover ••• trigger\nonOpenChange true → NOT HANDLED\nsub-menu stays closed]
H --> K[DropdownMenuSub opens\nOpen in new tab / Rename]
I --> K
K --> L[Select action]
L --> M{Action type}
M --> N[Open in new tab\nhandleCollapsedWorkflowOpenInNewTab]
M --> O[Rename\nhandleCollapsedWorkflowRename\nstarts workflowFlyoutRename]

Loading

_{Reviews (2): Last reviewed commit: "fix(sidebar): reset actionsOpen state be..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}