Function useResizableDrawer

apps/start/src/hooks/use-resizable-drawer.ts:32–104

({
  defaultWidth,
  minWidth,
  maxWidth,
  storageKey,
  edge = 'left',
}: Options)

 * cursor/userSelect tweaks in the consumer.
 */
export function useResizableDrawer({
  defaultWidth,
  minWidth,
  maxWidth,
  storageKey,
  edge = 'left',
}: Options): Result {
  const [width, setWidth] = useState(defaultWidth);

  // Hydrate from localStorage on mount (avoids SSR mismatch).
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const raw = window.localStorage.getItem(storageKey);
    if (!raw) return;
    const n = Number(raw);
    if (Number.isNaN(n)) return;
    setWidth(Math.min(maxWidth, Math.max(minWidth, n)));
  }, [storageKey, minWidth, maxWidth]);

  // Persist on idle (debounced).
  useEffect(() => {
    if (typeof window === 'undefined') return;
    const t = window.setTimeout(() => {
      window.localStorage.setItem(storageKey, String(width));
    }, 300);
    return () => window.clearTimeout(t);
  }, [width, storageKey]);

  const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);

  const onMouseDown = useCallback(
    (e: React.MouseEvent) => {
      e.preventDefault();
      dragRef.current = { startX: e.clientX, startWidth: width };

      const onMove = (ev: MouseEvent) => {
        if (!dragRef.current) return;
        const dx =
          edge === 'left'
            ? dragRef.current.startX - ev.clientX
            : ev.clientX - dragRef.current.startX;
        const next = Math.min(
          maxWidth,
          Math.max(minWidth, dragRef.current.startWidth + dx),
        );
        setWidth(next);
      };

      const onUp = () => {
        dragRef.current = null;
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        window.removeEventListener('mousemove', onMove);
        window.removeEventListener('mouseup', onUp);
      };

      document.body.style.cursor = 'ew-resize';
      document.body.style.userSelect = 'none';