feat(web): make left column width adjustable by codex

[yzs981130]

Motivation

• Ensure user-resized sessions sidebar width.

Description

• Added state and refs (sidebarWidth, sidebarWidthRef, isDraggingSidebar) to manage size.
• Consolidated width clamping, state update, and localStorage persistence into a single updateSidebarWidth helper and used it for pointer drag and resize-reclamp actions.

---

Codex Task

[github-actions]

[MINOR] [PERF] localStorage write on every pointermove

Why this is a problem: pointermove fires at high frequency; localStorage.setItem is synchronous and can block the main thread, making the resize feel janky on lower-end devices. This path runs on every drag tick.

Suggested fix:

const updateSidebarWidth = useCallback((nextWidth: number) => {
    const clamped = clampSidebarWidth(nextWidth)
    if (sidebarWidthRef.current === clamped) return
    sidebarWidthRef.current = clamped
    setSidebarWidth(clamped)
}, [clampSidebarWidth])

const persistSidebarWidth = useCallback(() => {
    if (typeof window !== 'undefined' && sidebarWidthRef.current != null) {
        window.localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(sidebarWidthRef.current))
    }
}, [])

const handlePointerUp = () => {
    persistSidebarWidth()
    setIsDraggingSidebar(false)
}

[github-actions]

Findings

• [Minor] Synchronous localStorage.setItem on every pointermove may cause resize jank; consider persisting on pointerup or debouncing web/src/router.tsx:129

Summary

• 1 minor perf issue. Residual risk: drag feels sluggish on low-end devices if left as-is.

Testing

• Not run (automation)

[github-actions]

Findings

• [Major] Drag state can stick if pointer released outside window; no pointer capture/cancel handling, so pointerup may not fire. Resize mode stuck, cursor/userSelect locked. Evidence web/src/router.tsx:179, web/src/router.tsx:273.
  Suggested fix:

  onPointerDown={(event) => {
      if (event.button !== 0) return
      event.preventDefault()
      event.currentTarget.setPointerCapture(event.pointerId)
      setIsDraggingSidebar(true)
  }}
  
  useEffect(() => {
      if (!isDraggingSidebar) return
      const stopDragging = (event: PointerEvent) => {
          ;(event.target as HTMLElement | null)?.releasePointerCapture?.(event.pointerId)
          setIsDraggingSidebar(false)
      }
      window.addEventListener('pointerup', stopDragging)
      window.addEventListener('pointercancel', stopDragging)
      return () => {
          window.removeEventListener('pointerup', stopDragging)
          window.removeEventListener('pointercancel', stopDragging)
      }
  }, [isDraggingSidebar])

• [Minor] localStorage.setItem on every pointermove; synchronous write per frame → drag jank. Evidence web/src/router.tsx:129, web/src/router.tsx:184.
  Suggested fix:

  const updateSidebarWidth = useCallback((nextWidth: number, persist = true) => {
      const clamped = clampSidebarWidth(nextWidth)
      sidebarWidthRef.current = clamped
      setSidebarWidth(clamped)
      if (persist && typeof window !== 'undefined') {
          window.localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(clamped))
      }
  }, [clampSidebarWidth])
  
  const handlePointerMove = (event: PointerEvent) => {
      updateSidebarWidth(event.clientX, false)
  }
  
  const handlePointerUp = () => {
      if (sidebarWidthRef.current != null) {
          updateSidebarWidth(sidebarWidthRef.current, true)
      }
      setIsDraggingSidebar(false)
  }

Summary

• Review mode: initial
• 2 findings. Residual risk: drag UX regressions; no web tests.

Testing

• Not run (automation)
• Suggested: manual drag resize, release outside window, window resize clamp

[github-actions]

[MAJOR] Drag state can stick if pointer released outside window; no pointer capture/cancel handling, so pointerup may not fire. Resize mode stuck.
Suggested fix:

onPointerDown={(event) => {
    if (event.button !== 0) return
    event.preventDefault()
    event.currentTarget.setPointerCapture(event.pointerId)
    setIsDraggingSidebar(true)
}}

useEffect(() => {
    if (!isDraggingSidebar) return
    const stopDragging = (event: PointerEvent) => {
        ;(event.target as HTMLElement | null)?.releasePointerCapture?.(event.pointerId)
        setIsDraggingSidebar(false)
    }
    window.addEventListener('pointerup', stopDragging)
    window.addEventListener('pointercancel', stopDragging)
    return () => {
        window.removeEventListener('pointerup', stopDragging)
        window.removeEventListener('pointercancel', stopDragging)
    }
}, [isDraggingSidebar])

[github-actions]

[MINOR] localStorage.setItem on every pointermove; synchronous write per frame → drag jank.
Suggested fix:

const updateSidebarWidth = useCallback((nextWidth: number, persist = true) => {
    const clamped = clampSidebarWidth(nextWidth)
    sidebarWidthRef.current = clamped
    setSidebarWidth(clamped)
    if (persist && typeof window !== 'undefined') {
        window.localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, String(clamped))
    }
}, [clampSidebarWidth])

const handlePointerMove = (event: PointerEvent) => {
    updateSidebarWidth(event.clientX, false)
}

const handlePointerUp = () => {
    if (sidebarWidthRef.current != null) {
        updateSidebarWidth(sidebarWidthRef.current, true)
    }
    setIsDraggingSidebar(false)
}