layer panel with took left

src/pages/editor/components/LayersPanel.tsx

@@ -1,6 +1,9 @@
-import { DocumentText, Layer, Eye, EyeSlash, Lock1, Lock, Trash, ArrowRight2, Text, Shapes } from 'iconsax-react'
+import { DocumentText, Layer, Eye, Lock, Trash, ArrowRight2, Text, Shapes, Add, Copy } from 'iconsax-react'
 import { useEditorStore } from '../store/editorStore'
 import { clx } from '@/helpers/utils'
+import { useState } from 'react'
+
+type TabType = 'pages' | 'layers'
 
 type LayersPanelProps = {
   isOpen: boolean
@@ -8,7 +11,16 @@ type LayersPanelProps = {
 }
 
 const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
+  const [activeTab, setActiveTab] = useState<TabType>('pages')
   const { objects, selectedObjectId, setSelectedObjectId, deleteObject } = useEditorStore()
+  const {
+    pages,
+    currentPageId,
+    setCurrentPage,
+    addPage,
+    duplicatePage,
+    deletePage,
+  } = useEditorStore()
 
   const getLayerIcon = (type: string) => {
     switch (type) {
@@ -36,19 +48,39 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
     }
   }
 
+  const handleAddPage = () => {
+    addPage()
+  }
+
+  const handleDuplicatePage = (pageId: string) => {
+    duplicatePage(pageId)
+  }
+
+  const handleDeletePage = (pageId: string) => {
+    if (pages.length > 1) {
+      deletePage(pageId)
+    }
+  }
+
   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)}
+            onClick={() => {
-            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+              setActiveTab('pages')
+              setIsOpen(true)
+            }}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
           >
             <DocumentText size={24} color="black" />
           </button>
           <button
-            onClick={() => setIsOpen(true)}
+            onClick={() => {
-            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
+              setActiveTab('layers')
+              setIsOpen(true)
+            }}
+            className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
           >
             <Layer size={24} color="black" />
           </button>
@@ -58,8 +90,34 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
   }
 
   return (
-    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
+    <div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
-      <div className="bg-white rounded-t-[32px] rounded-b-[32px] flex flex-col h-full">
+      <div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
+        <button
+          onClick={() => {
+            setActiveTab('pages')
+          }}
+          className={clx(
+            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+            activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
+          )}
+        >
+          <DocumentText size={24} color="black" />
+        </button>
+        <button
+          onClick={() => {
+            setActiveTab('layers')
+          }}
+          className={clx(
+            'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
+            activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
+          )}
+        >
+          <Layer size={24} color="black" />
+        </button>
+      </div>
+
+      <div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[280px]">
+        <div className="bg-white rounded-r-4xl 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
@@ -68,10 +126,76 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
               >
                 <ArrowRight2 size={20} color="black" />
               </button>
-            <h2 className="text-lg font-medium">لایه ها</h2>
+              <h2 className="text-lg font-medium">
+                {activeTab === 'pages' ? 'صفحات' : 'لایه ها'}
+              </h2>
             </div>
           </div>
 
+          {activeTab === 'pages' ? (
+            <>
+              <div className="flex-1 overflow-y-auto p-4">
+                <div className="flex flex-col gap-3">
+                  {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 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="w-full aspect-4/3 bg-gray-100 rounded-lg flex items-center justify-center">
+                            <DocumentText size={32} color="#666" />
+                          </div>
+                          <div className="text-sm font-medium text-center">
+                            {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 ? (
@@ -90,7 +214,7 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
                           isSelected ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'
                         )}
                       >
-                    <div className="flex-shrink-0">
+                        <div className="shrink-0">
                           {getLayerIcon(obj.type)}
                         </div>
                         <div className="flex-1 text-sm font-medium">
@@ -131,6 +255,8 @@ const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
                 )}
               </div>
             </div>
+          )}
+        </div>
       </div>
     </div>
   )

src/pages/editor/store/editorStore.ts

@@ -61,6 +61,12 @@ export type EditorObject = {
   tableData?: TableData;
 };
 
+export type Page = {
+  id: string;
+  name: string;
+  objects: EditorObject[];
+};
+
 type EditorStoreType = {
   tool: ToolType;
   setTool: (tool: ToolType) => void;
@@ -74,16 +80,38 @@ type EditorStoreType = {
   setSelectedTableId: (id: string | null) => void;
   selectedCellId: string | null;
   setSelectedCellId: (id: string | null) => void;
-  editingCell: { tableId: string; cellId: string; x: number; y: number; value: string } | null;
+  editingCell: {
-  setEditingCell: (cell: { tableId: string; cellId: string; x: number; y: number; value: string } | null) => void;
+    tableId: string;
+    cellId: string;
+    x: number;
+    y: number;
+    value: string;
+  } | null;
+  setEditingCell: (
+    cell: {
+      tableId: string;
+      cellId: string;
+      x: number;
+      y: number;
+      value: string;
+    } | null
+  ) => void;
   addTable: (x: number, y: number, rows?: number, cols?: number) => void;
   addRow: (tableId: string) => void;
   addColumn: (tableId: string) => void;
   removeRow: (tableId: string) => void;
   removeColumn: (tableId: string) => void;
   updateCellValue: (tableId: string, cellId: string, text: string) => void;
-  changeCellBackground: (tableId: string, cellId: string, color: string) => void;
+  changeCellBackground: (
-  applyTableResize: (tableId: string, newWidth: number, newHeight: number) => void;
+    tableId: string,
+    cellId: string,
+    color: string
+  ) => void;
+  applyTableResize: (
+    tableId: string,
+    newWidth: number,
+    newHeight: number
+  ) => void;
   stageRef: React.RefObject<Konva.Stage | null> | null;
   setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
   layerRef: React.RefObject<Konva.Layer | null> | null;
@@ -92,11 +120,23 @@ type EditorStoreType = {
   setZoom: (zoom: number) => void;
   zoomIn: () => void;
   zoomOut: () => void;
+  pages: Page[];
+  currentPageId: string | null;
+  addPage: (name?: string) => void;
+  duplicatePage: (pageId: string) => void;
+  deletePage: (pageId: string) => void;
+  setCurrentPage: (pageId: string) => void;
+  updatePageName: (pageId: string, name: string) => void;
 };
 
 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
 
-const createInitialCells = (rows: number, cols: number, cellWidth: number, cellHeight: number): Record<string, TableCell> => {
+const createInitialCells = (
+  rows: number,
+  cols: number,
+  cellWidth: number,
+  cellHeight: number
+): Record<string, TableCell> => {
   const cells: Record<string, TableCell> = {};
   for (let row = 0; row < rows; row++) {
     for (let col = 0; col < cols; col++) {
@@ -113,7 +153,15 @@ const createInitialCells = (rows: number, cols: number, cellWidth: number, cellH
   return cells;
 };
 
-export const useEditorStore = create<EditorStoreType>((set, get) => ({
+const createInitialPage = (name: string): Page => ({
+  id: `page-${crypto.randomUUID()}`,
+  name,
+  objects: [],
+});
+
+export const useEditorStore = create<EditorStoreType>((set, get) => {
+  const initialPage = createInitialPage("جلد");
+  return {
     tool: "select",
     setTool: (tool) =>
       set((state) => ({
@@ -121,21 +169,77 @@ export const useEditorStore = create<EditorStoreType>((set, get) => ({
         selectedObjectId: tool === "select" ? state.selectedObjectId : null,
       })),
     objects: [],
-  addObject: (object) =>
+    addObject: (object) => {
-    set((state) => ({ objects: [...state.objects, object] })),
+      const state = get();
-  updateObject: (id, updates) =>
+      if (state.currentPageId) {
+        const currentPage = state.pages.find(
+          (p) => p.id === state.currentPageId
+        );
+        if (currentPage) {
+          set((state) => ({
+            objects: [...state.objects, object],
+            pages: state.pages.map((p) =>
+              p.id === state.currentPageId
+                ? { ...p, objects: [...p.objects, object] }
+                : p
+            ),
+          }));
+          return;
+        }
+      }
+      set((state) => ({ objects: [...state.objects, object] }));
+    },
+    updateObject: (id, updates) => {
+      const state = get();
+      if (state.currentPageId) {
         set((state) => ({
           objects: state.objects.map((obj) =>
             obj.id === id ? { ...obj, ...updates } : obj
           ),
-    })),
+          pages: state.pages.map((p) =>
-  deleteObject: (id) =>
+            p.id === state.currentPageId
+              ? {
+                  ...p,
+                  objects: p.objects.map((obj) =>
+                    obj.id === id ? { ...obj, ...updates } : obj
+                  ),
+                }
+              : p
+          ),
+        }));
+        return;
+      }
+      set((state) => ({
+        objects: state.objects.map((obj) =>
+          obj.id === id ? { ...obj, ...updates } : obj
+        ),
+      }));
+    },
+    deleteObject: (id) => {
+      const state = get();
+      if (state.currentPageId) {
+        set((state) => ({
+          objects: state.objects.filter((obj) => obj.id !== id),
+          pages: state.pages.map((p) =>
+            p.id === state.currentPageId
+              ? { ...p, objects: p.objects.filter((obj) => obj.id !== id) }
+              : p
+          ),
+          selectedObjectId:
+            state.selectedObjectId === id ? null : state.selectedObjectId,
+          selectedTableId:
+            state.selectedTableId === id ? null : state.selectedTableId,
+        }));
+        return;
+      }
       set((state) => ({
         objects: state.objects.filter((obj) => obj.id !== id),
         selectedObjectId:
           state.selectedObjectId === id ? null : state.selectedObjectId,
-      selectedTableId: state.selectedTableId === id ? null : state.selectedTableId,
+        selectedTableId:
-    })),
+          state.selectedTableId === id ? null : state.selectedTableId,
+      }));
+    },
     selectedObjectId: null,
     setSelectedObjectId: (id) => set({ selectedObjectId: id }),
     selectedTableId: null,
@@ -366,4 +470,84 @@ export const useEditorStore = create<EditorStoreType>((set, get) => ({
       const newZoom = Math.max(state.zoom - 0.1, 0.5);
       set({ zoom: newZoom });
     },
-}));
+    pages: [initialPage],
+    currentPageId: initialPage.id,
+    addPage: (name) => {
+      const state = get();
+      const pageNumber = state.pages.length + 1;
+      const newPage = createInitialPage(name || `${pageNumber}`);
+      set((state) => ({
+        pages: [...state.pages, newPage],
+        currentPageId: newPage.id,
+        objects: [],
+        selectedObjectId: null,
+      }));
+    },
+    duplicatePage: (pageId) => {
+      const state = get();
+      const pageToDuplicate = state.pages.find((p) => p.id === pageId);
+      if (!pageToDuplicate) return;
+
+      const duplicatedObjects = pageToDuplicate.objects.map((obj) => ({
+        ...obj,
+        id: `${obj.id}-${crypto.randomUUID()}`,
+      }));
+
+      const newPage: Page = {
+        id: `page-${crypto.randomUUID()}`,
+        name: `${pageToDuplicate.name} (کپی)`,
+        objects: duplicatedObjects,
+      };
+
+      set((state) => ({
+        pages: [...state.pages, newPage],
+      }));
+    },
+    deletePage: (pageId) => {
+      const state = get();
+      if (state.pages.length <= 1) return;
+
+      const newPages = state.pages.filter((p) => p.id !== pageId);
+      const newCurrentPageId =
+        state.currentPageId === pageId
+          ? newPages[0]?.id || null
+          : state.currentPageId;
+
+      const newCurrentPage = newPages.find((p) => p.id === newCurrentPageId);
+
+      set({
+        pages: newPages,
+        currentPageId: newCurrentPageId,
+        objects: newCurrentPage?.objects || [],
+        selectedObjectId: null,
+      });
+    },
+    setCurrentPage: (pageId) => {
+      const state = get();
+      const targetPage = state.pages.find((p) => p.id === pageId);
+      if (!targetPage) return;
+
+      // Save current objects to current page before switching
+      const updatedPages = state.currentPageId
+        ? state.pages.map((p) =>
+            p.id === state.currentPageId ? { ...p, objects: state.objects } : p
+          )
+        : state.pages;
+
+      const targetPageFromUpdated = updatedPages.find((p) => p.id === pageId);
+      if (!targetPageFromUpdated) return;
+
+      set({
+        pages: updatedPages,
+        currentPageId: pageId,
+        objects: targetPageFromUpdated.objects,
+        selectedObjectId: null,
+      });
+    },
+    updatePageName: (pageId, name) => {
+      set((state) => ({
+        pages: state.pages.map((p) => (p.id === pageId ? { ...p, name } : p)),
+      }));
+    },
+  };
+});