feat(sidebar): added search UI, updated workflows styling

Author: emir-karabeg

apps/sim/app/(auth)/sso/sso-form.tsx

@@ -11,7 +11,7 @@ import { quickValidateEmail } from '@/lib/email/validation'
 import { env, isFalsy } from '@/lib/env'
 import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
-import { inter } from '@/app/fonts/inter'
+import { inter } from '@/app/fonts/inter/inter'
 import { soehne } from '@/app/fonts/soehne/soehne'
 
 const logger = createLogger('SSOForm')

apps/sim/app/workspace/[workspaceId]/layout.tsx

@@ -5,9 +5,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
   return (
     <Providers>
       <div className='flex min-h-screen w-full'>
-        <div className='z-20'>
-          <SidebarNew />
-        </div>
+        <SidebarNew />
         <div className='flex flex-1 flex-col'>{children}</div>
       </div>
     </Providers>

…onents-new/workflow-list/folder-item.tsx …t/components/folder-item/folder-item.tsxapps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/folder-item.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/folder-item.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx

@@ -17,7 +17,7 @@ export function FolderItem({ folder, level, onDragOver, onDragLeave, onDrop }: F
   const { expandedFolders, toggleExpanded } = useFolderStore()
   const isExpanded = expandedFolders.has(folder.id)
   const [isDragging, setIsDragging] = useState(false)
-  const dragStartedRef = useRef(false)
+  const shouldPreventClickRef = useRef(false)
 
   const handleToggleExpanded = useCallback(() => {
     toggleExpanded(folder.id)
@@ -27,7 +27,7 @@ export function FolderItem({ folder, level, onDragOver, onDragLeave, onDrop }: F
     (e: React.MouseEvent) => {
       e.stopPropagation()
 
-      if (dragStartedRef.current) {
+      if (shouldPreventClickRef.current) {
         e.preventDefault()
         return
       }
@@ -36,39 +36,44 @@ export function FolderItem({ folder, level, onDragOver, onDragLeave, onDrop }: F
     [handleToggleExpanded]
   )
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault()
+        handleToggleExpanded()
+      }
+    },
+    [handleToggleExpanded]
+  )
+
   const handleDragStart = (e: React.DragEvent) => {
-    dragStartedRef.current = true
+    shouldPreventClickRef.current = true
     setIsDragging(true)
 
     e.dataTransfer.setData('folder-id', folder.id)
     e.dataTransfer.effectAllowed = 'move'
-
-    // Set global drag state for validation in other components
-    if (typeof window !== 'undefined') {
-      ;(window as any).currentDragFolderId = folder.id
-    }
   }
 
   const handleDragEnd = () => {
     setIsDragging(false)
     requestAnimationFrame(() => {
-      dragStartedRef.current = false
+      shouldPreventClickRef.current = false
     })
-
-    // Clear global drag state
-    if (typeof window !== 'undefined') {
-      ;(window as any).currentDragFolderId = null
-    }
   }
 
   return (
-    <div className='mb-[2px]' onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
+    <div onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}>
       <div
+        role='button'
+        tabIndex={0}
+        aria-expanded={isExpanded}
+        aria-label={`${folder.name} folder, ${isExpanded ? 'expanded' : 'collapsed'}`}
         className={clsx(
           'flex h-[25px] cursor-pointer items-center rounded-[8px] text-[14px]',
           isDragging ? 'opacity-50' : ''
         )}
         onClick={handleClick}
+        onKeyDown={handleKeyDown}
         draggable
         onDragStart={handleDragStart}
         onDragEnd={handleDragEnd}
@@ -78,11 +83,18 @@ export function FolderItem({ folder, level, onDragOver, onDragLeave, onDrop }: F
             'mr-[8px] h-[10px] w-[10px] flex-shrink-0 text-[#787878] transition-all dark:text-[#787878]',
             isExpanded ? 'rotate-90' : ''
           )}
+          aria-hidden='true'
         />
         {isExpanded ? (
-          <FolderOpen className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[#787878] dark:text-[#787878]' />
+          <FolderOpen
+            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[#787878] dark:text-[#787878]'
+            aria-hidden='true'
+          />
         ) : (
-          <Folder className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[#787878] dark:text-[#787878]' />
+          <Folder
+            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[#787878] dark:text-[#787878]'
+            aria-hidden='true'
+          />
         )}
         <span className='truncate font-medium text-[#AEAEAE] dark:text-[#AEAEAE]'>
           {folder.name}

…ents-new/workflow-list/workflow-item.tsx …mponents/workflow-item/workflow-item.tsxapps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/workflow-item.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/workflow-item.tsx renamed to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx

@@ -17,15 +17,14 @@ export function WorkflowItem({ workflow, active, level }: WorkflowItemProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const [isDragging, setIsDragging] = useState(false)
-  const dragStartedRef = useRef(false)
+  const shouldPreventClickRef = useRef(false)
   const { selectedWorkflows, selectOnly, toggleWorkflowSelection } = useFolderStore()
   const isSelected = selectedWorkflows.has(workflow.id)
 
   const handleClick = (e: React.MouseEvent) => {
-    // Don't propagate click to parent elements
     e.stopPropagation()
 
-    if (isDragging) {
+    if (shouldPreventClickRef.current) {
       e.preventDefault()
       return
     }
@@ -41,7 +40,7 @@ export function WorkflowItem({ workflow, active, level }: WorkflowItemProps) {
   }
 
   const handleDragStart = (e: React.DragEvent) => {
-    dragStartedRef.current = true
+    shouldPreventClickRef.current = true
     setIsDragging(true)
 
     let workflowIds: string[]
@@ -58,7 +57,7 @@ export function WorkflowItem({ workflow, active, level }: WorkflowItemProps) {
   const handleDragEnd = () => {
     setIsDragging(false)
     requestAnimationFrame(() => {
-      dragStartedRef.current = false
+      shouldPreventClickRef.current = false
     })
   }
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/utils/use-drag-drop.ts

@@ -0,0 +1,142 @@
+import { useCallback, useState } from 'react'
+import { createLogger } from '@/lib/logs/console/logger'
+import { useFolderStore } from '@/stores/folders/store'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+
+const logger = createLogger('WorkflowList:DragDrop')
+
+const MAX_NESTING_LEVELS = 2
+
+/**
+ * Custom hook for handling drag and drop operations for workflows and folders
+ */
+export function useDragDrop() {
+  const [dragOverFolderId, setDragOverFolderId] = useState<string | null>(null)
+  const [rootDragOver, setRootDragOver] = useState(false)
+
+  const { updateFolderAPI, getFolderPath } = useFolderStore()
+  const { updateWorkflow } = useWorkflowRegistry()
+
+  /**
+   * Moves one or more workflows to a target folder
+   */
+  const handleWorkflowDrop = useCallback(
+    async (workflowIds: string[], targetFolderId: string | null) => {
+      try {
+        for (const workflowId of workflowIds) {
+          await updateWorkflow(workflowId, { folderId: targetFolderId })
+        }
+        logger.info(`Moved ${workflowIds.length} workflow(s)`)
+      } catch (error) {
+        logger.error('Failed to move workflows:', error)
+      }
+    },
+    [updateWorkflow]
+  )
+
+  /**
+   * Moves a folder to a new parent folder, with validation
+   */
+  const handleFolderMove = useCallback(
+    async (draggedFolderId: string, targetFolderId: string | null) => {
+      try {
+        const folderStore = useFolderStore.getState()
+        const draggedFolderPath = folderStore.getFolderPath(draggedFolderId)
+
+        // Prevent moving folder into its own descendant
+        if (
+          targetFolderId &&
+          draggedFolderPath.some((ancestor) => ancestor.id === targetFolderId)
+        ) {
+          logger.info('Cannot move folder into its own descendant')
+          return
+        }
+
+        // Validate nesting level
+        const targetFolderPath = targetFolderId ? folderStore.getFolderPath(targetFolderId) : []
+        if (targetFolderPath.length >= MAX_NESTING_LEVELS) {
+          logger.info(`Maximum ${MAX_NESTING_LEVELS} levels of nesting allowed`)
+          return
+        }
+
+        await updateFolderAPI(draggedFolderId, { parentId: targetFolderId })
+        logger.info(`Moved folder to ${targetFolderId ? `folder ${targetFolderId}` : 'root'}`)
+      } catch (error) {
+        logger.error('Failed to move folder:', error)
+      }
+    },
+    [updateFolderAPI]
+  )
+
+  /**
+   * Handles drop events for both workflows and folders
+   */
+  const handleFolderDrop = useCallback(
+    async (e: React.DragEvent, targetFolderId: string | null) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setDragOverFolderId(null)
+      setRootDragOver(false)
+
+      // Check if dropping workflows
+      const workflowIdsData = e.dataTransfer.getData('workflow-ids')
+      if (workflowIdsData) {
+        const workflowIds = JSON.parse(workflowIdsData) as string[]
+        await handleWorkflowDrop(workflowIds, targetFolderId)
+        return
+      }
+
+      // Check if dropping a folder
+      const folderIdData = e.dataTransfer.getData('folder-id')
+      if (folderIdData && targetFolderId !== folderIdData) {
+        await handleFolderMove(folderIdData, targetFolderId)
+      }
+    },
+    [handleWorkflowDrop, handleFolderMove]
+  )
+
+  /**
+   * Creates drag event handlers for a specific folder
+   */
+  const createFolderDragHandlers = useCallback(
+    (folderId: string) => ({
+      onDragOver: (e: React.DragEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setDragOverFolderId(folderId)
+      },
+      onDragLeave: (e: React.DragEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setDragOverFolderId(null)
+      },
+      onDrop: (e: React.DragEvent) => handleFolderDrop(e, folderId),
+    }),
+    [handleFolderDrop]
+  )
+
+  /**
+   * Creates drag event handlers for the root drop zone
+   */
+  const createRootDragHandlers = useCallback(
+    () => ({
+      onDragOver: (e: React.DragEvent) => {
+        e.preventDefault()
+        setRootDragOver(true)
+      },
+      onDragLeave: (e: React.DragEvent) => {
+        e.preventDefault()
+        setRootDragOver(false)
+      },
+      onDrop: (e: React.DragEvent) => handleFolderDrop(e, null),
+    }),
+    [handleFolderDrop]
+  )
+
+  return {
+    dragOverFolderId,
+    rootDragOver,
+    createFolderDragHandlers,
+    createRootDragHandlers,
+  }
+}