feat(context-menu): added context menu to dead sidebar space and usage indicator

[waleedlatif1]

Summary

• added context menu to dead sidebar space and usage indicator

Type of Change

• Bug fix

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)

Screenshots/Videos

[vercel]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 16, 2026 0:46am

[greptile-apps]

Greptile Summary

Added context menu functionality to sidebar's dead space and usage indicator, enabling right-click access to workflow/folder creation and plan management options.

Major Changes:

• Created EmptyAreaContextMenu component for right-click workflow/folder creation in sidebar empty space
• Created UsageIndicatorContextMenu component with plan-appropriate upgrade paths (Pro/Team/Enterprise) and management options
• Integrated useContextMenu hook for consistent context menu positioning and state management
• Added custom event dispatching to open settings modal tabs (open-settings) and help modal (open-help-modal)
• Connected upgrade handlers using useSubscriptionUpgrade hook for seamless plan changes
• Added data-empty-area attributes to enable precise empty space targeting in workflow list

Implementation Quality:

• Follows established component patterns with proper props interfaces and JSDoc comments
• Uses absolute imports consistently as per style guidelines
• Reuses existing useContextMenu hook from barrel export
• Custom event pattern matches existing codebase conventions
• Proper separation of concerns with dedicated context menu components

Confidence Score: 4/5

• This PR is safe to merge with low risk
• Code follows established patterns and integrates cleanly with existing infrastructure. The implementation reuses proven patterns (custom events, context menu hook) and includes proper TypeScript types. Minor confidence reduction due to complex plan-based visibility logic in usage indicator that should be manually tested across different plan types and permission levels.
• Pay close attention to usage-indicator.tsx - verify the plan-based context menu logic works correctly for all plan types (free/pro/team/enterprise) and permission combinations during testing

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator-context-menu.tsx	Added new context menu component for usage indicator with plan-appropriate options (Pro/Team/Enterprise upgrade paths, manage seats, set limits, contact support)
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx	Integrated context menu into usage indicator, added upgrade handlers and custom event dispatching for settings/help modals, refactored billing permission checks
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx	Integrated empty area context menu with workflow list, added data attributes for empty area targeting and context menu handlers

Sequence Diagram

sequenceDiagram
    participant User
    participant Sidebar
    participant WorkflowList
    participant EmptyAreaMenu
    participant UsageIndicator
    participant UsageMenu
    participant ContextMenuHook
    participant SettingsModal
    
    User->>UsageIndicator: Right-click usage indicator
    UsageIndicator->>ContextMenuHook: handleContextMenu(e)
    ContextMenuHook->>ContextMenuHook: setPosition({x, y})
    ContextMenuHook->>ContextMenuHook: setIsOpen(true)
    UsageIndicator->>UsageMenu: Render menu at position
    
    User->>UsageMenu: Click "Set usage limit"
    UsageMenu->>UsageIndicator: onSetLimit()
    UsageIndicator->>Window: dispatch('open-settings', {tab: 'subscription'})
    Window->>SettingsModal: Handle event
    SettingsModal->>SettingsModal: Open subscription tab
    
    User->>UsageMenu: Click "Upgrade to Pro"
    UsageMenu->>UsageIndicator: onUpgradeToPro()
    UsageIndicator->>UsageIndicator: handleUpgrade('pro')
    
    User->>WorkflowList: Right-click empty area
    WorkflowList->>ContextMenuHook: handleContextMenu(e)
    ContextMenuHook->>ContextMenuHook: setPosition({x, y})
    ContextMenuHook->>ContextMenuHook: setIsOpen(true)
    WorkflowList->>EmptyAreaMenu: Render menu at position
    
    User->>EmptyAreaMenu: Click "Create workflow"
    EmptyAreaMenu->>WorkflowList: onCreateWorkflow()
    WorkflowList->>Sidebar: handleCreateWorkflow()
    Sidebar->>Sidebar: Create new workflow

Loading