XCDesktop/src/hooks/ui/useSidebarResize.ts

import { useCallback, useEffect, useRef, useState } from 'react'

export const useSidebarResize = (initialWidth: number = 250) => {
  const [sidebarWidth, setSidebarWidth] = useState(initialWidth)
  const [isResizing, setIsResizing] = useState(false)
  const offsetX = useRef(0)

  const startResizing = useCallback((e: React.MouseEvent) => {
    e.preventDefault()
    const rect = (e.target as HTMLElement).getBoundingClientRect()
    offsetX.current = e.clientX - rect.left
    setIsResizing(true)
  }, [])

  useEffect(() => {
    if (!isResizing) return

    const stopResizing = () => setIsResizing(false)
    const resize = (e: MouseEvent) => {
      const newWidth = e.clientX - offsetX.current
      if (newWidth > 150 && newWidth < 600) {
        setSidebarWidth(newWidth)
      }
    }

    window.addEventListener('mousemove', resize)
    window.addEventListener('mouseup', stopResizing)
    return () => {
      window.removeEventListener('mousemove', resize)
      window.removeEventListener('mouseup', stopResizing)
    }
  }, [isResizing])

  return { sidebarWidth, startResizing }
}