From 5e93c9a746615d2ef5b3d4a02cb023fe2f61a445 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Wed, 25 Mar 2026 00:07:54 +0300
Subject: [PATCH] feat: auto-scroll and highlight newly added items in all
 array editors

---
 src/app/admin/_components/ArrayEditor.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/_components/ArrayEditor.tsx b/src/app/admin/_components/ArrayEditor.tsx
index 4d0fee1..996f705 100644
--- a/src/app/admin/_components/ArrayEditor.tsx
+++ b/src/app/admin/_components/ArrayEditor.tsx
@@ -28,9 +28,18 @@ export function ArrayEditor<T>({
   const [grabOffset, setGrabOffset] = useState({ x: 0, y: 0 });
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
   const [mounted, setMounted] = useState(false);
+  const [newItemIndex, setNewItemIndex] = useState<number | null>(null);
 
   useEffect(() => { setMounted(true); }, []);
 
+  // Scroll to newly added item
+  useEffect(() => {
+    if (newItemIndex !== null && itemRefs.current[newItemIndex]) {
+      itemRefs.current[newItemIndex]?.scrollIntoView({ behavior: "smooth", block: "center" });
+      setNewItemIndex(null);
+    }
+  }, [newItemIndex, items]);
+
   function updateItem(index: number, item: T) {
     const updated = [...items];
     updated[index] = item;
@@ -125,7 +134,9 @@ export function ArrayEditor<T>({
         <div
           key={i}
           ref={(el) => { itemRefs.current[i] = el; }}
-          className="rounded-lg border border-white/10 bg-neutral-900/50 p-4 mb-3 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
+          className={`rounded-lg border bg-neutral-900/50 p-4 mb-3 hover:border-white/25 hover:bg-neutral-800/50 transition-all ${
+            newItemIndex === i ? "border-gold/40 ring-1 ring-gold/20" : "border-white/10"
+          }`}
         >
           <div className="flex items-start justify-between gap-2 mb-3">
             <div
@@ -223,7 +234,7 @@ export function ArrayEditor<T>({
 
       <button
         type="button"
-        onClick={() => onChange([...items, createItem()])}
+        onClick={() => { onChange([...items, createItem()]); setNewItemIndex(items.length); }}
         className="mt-3 flex items-center gap-2 rounded-lg border border-dashed border-white/20 px-4 py-2.5 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors"
       >
         <Plus size={16} />