fix list selection and other tickets

src/screens/Writing/EmotionConvey.js

@@ -1,10 +1,9 @@
-import { View, Text, FlatList } from "react-native";
+import { View } from "react-native";
 import React, { useState } from "react";
 import CreateLyricsHeader from "./components/CreateLyricsHeader";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
 import { EMOTION_CONVEY } from "../../data/data";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import ListSelection from "../../components/ListSelection/ListSelection";
 
 const EmotionConvey = ({
   selected: selectedProp,
@@ -15,14 +14,7 @@ const EmotionConvey = ({
   const selected = selectedProp ?? internalSelected;
   const setSelected = setSelectedProp ?? setInternalSelected;
 
-  const onPressSelect = (item) => {
-    // item is full object { title, description, color }
-    if (selected?.title === item.title) {
-      setSelected(null);
-    } else {
-      setSelected({ title: item.title, description: item.description });
-    }
-  };
+  // Selection handled by ListSelection
 
   return (
     <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
@@ -36,45 +28,25 @@ const EmotionConvey = ({
         onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
       >
         <ItemContainer height={containerLayout?.height}>
-          <FlatList
-            data={EMOTION_CONVEY}
+          <ListSelection
+            options={EMOTION_CONVEY}
+            variant="emotion"
+            selected={selected}
+            setSelected={setSelected}
+            // Ensure selection remains an object {title, description}
+            formatSelectedValue={(item) => ({
+              title: item.title,
+              description: item.description,
+            })}
+            // selected is object; compare via selected.title
+            selectedValueExtractor={(s) => (s && s.title) || s}
             contentContainerStyle={{
               gap: 16,
               flexGrow: 1,
               zIndex: 2,
               paddingTop: 5,
             }}
-            renderItem={({ item, index }) => {
-              const selectedItem = selected?.title === item.title;
-
-              return (
-                <View style={{ paddingHorizontal: 5 }}>
-                  <CreateLyricsHeader
-                    colors={item.color}
-                    tint={"dark"}
-                    onPress={() => onPressSelect(item)}
-                    containerStyle={{
-                      borderWidth: selectedItem ? 2 : 0,
-                      borderColor: selectedItem ? "#F94697" : "transparent",
-                      borderRadius: 14,
-                    }}
-                  >
-                    <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>