fix: keep checkpoint menu visible when popover is open

Fixes issue where the checkpoint restore popover would misposition when
the mouse moved from the CheckpointSaved component to the popover itself.
The menu now remains visible while the popover is open, preventing the
anchor element from disappearing.

Fixes #8219

Author: roomote

webview-ui/src/components/chat/checkpoints/CheckpointMenu.tsx

@@ -13,9 +13,16 @@ type CheckpointMenuProps = {
 	commitHash: string
 	currentHash?: string
 	checkpoint: Checkpoint
+	onPopoverOpenChange?: (open: boolean) => void
 }
 
-export const CheckpointMenu = ({ ts, commitHash, currentHash, checkpoint }: CheckpointMenuProps) => {
+export const CheckpointMenu = ({
+	ts,
+	commitHash,
+	currentHash,
+	checkpoint,
+	onPopoverOpenChange,
+}: CheckpointMenuProps) => {
 	const { t } = useTranslation()
 	const [isOpen, setIsOpen] = useState(false)
 	const [isConfirming, setIsConfirming] = useState(false)
@@ -54,6 +61,7 @@ export const CheckpointMenu = ({ ts, commitHash, currentHash, checkpoint }: Chec
 				onOpenChange={(open) => {
 					setIsOpen(open)
 					setIsConfirming(false)
+					onPopoverOpenChange?.(open)
 				}}>
 				<StandardTooltip content={t("chat:checkpoint.menu.restore")}>
 					<PopoverTrigger asChild>

webview-ui/src/components/chat/checkpoints/CheckpointSaved.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react"
+import { useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { CheckpointMenu } from "./CheckpointMenu"
@@ -15,6 +15,7 @@ type CheckpointSavedProps = {
 export const CheckpointSaved = ({ checkpoint, ...props }: CheckpointSavedProps) => {
 	const { t } = useTranslation()
 	const isCurrent = props.currentHash === props.commitHash
+	const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
 	const metadata = useMemo(() => {
 		if (!checkpoint) {
@@ -48,8 +49,8 @@ export const CheckpointSaved = ({ checkpoint, ...props }: CheckpointSavedProps)
 						"linear-gradient(90deg, rgba(0, 188, 255, .65), rgba(0, 188, 255, .65) 80%, rgba(0, 188, 255, 0) 99%)",
 				}}></span>
 
-			<div className="hidden group-hover:block h-4 -mt-2">
-				<CheckpointMenu {...props} checkpoint={metadata} />
+			<div className={`h-4 -mt-2 ${isPopoverOpen ? "block" : "hidden group-hover:block"}`}>
+				<CheckpointMenu {...props} checkpoint={metadata} onPopoverOpenChange={setIsPopoverOpen} />
 			</div>
 		</div>
 	)