Pane handles: extract shared useColResizeDrag pointer gesture

src/app/components/ResizeHandle.tsx

@@ -19,6 +19,7 @@
  */
 
 import { useLayoutEffect, useRef, useState } from 'react';
+import { useColResizeDrag } from '../hooks/useColResizeDrag';
 import { clampSideWidth, sideWidthValue, usePanesStore, type PaneSide } from '../stores/PanesStore';
 import styles from './ResizeHandle.module.css';
 
@@ -63,35 +64,15 @@ export function ResizeHandle({ side, label }: ResizeHandleProps) {
     setWidth(side, clampSideWidth(side, desired, readContainerWidth(), other));
   };
 
-  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    if (e.button !== 0) return; // primary button only
-    e.preventDefault();
-    const startX = e.clientX;
-    const startWidth =
+  // The left handle grows its pane as it moves right; the right handle (left
+  // of the preview) shrinks the preview as it moves right.
+  const onPointerDown = useColResizeDrag(
+    () =>
       side === 'library'
         ? usePanesStore.getState().libraryWidth
-        : usePanesStore.getState().previewWidth;
-
-    const onMove = (ev: PointerEvent) => {
-      const delta = ev.clientX - startX;
-      // The left handle grows its pane as it moves right; the right handle (left
-      // of the preview) shrinks the preview as it moves right.
-      const desired = side === 'library' ? startWidth + delta : startWidth - delta;
-      applyWidth(desired);
-    };
-    const onUp = () => {
-      window.removeEventListener('pointermove', onMove);
-      window.removeEventListener('pointerup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-
-    window.addEventListener('pointermove', onMove);
-    window.addEventListener('pointerup', onUp);
-    // While dragging, force the resize cursor and suppress text selection.
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-  };
+        : usePanesStore.getState().previewWidth,
+    (startWidth, delta) => applyWidth(side === 'library' ? startWidth + delta : startWidth - delta),
+  );
 
   // Keyboard model per WAI-ARIA APG → Window Splitter: arrows nudge; Home/End jump
   // to the pane's smallest/largest allowed size (clampSideWidth caps the extremes).