From fb152c12fe1cb5f5f54b6a8ed26aabbf82213e5d Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Tue, 15 Sep 2026 19:37:43 +0700
Subject: [PATCH] feat : add toast too

---
 components/admin/autosave-status.tsx |  2 +-
 hooks/use-autosave.ts                | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/components/admin/autosave-status.tsx b/components/admin/autosave-status.tsx
index 16c2c26..583a1d5 100644
--- a/components/admin/autosave-status.tsx
+++ b/components/admin/autosave-status.tsx
@@ -27,7 +27,7 @@ export function AutosaveStatus({ state, issues = [], onSave, conflictVersion, ca
       </AlertDescription>
     </Alert> : null}
   </div>;
-  if (state === "conflict") return <Alert variant="destructive" className="max-w-xl">
+  if (state === "conflict") return <Alert id="autosave-conflict" variant="destructive" className="max-w-xl scroll-m-6">
     <AlertCircleIcon aria-hidden="true" />
     <AlertTitle>มีการบันทึกข้อมูลใหม่จากผู้แก้ไขคนอื่น</AlertTitle>
     <AlertDescription>
diff --git a/hooks/use-autosave.ts b/hooks/use-autosave.ts
index ebe3862..579994f 100644
--- a/hooks/use-autosave.ts
+++ b/hooks/use-autosave.ts
@@ -179,6 +179,26 @@ export function useAutosave<Value, Draft = Value>({
     };
   }, []);
 
+  useEffect(() => {
+    const toastId = `autosave-conflict:${guideId}:${scope}`;
+    if (conflictVersion === null) {
+      toast.dismiss(toastId);
+      return;
+    }
+    toast.error("Autosave ถูกหยุดชั่วคราว", {
+      id: toastId,
+      description: "มีผู้แก้ไขคนอื่นบันทึกข้อมูลส่วนนี้ กรุณาเลือกโหลดข้อมูลล่าสุดหรือเขียนทับด้วย Draft นี้",
+      duration: Infinity,
+      action: {
+        label: "ดูตัวเลือก",
+        onClick: () => document.getElementById("autosave-conflict")?.scrollIntoView({ behavior: "smooth", block: "center" }),
+      },
+    });
+    return () => {
+      toast.dismiss(toastId);
+    };
+  }, [conflictVersion, guideId, scope]);
+
   useEffect(() => {
     if (!hydrated || !valid || saving || conflictVersion !== null) return;
     const manual = manualRequest !== handledManualRequest.current;