sort layers

src/pages/editor/components/LayersList.tsx

@@ -16,6 +16,7 @@ import {
   MouseSquare,
   Sticker,
 } from 'iconsax-react'
+import { useState } from 'react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
 
@@ -27,7 +28,10 @@ const LayersList = () => {
     deleteObject,
     duplicateObject,
     toggleObjectVisibility,
+    reorderObjects,
   } = useEditorStore()
+  const [draggedObjectId, setDraggedObjectId] = useState<string | null>(null)
+  const [dragOverObjectId, setDragOverObjectId] = useState<string | null>(null)
 
   const getLayerIcon = (type: string) => {
     switch (type) {
@@ -121,8 +125,33 @@ const LayersList = () => {
               <div
                 key={obj.id}
                 onClick={() => setSelectedObjectId(obj.id)}
+                draggable
+                onDragStart={() => {
+                  setDraggedObjectId(obj.id)
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault()
+                  if (dragOverObjectId !== obj.id) {
+                    setDragOverObjectId(obj.id)
+                  }
+                }}
+                onDrop={(e) => {
+                  e.preventDefault()
+                  if (draggedObjectId && draggedObjectId !== obj.id) {
+                    reorderObjects(draggedObjectId, obj.id)
+                  }
+                  setDraggedObjectId(null)
+                  setDragOverObjectId(null)
+                }}
+                onDragEnd={() => {
+                  setDraggedObjectId(null)
+                  setDragOverObjectId(null)
+                }}
                 className={clx(
                   'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
+                  dragOverObjectId === obj.id &&
+                    draggedObjectId !== obj.id &&
+                    'ring-2 ring-blue-300',
                   isSelected
                     ? 'bg-blue-50 border border-blue-200'
                     : 'bg-gray-50 hover:bg-gray-100'