From a729777cb8cb162c4e60b53f3f11738b0fbec197 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 31 Dec 2025 10:33:16 +0330
Subject: [PATCH] add layer panel

---
 src/pages/editor/Editor.tsx                 |  12 +-
 src/pages/editor/components/LayersPanel.tsx | 140 ++++++++++++++++++++
 2 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/editor/components/LayersPanel.tsx

diff --git a/src/pages/editor/Editor.tsx b/src/pages/editor/Editor.tsx
index 6246a5c..987fc41 100644
--- a/src/pages/editor/Editor.tsx
+++ b/src/pages/editor/Editor.tsx
@@ -1,10 +1,18 @@
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
+import { clx } from '@/helpers/utils'
 import EditorSidebar from './components/EditorSidebar'
 import EditorCanvas from './components/EditorCanvas'
+import LayersPanel from './components/LayersPanel'
 
 const Editor: FC = () => {
+    const [isLayersPanelOpen, setIsLayersPanelOpen] = useState(false)
+
     return (
-        <div className="flex h-full w-full">
+        <div className={clx(
+            "flex h-full w-full",
+            isLayersPanelOpen ? "xl:pl-[296px]" : "xl:pl-[80px]"
+        )}>
+            <LayersPanel isOpen={isLayersPanelOpen} setIsOpen={setIsLayersPanelOpen} />
             <EditorCanvas />
             <EditorSidebar />
         </div>
diff --git a/src/pages/editor/components/LayersPanel.tsx b/src/pages/editor/components/LayersPanel.tsx
new file mode 100644
index 0000000..9ef52d2
--- /dev/null
+++ b/src/pages/editor/components/LayersPanel.tsx
@@ -0,0 +1,140 @@
+import { DocumentText, Layer, Eye, EyeSlash, Lock1, Lock, Trash, ArrowRight2, Text, Shapes } from 'iconsax-react'
+import { useEditorStore } from '../store/editorStore'
+import { clx } from '@/helpers/utils'
+
+type LayersPanelProps = {
+  isOpen: boolean
+  setIsOpen: (isOpen: boolean) => void
+}
+
+const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
+  const { objects, selectedObjectId, setSelectedObjectId, deleteObject } = useEditorStore()
+
+  const getLayerIcon = (type: string) => {
+    switch (type) {
+      case 'text':
+        return <Text size={20} color="black" />
+      case 'rectangle':
+      case 'image':
+      case 'grid':
+        return <Shapes size={20} color="black" />
+      default:
+        return <Shapes size={20} color="black" />
+    }
+  }
+
+  const getLayerLabel = (type: string) => {
+    switch (type) {
+      case 'text':
+        return 'متن'
+      case 'rectangle':
+      case 'image':
+      case 'grid':
+        return 'اشکال هندسی'
+      default:
+        return 'لایه'
+    }
+  }
+
+  if (!isOpen) {
+    return (
+      <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
+        <div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
+          <button
+            onClick={() => setIsOpen(true)}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <DocumentText size={24} color="black" />
+          </button>
+          <button
+            onClick={() => setIsOpen(true)}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+          >
+            <Layer size={24} color="black" />
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
+      <div className="bg-white rounded-t-[32px] rounded-b-[32px] flex flex-col h-full">
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <button
+              onClick={() => setIsOpen(false)}
+              className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+            >
+              <ArrowRight2 size={20} color="black" />
+            </button>
+            <h2 className="text-lg font-medium">لایه ها</h2>
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4">
+          <div className="flex flex-col gap-2">
+            {objects.length === 0 ? (
+              <div className="text-sm text-gray-500 text-center py-8">
+                لایه‌ای وجود ندارد
+              </div>
+            ) : (
+              objects.map((obj) => {
+                const isSelected = selectedObjectId === obj.id
+                return (
+                  <div
+                    key={obj.id}
+                    onClick={() => setSelectedObjectId(obj.id)}
+                    className={clx(
+                      'flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors',
+                      isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
+                    )}
+                  >
+                    <div className="flex-shrink-0">
+                      {getLayerIcon(obj.type)}
+                    </div>
+                    <div className="flex-1 text-sm font-medium">
+                      {getLayerLabel(obj.type)}
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          // TODO: Toggle visibility
+                        }}
+                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                      >
+                        <Eye size={16} color="black" />
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          // TODO: Toggle lock
+                        }}
+                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                      >
+                        <Lock size={16} color="black" />
+                      </button>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          deleteObject(obj.id)
+                        }}
+                        className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-red-100 transition-colors"
+                      >
+                        <Trash size={16} color="#FF3B30" />
+                      </button>
+                    </div>
+                  </div>
+                )
+              })
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LayersPanel
+