From 036885dd2453c1cc300a31c9a9a2c1e5ad1c12b3 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Mon, 23 Mar 2026 13:28:08 +0300
Subject: [PATCH] feat: drag-and-drop photo reordering in category form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thumbnails are draggable — drag one over another to swap positions.
Dragged item shows opacity/scale hint while dragging.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/RoomCategoriesPage.tsx | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/pages/RoomCategoriesPage.tsx b/src/pages/RoomCategoriesPage.tsx
index dc0556c..b8cadbe 100644
--- a/src/pages/RoomCategoriesPage.tsx
+++ b/src/pages/RoomCategoriesPage.tsx
@@ -47,6 +47,7 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
   const [saving, setSaving]   = useState(false)
   const [saveError, setSaveError] = useState('')
   const [dragging, setDragging] = useState(false)
+  const [dragSrcIdx, setDragSrcIdx] = useState<number | null>(null)
   const fileRef               = useRef<HTMLInputElement>(null)
 
   const toggleAmenity = (a: string) =>
@@ -245,8 +246,30 @@ function CategoryForm({ category, onClose, onSave }: CategoryFormProps) {
                   </div>
                   <div className="flex gap-2 overflow-x-auto pb-1">
                     {photos.map((p, i) => (
-                      <button key={i} onClick={() => setPhotoIdx(i)}
-                        className={cn('w-14 h-14 rounded-lg overflow-hidden border-2 shrink-0', i === photoIdx ? 'border-brand-500' : 'border-transparent')}>
+                      <button
+                        key={i}
+                        draggable
+                        onDragStart={() => setDragSrcIdx(i)}
+                        onDragOver={e => {
+                          e.preventDefault()
+                          if (dragSrcIdx === null || dragSrcIdx === i) return
+                          setPhotos(prev => {
+                            const next = [...prev]
+                            const [moved] = next.splice(dragSrcIdx, 1)
+                            next.splice(i, 0, moved)
+                            return next
+                          })
+                          setPhotoIdx(i)
+                          setDragSrcIdx(i)
+                        }}
+                        onDragEnd={() => setDragSrcIdx(null)}
+                        onClick={() => setPhotoIdx(i)}
+                        className={cn(
+                          'w-14 h-14 rounded-lg overflow-hidden border-2 shrink-0 transition-all cursor-grab active:cursor-grabbing',
+                          i === photoIdx ? 'border-brand-500' : 'border-transparent',
+                          dragSrcIdx === i && 'opacity-50 scale-95',
+                        )}
+                      >
                         <img src={p} alt="" className="w-full h-full object-cover" />
                       </button>
                     ))}