feat: new styles and regenerate cover

src/screens/cover/PouchReady.js

@@ -39,6 +39,12 @@ const COVER_STYLE_PRESETS = [
   'Portrait théâtralisé',
   'Livre de coloriage',
   'Shooting',
+  'Réaliste',
+  'Artistique',
+  'Afro',
+  'Grunge',
+  'Pop Art'
+
 ]
 const COVER_PROGRESS_MAX = 98
 const COVER_PROGRESS_INTERVAL_MS = 500
@@ -74,6 +80,7 @@ const PouchReady = () => {
     return 'Nous lançons la génération de ta pochette...'
   }, [coverBackgroundMessage])
 
+  const [isEditing, setIsEditing] = useState(false)
   const [styleMode, setStyleMode] = useState('preset')
   const [selectedPresetStyle, setSelectedPresetStyle] = useState(COVER_STYLE_PRESETS[0])
   const [customStyle, setCustomStyle] = useState('')
@@ -115,7 +122,8 @@ const PouchReady = () => {
   const generateCover = useCallback(
     async (styleValue) => {
       if (!selectedProjectId) return
-      if (hasGeneratedOptions) {
+      // We allow regeneration if isEditing is true
+      if (hasGeneratedOptions && !isEditing) {
         return
       }
       const trimmedStyle = String(styleValue || '').trim()
@@ -128,6 +136,12 @@ const PouchReady = () => {
         await updateProjectData(
           {
             coverStyle: trimmedStyle,
+            cover: {
+              options: [],
+              result: null,
+              generatedBackground: null,
+              selectedOptionId: null,
+            },
           },
           { merge: true }
         )
@@ -137,13 +151,14 @@ const PouchReady = () => {
           status: 'PENDING',
           createdAt: firebase.firestore.FieldValue.serverTimestamp(),
         })
+        setIsEditing(false) // Exit editing mode after triggering generation
       } catch (e) {
         console.log('Cover task error', e?.message)
         setIsAwaitingGenerationStart(false)
         await setLoading(false)
       }
     },
-    [hasGeneratedOptions, selectedProjectId, setLoading, showGenerationLoading, updateProjectData]
+    [hasGeneratedOptions, isEditing, selectedProjectId, setLoading, showGenerationLoading, updateProjectData]
   )
 
   const requestCoverGeneration = useCallback(() => {
@@ -159,18 +174,18 @@ const PouchReady = () => {
   const coverPreviewUrl =
     selectedProject?.cover?.result || selectedProject?.cover?.generatedBackground || null
 
-  const shouldShowStylePanel = !isGenerating && !hasGeneratedOptions && !coverPreviewUrl
+  const shouldShowStylePanel = (!isGenerating && !hasGeneratedOptions && !coverPreviewUrl) || isEditing
 
   const displayOptions = hasGeneratedOptions
     ? coverOptions
     : coverPreviewUrl
       ? [
-          {
-            id: 'preview',
-            finalUrl: selectedProject?.cover?.result || null,
-            generatedUrl: coverPreviewUrl,
-          },
-        ]
+        {
+          id: 'preview',
+          finalUrl: selectedProject?.cover?.result || null,
+          generatedUrl: coverPreviewUrl,
+        },
+      ]
       : []
   const isCoverLoading = isGenerating && !hasGeneratedOptions && !coverPreviewUrl
   const coverProgressValue = Math.max(0, Math.min(100, Math.round(coverProgress)))
@@ -527,6 +542,10 @@ const PouchReady = () => {
                             setIsPresetDropdownOpen(false)
                           }}
                         />
+
+                        <Text style={{ color: Palette.white, fontSize: 12, paddingLeft: 24, paddingTop: 8 }}>
+                          Donne les instructions que tu veux pour créer ta pochette
+                        </Text>
                       </View>
                       {styleMode === 'custom' && (
                         <View style={styles.customInputWrapper}>
@@ -560,16 +579,44 @@ const PouchReady = () => {
             gap: 12,
           }}
         >
-          {!hasGeneratedOptions && (
+          {isEditing ? (
+            <View style={{ gap: 12 }}>
+              <BorderGradientButton
+                title={isGenerating ? 'Génération en cours...' : 'Regénérer la pochette'}
+                icon={icons.stars}
+                onPress={requestCoverGeneration}
+                disabled={isGenerating}
+              />
+              <Pressable
+                onPress={() => setIsEditing(false)}
+                disabled={isGenerating}
+                style={{ alignSelf: 'center', padding: 8 }}
+              >
+                <Text style={{ color: Palette.gray, fontFamily: FONT_FAMILY.InterMedium }}>
+                  Annuler
+                </Text>
+              </Pressable>
+            </View>
+          ) : !hasGeneratedOptions ? (
             <BorderGradientButton
               title={isGenerating ? 'Génération en cours...' : 'Générer la pochette'}
               icon={icons.stars}
               onPress={requestCoverGeneration}
               disabled={isGenerating}
             />
-          )}
-          {hasGeneratedOptions && (
-            <GradientButton title={'Valider la pochette'} onPress={onValidatePicture} />
+          ) : (
+            <>
+              <View style={{ flexDirection: 'column', gap: 12, width: '100%' }}>
+                <GradientButton title={'Valider la pochette'} onPress={onValidatePicture} />
+
+                <BorderGradientButton
+                  title="Pas satisfait ? Modifier ma demande"
+                  onPress={() => setIsEditing(true)}
+                  disabled={isGenerating}
+                  textStyle={{ fontSize: 13 }}
+                />
+              </View>
+            </>
           )}
         </View>
       </KeyboardAvoidingView>