fix tickets

src/assets/index.js

@@ -211,6 +211,7 @@ export const tutorial = {
 
 export const background = {
   writingBG,
+  writingBgWeb: require("./UI/writingBgWeb.png"),
   studioBG,
   studioBG2,
   productionBG,

src/components/BorderGradientButton.js

@@ -14,12 +14,17 @@ const BorderGradientButton = ({
   containerStyle = {},
   tint = "dark",
   disabled = false,
+  maxWidth = null,
 }) => {
   return (
     <Pressable
       onPress={onPress}
       disabled={disabled}
-      style={{ ...containerStyle, opacity: disabled ? 0.6 : 1 }}
+      style={{
+        maxWidth: maxWidth ? maxWidth : null,
+        ...containerStyle,
+        opacity: disabled ? 0.6 : 1,
+      }}
     >
       <BorderGradient
         gradientProps={{

src/components/ListSelection/ListSelection.js

@@ -280,6 +280,10 @@ const ListSelection = ({
         const itemKey = buildItemKey(String(val ?? ""));
         const isHovered = isWeb && !disableHover && hoveredKey === itemKey;
         const showHoverOutline = isHovered && !sel;
+        const showSelectionOutline =
+          !isWeb &&
+          (variant === "simple" || variant === "emotion" || variant === "titleDescription") &&
+          sel;
 
         const baseContent =
           variant === "simple"
@@ -294,6 +298,8 @@ const ListSelection = ({
         };
         if (sel && isWeb) headerContainerStyle.backgroundColor = "transparent";
 
+        const shouldShowBorder = !sel;
+
         return (
           <View
             style={[{ position: "relative" }, itemOuterStyle]}
@@ -305,13 +311,13 @@ const ListSelection = ({
             }
           >
             <CreateLyricsHeader
-              colors={borderColors} // mobile: rendu d’avant conservé
+              colors={borderColors}
               tint={tint}
               onPress={() => toggleSelect(item)}
               gradientProps={
                 useEmotionColors && !sel ? { locations: [0.24, 1] } : undefined
               }
-              showBorder={!sel} // mobile: bordure d’origine
+              showBorder={shouldShowBorder}
               disableBlur={sel && isWeb} // web: pas de blur si gradient
               blurViewStyle={
                 sel && isWeb
@@ -323,7 +329,7 @@ const ListSelection = ({
               {withWebBlueGradientIfSelected(baseContent, sel)}
             </CreateLyricsHeader>
 
-            {showHoverOutline && (
+            {(showHoverOutline || showSelectionOutline) && (
               <View
                 pointerEvents="none"
                 style={{

src/config/firebase.js

@@ -4,7 +4,6 @@ import {
   initializeAuth,
 } from "firebase/auth/react-native";
 import firebase from "firebase/compat/app";
-
 import "firebase/compat/auth";
 import "firebase/compat/firestore";
 import "firebase/compat/functions";

src/screens/Writing/CreateLyricsWithAi.js

@@ -6,7 +6,7 @@ import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { OTHER_OBJECTIVE_OPTION, OTHER_STYLE_OPTION } from "../../data/data";
-import useLayoutType from "../../hooks/useLayoutType";
+import useLayoutType, { isWeb } from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -336,7 +336,7 @@ const CreateLyricsWithAi = () => {
       headerType="NONE"
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
-      backgroundImg={background.homeBG}
+      backgroundImg={background.writingBG}
     >
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View

src/screens/Writing/CreateLyricsWithAi.web.js

@@ -440,7 +440,7 @@ const CreateLyricsWithAi = () => {
       headerType="NONE"
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 100}
-      backgroundImg={background.homeBG}
+      backgroundImg={background.writingBgWeb}
     >
       <MusicLandHeader onPressBack={onPressBack} progress={progress} />
       <View

src/screens/Writing/CreatingLyrics.js

@@ -1,13 +1,12 @@
-import { View, Text, Pressable, Image, Platform } from "react-native";
-import React, { useEffect, useState } from "react";
+import { View, Text, Image, Platform, Alert } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
 import { Palette, Style } from "../../styles";
 import { BlurView } from "expo-blur";
-import { ai, icons } from "../../assets";
-import { size } from "../../styles/Style";
+import { ai } from "../../assets";
 import ProgressBar from "../../components/ProgressBar";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import GradientButton from "../../components/GradientButton";
-import { goBack, navigate } from "../../navigation/NavigationService";
+import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 import firebase from "../../config/firebase";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
@@ -18,6 +17,8 @@ const CreatingLyrics = ({ active, config, selections }) => {
   const [called, setCalled] = useState(false);
   const [result, setResult] = useState(null);
   const [saved, setSaved] = useState(false);
+  const [error, setError] = useState(null);
+  const hasShownErrorAlert = useRef(false);
   const { setIsLoading } = useMinuit();
   const { updateProjectData } = useUser();
 
@@ -28,6 +29,8 @@ const CreatingLyrics = ({ active, config, selections }) => {
       setResult(null);
       setProgress(0);
       setSaved(false);
+      setError(null);
+      hasShownErrorAlert.current = false;
     }
   }, [active]);
 
@@ -52,6 +55,9 @@ const CreatingLyrics = ({ active, config, selections }) => {
       try {
         setCalled(true);
         await setIsLoading(true);
+        console.log("🚀 [CreatingLyrics] Lancement de la génération", {
+          platform: Platform.OS,
+        });
         const callable = firebase
           .functions()
           .httpsCallable("lyrics-generateLyrics");
@@ -66,8 +72,22 @@ const CreatingLyrics = ({ active, config, selections }) => {
         });
         setResult(data);
         setProgress(100);
+        console.log("✨ [CreatingLyrics] Génération réussie");
       } catch (e) {
-        console.log(e);
+        console.error("🔥 [CreatingLyrics] Erreur de génération", e);
+        const rawMessage = typeof e?.message === "string" ? e.message : "";
+        const cleanedMessage = rawMessage.replace(
+          /^functions error: \w+-\w+:\s*/i,
+          "",
+        );
+        setError({
+          message:
+            cleanedMessage?.length > 0
+              ? cleanedMessage
+              : "Une erreur est survenue lors de la génération des paroles.",
+          code: e?.code,
+          details: e?.details,
+        });
       } finally {
         await setIsLoading(false);
       }
@@ -85,6 +105,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
         if (saved) return;
         setSaved(true);
         await setIsLoading(true);
+        console.log("💾 [CreatingLyrics] Sauvegarde automatique des paroles");
         await updateProjectData({
           title: result?.title || "",
           lyrics: Array.isArray(result?.lyrics) ? result.lyrics : [],
@@ -95,13 +116,13 @@ const CreatingLyrics = ({ active, config, selections }) => {
         });
         navigate(Routes.Lyrics);
       } catch (e) {
-        console.log("Auto save generated lyrics error", e?.message);
+        console.error("⚠️ [CreatingLyrics] Erreur lors de la sauvegarde", e);
       } finally {
         await setIsLoading(false);
       }
     };
 
-    if (active && result && progress >= 100 && !saved) {
+    if (active && result && progress >= 100 && !saved && !error) {
       autoSaveAndGo();
     }
   }, [
@@ -109,12 +130,39 @@ const CreatingLyrics = ({ active, config, selections }) => {
     result,
     progress,
     saved,
+    error,
     setIsLoading,
     updateProjectData,
     config,
     selections,
   ]);
 
+  useEffect(() => {
+    if (error && !hasShownErrorAlert.current) {
+      hasShownErrorAlert.current = true;
+      const redirect = () => {
+        console.log("↩️ [CreatingLyrics] Retour à WritingLyrics après erreur");
+        navigate(Routes.WritingLyrics);
+      };
+
+      Alert.alert(
+        "Brief à reformuler",
+        error.message,
+        [
+          {
+            text: "OK",
+            onPress: redirect,
+          },
+        ],
+        { cancelable: false },
+      );
+
+      if (Platform.OS === "web") {
+        redirect();
+      }
+    }
+  }, [error]);
+
   return (
     <View
       style={{
@@ -169,7 +217,9 @@ const CreatingLyrics = ({ active, config, selections }) => {
                   textAlign: "center",
                 }}
               >
-                Ton texte est{"\n"}en cours de création
+                {error
+                  ? "Impossible de générer les paroles"
+                  : "Ton texte est\nen cours de création"}
               </Text>
               <View style={{ alignItems: "center", gap: 16 }}>
                 <ProgressBar gradient progress={progress} />
@@ -183,7 +233,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
                   {progress}%
                 </Text>
               </View>
-              {!saved && (
+              {!saved && result && !error && (
                 <GradientButton
                   title="Découvrir mon texte"
                   containerStyle={{
@@ -195,6 +245,9 @@ const CreatingLyrics = ({ active, config, selections }) => {
                       if (saved) return;
                       setSaved(true);
                       await setIsLoading(true);
+                      console.log(
+                        "📄 [CreatingLyrics] Consultation manuelle du texte",
+                      );
                       await updateProjectData({
                         title: result?.title || "",
                         lyrics: Array.isArray(result?.lyrics)
@@ -206,7 +259,10 @@ const CreatingLyrics = ({ active, config, selections }) => {
                       });
                       navigate(Routes.Lyrics);
                     } catch (e) {
-                      console.log("Save generated lyrics error", e?.message);
+                      console.error(
+                        "⚠️ [CreatingLyrics] Erreur lors de l'ouverture manuelle",
+                        e,
+                      );
                     } finally {
                       await setIsLoading(false);
                     }

src/screens/Writing/Lyrics.js

@@ -12,6 +12,8 @@ import { navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
 import CustomInput from "./components/CustomInput";
+import { background } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
 
 const Lyrics = ({ navigation }) => {
   const scrollRef = useRef(null);
@@ -239,7 +241,10 @@ const Lyrics = ({ navigation }) => {
   ]);
 
   return (
-    <Page headerType="NONE">
+    <Page
+      backgroundImg={isWeb ? background.writingBgWeb : background.writingBG}
+      headerType="NONE"
+    >
       <MusicLandHeader
         onPressBack={() => navigate(Routes.Home)}
         progress={95}

src/screens/Writing/WritingLyrics.js

@@ -6,11 +6,13 @@ import BorderGradientButton from "../../components/BorderGradientButton";
 import FullscreenIntroVideo from "../../components/FullscreenIntroVideo";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
-import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
 import { gutters } from "../../styles";
+import { background } from "../../assets";
+import { isWeb } from "../../hooks/useLayoutType";
+import Page from "../../layouts/Page";
 
 const WritingLyrics = () => {
   const { createNewProject, selectedProject, updateProjectData } =
@@ -42,7 +44,10 @@ const WritingLyrics = () => {
   }
 
   return (
-    <Page headerType="NONE">
+    <Page
+      backgroundImg={isWeb ? background.writingBgWeb : background.writingBG}
+      headerType="NONE"
+    >
       <Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
       <MusicLandHeader onPressBack={goBack} progress={9} />
       <View
@@ -56,9 +61,13 @@ const WritingLyrics = () => {
           }}
         >
           <BorderGradientButton
+            maxWidth={500}
             onPress={() => createAndNavigate({ hasLyrics: true })}
+            containerStyle={{ alignSelf: "center", width: "100%" }}
           />
           <GradientButton
+            maxWidth={500}
+            containerStyle={{ alignSelf: "center", width: "100%" }}
             title="Écrire des paroles avec une IA"
             onPress={() => createAndNavigate({ hasLyrics: false })}
           />