From 2819b959a0ad12db8cc08d4b0045edeb272dbf79 Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Thu, 23 Oct 2025 17:04:33 +0200
Subject: [PATCH] fix write lyrics flow

---
 src/screens/Studio/SongReady.js               | 20 +----
 src/screens/Writing/CreateLyricsWithAi.web.js | 73 +++++--------------
 2 files changed, 22 insertions(+), 71 deletions(-)

diff --git a/src/screens/Studio/SongReady.js b/src/screens/Studio/SongReady.js
index 7602c0e..4fbec42 100644
--- a/src/screens/Studio/SongReady.js
+++ b/src/screens/Studio/SongReady.js
@@ -5,12 +5,12 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { background, icons } from "../../assets";
-import BorderGradientButton from "../../components/BorderGradientButton";
+import alert from "../../components/Alert";
 import GradientButton from "../../components/GradientButton";
 import ValidateModal from "../../components/modal/ValidateModal";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import Slider from "../../components/Slider";
-import alert from "../../components/Alert";
+import { isWeb } from "../../hooks/useLayoutType";
 import useSharedAudioPlayer from "../../hooks/useSharedAudioPlayer";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -18,7 +18,6 @@ import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { Palette, Style } from "../../styles";
 import { gutters, size } from "../../styles/Style";
-import { isWeb } from "../../hooks/useLayoutType";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 
 const SongReady = () => {
@@ -360,9 +359,7 @@ const SongReady = () => {
                           height: 18,
                           borderRadius: 9,
                           borderWidth: 2,
-                          borderColor: isSelected
-                            ? Palette.primary
-                            : "white",
+                          borderColor: isSelected ? Palette.primary : "white",
                           alignItems: "center",
                           justifyContent: "center",
                         }}
@@ -394,17 +391,6 @@ const SongReady = () => {
           gap: 12,
         }}
       >
-        <BorderGradientButton
-          title="Regénérer"
-          icon={icons.stars}
-          onPress={async () => {
-            try {
-              await player0?.pause?.();
-              await player1?.pause?.();
-            } catch {}
-            navigate(Routes.ComposeSong);
-          }}
-        />
         <GradientButton
           title="Choisir ce morceau"
           onPress={handleChooseTrack}
diff --git a/src/screens/Writing/CreateLyricsWithAi.web.js b/src/screens/Writing/CreateLyricsWithAi.web.js
index 743de56..4ec6b3f 100644
--- a/src/screens/Writing/CreateLyricsWithAi.web.js
+++ b/src/screens/Writing/CreateLyricsWithAi.web.js
@@ -1,5 +1,5 @@
-import React, { useMemo, useRef, useState } from "react";
-import { Dimensions, FlatList, Platform, View } from "react-native";
+import React, { useMemo, useState } from "react";
+import { Platform, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { background, icons } from "../../assets";
 import GradientButton from "../../components/GradientButton";
@@ -21,16 +21,10 @@ import SongStyle from "./SongStyle";
 import SongTo from "./SongTo";
 import SpecificityContext from "./SpecificityContext";
 
-const { width: windowWidth } = Dimensions.get("window");
-
 const CreateLyricsWithAi = () => {
   const { selectedProject, updateProjectData } = useUser();
   const hasLyrics = selectedProject?.hasLyrics === true;
-  const scrollRef = useRef(null);
   const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
-  const [progress, setProgress] = useState(16);
-  const [parentLayout, setParentLayout] = useState(null);
-  const containerWidth = parentLayout?.width || windowWidth || 1;
 
   // Collected state across steps
   const [objective, setObjective] = useState(null); // from Goals list
@@ -200,6 +194,11 @@ const CreateLyricsWithAi = () => {
     }
   }, [hasLyrics]);
 
+  const progress = useMemo(
+    () => 16 + selectedIndex * 9,
+    [selectedIndex]
+  );
+
   const lyricsConfig = useMemo(() => {
     const resolvedObjective = shouldUseOtherObjective
       ? persistedOtherObjective || undefined
@@ -435,28 +434,7 @@ const CreateLyricsWithAi = () => {
     },
   ];
 
-  const getItemLayout = React.useCallback(
-    (_, index) => ({
-      length: containerWidth,
-      offset: containerWidth * index,
-      index,
-    }),
-    [containerWidth]
-  );
-
-  // Sync scroll position and progress with selectedIndex
-  React.useEffect(() => {
-    if (!parentLayout?.height) return;
-    try {
-      const nextProgress = 16 + selectedIndex * 9;
-      setProgress(nextProgress);
-      scrollRef.current?.scrollToIndex?.({
-        index: selectedIndex,
-        animated: true,
-        viewPosition: 0,
-      });
-    } catch (_) {}
-  }, [selectedIndex, parentLayout?.height, containerWidth]);
+  const currentStep = steps[selectedIndex];
 
   return (
     <Page
@@ -479,31 +457,18 @@ const CreateLyricsWithAi = () => {
       >
         <View
           style={{ flex: 1 }}
-          onLayout={(e) => setParentLayout(e.nativeEvent.layout)}
         >
-          <FlatList
-            ref={scrollRef}
-            data={steps}
-            keyExtractor={(item) => item.key}
-            horizontal
-            pagingEnabled
-            scrollEnabled={false}
-            showsHorizontalScrollIndicator={false}
-            initialScrollIndex={selectedIndex}
-            getItemLayout={getItemLayout}
-            style={{ width: containerWidth }}
-            renderItem={({ item }) => (
-              <View
-                style={{
-                  width: containerWidth,
-                  height: parentLayout?.height,
-                  paddingHorizontal: gutters,
-                }}
-              >
-                {item.render()}
-              </View>
-            )}
-          />
+          {currentStep ? (
+            <View
+              key={currentStep.key}
+              style={{
+                flex: 1,
+                paddingHorizontal: gutters,
+              }}
+            >
+              {currentStep.render()}
+            </View>
+          ) : null}
         </View>
         {selectedIndex !== 8 && (
           <GradientButton