more fixes web + mobile

src/screens/Writing/Lyrics.js

@@ -40,7 +40,7 @@ const Lyrics = ({ navigation }) => {
   const hasExistingMusicDraft = useMemo(() => {
     if (!Array.isArray(selectedProject?.musicUrls)) return false;
     return selectedProject.musicUrls.some(
-      (url) => typeof url === "string" && url.trim()
+      (url) => typeof url === "string" && url.trim(),
     );
   }, [selectedProject?.musicUrls]);
   const [isFocus, setIsFocus] = useState(null);
@@ -53,6 +53,28 @@ const Lyrics = ({ navigation }) => {
   const [isSensitiveContentAcknowledged, setIsSensitiveContentAcknowledged] =
     useState(false);
   const sensitiveContentResolverRef = useRef(null);
+  const updateLayoutAtIndex = useCallback((index, layout) => {
+    if (typeof index !== "number" || !layout) return;
+    setItemsContainerLayout((prev) => {
+      const next = [...prev];
+      next[index] = layout;
+      return next;
+    });
+  }, []);
+  const handleSectionFocus = useCallback(
+    (idx) => {
+      setIsFocus(idx);
+      if (isWeb) return;
+      const targetLayout = itemsContainerLayout[idx + 1];
+      if (typeof targetLayout?.y === "number") {
+        scrollRef?.current?.scrollTo({
+          y: targetLayout.y,
+          animated: true,
+        });
+      }
+    },
+    [itemsContainerLayout, isWeb],
+  );
 
   const closeSensitiveContentModal = useCallback((result) => {
     setSensitiveContentModal((prev) => ({ ...prev, visible: false }));
@@ -115,7 +137,7 @@ const Lyrics = ({ navigation }) => {
     });
 
     const remainingTextual = remaining.filter((item) =>
-      segmentRequiresLyrics(item.type)
+      segmentRequiresLyrics(item.type),
     );
     sections.push(...remainingTextual);
 
@@ -194,7 +216,7 @@ const Lyrics = ({ navigation }) => {
       if (invalid) {
         alertMessage(
           "Champs incomplets",
-          "Chaque section doit contenir du texte."
+          "Chaque section doit contenir du texte.",
         );
         return;
       }
@@ -217,7 +239,7 @@ const Lyrics = ({ navigation }) => {
         normalizedOldLyrics.every(
           (s, i) =>
             s.type === normalizedNewLyrics[i]?.type &&
-            s.lyrics === normalizedNewLyrics[i]?.lyrics
+            s.lyrics === normalizedNewLyrics[i]?.lyrics,
         );
 
       // 1) Appel de la Cloud Function de modération avant tout enregistrement
@@ -241,7 +263,7 @@ const Lyrics = ({ navigation }) => {
               : null;
             alertMessage(
               "Contenu interdit",
-              [data?.message, quotes].filter(Boolean).join("\n\n")
+              [data?.message, quotes].filter(Boolean).join("\n\n"),
             );
             return; // stop here
           }
@@ -249,7 +271,7 @@ const Lyrics = ({ navigation }) => {
           if (data?.errorCode === "ANALYSE_FAILED") {
             alertMessage(
               "Analyse indisponible",
-              "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard."
+              "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard.",
             );
             return;
           }
@@ -267,18 +289,18 @@ const Lyrics = ({ navigation }) => {
 
           const proceed = await confirmSensitiveContent(
             "Contenu potentiellement sensible",
-            msg
+            msg,
           );
           if (!proceed) return;
         }
       } catch (moderationError) {
         console.log(
           "Moderation call failed",
-          moderationError?.message || moderationError
+          moderationError?.message || moderationError,
         );
         alertMessage(
           "Analyse indisponible",
-          "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard."
+          "Impossible de vérifier la toxicité pour le moment. Réessayez plus tard.",
         );
         return;
       }
@@ -339,7 +361,7 @@ const Lyrics = ({ navigation }) => {
             text: "Continuer vers le Studio",
             onPress: handleNavigateToStudio,
           },
-        ]
+        ],
       );
       return;
     } catch (e) {
@@ -404,11 +426,10 @@ const Lyrics = ({ navigation }) => {
               <Text style={styles.instructions}>
                 {strings.writing.lyrics.instructions}
               </Text>
-              <View style={styles.personalizationBanner}>
-                <Text style={styles.personalizationText}>
-                  {strings.writing.lyrics.personalizationBanner}
-                </Text>
-              </View>
+              <Text style={styles.personalizationText}>
+                N’hesites pas a personnaliser les paroles proposées en ajoutant
+                ta touche personnelle mettre mieux en évidence
+              </Text>
             </View>
             <CustomInput
               label="Titre"
@@ -419,11 +440,7 @@ const Lyrics = ({ navigation }) => {
               multiline={false}
               maxLength={60}
               onLayout={(e) => {
-                e.persist();
-                setItemsContainerLayout((prev) => [
-                  ...prev,
-                  e?.nativeEvent?.layout,
-                ]);
+                updateLayoutAtIndex(0, e?.nativeEvent?.layout);
               }}
             />
             {sections.map((s, idx) => {
@@ -460,18 +477,9 @@ const Lyrics = ({ navigation }) => {
                   height={inputHeight}
                   value={s?.lyrics || ""}
                   setValue={(val) => setSectionAt(idx, val)}
-                  onFocus={() => {
-                    setIsFocus(idx);
-                    scrollRef?.current?.scrollTo({
-                      y: itemsContainerLayout[idx + 1]?.y,
-                    });
-                  }}
+                  onFocus={() => handleSectionFocus(idx)}
                   onLayout={(e) => {
-                    e.persist();
-                    setItemsContainerLayout((prev) => [
-                      ...prev,
-                      e?.nativeEvent?.layout,
-                    ]);
+                    updateLayoutAtIndex(idx + 1, e?.nativeEvent?.layout);
                   }}
                 />
               );
@@ -558,18 +566,12 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 20,
   },
-  personalizationBanner: {
-    backgroundColor: Palette.ultraLightWhite,
-    borderRadius: 12,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginTop: 4,
-  },
   personalizationText: {
     color: Palette.white,
-    fontFamily: FONT_FAMILY.InterMedium,
-    fontSize: 14,
-    lineHeight: 20,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    fontSize: 18,
+    lineHeight: 24,
+    marginTop: 8,
   },
   instrumentalBlock: {
     padding: 16,