fix(variables): fixed floating variables, added autcomplete off to prevent suggested values

[waleedlatif1]

Summary

• Fixed floating variables, restored collaborative features and ensured it works
• Added autcomplete off to prevent suggested values in subblocks

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)

[vercel]

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

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 12, 2025 1:52am

[greptile-apps]

Greptile Overview

Greptile Summary

This PR restores the floating variables modal feature with full collaborative support. The main changes include:

• Re-enabled variables modal: Uncommented imports, state management (useVariablesStore), and UI elements in panel-new.tsx to restore the variables menu option and floating modal
• Integrated collaborative workflow: Updated variables.tsx to use collaborative hooks (collaborativeAddVariable, collaborativeUpdateVariable, collaborativeDeleteVariable) instead of direct store operations, enabling real-time multi-user synchronization
• Icon standardization: Replaced all Trash2 and conflicting Trash icons from lucide-react with the custom Trash icon from the emcn design system across 13 files for consistency

The variables modal now properly syncs changes across all collaborators in real-time through the socket-based collaborative workflow system.

Confidence Score: 4/5

• This PR is safe to merge with low risk
• The changes are well-structured and focused on restoring a previously commented-out feature. The integration with collaborative workflow hooks follows established patterns in the codebase. The icon standardization is straightforward and low-risk. Minor uncertainty around edge cases in real-time collaboration justifies a score of 4 rather than 5.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx	4/5	Restored variables modal with collaborative features; switched from local store to collaborative hooks (collaborativeUpdateVariable, collaborativeAddVariable, collaborativeDeleteVariable) and proper variable store integration
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/panel-new.tsx	5/5	Re-enabled variables modal by uncommenting imports, state, and UI elements; restored variables menu item in popover

Sequence Diagram

sequenceDiagram
participant User
participant PanelNew as Panel Component
participant VariablesStore as Variables Store
participant CollaborativeHook as useCollaborativeWorkflow
participant VariablesModal as Variables Modal
participant Socket as Socket/Backend
User->>PanelNew: Click Variables menu item
PanelNew->>VariablesStore: setIsOpen(true)
VariablesStore-->>VariablesModal: isOpen=true (render modal)
VariablesModal->>CollaborativeHook: Get collaborative functions
CollaborativeHook-->>VariablesModal: Return collaborative CRUD functions
User->>VariablesModal: Add new variable
VariablesModal->>CollaborativeHook: collaborativeAddVariable(data)
CollaborativeHook->>VariablesStore: addVariable(data, id)
CollaborativeHook->>Socket: Emit add variable operation
Socket-->>CollaborativeHook: Confirm operation
User->>VariablesModal: Update variable field
VariablesModal->>CollaborativeHook: collaborativeUpdateVariable(id, field, value)
CollaborativeHook->>VariablesStore: updateVariable(id, updates)
CollaborativeHook->>Socket: Emit update operation
Socket-->>CollaborativeHook: Confirm operation
User->>VariablesModal: Delete variable
VariablesModal->>CollaborativeHook: collaborativeDeleteVariable(id)
CollaborativeHook->>VariablesStore: deleteVariable(id)
CollaborativeHook->>Socket: Emit delete operation
Socket-->>CollaborativeHook: Confirm operation
Note over VariablesModal,Socket: All changes sync in real-time<br/>to other collaborators

Loading

[greptile-apps]

_{16 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}