From 82bf38b2b2fc21859c50260ea131aacc93c525d1 Mon Sep 17 00:00:00 2001
From: zhixian <zhixian@bunker.local>
Date: Tue, 17 Feb 2026 23:48:12 +0900
Subject: [PATCH] feat: add toast feedback for Apply Changes and Discard
 operations

Show "Gateway restarted successfully" or error after Apply Changes,
and "Changes discarded" after Discard. Toast auto-dismisses after 3s.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index bddafd4..46a43fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -56,6 +56,7 @@ export function App() {
   const [applying, setApplying] = useState(false);
   const [applyError, setApplyError] = useState("");
   const [configVersion, setConfigVersion] = useState(0);
+  const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
   const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   // Establish baseline on startup
@@ -112,6 +113,11 @@ export function App() {
       .catch(() => {});
   };
 
+  const showToast = (message: string, type: "success" | "error" = "success") => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3000);
+  };
+
   const handleApplyConfirm = () => {
     setApplying(true);
     setApplyError("");
@@ -120,6 +126,7 @@ export function App() {
         setShowApplyDialog(false);
         setDirty(false);
         bumpConfigVersion();
+        showToast("Gateway restarted successfully");
       })
       .catch((e) => setApplyError(String(e)))
       .finally(() => setApplying(false));
@@ -131,8 +138,9 @@ export function App() {
         setShowDiscardDialog(false);
         setDirty(false);
         bumpConfigVersion();
+        showToast("Changes discarded");
       })
-      .catch(() => {});
+      .catch((e) => showToast(`Discard failed: ${e}`, "error"));
   };
 
   return (
@@ -331,6 +339,16 @@ export function App() {
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
+
+    {/* Toast */}
+    {toast && (
+      <div className={cn(
+        "fixed bottom-4 right-4 px-4 py-2.5 rounded-md shadow-lg text-sm font-medium z-50 animate-in fade-in slide-in-from-bottom-2",
+        toast.type === "success" ? "bg-green-600 text-white" : "bg-destructive text-destructive-foreground"
+      )}>
+        {toast.message}
+      </div>
+    )}
     </>
   );
 }