fix list selection and other tickets

src/screens/Studio/ChooseGenre.js

@@ -1,26 +1,14 @@
-import { View, Text, FlatList } from "react-native";
+import { View } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import { Palette } from "../../styles";
 import { CHOOSE_GENRE } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
-import _ from "lodash";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const ChooseGenre = ({ selected = [], setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
 
-  const onPressSelect = (item) => {
-    if (!setSelected) return;
-    const value = item?.title;
-    const list = _.isArray(selected) ? selected : [];
-    const exists = _.includes(list, value);
-    if (exists) {
-      setSelected(_.filter(list, (v) => !_.isEqual(v, value)));
-    } else if (_.size(list) < 2) {
-      setSelected([...list, value]);
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -33,45 +21,21 @@ const ChooseGenre = ({ selected = [], setSelected }) => {
         onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
       >
         <ItemContainer height={containerLayout?.height}>
-          <FlatList
-            data={CHOOSE_GENRE}
+          <ListSelection
+            options={CHOOSE_GENRE}
+            variant="titleDescription"
+            selected={selected}
+            setSelected={setSelected}
+            multiple
+            maxSelection={2}
+            getItemValue={(item) => item?.title}
             contentContainerStyle={{
               gap: 16,
               flexGrow: 1,
               zIndex: 2,
               paddingTop: 5,
             }}
-            renderItem={({ item, index }) => {
-              const list = Array.isArray(selected) ? selected : [];
-              const selectedItem = _.includes(list, item.title);
-
-              return (
-                <View style={{ paddingHorizontal: 5 }}>
-                  <CreateLyricsHeader
-                    colors={[Palette.tran, Palette.tran]}
-                    tint={selectedItem ? "default" : "dark"}
-                    onPress={() => onPressSelect(item)}
-                    containerStyle={{
-                      borderWidth: selectedItem ? 2 : 0,
-                      borderColor: selectedItem ? "#F94697" : "transparent",
-                    }}
-                  >
-                    <Text
-                      style={{
-                        fontSize: 16,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      <Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
-                        {item.title}
-                      </Text>{" "}
-                      : {item.description}
-                    </Text>
-                  </CreateLyricsHeader>
-                </View>
-              );
-            }}
+            itemOuterStyle={{ paddingHorizontal: 5 }}
           />
         </ItemContainer>
       </View>

src/screens/Studio/ChooseInstruments.js

@@ -1,25 +1,16 @@
-import { View, Text, FlatList, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
-import { BlurView } from "expo-blur";
 import { INSTRUMENTS } from "../../data/data";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const ChooseInstruments = ({ selected = [], setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
 
-  const onPressSelect = (item) => {
-    if (!setSelected) return;
-    const list = Array.isArray(selected) ? selected : [];
-    const exists = list.includes(item);
-    if (exists) {
-      setSelected(list.filter((v) => v !== item));
-    } else if (list.length < 5) {
-      setSelected([...list, item]);
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
@@ -32,36 +23,16 @@ const ChooseInstruments = ({ selected = [], setSelected }) => {
         onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
       >
         <ItemContainer height={containerLayout?.height}>
-          <FlatList
-            data={INSTRUMENTS}
-            showsVerticalScrollIndicator={false}
+          <ListSelection
+            options={INSTRUMENTS}
+            variant="simple"
+            selected={selected}
+            setSelected={setSelected}
+            multiple
+            maxSelection={5}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => {
-              const list = Array.isArray(selected) ? selected : [];
-              const selectedItem = list.includes(item);
-
-              return (
-                <CreateLyricsHeader
-                  onPress={() => onPressSelect(item)}
-                  tint={selectedItem ? "default" : "dark"}
-                  colors={[Palette.tran, Palette.tran]}
-                  containerStyle={{
-                    ...styles.itemContainer,
-                    borderWidth: selectedItem ? 2 : 0,
-                    borderColor: selectedItem ? "#F94697" : "transparent",
-                  }}
-                >
-                  <View
-                    style={{
-                      height: 40,
-                      justifyContent: "center",
-                    }}
-                  >
-                    <Text style={styles.itemText}>{item}</Text>
-                  </View>
-                </CreateLyricsHeader>
-              );
-            }}
+            itemContainerStyle={styles.itemContainer}
+            itemTextStyle={styles.itemText}
           />
         </ItemContainer>
       </View>

src/screens/Studio/ChooseRhythm.js

@@ -1,55 +1,27 @@
-import { View, Text, FlatList, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import React from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
-import { BlurView } from "expo-blur";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { RHYTHM } from "../../data/data";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const ChooseRhythm = ({ selected, setSelected }) => {
 
-  const onPressSelect = (item) => {
-    if (!setSelected) return;
-    if (selected === item) setSelected(null);
-    else setSelected(item);
-  };
-
   return (
     <View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
       <CreateLyricsHeader title="Choisis un rythme" />
       <View style={{ flex: 1 }}>
         <ItemContainer height={340}>
-          <FlatList
-            data={RHYTHM}
-            showsVerticalScrollIndicator={false}
+          <ListSelection
+            options={RHYTHM}
+            variant="simple"
+            selected={selected}
+            setSelected={setSelected}
             contentContainerStyle={styles.contentContainer}
-            renderItem={({ item }) => {
-              const selectedItem = selected === item;
-
-              return (
-                <CreateLyricsHeader
-                  onPress={() => onPressSelect(item)}
-                  tint={selectedItem ? "default" : "dark"}
-                  // Keep transparent colors; highlight selection with border only
-                  colors={[Palette.tran, Palette.tran]}
-                  containerStyle={{
-                    ...styles.itemContainer,
-                    borderWidth: selectedItem ? 2 : 0,
-                    borderColor: selectedItem ? "#F94697" : "transparent",
-                  }}
-                >
-                  <View
-                    style={{
-                      height: 40,
-                      justifyContent: "center",
-                    }}
-                  >
-                    <Text style={styles.itemText}>{item}</Text>
-                  </View>
-                </CreateLyricsHeader>
-              );
-            }}
+            itemContainerStyle={styles.itemContainer}
+            itemTextStyle={styles.itemText}
           />
         </ItemContainer>
       </View>

src/screens/Studio/CustomizeVoice.js

@@ -1,11 +1,10 @@
-import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
+import { View, StyleSheet } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
-import { Palette, Style } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import { BlurView } from "expo-blur";
+import { Palette } from "../../styles";
 import { VOICE } from "../../data/data";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const CustomizeVoice = ({ selected = {}, setSelected }) => {
   const [containerLayout, setContainerLayout] = useState(null);
@@ -33,49 +32,13 @@ const CustomizeVoice = ({ selected = {}, setSelected }) => {
       >
         <ItemContainer height={containerLayout?.height}>
           <View style={{ flex: 1, gap: 10 }}>
-            <SectionList
-              sections={VOICE}
-              showsVerticalScrollIndicator={false}
+            <ListSelection
+              options={VOICE}
+              variant="sectioned"
+              selected={selected}
+              setSelected={setSelected}
               contentContainerStyle={styles.contentContainer}
-              renderItem={({ item, section }) => {
-                const cat = section?.title;
-                const selectedItem = selected?.[cat] === item;
-
-                return (
-                  <CreateLyricsHeader
-                    onPress={() => onPressSelect(cat, item)}
-                    tint={selectedItem ? "default" : "dark"}
-                    // 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={{
-                        height: 40,
-                        justifyContent: "center",
-                      }}
-                    >
-                      <Text style={styles.itemText}>{item}</Text>
-                    </View>
-                  </CreateLyricsHeader>
-                );
-              }}
-              renderSectionHeader={({ section: { title } }) => (
-                <Text
-                  style={{
-                    fontSize: 16,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.InterBold,
-                    left: 10,
-                  }}
-                >
-                  {title}
-                </Text>
-              )}
+              itemContainerStyle={styles.itemContainer}
             />
           </View>
         </ItemContainer>
@@ -109,9 +72,5 @@ const styles = StyleSheet.create({
 
     elevation: 5,
   },
-  itemText: {
-    fontSize: 16,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
+  // itemText was used in legacy implementation; kept here for consistency if needed later
 });