From b77dbb65f6db98ad96a78a929a6e47f11e45223b Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sun, 26 Jul 2026 18:04:50 +0200
Subject: [PATCH] fix: cleanup old position system, add proper useRef import

---
 src/app/client/client-view.tsx | 143 ++++++++++++++++++++++++---------
 1 file changed, 104 insertions(+), 39 deletions(-)

diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx
index 26907060..8c361a36 100644
--- a/src/app/client/client-view.tsx
+++ b/src/app/client/client-view.tsx
@@ -7,6 +7,7 @@ import {
 	type ReactNode,
 	useCallback,
 	useEffect,
+	useRef,
 	useState,
 } from "react";
 
@@ -96,47 +97,99 @@ export function ClientView({
 	const sep = base.includes("?") ? "&" : "?";
 	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
 
-	const POSITIONS = ["top-left", "top-right", "bottom-right", "bottom-left"] as const;
-	type Position = (typeof POSITIONS)[number];
-
-	const [position, setPosition] = useState<Position>("top-right");
+	const toolbarRef = useRef<HTMLDivElement>(null);
+	const dragRef = useRef({ startX: 0, startY: 0, startTop: 0, startLeft: 0 });
+	const [pos, setPos] = useState({ top: 8, left: -1 });
+	const [dragging, setDragging] = useState(false);
 
 	useEffect(() => {
 		const params = new URLSearchParams(window.location.search);
-		const urlPos = params.get("toolbar");
-		if ((POSITIONS as readonly string[]).includes(urlPos ?? "")) {
-			setPosition(urlPos as Position);
-			return;
-		}
+		const ux = params.get("toolbarX"), uy = params.get("toolbarY");
+		if (ux && uy) { setPos({ top: Number(uy), left: Number(ux) }); return; }
+
 		try {
-			const stored = localStorage.getItem("client_toolbar_position");
-			if ((POSITIONS as readonly string[]).includes(stored ?? "")) {
-				setPosition(stored as Position);
-				return;
-			}
-		} catch { /* private mode */ }
-		if ((POSITIONS as readonly string[]).includes(defaultToolbarPosition))
-			setPosition(defaultToolbarPosition as Position);
-	}, [defaultToolbarPosition]);
+			const sx = localStorage.getItem("client_toolbar_x");
+			const sy = localStorage.getItem("client_toolbar_y");
+			if (sx && sy) { setPos({ top: Number(sy), left: Number(sx) }); return; }
+		} catch {}
 
-	function cyclePosition() {
-		const idx = POSITIONS.indexOf(position);
-		const next = POSITIONS[(idx + 1) % POSITIONS.length];
-		setPosition(next);
-		try { localStorage.setItem("client_toolbar_position", next); } catch {}
-	}
+		const w = toolbarRef.current?.offsetWidth ?? 220;
+		setPos({ top: 8, left: window.innerWidth - w - 8 });
+	}, []);
 
-	const posStyle: React.CSSProperties = {};
-	if (position === "top-left") { posStyle.top = posStyle.left = "0.5rem"; }
-	else if (position === "top-right") { posStyle.top = posStyle.right = "0.5rem"; }
-	else if (position === "bottom-right") { posStyle.bottom = posStyle.right = "0.5rem"; }
-	else if (position === "bottom-left") { posStyle.bottom = posStyle.left = "0.5rem"; }
+	const startDrag = useCallback((clientX: number, clientY: number) => {
+		const el = toolbarRef.current;
+		if (!el) return;
+		dragRef.current = {
+			startX: clientX,
+			startY: clientY,
+			startTop: pos.top,
+			startLeft: pos.left,
+		};
+		setDragging(true);
+	}, [pos.top, pos.left]);
+
+	const handleMouseDown = useCallback((e: React.MouseEvent) => {
+		if ((e.target as HTMLElement).closest("button, a")) return;
+		startDrag(e.clientX, e.clientY);
+	}, [startDrag]);
+
+	const handleTouchStart = useCallback((e: React.TouchEvent) => {
+		if ((e.target as HTMLElement).closest("button, a")) return;
+		startDrag(e.touches[0].clientX, e.touches[0].clientY);
+	}, [startDrag]);
+
+	useEffect(() => {
+		if (!dragging) return;
+		const maxX = window.innerWidth - (toolbarRef.current?.offsetWidth ?? 220);
+		const maxY = window.innerHeight - (toolbarRef.current?.offsetHeight ?? 40);
+
+		function onMove(e: MouseEvent) {
+			const dx = e.clientX - dragRef.current.startX;
+			const dy = e.clientY - dragRef.current.startY;
+			setPos({
+				top: Math.max(0, Math.min(dragRef.current.startTop + dy, maxY)),
+				left: Math.max(0, Math.min(dragRef.current.startLeft + dx, maxX)),
+			});
+		}
+		function onTouchMove(e: TouchEvent) {
+			const dx = e.touches[0].clientX - dragRef.current.startX;
+			const dy = e.touches[0].clientY - dragRef.current.startY;
+			setPos({
+				top: Math.max(0, Math.min(dragRef.current.startTop + dy, maxY)),
+				left: Math.max(0, Math.min(dragRef.current.startLeft + dx, maxX)),
+			});
+		}
+		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;
+			});
+		}
+		window.addEventListener("mousemove", onMove);
+		window.addEventListener("mouseup", onEnd);
+		window.addEventListener("touchmove", onTouchMove, { passive: true });
+		window.addEventListener("touchend", onEnd);
+		return () => {
+			window.removeEventListener("mousemove", onMove);
+			window.removeEventListener("mouseup", onEnd);
+			window.removeEventListener("touchmove", onTouchMove);
+			window.removeEventListener("touchend", onEnd);
+		};
+	}, [dragging]);
 
 	return (
 		<>
 			<div
-				className="fixed z-[9999] flex items-center gap-1 sm:gap-2"
-				style={posStyle}
+				ref={toolbarRef}
+				className={`fixed z-[9999] flex items-center gap-1 sm:gap-2 select-none ${dragging ? "cursor-grabbing" : "cursor-grab"}`}
+				style={{ top: pos.top, left: pos.left >= 0 ? pos.left : undefined, right: pos.left < 0 ? 8 : undefined }}
+				onMouseDown={handleMouseDown}
+				onTouchStart={handleTouchStart}
 			>
 				<ToolbarBtn href="/" title="Home">
 					<svg
@@ -222,10 +275,21 @@ export function ClientView({
 					</svg>
 					<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
 				</div>
-				<ToolbarBtn onClick={cyclePosition} title={position}>
+				<div
+					className="h-7 sm:h-8 px-1 rounded-lg border-2 flex items-center justify-center shadow-lg opacity-50"
+					style={{
+						borderColor:
+							"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
+						background:
+							"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
+						color:
+							"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+					}}
+					title="Drag to move"
+				>
 					<svg
-						width="14"
-						height="14"
+						width="12"
+						height="12"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -233,13 +297,14 @@ export function ClientView({
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						role="img"
-						aria-label="Move toolbar"
+						aria-label="Drag"
 					>
-						<title>Move toolbar</title>
-						<path d="M12 5v14M5 12h14" />
-						<path d="M15 9l-3-3-3 3M9 15l3 3 3-3" />
+						<title>Drag</title>
+						<circle cx="9" cy="5" r="1" /><circle cx="15" cy="5" r="1" />
+						<circle cx="9" cy="12" r="1" /><circle cx="15" cy="12" r="1" />
+						<circle cx="9" cy="19" r="1" /><circle cx="15" cy="19" r="1" />
 					</svg>
-				</ToolbarBtn>
+				</div>
 				<ToolbarBtn
 					onClick={() => signOut({ callbackUrl: "/" })}
 					title="Logout"