feat: drag-and-drop reordering + auto-save for admin editors

Replace arrow buttons with mouse-based drag-and-drop in ArrayEditor
and team page. Dragged card follows cursor with floating clone, empty
placeholder shows at drop position. SectionEditor now auto-saves with
800ms debounce instead of manual save button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/admin/_components/SectionEditor.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { Save, Loader2, Check } from "lucide-react";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Loader2, Check, AlertCircle } from "lucide-react";
 
 interface SectionEditorProps<T> {
   sectionKey: string;
@@ -9,6 +9,8 @@ interface SectionEditorProps<T> {
   children: (data: T, update: (data: T) => void) => React.ReactNode;
 }
 
+const DEBOUNCE_MS = 800;
+
 export function SectionEditor<T>({
   sectionKey,
   title,
@@ -16,9 +18,10 @@ export function SectionEditor<T>({
 }: SectionEditorProps<T>) {
   const [data, setData] = useState<T | null>(null);
   const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
+  const [status, setStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
   const [error, setError] = useState("");
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const initialLoadRef = useRef(true);
 
   useEffect(() => {
     fetch(`/api/admin/sections/${sectionKey}`)
@@ -31,27 +34,42 @@ export function SectionEditor<T>({
       .finally(() => setLoading(false));
   }, [sectionKey]);
 
-  const handleSave = useCallback(async () => {
-    if (!data) return;
-    setSaving(true);
-    setSaved(false);
+  const save = useCallback(async (dataToSave: T) => {
+    setStatus("saving");
     setError("");
 
     try {
       const res = await fetch(`/api/admin/sections/${sectionKey}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
+        body: JSON.stringify(dataToSave),
       });
       if (!res.ok) throw new Error("Failed to save");
-      setSaved(true);
-      setTimeout(() => setSaved(false), 2000);
+      setStatus("saved");
+      setTimeout(() => setStatus((s) => (s === "saved" ? "idle" : s)), 2000);
     } catch {
+      setStatus("error");
       setError("Ошибка сохранения");
-    } finally {
-      setSaving(false);
     }
-  }, [data, sectionKey]);
+  }, [sectionKey]);
+
+  // Auto-save with debounce whenever data changes (skip initial load)
+  useEffect(() => {
+    if (!data) return;
+    if (initialLoadRef.current) {
+      initialLoadRef.current = false;
+      return;
+    }
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      save(data);
+    }, DEBOUNCE_MS);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [data, save]);
 
   if (loading) {
     return (
@@ -70,24 +88,28 @@ export function SectionEditor<T>({
     <div>
       <div className="flex items-center justify-between gap-4">
         <h1 className="text-2xl font-bold">{title}</h1>
-        <button
-          onClick={handleSave}
-          disabled={saving}
-          className="flex items-center gap-2 rounded-lg bg-gold px-4 py-2.5 text-sm font-medium text-black transition-opacity hover:opacity-90 disabled:opacity-50"
-        >
-          {saving ? (
-            <Loader2 size={16} className="animate-spin" />
-          ) : saved ? (
-            <Check size={16} />
-          ) : (
-            <Save size={16} />
+        <div className="flex items-center gap-2 text-sm text-neutral-400">
+          {status === "saving" && (
+            <>
+              <Loader2 size={14} className="animate-spin" />
+              <span>Сохранение...</span>
+            </>
           )}
-          {saving ? "Сохранение..." : saved ? "Сохранено!" : "Сохранить"}
-        </button>
+          {status === "saved" && (
+            <>
+              <Check size={14} className="text-emerald-400" />
+              <span className="text-emerald-400">Сохранено</span>
+            </>
+          )}
+          {status === "error" && (
+            <>
+              <AlertCircle size={14} className="text-red-400" />
+              <span className="text-red-400">{error}</span>
+            </>
+          )}
+        </div>
       </div>
 
-      {error && <p className="mt-4 text-sm text-red-400">{error}</p>}
-
       <div className="mt-6 space-y-6">{children(data, setData)}</div>
     </div>
   );