From c4589475537fabb98d960f4d891d563e502aaae4 Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Wed, 3 Dec 2025 14:04:29 +0900
Subject: [PATCH] feat: add confirmation dialog for diagram history restore
 (#49)

---
 components/history-dialog.tsx | 54 ++++++++++++++++++++++++++++-------
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
index e0c96ca..cc89c6a 100644
--- a/components/history-dialog.tsx
+++ b/components/history-dialog.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import {
     Dialog,
     DialogContent,
@@ -22,6 +23,19 @@ export function HistoryDialog({
     onToggleHistory,
 }: HistoryDialogProps) {
     const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+    const handleClose = () => {
+        setSelectedIndex(null);
+        onToggleHistory(false);
+    };
+
+    const handleConfirmRestore = () => {
+        if (selectedIndex !== null) {
+            onDisplayChart(diagramHistory[selectedIndex].xml);
+            handleClose();
+        }
+    };
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
@@ -45,11 +59,12 @@ export function HistoryDialog({
                         {diagramHistory.map((item, index) => (
                             <div
                                 key={index}
-                                className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
-                                onClick={() => {
-                                    onDisplayChart(item.xml);
-                                    onToggleHistory(false);
-                                }}
+                                className={`border rounded-md p-2 cursor-pointer hover:border-primary transition-colors ${
+                                    selectedIndex === index
+                                        ? "border-primary ring-2 ring-primary"
+                                        : ""
+                                }`}
+                                onClick={() => setSelectedIndex(index)}
                             >
                                 <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
                                     <Image
@@ -69,12 +84,29 @@ export function HistoryDialog({
                 )}
 
                 <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onToggleHistory(false)}
-                    >
-                        Close
-                    </Button>
+                    {selectedIndex !== null ? (
+                        <>
+                            <div className="flex-1 text-sm text-muted-foreground">
+                                Restore to Version {selectedIndex + 1}?
+                            </div>
+                            <Button
+                                variant="outline"
+                                onClick={() => setSelectedIndex(null)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button onClick={handleConfirmRestore}>
+                                Confirm
+                            </Button>
+                        </>
+                    ) : (
+                        <Button
+                            variant="outline"
+                            onClick={handleClose}
+                        >
+                            Close
+                        </Button>
+                    )}
                 </DialogFooter>
             </DialogContent>
         </Dialog>