ENG-449/Checkpoint UI hover debounce (RooCodeInc#2806)

* initial

* added debounce for checkmark expanded ui

* corrected bookmark size

* removed unnecesary cleanup

* fixed removed code

* removed cleanup for real this time

* refactored to reduce complexity, added cleanup

Author: canvrno

.changeset/gorgeous-bees-talk.md

@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Added debounce for checkmark expanded ui

webview-ui/src/components/common/CheckmarkControl.tsx

@@ -25,6 +25,16 @@ export const CheckmarkControl = ({ messageTs, isCheckpointCheckedOut, isLastRow
 	const tooltipRef = useRef<HTMLDivElement>(null)
 	const [isComponentHovered, setIsComponentHovered] = useState(false)
 	const [isLineHovered, setIsLineHovered] = useState(false)
+	const hideTimerRef = useRef<NodeJS.Timeout | null>(null)
+
+	// Cleanup timer on unmount
+	useEffect(() => {
+		return () => {
+			if (hideTimerRef.current) {
+				clearTimeout(hideTimerRef.current)
+			}
+		}
+	}, [])
 
 	const { refs, floatingStyles, update, placement } = useFloating({
 		placement: "bottom-end",
@@ -159,6 +169,17 @@ export const CheckmarkControl = ({ messageTs, isCheckpointCheckedOut, isLastRow
 		}
 	}
 
+	const handleDebounceMouseLeave = (additionalCheck?: () => void) => {
+		if (hideTimerRef.current) {
+			clearTimeout(hideTimerRef.current)
+		}
+		hideTimerRef.current = setTimeout(() => {
+			setIsLineHovered(false)
+			setIsComponentHovered(false)
+		}, checkpointHoverDebounce)
+		additionalCheck?.()
+	}
+
 	const handleControlsMouseLeave = (e: React.MouseEvent) => {
 		const tooltipElement = tooltipRef.current
 
@@ -190,43 +211,36 @@ export const CheckmarkControl = ({ messageTs, isCheckpointCheckedOut, isLastRow
 	// The line should still be highlighted when the checkpoint is checked out
 	const shouldShowHoveredLine = isCheckpointCheckedOut || isLineHovered || isComponentHovered || showRestoreConfirm
 
+	// Debounce time for hiding the ExpandedUI
+	const checkpointHoverDebounce: number = 400
+
 	return (
 		<Container isMenuOpen={showRestoreConfirm} $isCheckedOut={isCheckpointCheckedOut}>
 			{/* Line indicator is still styled differently for checked out checkpoints */}
 			<CheckpointIndicator
 				$isCheckedOut={isCheckpointCheckedOut}
 				$isHovered={shouldShowHoveredLine}
 				onMouseEnter={() => setIsLineHovered(true)}
-				onMouseLeave={() => {
-					setTimeout(() => {
-						if (!isComponentHovered && !showRestoreConfirm) {
-							setIsLineHovered(false)
-						}
-					}, 50)
-				}}
+				onMouseLeave={() => handleDebounceMouseLeave()}
 			/>
 
-			<HoverArea
-				onMouseEnter={() => setIsLineHovered(true)}
-				onMouseLeave={() => {
-					if (!isComponentHovered && !showRestoreConfirm) {
-						setIsLineHovered(false)
-					}
-				}}
-			/>
+			<HoverArea onMouseEnter={() => setIsLineHovered(true)} onMouseLeave={() => handleDebounceMouseLeave()} />
 
 			{showExpandedUI && (
 				<ExpandedUI
 					$isCheckedOut={isCheckpointCheckedOut}
 					$isLastRow={isLastRow}
 					onMouseEnter={() => {
+						if (hideTimerRef.current) {
+							clearTimeout(hideTimerRef.current)
+							hideTimerRef.current = null
+						}
 						setIsComponentHovered(true)
 						setIsLineHovered(true)
 					}}
 					onMouseLeave={(e) => {
 						if (!showRestoreConfirm) {
-							setIsComponentHovered(false)
-							setIsLineHovered(false)
+							handleDebounceMouseLeave()
 						} else {
 							handleControlsMouseLeave(e)
 						}
@@ -370,17 +384,17 @@ const CheckpointIndicator = styled.div<{
 	top: 0;
 	/* Make checked out checkpoints have a more visible line */
 	width: ${(props) =>
-		props.$isCheckedOut ? "10px" /* Wider default for checked out checkpoints */ : props.$isHovered ? "12px" : "8px"};
-	height: 3px;
+		props.$isCheckedOut ? "10px" /* Wider default for checked out checkpoints */ : props.$isHovered ? "13px" : "10px"};
+	height: 6px;
 	background-color: ${(props) =>
 		props.$isCheckedOut ? "var(--vscode-textLink-foreground)" : "var(--vscode-descriptionForeground)"};
 	opacity: ${(props) => (props.$isCheckedOut ? 1 /* Always full opacity for checked out */ : props.$isHovered ? 1 : 0.6)};
 	transition:
 		opacity 0.15s ease-in-out,
 		width 0.15s ease-in-out;
 	cursor: pointer;
-	border-top-right-radius: 2px;
-	border-bottom-right-radius: 2px;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
 	z-index: 5;
 `