feat(sidebar): scroll to workflow/folder

[emir-karabeg]

Summary

Auto-scroll to workflow or folder in sidebar.

Type of Change

• New feature

Testing

Solo.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• 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			Dec 11, 2025 5:59am

[greptile-apps]

Greptile Overview

Greptile Summary

Implements auto-scroll functionality to bring workflows and folders into view when navigating in the sidebar.

Key Changes:

• workflow-list.tsx: Added scroll-to-view logic using requestAnimationFrame with a ref-based deduplication mechanism to prevent redundant scrolls for the same workflow
• sidebar.tsx: Simplified scroll helper by removing the retry timeout mechanism in favor of a single requestAnimationFrame call

Issues Found:

• Missing scrollContainerRef in the dependency array of the useEffect hook in workflow-list.tsx

Confidence Score: 4/5

• This PR is safe to merge with one minor fix needed
• The implementation is solid and improves UX by auto-scrolling to workflows/folders. However, there's a missing dependency in the useEffect hook that could cause stale closure issues in edge cases
• Pay attention to workflow-list.tsx - the useEffect dependency array needs to include scrollContainerRef

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx	4/5	Added auto-scroll logic using requestAnimationFrame and ref tracking to scroll workflows into view when navigating
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	5/5	Simplified scroll logic by removing retry mechanism in favor of single requestAnimationFrame call

Sequence Diagram

sequenceDiagram
    participant User
    participant Sidebar
    participant WorkflowList
    participant Browser
    
    User->>Sidebar: Navigate to workflow
    Sidebar->>WorkflowList: workflowId updated
    
    WorkflowList->>WorkflowList: Check if loading
    
    alt Has folderId
        WorkflowList->>WorkflowList: Get folder path
        WorkflowList->>WorkflowList: Expand folders
    end
    
    WorkflowList->>WorkflowList: Select workflow
    WorkflowList->>WorkflowList: Check lastScrolledWorkflowRef
    
    alt Not already scrolled
        WorkflowList->>WorkflowList: Update lastScrolledWorkflowRef
        WorkflowList->>Browser: requestAnimationFrame
        Browser->>WorkflowList: Next frame
        WorkflowList->>Browser: querySelector for element
        Browser-->>WorkflowList: Element & Container
        WorkflowList->>WorkflowList: Calculate visibility
        
        alt Element off-screen
            WorkflowList->>Browser: scrollIntoView
            Browser->>User: Scroll to workflow
        end
    end

Loading

[greptile-apps]

_{2 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

syntax: Missing scrollContainerRef in dependency array

Suggested change

	}, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded])
	}, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded, scrollContainerRef])

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
Line: 185:185

Comment:
**syntax:** Missing `scrollContainerRef` in dependency array

```suggestion
  }, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded, scrollContainerRef])
```

How can I resolve this? If you propose a fix, please make it concise.