From 1ba62b0ceed799f6ec6025d63110a7d145daa371 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 31 Dec 2025 14:23:40 +0330
Subject: [PATCH] split components layers and pages

---
 src/pages/editor/components/LayersList.tsx  | 102 +++++++++++
 src/pages/editor/components/LayersPanel.tsx | 180 +-------------------
 src/pages/editor/components/PagesPanel.tsx  |  99 +++++++++++
 3 files changed, 205 insertions(+), 176 deletions(-)
 create mode 100644 src/pages/editor/components/LayersList.tsx
 create mode 100644 src/pages/editor/components/PagesPanel.tsx

diff --git a/src/pages/editor/components/LayersList.tsx b/src/pages/editor/components/LayersList.tsx
new file mode 100644
index 0000000..23ecc55
--- /dev/null
+++ b/src/pages/editor/components/LayersList.tsx
@@ -0,0 +1,102 @@
+import { Text, Shapes, Eye, Copy, Trash } from 'iconsax-react'
+import { useEditorStore } from '../store/editorStore'
+import { clx } from '@/helpers/utils'
+
+const LayersList = () => {
+  const {
+    objects,
+    selectedObjectId,
+    setSelectedObjectId,
+    deleteObject,
+    duplicateObject,
+  } = 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 'لایه'
+    }
+  }
+
+  return (
+    <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="shrink-0">{getLayerIcon(obj.type)}</div>
+                <div className="flex-1 text-xs">{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()
+                      duplicateObject(obj.id)
+                    }}
+                    className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
+                  >
+                    <Copy 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>
+  )
+}
+
+export default LayersList
+
diff --git a/src/pages/editor/components/LayersPanel.tsx b/src/pages/editor/components/LayersPanel.tsx
index 70c3a58..7078a37 100644
--- a/src/pages/editor/components/LayersPanel.tsx
+++ b/src/pages/editor/components/LayersPanel.tsx
@@ -1,7 +1,8 @@
-import { DocumentText, Layer, Eye, Trash, ArrowRight2, Text, Shapes, Add, Copy } from 'iconsax-react'
-import { useEditorStore } from '../store/editorStore'
+import { DocumentText, Layer, ArrowRight2 } from 'iconsax-react'
 import { clx } from '@/helpers/utils'
 import { useState } from 'react'
+import PagesPanel from './PagesPanel'
+import LayersList from './LayersList'
 
 type TabType = 'pages' | 'layers'
 
@@ -12,55 +13,6 @@ type LayersPanelProps = {
 
 const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
   const [activeTab, setActiveTab] = useState<TabType>('pages')
-  const { objects, selectedObjectId, setSelectedObjectId, deleteObject, duplicateObject } = useEditorStore()
-  const {
-    pages,
-    currentPageId,
-    setCurrentPage,
-    addPage,
-    duplicatePage,
-    deletePage,
-  } = 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 'لایه'
-    }
-  }
-
-  const handleAddPage = () => {
-    addPage()
-  }
-
-  const handleDuplicatePage = (pageId: string) => {
-    duplicatePage(pageId)
-  }
-
-  const handleDeletePage = (pageId: string) => {
-    if (pages.length > 1) {
-      deletePage(pageId)
-    }
-  }
 
   if (!isOpen) {
     return (
@@ -135,131 +87,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
             </div>
           </div>
 
-          {activeTab === 'pages' ? (
-            <>
-              <div className="flex-1 overflow-y-auto p-4">
-                <div className="flex flex-col gap-3 items-center">
-                  {pages.length === 0 ? (
-                    <div className="text-sm text-gray-500 text-center py-8">
-                      صفحه‌ای وجود ندارد
-                    </div>
-                  ) : (
-                    pages.map((page) => {
-                      const isSelected = currentPageId === page.id
-                      return (
-                        <div
-                          key={page.id}
-                          onClick={() => setCurrentPage(page.id)}
-                          className={clx(
-                            'flex flex-col gap-2 cursor-pointer transition-colors',
-                            isSelected && ' rounded-lg p-0.5'
-                          )}
-                        >
-                          <div className={clx(
-                            "w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center",
-                            isSelected && 'border border-black'
-                          )}>
-                            <DocumentText size={20} color="#000" variant="Outline" />
-                          </div>
-                          <div className="text-xs font-medium text-center text-black">
-                            {page.name}
-                          </div>
-                        </div>
-                      )
-                    })
-                  )}
-                </div>
-              </div>
-
-              <div className="p-4 border-t border-border bg-gray-50 rounded-b-[32px]">
-                <div className="flex items-center justify-center gap-3">
-                  <button
-                    onClick={handleAddPage}
-                    className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
-                  >
-                    <Add size={20} color="black" />
-                  </button>
-                  {currentPageId && (
-                    <>
-                      <button
-                        onClick={() => handleDuplicatePage(currentPageId)}
-                        className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors border border-gray-200"
-                      >
-                        <Copy size={20} color="black" />
-                      </button>
-                      <button
-                        onClick={() => handleDeletePage(currentPageId)}
-                        disabled={pages.length <= 1}
-                        className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-red-100 transition-colors border border-gray-200 disabled:opacity-50 disabled:cursor-not-allowed"
-                      >
-                        <Trash size={20} color="#FF3B30" />
-                      </button>
-                    </>
-                  )}
-                </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="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()
-                              duplicateObject(obj.id)
-                            }}
-                            className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
-                          >
-                            <Copy 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>
-          )}
+          {activeTab === 'pages' ? <PagesPanel /> : <LayersList />}
         </div>
       </div>
     </div>
diff --git a/src/pages/editor/components/PagesPanel.tsx b/src/pages/editor/components/PagesPanel.tsx
new file mode 100644
index 0000000..41e9844
--- /dev/null
+++ b/src/pages/editor/components/PagesPanel.tsx
@@ -0,0 +1,99 @@
+import { DocumentText, Copy, Trash, AddSquare } from 'iconsax-react'
+import { useEditorStore } from '../store/editorStore'
+import { clx } from '@/helpers/utils'
+
+const PagesPanel = () => {
+  const {
+    pages,
+    currentPageId,
+    setCurrentPage,
+    addPage,
+    duplicatePage,
+    deletePage,
+  } = useEditorStore()
+
+  const handleAddPage = () => {
+    addPage()
+  }
+
+  const handleDuplicatePage = (pageId: string) => {
+    duplicatePage(pageId)
+  }
+
+  const handleDeletePage = (pageId: string) => {
+    if (pages.length > 1) {
+      deletePage(pageId)
+    }
+  }
+
+  return (
+    <>
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex flex-col gap-3 items-center">
+          {pages.length === 0 ? (
+            <div className="text-sm text-gray-500 text-center py-8">
+              صفحه‌ای وجود ندارد
+            </div>
+          ) : (
+            pages.map((page) => {
+              const isSelected = currentPageId === page.id
+              return (
+                <div
+                  key={page.id}
+                  onClick={() => setCurrentPage(page.id)}
+                  className={clx(
+                    'flex flex-col gap-2 cursor-pointer transition-colors',
+                    isSelected && ' rounded-lg p-0.5'
+                  )}
+                >
+                  <div
+                    className={clx(
+                      'w-[72px] h-[94px] bg-[#EEF0F7] rounded-lg flex items-center justify-center',
+                      isSelected && 'border border-black'
+                    )}
+                  >
+                    <DocumentText size={20} color="#000" variant="Outline" />
+                  </div>
+                  <div className="text-xs font-medium text-center text-black">
+                    {page.name}
+                  </div>
+                </div>
+              )
+            })
+          )}
+        </div>
+      </div>
+
+      <div className="p-4 border-t border-border rounded-b-[32px]">
+        <div className="flex items-center justify-center gap-3">
+          <button
+            onClick={handleAddPage}
+            className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors "
+          >
+            <AddSquare size={20} color="black" />
+          </button>
+          {currentPageId && (
+            <>
+              <button
+                onClick={() => handleDuplicatePage(currentPageId)}
+                className="w-10 h-10 flex items-center justify-center rounded-lg bg-white hover:bg-gray-100 transition-colors "
+              >
+                <Copy size={20} color="black" />
+              </button>
+              <button
+                onClick={() => handleDeletePage(currentPageId)}
+                disabled={pages.length <= 1}
+                className="w-10 h-10 flex items-center hover:bg-gray-100 justify-center rounded-lg  transition-colors  disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Trash size={20} color="#FF3B30" />
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default PagesPanel
+