filter on lyrics for bloking unwanted content, tickets fix

src/screens/Studio/CustomizeVoice.js

@@ -7,13 +7,18 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { BlurView } from "expo-blur";
 import { VOICE } from "../../data/data";
 
-const CustomizeVoice = ({ selected, setSelected }) => {
+const CustomizeVoice = ({ selected = {}, setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
 
-  const onPressSelect = (item) => {
+  // Toggle select: only 1 per category (section.title)
+  const onPressSelect = (category, item) => {
     if (!setSelected) return;
-    if (selected === item) setSelected(null);
-    else setSelected(item);
+    const current = selected && typeof selected === "object" ? selected : {};
+    // If tapping the same item, deselect; otherwise, set new one for the category
+    const next = { ...current };
+    if (current[category] === item) next[category] = null;
+    else next[category] = item;
+    setSelected(next);
   };
 
   return (
@@ -32,25 +37,26 @@ const CustomizeVoice = ({ selected, setSelected }) => {
               sections={VOICE}
               showsVerticalScrollIndicator={false}
               contentContainerStyle={styles.contentContainer}
-              renderItem={({ item }) => {
-                const selectedItem = selected === item;
+              renderItem={({ item, section }) => {
+                const cat = section?.title;
+                const selectedItem = selected?.[cat] === item;
 
                 return (
                   <CreateLyricsHeader
-                    onPress={() => onPressSelect(item)}
+                    onPress={() => onPressSelect(cat, item)}
                     tint={selectedItem ? "default" : "dark"}
-                    colors={
-                      selectedItem
-                        ? ["#FFFFFF00", "#FFFFFF"]
-                        : [Palette.tran, Palette.tran]
-                    }
+                    // Ne pas changer le blur; garder fond transparent comme ChooseInstruments
+                    colors={[Palette.tran, Palette.tran]}
                     containerStyle={{
                       ...styles.itemContainer,
+                      borderWidth: selectedItem ? 2 : 0,
+                      borderColor: selectedItem ? "#F94697" : "transparent",
                     }}
                   >
                     <View
                       style={{
-                        paddingVertical: 6,
+                        height: 40,
+                        justifyContent: "center",
                       }}
                     >
                       <Text style={styles.itemText}>{item}</Text>
@@ -89,6 +95,7 @@ const styles = StyleSheet.create({
     paddingBottom: 50,
   },
   itemContainer: {
+    height: 54,
     backgroundColor: Palette.glass,
     borderRadius: 14,
     overflow: "hidden",