Skip to content

Commit 193a15a

Browse files
authored
improvement(sidebar): auto-scroll (#2312)
* fix(sidebar): re-render auto-scroll * improvement: sidebar-scrolling listener
1 parent 39d5d79 commit 193a15a

File tree

4 files changed

+96
-140
lines changed

4 files changed

+96
-140
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useBrandConfig } from '@/lib/branding/branding'
1010
import { cn } from '@/lib/core/utils/cn'
1111
import { getTriggersForSidebar, hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
1212
import { searchItems } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-utils'
13+
import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
1314
import { getAllBlocks } from '@/blocks'
1415

1516
interface SearchModalProps {
@@ -430,6 +431,12 @@ export function SearchModal({
430431
window.open(item.href, '_blank', 'noopener,noreferrer')
431432
} else {
432433
router.push(item.href)
434+
// Scroll to the workflow in the sidebar after navigation
435+
if (item.type === 'workflow') {
436+
window.dispatchEvent(
437+
new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: item.id } })
438+
)
439+
}
433440
}
434441
}
435442
break

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
useItemDrag,
1515
useItemRename,
1616
} from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
17+
import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
1718
import { useDeleteFolder, useDuplicateFolder } from '@/app/workspace/[workspaceId]/w/hooks'
1819
import { useCreateFolder, useUpdateFolder } from '@/hooks/queries/folders'
1920
import { useCreateWorkflow } from '@/hooks/queries/workflows'
@@ -87,6 +88,10 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
8788

8889
if (result.id) {
8990
router.push(`/workspace/${workspaceId}/w/${result.id}`)
91+
// Scroll to the newly created workflow
92+
window.dispatchEvent(
93+
new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: result.id } })
94+
)
9095
}
9196
} catch (error) {
9297
// Error already handled by mutation's onError callback
@@ -100,11 +105,17 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
100105
*/
101106
const handleCreateFolderInFolder = useCallback(async () => {
102107
try {
103-
await createFolderMutation.mutateAsync({
108+
const result = await createFolderMutation.mutateAsync({
104109
workspaceId,
105110
name: 'New Folder',
106111
parentId: folder.id,
107112
})
113+
if (result.id) {
114+
// Scroll to the newly created folder
115+
window.dispatchEvent(
116+
new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: result.id } })
117+
)
118+
}
108119
} catch (error) {
109120
logger.error('Failed to create folder:', error)
110121
}

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

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { useCallback, useEffect, useMemo, useRef } from 'react'
3+
import { useCallback, useEffect, useMemo } from 'react'
44
import clsx from 'clsx'
55
import { useParams, usePathname } from 'next/navigation'
66
import { FolderItem } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item'
@@ -144,11 +144,8 @@ export function WorkflowList({
144144
[pathname, workspaceId]
145145
)
146146

147-
// Track last scrolled workflow to avoid redundant scroll checks
148-
const lastScrolledWorkflowRef = useRef<string | null>(null)
149-
150147
/**
151-
* Auto-expand folders, select active workflow, and scroll into view if needed.
148+
* Auto-expand folders and select active workflow.
152149
*/
153150
useEffect(() => {
154151
if (!workflowId || isLoading || foldersLoading) return
@@ -164,25 +161,6 @@ export function WorkflowList({
164161
if (!selectedWorkflows.has(workflowId)) {
165162
selectOnly(workflowId)
166163
}
167-
168-
// Skip scroll check if already handled for this workflow
169-
if (lastScrolledWorkflowRef.current === workflowId) return
170-
lastScrolledWorkflowRef.current = workflowId
171-
172-
// Scroll after render only if element is completely off-screen
173-
requestAnimationFrame(() => {
174-
const element = document.querySelector(`[data-item-id="${workflowId}"]`)
175-
const container = scrollContainerRef.current
176-
if (!element || !container) return
177-
178-
const { top: elTop, bottom: elBottom } = element.getBoundingClientRect()
179-
const { top: ctTop, bottom: ctBottom } = container.getBoundingClientRect()
180-
181-
// Only scroll if completely above or below the visible area
182-
if (elBottom <= ctTop || elTop >= ctBottom) {
183-
element.scrollIntoView({ behavior: 'smooth', block: 'center' })
184-
}
185-
})
186164
}, [workflowId, activeWorkflowFolderId, isLoading, foldersLoading, getFolderPath, setExpanded])
187165

188166
const renderWorkflowItem = useCallback(

0 commit comments

Comments
 (0)