Refactor map page

frontend/src/hooks/usePaneResize.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback, useRef } from 'react';
+
+interface PaneResizeHandlers {
+  onPointerDown: (e: React.PointerEvent) => void;
+  onPointerMove: (e: React.PointerEvent) => void;
+  onPointerUp: () => void;
+}
+
+export function usePaneResize(
+  initialWidth: number,
+  minWidth: number,
+  maxWidth: number,
+  side: 'left' | 'right'
+): [number, PaneResizeHandlers] {
+  const [width, setWidth] = useState(initialWidth);
+  const draggingRef = useRef(false);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    draggingRef.current = true;
+  }, []);
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!draggingRef.current) return;
+      const newWidth =
+        side === 'left'
+          ? Math.min(maxWidth, Math.max(minWidth, e.clientX))
+          : Math.min(maxWidth, Math.max(minWidth, window.innerWidth - e.clientX));
+      setWidth(newWidth);
+    },
+    [side, minWidth, maxWidth]
+  );
+
+  const handlePointerUp = useCallback(() => {
+    draggingRef.current = false;
+  }, []);
+
+  return [
+    width,
+    {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+    },
+  ];
+}