feat : dont conflit with other editor

components/admin/autosave-status.tsx

@@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import type { AutosaveState } from "@/hooks/use-autosave";
 
-export function AutosaveStatus({ state, issues = [], onSave }: { state: AutosaveState; issues?: readonly string[]; onSave?: () => void }) {
+export function AutosaveStatus({ state, issues = [], onSave, conflictVersion, canOverwrite = false, onReloadLatest, onOverwrite }: { state: AutosaveState; issues?: readonly string[]; onSave?: () => void; conflictVersion?: number | null; canOverwrite?: boolean; onReloadLatest?: () => void; onOverwrite?: () => void }) {
   const [showIssues, setShowIssues] = useState(false);
 
   if (state === "saving") return <Badge variant="secondary"><Spinner data-icon="inline-start" />Saving…</Badge>;
@@ -27,6 +27,19 @@ export function AutosaveStatus({ state, issues = [], onSave }: { state: Autosave
       </AlertDescription>
     </Alert> : null}
   </div>;
+  if (state === "conflict") return <Alert variant="destructive" className="max-w-xl">
+    <AlertCircleIcon aria-hidden="true" />
+    <AlertTitle>มีการบันทึกข้อมูลใหม่จากผู้แก้ไขคนอื่น</AlertTitle>
+    <AlertDescription>
+      <div className="flex flex-col gap-3">
+        <p>ระบบหยุด Autosave ไว้เพื่อไม่ให้ Draft นี้เขียนทับข้อมูลล่าสุด{conflictVersion ? ` (version ${conflictVersion})` : ""}</p>
+        <div className="flex flex-wrap gap-2">
+          {onReloadLatest ? <Button type="button" variant="outline" size="sm" onClick={onReloadLatest}>โหลดข้อมูลล่าสุด</Button> : null}
+          {onOverwrite ? <Button type="button" variant="destructive" size="sm" disabled={!canOverwrite} onClick={onOverwrite}>เขียนทับด้วย Draft นี้</Button> : null}
+        </div>
+      </div>
+    </AlertDescription>
+  </Alert>;
   if (state === "error") return <div className="flex items-center gap-2"><Badge variant="destructive"><AlertCircleIcon data-icon="inline-start" />Autosave failed</Badge>{onSave ? <Button type="button" variant="outline" size="sm" onClick={onSave}>Save now</Button> : null}</div>;
   return <Badge variant="secondary"><CheckIcon data-icon="inline-start" />Saved</Badge>;
 }