improvement(sidebar): blocks and triggers expanded indicator

Author: emir-karabeg

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

@@ -2,6 +2,7 @@
 
 import { useCallback, useMemo, useRef } from 'react'
 import clsx from 'clsx'
+import { ChevronDown } from 'lucide-react'
 import { getBlocksForSidebar } from '@/lib/workflows/trigger-utils'
 import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
@@ -32,7 +33,7 @@ export function Blocks({ disabled = false }: BlocksProps) {
   const containerRef = useRef<HTMLDivElement>(null)
 
   // Panel resize hook
-  const { handleMouseDown, handleToggle } = usePanelResize({
+  const { handleMouseDown, handleToggle, isCollapsed } = usePanelResize({
     panelType: 'blocks',
     containerRef,
   })
@@ -152,10 +153,17 @@ export function Blocks({ disabled = false }: BlocksProps) {
         onMouseDown={handleMouseDown}
       />
       <div
-        className='flex-shrink-0 cursor-pointer px-[10px] pt-[3px] pb-[5px]'
+        className='flex flex-shrink-0 cursor-pointer items-center justify-between px-[10px] pt-[3px] pb-[5px]'
         onClick={handleToggle}
       >
         <div className='font-medium text-[#AEAEAE] text-small dark:text-[#AEAEAE]'>Blocks</div>
+        <ChevronDown
+          className={clsx(
+            'h-[12px] w-[12px] text-[#787878] transition-all dark:text-[#787878]',
+            !isCollapsed && 'rotate-180'
+          )}
+          aria-hidden='true'
+        />
       </div>
 
       <div className='blocks-scrollable flex-1 overflow-y-auto overflow-x-hidden px-[8px]'>

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

@@ -2,6 +2,7 @@
 
 import { useCallback, useMemo, useRef } from 'react'
 import clsx from 'clsx'
+import { ChevronDown } from 'lucide-react'
 import { getTriggersForSidebar, hasTriggerCapability } from '@/lib/workflows/trigger-utils'
 import type { BlockConfig } from '@/blocks/types'
 import { usePanelResize } from '../../hooks/use-panel-resize'
@@ -21,7 +22,7 @@ export function Triggers({ disabled = false }: TriggersProps) {
   const containerRef = useRef<HTMLDivElement>(null)
 
   // Panel resize hook
-  const { handleMouseDown, handleToggle } = usePanelResize({
+  const { handleMouseDown, handleToggle, isCollapsed } = usePanelResize({
     panelType: 'triggers',
     containerRef,
   })
@@ -96,10 +97,17 @@ export function Triggers({ disabled = false }: TriggersProps) {
         onMouseDown={handleMouseDown}
       />
       <div
-        className='flex-shrink-0 cursor-pointer px-[10px] pt-[3px] pb-[5px]'
+        className='flex flex-shrink-0 cursor-pointer items-center justify-between px-[10px] pt-[3px] pb-[5px]'
         onClick={handleToggle}
       >
         <div className='font-medium text-[#AEAEAE] text-small dark:text-[#AEAEAE]'>Triggers</div>
+        <ChevronDown
+          className={clsx(
+            'h-[12px] w-[12px] text-[#787878] dark:text-[#787878]',
+            !isCollapsed && 'rotate-180'
+          )}
+          aria-hidden='true'
+        />
       </div>
 
       <div className='triggers-scrollable flex-1 overflow-y-auto overflow-x-hidden px-[8px]'>

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

@@ -41,6 +41,7 @@ interface UsePanelResizeProps {
  * @returns Object containing panel state and handlers
  * @returns currentHeight - Current height of the panel in pixels
  * @returns isResizing - Boolean indicating if the panel is currently being resized
+ * @returns isCollapsed - Boolean indicating if the panel is currently collapsed
  * @returns handleMouseDown - Handler for mouse down events on the resize handle
  * @returns handleToggle - Handler to toggle panel between collapsed and expanded states
  */
@@ -54,6 +55,15 @@ export function usePanelResize({ panelType, containerRef }: UsePanelResizeProps)
   // Get current panel's height and setter based on type
   const currentHeight = panelType === 'triggers' ? triggersHeight : blocksHeight
 
+  /**
+   * Determine if the panel is currently collapsed
+   */
+  const isCollapsed =
+    panelType === 'triggers'
+      ? Math.abs(triggersHeight - (blocksHeight + HEADER_HEIGHT)) <= 2 ||
+        triggersHeight <= MIN_HEIGHT
+      : blocksHeight <= MIN_HEIGHT
+
   /**
    * Handles mouse down event on the resize handle to initiate panel resizing
    *
@@ -244,6 +254,7 @@ export function usePanelResize({ panelType, containerRef }: UsePanelResizeProps)
   return {
     currentHeight,
     isResizing,
+    isCollapsed,
     handleMouseDown,
     handleToggle,
   }