fix list selection and other tickets

src/screens/Writing/SongStructure.js

@@ -1,10 +1,11 @@
-import { View, Text, StyleSheet, FlatList } from "react-native";
+import { View, StyleSheet } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
 import { SONG_STRUCTURE } from "../../data/data";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const SongStructure = ({
   selected: selectedProp,
@@ -14,13 +15,7 @@ const SongStructure = ({
   const selected = selectedProp ?? internalSelected;
   const setSelected = setSelectedProp ?? setInternalSelected;
 
-  const onPressSelect = (item) => {
-    if (selected === item) {
-      setSelected(null);
-    } else {
-      setSelected(item);
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
@@ -29,36 +24,14 @@ const SongStructure = ({
         subTitle="Sélectionne une structure."
       />
       <ItemContainer>
-        <FlatList
-          data={SONG_STRUCTURE}
-          showsVerticalScrollIndicator={false}
+        <ListSelection
+          options={SONG_STRUCTURE}
+          variant="simple"
+          selected={selected}
+          setSelected={setSelected}
           contentContainerStyle={styles.contentContainer}
-          renderItem={({ item }) => {
-            const selectedItem = selected === 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,
-                    paddingHorizontal: 14,
-                    justifyContent: "center",
-                  }}
-                >
-                  <Text style={styles.itemText}>{item}</Text>
-                </View>
-              </CreateLyricsHeader>
-            );
-          }}
+          itemContainerStyle={styles.itemContainer}
+          itemTextStyle={styles.itemText}
         />
       </ItemContainer>
     </View>