fix: rolling id

apps/frontend/src/components/launches/general.preview.component.tsx

@@ -60,7 +60,7 @@ export const GeneralPreviewComponent: FC<{
               index === renderContent.length - 1 ? 'pb-[12px]' : 'pb-[24px]'
             )}
           >
-            <div className="w-[40px] flex flex-col items-center">
+            <div className="min-w-[40px] h-[40px] min-h-[40px] w-[40px] flex flex-col items-center">
               <div className="relative">
                 <img
                   src={
@@ -75,7 +75,7 @@ export const GeneralPreviewComponent: FC<{
                 {current !== 'global' && (
                   <Image
                     src={`/icons/platforms/${integration?.identifier}.png`}
-                    className="rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
+                    className="min-w-[20px] min-h-[20px] rounded-full absolute z-10 -bottom-[5px] -end-[5px] border border-fifth"
                     alt={integration.identifier}
                     width={20}
                     height={20}

apps/frontend/src/components/new-launch/store.ts

@@ -4,7 +4,6 @@ import { create } from 'zustand';
 import dayjs from 'dayjs';
 import { Integrations } from '@gitroom/frontend/components/launches/calendar.context';
 import { createRef, RefObject } from 'react';
-import { arrayMoveImmutable } from 'array-move';
 import { PostComment } from '@gitroom/frontend/components/new-launch/providers/high.order.provider';
 import { newDayjs } from '@gitroom/frontend/components/layout/set.timezone';
 
@@ -257,22 +256,45 @@ export const useLaunchStore = create<StoreState>()((set) => ({
       };
     }),
   deleteGlobalValue: (index: number) =>
-    set((state) => ({
+    set((state) => {
-      global: state.global.filter((_, i) => i !== index),
+      // Preserve the IDs at their current positions
-    })),
+      const ids = state.global.map((item) => item.id);
+
+      // Get remaining data (content, delay, media) after filtering out deleted index
+      const remainingData = state.global
+        .filter((_, i) => i !== index)
+        .map(({ id, ...rest }) => rest);
+
+      // Reconstruct with preserved IDs
+      return {
+        global: remainingData.map((data, i) => ({
+          id: ids[i],
+          ...data,
+        })),
+      };
+    }),
   deleteInternalValue: (integrationId: string, index: number) =>
     set((state) => {
       return {
-        internal: state.internal.map((i) => {
+        internal: state.internal.map((item) => {
-          if (i.integration.id === integrationId) {
+          if (item.integration.id === integrationId) {
+            // Preserve the IDs at their current positions
+            const ids = item.integrationValue.map((v) => v.id);
+
+            // Get remaining data after filtering out deleted index
+            const remainingData = item.integrationValue
+              .filter((_, idx) => idx !== index)
+              .map(({ id, ...rest }) => rest);
+
             return {
-              ...i,
+              ...item,
-              integrationValue: i.integrationValue.filter(
+              integrationValue: remainingData.map((data, i) => ({
-                (_, idx) => idx !== index
+                id: ids[i],
-              ),
+                ...data,
+              })),
             };
           }
-          return i;
+          return item;
         }),
       };
     }),
@@ -305,12 +327,35 @@ export const useLaunchStore = create<StoreState>()((set) => ({
     }),
   changeOrderGlobal: (index: number, direction: 'up' | 'down') =>
     set((state) => {
+      const targetIndex = direction === 'up' ? index - 1 : index + 1;
+
+      if (targetIndex < 0 || targetIndex >= state.global.length) {
+        return { global: state.global };
+      }
+
+      const currentItem = state.global[index];
+      const targetItem = state.global[targetIndex];
+
       return {
-        global: arrayMoveImmutable(
+        global: state.global.map((item, i) => {
-          state.global,
+          if (i === index) {
-          index,
+            return {
-          direction === 'up' ? index - 1 : index + 1
+              id: item.id,
-        ),
+              content: targetItem.content,
+              delay: targetItem.delay,
+              media: targetItem.media,
+            };
+          }
+          if (i === targetIndex) {
+            return {
+              id: item.id,
+              content: currentItem.content,
+              delay: currentItem.delay,
+              media: currentItem.media,
+            };
+          }
+          return item;
+        }),
       };
     }),
   changeOrderInternal: (
@@ -322,13 +367,36 @@ export const useLaunchStore = create<StoreState>()((set) => ({
       return {
         internal: state.internal.map((item) => {
           if (item.integration.id === integrationId) {
+            const targetIndex = direction === 'up' ? index - 1 : index + 1;
+
+            if (targetIndex < 0 || targetIndex >= item.integrationValue.length) {
+              return item;
+            }
+
+            const currentValue = item.integrationValue[index];
+            const targetValue = item.integrationValue[targetIndex];
+
             return {
               ...item,
-              integrationValue: arrayMoveImmutable(
+              integrationValue: item.integrationValue.map((v, i) => {
-                item.integrationValue,
+                if (i === index) {
-                index,
+                  return {
-                direction === 'up' ? index - 1 : index + 1
+                    id: v.id,
-              ),
+                    content: targetValue.content,
+                    delay: targetValue.delay,
+                    media: targetValue.media,
+                  };
+                }
+                if (i === targetIndex) {
+                  return {
+                    id: v.id,
+                    content: currentValue.content,
+                    delay: currentValue.delay,
+                    media: currentValue.media,
+                  };
+                }
+                return v;
+              }),
             };
           }