feat: add drag and drop errors

src/screens/Writing/CustomizeSongStructure.js

@@ -28,16 +28,17 @@ const createSortableItem = (type, index = 0) => ({
   type,
   value: type,
 });
+const SANITIZE_OPTIONS = { autoInjectPreChorus: false };
 
 const buildSortableItems = (values = []) =>
-  sanitizeStructureList(values).map((type, index) =>
+  sanitizeStructureList(values, SANITIZE_OPTIONS).map((type, index) =>
     createSortableItem(type, index)
   );
 
 const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
   const scrollRef = useAnimatedRef();
   const sanitizedBase = useMemo(
-    () => sanitizeStructureList(baseStructure),
+    () => sanitizeStructureList(baseStructure, SANITIZE_OPTIONS),
     [baseStructure]
   );
   const extractValues = useCallback(
@@ -100,7 +101,10 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
     (itemId) => {
       setSortableItems((prev) => {
         const remaining = prev.filter((item) => item.id !== itemId);
-        const sanitized = sanitizeStructureList(extractValues(remaining));
+        const sanitized = sanitizeStructureList(
+          extractValues(remaining),
+          SANITIZE_OPTIONS
+        );
         return buildSortableItems(sanitized);
       });
     },
@@ -124,12 +128,12 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
         const allowsMultiple = meta?.allowMultiple !== false;
         if (!allowsMultiple && nextValues.includes(type)) {
           const filtered = nextValues.filter((value) => value !== type);
-          const sanitized = sanitizeStructureList(filtered);
+          const sanitized = sanitizeStructureList(filtered, SANITIZE_OPTIONS);
           return buildSortableItems(sanitized);
         }
 
         nextValues.push(type);
-        const sanitized = sanitizeStructureList(nextValues);
+        const sanitized = sanitizeStructureList(nextValues, SANITIZE_OPTIONS);
         return buildSortableItems(sanitized);
       });
     },
@@ -219,7 +223,10 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
               scrollableRef={scrollRef}
               onDragEnd={({ data: newData }) => {
                 const values = extractValues(newData);
-                const sanitized = sanitizeStructureList(values);
+                const sanitized = sanitizeStructureList(
+                  values,
+                  SANITIZE_OPTIONS
+                );
                 setSortableItems(buildSortableItems(sanitized));
               }}
             />