sort layers

.gitignore

@@ -22,4 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-Archive.zip
+*.zip

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'

src/pages/editor/store/editorStore.ts

@@ -91,6 +91,7 @@ type EditorStoreType = {
   updateObject: (id: string, updates: Partial<EditorObject>) => void;
   deleteObject: (id: string) => void;
   duplicateObject: (id: string) => void;
+  reorderObjects: (draggedId: string, targetId: string) => void;
   selectedObjectId: string | null;
   setSelectedObjectId: (id: string | null) => void;
   selectedObjectIds: string[];
@@ -354,6 +355,38 @@ export const useEditorStore = create<EditorStoreType>((set, get) => {
         selectedObjectId: duplicatedObject.id,
       }));
     },
+    reorderObjects: (draggedId, targetId) => {
+      if (draggedId === targetId) return;
+
+      const reorder = (items: EditorObject[]) => {
+        const fromIndex = items.findIndex((item) => item.id === draggedId);
+        const toIndex = items.findIndex((item) => item.id === targetId);
+
+        if (fromIndex === -1 || toIndex === -1) return items;
+
+        const nextItems = [...items];
+        const [movedItem] = nextItems.splice(fromIndex, 1);
+        nextItems.splice(toIndex, 0, movedItem);
+        return nextItems;
+      };
+
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: reorder(state.objects),
+          pages: state.pages.map((page) =>
+            page.id === state.currentPageId
+              ? { ...page, objects: reorder(page.objects) }
+              : page,
+          ),
+        }));
+        return;
+      }
+
+      set((state) => ({
+        objects: reorder(state.objects),
+      }));
+    },
     selectedObjectId: null,
     setSelectedObjectId: (id) => {
       set({