Function useResizablePanel

ui/src/hooks/useResizablePanel.ts:56–202

({
  storageKey,
  defaultWidth,
  minWidth,
  maxWidth,
  side,
  panelRef,
}: UseResizablePanelOptions)

 * and makes it into localStorage.
 */
export function useResizablePanel({
  storageKey,
  defaultWidth,
  minWidth,
  maxWidth,
  side,
  panelRef,
}: UseResizablePanelOptions): {
  width: number;
  handleMouseDown: PanelResizeMouseDown;
} {
  const [width, setWidth] = useState(() => {
    const stored = localStorage.getItem(storageKey);
    if (stored) {
      const parsed = parseInt(stored, 10);
      if (!isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth)
        return parsed;
    }
    return defaultWidth;
  });

  const isDragging = useRef(false);
  const startX = useRef(0);
  const startWidth = useRef(0);

  const handleMouseDown = useCallback<PanelResizeMouseDown>(
    (e, cursorOverride) => {
      e.preventDefault();
      isDragging.current = true;
      startX.current = e.clientX;
      // Anchor the drag to whatever width the panel is ACTUALLY rendering —
      // if a `max-width` CSS clamp has pinned the panel smaller than the
      // stored React state (e.g. the viewport shrank since last drag), this
      // keeps the drag feeling continuous with what's on screen.
      const rendered = panelRef.current?.getBoundingClientRect().width;
      startWidth.current = rendered ? Math.round(rendered) : width;
      document.body.style.cursor = cursorOverride ?? 'col-resize';
      document.body.style.userSelect = 'none';
    },
    [width, panelRef],
  );

  useEffect(() => {
    let pending: number | null = null;
    let rafId: number | null = null;

    const flush = () => {
      rafId = null;
      const panel = panelRef.current;
      if (pending == null || !panel) return;
      // Clamp pending to whatever the parent currently allows so the
      // drag stops cleanly at the available limit (and doesn't fight the
      // ResizeObserver's clamp on every frame).
      const parent = panel.parentElement;
      if (parent) {
        const panelRect = panel.getBoundingClientRect();
        const parentRect = parent.getBoundingClientRect();
        const available = parentRect.right - panelRect.left - 4;