refactor(sidebar): moved logic into hooks

Author: emir-karabeg

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

@@ -12,9 +12,9 @@ import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
+import { useDragDrop } from '../../hooks/use-drag-drop'
 import { FolderItem } from './components/folder-item/folder-item'
 import { WorkflowItem } from './components/workflow-item/workflow-item'
-import { useDragDrop } from './utils/use-drag-drop'
 
 const logger = createLogger('WorkflowList')
 

…new/workflow-list/utils/use-drag-drop.ts …omponents/sidebar/hooks/use-drag-drop.tsapps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/utils/use-drag-drop.ts renamed to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/utils/use-drag-drop.ts renamed to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-drag-drop.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState } from 'react'
+import { createLogger } from '@/lib/logs/console/logger'
+import { generateFolderName } from '@/lib/naming'
+import { useFolderStore } from '@/stores/folders/store'
+
+const logger = createLogger('useFolderOperations')
+
+interface UseFolderOperationsProps {
+  workspaceId: string
+}
+
+/**
+ * Custom hook to manage folder operations including creating folders.
+ * Handles folder name generation and state management.
+ *
+ * @param props - Configuration object containing workspaceId
+ * @returns Folder operations state and handlers
+ */
+export function useFolderOperations({ workspaceId }: UseFolderOperationsProps) {
+  const { createFolder } = useFolderStore()
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false)
+
+  /**
+   * Create folder handler - creates folder with auto-generated name
+   */
+  const handleCreateFolder = useCallback(async () => {
+    if (isCreatingFolder || !workspaceId) {
+      logger.info('Folder creation already in progress or no workspaceId available')
+      return
+    }
+
+    try {
+      setIsCreatingFolder(true)
+      const folderName = await generateFolderName(workspaceId)
+      await createFolder({ name: folderName, workspaceId })
+      logger.info(`Created folder: ${folderName}`)
+    } catch (error) {
+      logger.error('Failed to create folder:', { error })
+    } finally {
+      setIsCreatingFolder(false)
+    }
+  }, [createFolder, workspaceId, isCreatingFolder])
+
+  return {
+    // State
+    isCreatingFolder,
+
+    // Operations
+    handleCreateFolder,
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-folder-operations.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useSidebarStore } from '@/stores/sidebar/store'
+
+/**
+ * Constants for sidebar sizing
+ */
+const MIN_WIDTH = 232
+const MAX_WIDTH = 400
+
+/**
+ * Custom hook to handle sidebar resize functionality.
+ * Manages mouse events for resizing and enforces min/max width constraints.
+ *
+ * @returns Resize state and handlers
+ */
+export function useSidebarResize() {
+  const { setSidebarWidth } = useSidebarStore()
+  const [isResizing, setIsResizing] = useState(false)
+
+  /**
+   * Handles mouse down on resize handle
+   */
+  const handleMouseDown = useCallback(() => {
+    setIsResizing(true)
+  }, [])
+
+  /**
+   * Setup resize event listeners and body styles when resizing
+   * Cleanup is handled automatically by the effect's return function
+   */
+  useEffect(() => {
+    if (!isResizing) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const newWidth = e.clientX
+      if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
+        setSidebarWidth(newWidth)
+      }
+    }
+
+    const handleMouseUp = () => {
+      setIsResizing(false)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    document.body.style.cursor = 'ew-resize'
+    document.body.style.userSelect = 'none'
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+    }
+  }, [isResizing, setSidebarWidth])
+
+  return {
+    isResizing,
+    handleMouseDown,
+  }
+}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createLogger } from '@/lib/logs/console/logger'
+import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+
+const logger = createLogger('useWorkflowOperations')
+
+interface UseWorkflowOperationsProps {
+  workspaceId: string
+  isWorkspaceValid: (workspaceId: string) => Promise<boolean>
+  onWorkspaceInvalid: () => void
+}
+
+/**
+ * Custom hook to manage workflow operations including creating and loading workflows.
+ * Handles workflow state management and navigation.
+ *
+ * @param props - Configuration object containing workspaceId and validation handlers
+ * @returns Workflow operations state and handlers
+ */
+export function useWorkflowOperations({
+  workspaceId,
+  isWorkspaceValid,
+  onWorkspaceInvalid,
+}: UseWorkflowOperationsProps) {
+  const router = useRouter()
+  const {
+    workflows,
+    isLoading: workflowsLoading,
+    loadWorkflows,
+    createWorkflow,
+  } = useWorkflowRegistry()
+  const [isCreatingWorkflow, setIsCreatingWorkflow] = useState(false)
+
+  /**
+   * Filter and sort workflows for the current workspace
+   */
+  const regularWorkflows = Object.values(workflows)
+    .filter((workflow) => workflow.workspaceId === workspaceId)
+    .sort((a, b) => {
+      // Sort by creation date (newest first) for stable ordering
+      return b.createdAt.getTime() - a.createdAt.getTime()
+    })
+
+  /**
+   * Create workflow handler - creates workflow and navigates to it
+   */
+  const handleCreateWorkflow = useCallback(async () => {
+    if (isCreatingWorkflow) {
+      logger.info('Workflow creation already in progress, ignoring request')
+      return
+    }
+
+    try {
+      setIsCreatingWorkflow(true)
+
+      // Clear workflow diff store when creating a new workflow
+      const { clearDiff } = useWorkflowDiffStore.getState()
+      clearDiff()
+
+      const workflowId = await createWorkflow({
+        workspaceId: workspaceId || undefined,
+      })
+
+      // Navigate to the newly created workflow
+      if (workflowId) {
+        router.push(`/workspace/${workspaceId}/w/${workflowId}`)
+      }
+    } catch (error) {
+      logger.error('Error creating workflow:', error)
+    } finally {
+      setIsCreatingWorkflow(false)
+    }
+  }, [isCreatingWorkflow, createWorkflow, workspaceId, router])
+
+  /**
+   * Load workflows for the current workspace when workspaceId changes
+   */
+  useEffect(() => {
+    if (workspaceId) {
+      // Validate workspace exists before loading workflows
+      isWorkspaceValid(workspaceId).then((valid) => {
+        if (valid) {
+          loadWorkflows(workspaceId)
+        } else {
+          logger.warn(`Workspace ${workspaceId} no longer exists, triggering workspace refresh`)
+          onWorkspaceInvalid()
+        }
+      })
+    }
+  }, [workspaceId, loadWorkflows, isWorkspaceValid, onWorkspaceInvalid])
+
+  return {
+    // State
+    workflows,
+    regularWorkflows,
+    workflowsLoading,
+    isCreatingWorkflow,
+
+    // Operations
+    handleCreateWorkflow,
+    loadWorkflows,
+  }
+}