diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx index 8c361a36..acf679c2 100644 --- a/src/app/client/client-view.tsx +++ b/src/app/client/client-view.tsx @@ -7,6 +7,7 @@ import { type ReactNode, useCallback, useEffect, + useLayoutEffect, useRef, useState, } from "react"; @@ -99,10 +100,11 @@ export function ClientView({ const toolbarRef = useRef(null); const dragRef = useRef({ startX: 0, startY: 0, startTop: 0, startLeft: 0 }); - const [pos, setPos] = useState({ top: 8, left: -1 }); + const posRef = useRef({ top: 8, left: 8 }); + const [pos, setPos] = useState<{ top: number; left: number } | null>(null); const [dragging, setDragging] = useState(false); - useEffect(() => { + useLayoutEffect(() => { const params = new URLSearchParams(window.location.search); const ux = params.get("toolbarX"), uy = params.get("toolbarY"); if (ux && uy) { setPos({ top: Number(uy), left: Number(ux) }); return; } @@ -117,9 +119,10 @@ export function ClientView({ setPos({ top: 8, left: window.innerWidth - w - 8 }); }, []); + useEffect(() => { if (pos) posRef.current = pos; }, [pos]); + const startDrag = useCallback((clientX: number, clientY: number) => { - const el = toolbarRef.current; - if (!el) return; + if (!pos) return; dragRef.current = { startX: clientX, startY: clientY, @@ -127,7 +130,7 @@ export function ClientView({ startLeft: pos.left, }; setDragging(true); - }, [pos.top, pos.left]); + }, [pos]); const handleMouseDown = useCallback((e: React.MouseEvent) => { if ((e.target as HTMLElement).closest("button, a")) return; @@ -162,13 +165,11 @@ export function ClientView({ } function onEnd() { setDragging(false); - setPos(p => { - try { - localStorage.setItem("client_toolbar_x", String(p.left)); - localStorage.setItem("client_toolbar_y", String(p.top)); - } catch {} - return p; - }); + setPos(p => p); + try { + localStorage.setItem("client_toolbar_x", String(posRef.current.left)); + localStorage.setItem("client_toolbar_y", String(posRef.current.top)); + } catch {} } window.addEventListener("mousemove", onMove); window.addEventListener("mouseup", onEnd); @@ -184,13 +185,14 @@ export function ClientView({ return ( <> -
= 0 ? pos.left : undefined, right: pos.left < 0 ? 8 : undefined }} - onMouseDown={handleMouseDown} - onTouchStart={handleTouchStart} - > + {pos ? ( +
+ ) : null}