default 1 column + header + ...

src/pages/setting/personality/store/Store.ts

@@ -16,9 +16,9 @@ import {
 
 export const usePersonalityStore = create<PersonalityStore>((set) => ({
   data: {
-    header: { columnsCount: 0, items: [] },
-    content: { columnsCount: 0, items: [] },
-    footer: { columnsCount: 0, items: [] },
+    header: { columnsCount: 1, items: [] },
+    content: { columnsCount: 1, items: [] },
+    footer: { columnsCount: 1, items: [] },
   },
 
   activeSection: "",
@@ -32,7 +32,37 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
     })),
 
   setActiveSection: (section: SectionName) =>
-    set(() => {
+    set((state) => {
+      const sectionData = state.data[section as keyof PersonalityDataType];
+
+      // اگر بخش آیتم ندارد و تعداد ستون‌ها بیشتر از صفر است، یک آیتم پیش‌فرض بساز
+      if (sectionData.items.length === 0 && sectionData.columnsCount > 0) {
+        const defaultItem = {
+          id: uuidv4(),
+          backgroundColor: "#ffffff",
+          texts: [],
+          buttons: [],
+          images: [],
+          socials: [],
+          alignment: HorizontalAlignment.CENTER,
+          verticalAlignment: VerticalAlignment.MIDDLE,
+        };
+
+        return {
+          activeSection: section,
+          activeItemIndex: 0,
+          selectedElement: null,
+          isEditMode: false,
+          data: {
+            ...state.data,
+            [section]: {
+              ...sectionData,
+              items: [defaultItem],
+            },
+          },
+        };
+      }
+
       return {
         activeSection: section,
         activeItemIndex: 0,
@@ -61,20 +91,34 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
   ) =>
     set((state) => {
       const currentItems = state.data[sectionKey].items;
-      const newItems = Array.from(
-        { length: columnsCount },
-        (_, index) =>
-          currentItems[index] || {
-            id: uuidv4(),
-            backgroundColor: "#ffffff",
-            texts: [],
-            buttons: [],
-            images: [],
-            socials: [],
-            alignment: HorizontalAlignment.CENTER,
-            verticalAlignment: VerticalAlignment.MIDDLE,
-          }
-      );
+      const currentActiveItem = currentItems[state.activeItemIndex];
+
+      const newItems = Array.from({ length: columnsCount }, (_, index) => {
+        // اگر این آیتم در حال حاضر وجود دارد، آن را حفظ کن
+        if (currentItems[index]) {
+          return currentItems[index];
+        }
+
+        // اگر این اولین آیتم است و آیتم فعلی وجود دارد، از آن استفاده کن
+        if (index === 0 && currentActiveItem) {
+          return {
+            ...currentActiveItem,
+            id: currentActiveItem.id || uuidv4(),
+          };
+        }
+
+        // در غیر این صورت، یک آیتم جدید بساز
+        return {
+          id: uuidv4(),
+          backgroundColor: "#ffffff",
+          texts: [],
+          buttons: [],
+          images: [],
+          socials: [],
+          alignment: HorizontalAlignment.CENTER,
+          verticalAlignment: VerticalAlignment.MIDDLE,
+        };
+      });
 
       return {
         data: {
@@ -121,7 +165,33 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
       const items = state.data[sectionKey].items;
       const activeIndex = state.activeItemIndex;
 
-      if (activeIndex >= items.length) return state;
+      // اگر آیتم فعال وجود ندارد، یکی بساز
+      if (activeIndex >= items.length) {
+        const newItem = {
+          id: uuidv4(),
+          backgroundColor: "#ffffff",
+          texts: [],
+          buttons: [],
+          images: [],
+          socials: [],
+          alignment: HorizontalAlignment.CENTER,
+          verticalAlignment: VerticalAlignment.MIDDLE,
+          ...updates,
+        };
+
+        const newItems = [...items];
+        newItems[activeIndex] = newItem;
+
+        return {
+          data: {
+            ...state.data,
+            [sectionKey]: {
+              ...state.data[sectionKey],
+              items: newItems,
+            },
+          },
+        };
+      }
 
       const updatedItems = items.map((item, index) =>
         index === activeIndex ? { ...item, ...updates } : item