improvement(sidebar): auto-scroll (#2312)

* fix(sidebar): re-render auto-scroll

* improvement: sidebar-scrolling listener

Author: emir-karabeg

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx

@@ -10,6 +10,7 @@ import { useBrandConfig } from '@/lib/branding/branding'
 import { cn } from '@/lib/core/utils/cn'
 import { getTriggersForSidebar, hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
 import { searchItems } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-utils'
+import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { getAllBlocks } from '@/blocks'
 
 interface SearchModalProps {
@@ -430,6 +431,12 @@ export function SearchModal({
               window.open(item.href, '_blank', 'noopener,noreferrer')
             } else {
               router.push(item.href)
+              // Scroll to the workflow in the sidebar after navigation
+              if (item.type === 'workflow') {
+                window.dispatchEvent(
+                  new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: item.id } })
+                )
+              }
             }
           }
           break

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

@@ -14,6 +14,7 @@ import {
   useItemDrag,
   useItemRename,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { useDeleteFolder, useDuplicateFolder } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useCreateFolder, useUpdateFolder } from '@/hooks/queries/folders'
 import { useCreateWorkflow } from '@/hooks/queries/workflows'
@@ -87,6 +88,10 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
 
       if (result.id) {
         router.push(`/workspace/${workspaceId}/w/${result.id}`)
+        // Scroll to the newly created workflow
+        window.dispatchEvent(
+          new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: result.id } })
+        )
       }
     } catch (error) {
       // Error already handled by mutation's onError callback
@@ -100,11 +105,17 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
    */
   const handleCreateFolderInFolder = useCallback(async () => {
     try {
-      await createFolderMutation.mutateAsync({
+      const result = await createFolderMutation.mutateAsync({
         workspaceId,
         name: 'New Folder',
         parentId: folder.id,
       })
+      if (result.id) {
+        // Scroll to the newly created folder
+        window.dispatchEvent(
+          new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: result.id } })
+        )
+      }
     } catch (error) {
       logger.error('Failed to create folder:', error)
     }

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import clsx from 'clsx'
 import { useParams, usePathname } from 'next/navigation'
 import { FolderItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item'
@@ -144,11 +144,8 @@ export function WorkflowList({
     [pathname, workspaceId]
   )
 
-  // Track last scrolled workflow to avoid redundant scroll checks
-  const lastScrolledWorkflowRef = useRef<string | null>(null)
-
   /**
-   * Auto-expand folders, select active workflow, and scroll into view if needed.
+   * Auto-expand folders and select active workflow.
    */
   useEffect(() => {
     if (!workflowId || isLoading || foldersLoading) return
@@ -164,25 +161,6 @@ export function WorkflowList({
     if (!selectedWorkflows.has(workflowId)) {
       selectOnly(workflowId)
     }
-
-    // Skip scroll check if already handled for this workflow
-    if (lastScrolledWorkflowRef.current === workflowId) return
-    lastScrolledWorkflowRef.current = workflowId
-
-    // Scroll after render only if element is completely off-screen
-    requestAnimationFrame(() => {
-      const element = document.querySelector(`[data-item-id="${workflowId}"]`)
-      const container = scrollContainerRef.current
-      if (!element || !container) return
-
-      const { top: elTop, bottom: elBottom } = element.getBoundingClientRect()
-      const { top: ctTop, bottom: ctBottom } = container.getBoundingClientRect()
-
-      // Only scroll if completely above or below the visible area
-      if (elBottom <= ctTop || elTop >= ctBottom) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      }
-    })
   }, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded])
 
   const renderWorkflowItem = useCallback(