fix: improve confirmation flow for restoring files and tasks in CheckpointMenu

Author: daniel-lxs

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

@@ -95,46 +95,42 @@ export const CheckpointMenu = ({
 							</div>
 						</div>
 						<div className="flex flex-col gap-1 group hover:text-foreground">
-							<div className="flex flex-col gap-1 group hover:text-foreground">
-								{!isConfirming ? (
+							{!isConfirming ? (
+								<Button
+									variant="secondary"
+									onClick={() => setIsConfirming(true)}
+									data-testid="restore-files-and-task-btn">
+									{t("chat:checkpoint.menu.restoreFilesAndTask")}
+								</Button>
+							) : (
+								<>
 									<Button
-										variant="secondary"
-										onClick={() => setIsConfirming(true)}
-										data-testid="restore-files-and-task-btn">
-										{t("chat:checkpoint.menu.restoreFilesAndTask")}
+										variant="default"
+										onClick={onRestore}
+										className="grow"
+										data-testid="confirm-restore-btn">
+										<div className="flex flex-row gap-1">
+											<CheckIcon />
+											<div>{t("chat:checkpoint.menu.confirm")}</div>
+										</div>
 									</Button>
-								) : (
-									<>
-										<Button
-											variant="default"
-											onClick={onRestore}
-											className="grow"
-											data-testid="confirm-restore-btn">
-											<div className="flex flex-row gap-1">
-												<CheckIcon />
-												<div>{t("chat:checkpoint.menu.confirm")}</div>
-											</div>
-										</Button>
-										<Button variant="secondary" onClick={() => setIsConfirming(false)}>
-											<div className="flex flex-row gap-1">
-												<Cross2Icon />
-												<div>{t("chat:checkpoint.menu.cancel")}</div>
-											</div>
-										</Button>
-									</>
-								)}
-								{isConfirming ? (
-									<div
-										data-testid="checkpoint-confirm-warning"
-										className="text-destructive font-bold">
-										{t("chat:checkpoint.menu.cannotUndo")}
-									</div>
-								) : (
-									<div className="text-muted transition-colors group-hover:text-foreground">
-										{t("chat:checkpoint.menu.restoreFilesAndTaskDescription")}
-									</div>
-								)}
-							</div>
+									<Button variant="secondary" onClick={() => setIsConfirming(false)}>
+										<div className="flex flex-row gap-1">
+											<Cross2Icon />
+											<div>{t("chat:checkpoint.menu.cancel")}</div>
+										</div>
+									</Button>
+								</>
+							)}
+							{isConfirming ? (
+								<div data-testid="checkpoint-confirm-warning" className="text-destructive font-bold">
+									{t("chat:checkpoint.menu.cannotUndo")}
+								</div>
+							) : (
+								<div className="text-muted transition-colors group-hover:text-foreground">
+									{t("chat:checkpoint.menu.restoreFilesAndTaskDescription")}
+								</div>
+							)}
 						</div>
 					</div>
 				</PopoverContent>