feat : add toast too

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>

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;