fix: blur and music duration

src/components/SongStructureDragDrop.js

@@ -1,4 +1,11 @@
-import { View, Text, ScrollView, StyleSheet, Dimensions } from "react-native";
+import {
+  View,
+  Text,
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from "react-native";
 import React, { useEffect, useMemo, useState } from "react";
 import Animated, {
   runOnJS,
@@ -50,7 +57,6 @@ const SongStructureDragDrop = ({ sourceItems, initialSelected, onChange }) => {
     [sourceItems],
   );
 
-  const [leftItems, setLeftItems] = useState(normalizedSource);
   const [rightItems, setRightItems] = useState([]);
 
   // Compare arrays by item id and order to avoid unnecessary state churn
@@ -67,13 +73,16 @@ const SongStructureDragDrop = ({ sourceItems, initialSelected, onChange }) => {
   useEffect(() => {
     const selected = Array.isArray(initialSelected) ? initialSelected : [];
     const selectedSet = new Set(selected);
-    const right = normalizedSource.filter((i) => selectedSet.has(i.id));
-    const left = normalizedSource.filter((i) => !selectedSet.has(i.id));
-
-    setLeftItems((prev) => (sameById(prev, left) ? prev : left));
-    setRightItems((prev) => (sameById(prev, right) ? prev : right));
+    const nextRight = normalizedSource.filter((i) => selectedSet.has(i.id));
+    setRightItems((prev) => (sameById(prev, nextRight) ? prev : nextRight));
   }, [normalizedSource, initialSelected]);
 
+  const leftItems = useMemo(() => {
+    if (!rightItems || rightItems.length === 0) return normalizedSource;
+    const rightIds = new Set(rightItems.map((item) => item.id));
+    return normalizedSource.filter((item) => !rightIds.has(item.id));
+  }, [normalizedSource, rightItems]);
+
   const draggingItem = useSharedValue(null);
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
@@ -83,15 +92,22 @@ const SongStructureDragDrop = ({ sourceItems, initialSelected, onChange }) => {
   };
 
   const moveItem = (itemId) => {
-    setLeftItems((items) => {
-      const found = items.find((i) => i.id === itemId);
-      if (!found) return items;
-      setRightItems((r) => {
-        const next = [...r, found];
-        onChange?.(next.map((i) => i.value ?? i.label));
-        return next;
-      });
-      return items.filter((i) => i.id !== itemId);
+    const item = normalizedSource.find((i) => i.id === itemId);
+    if (!item) return;
+    setRightItems((current) => {
+      if (current.some((i) => i.id === itemId)) return current;
+      const next = [...current, item];
+      onChange?.(next.map((i) => i.value ?? i.label));
+      return next;
+    });
+  };
+
+  const removeItem = (itemId) => {
+    setRightItems((current) => {
+      if (!current.some((i) => i.id === itemId)) return current;
+      const next = current.filter((i) => i.id !== itemId);
+      onChange?.(next.map((i) => i.value ?? i.label));
+      return next;
     });
   };
 
@@ -133,10 +149,19 @@ const SongStructureDragDrop = ({ sourceItems, initialSelected, onChange }) => {
 
       <ScrollView style={{ ...styles.scroll, zIndex: -1 }}>
         <Text style={styles.title}>Right</Text>
+        <Text style={styles.helpText}>Appuyez pour retirer un élément</Text>
         {rightItems.map((item) => (
-          <View key={item.id} style={[styles.item, { backgroundColor: "#bdf" }]}>
+          <TouchableOpacity
+            key={item.id}
+            style={styles.selectedItem}
+            onPress={() => removeItem(item.id)}
+            activeOpacity={0.7}
+            accessibilityRole="button"
+            accessibilityLabel={`Retirer ${item.label ?? String(item)}`}
+          >
             <Text style={styles.text}>{item.label ?? String(item)}</Text>
-          </View>
+            <Text style={styles.removeHint}>Retirer</Text>
+          </TouchableOpacity>
         ))}
       </ScrollView>
     </View>
@@ -169,6 +194,24 @@ const styles = StyleSheet.create({
     marginVertical: 5,
     borderRadius: 10,
   },
+  selectedItem: {
+    backgroundColor: "#bdf",
+    padding: 15,
+    marginVertical: 5,
+    borderRadius: 10,
+    alignItems: "center",
+  },
+  helpText: {
+    fontSize: 12,
+    color: "#666",
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  removeHint: {
+    fontSize: 12,
+    color: "#555",
+    marginTop: 4,
+  },
   text: {
     color: "#333",
     textAlign: "center",