end of home

2025-10-01 10:49:03 +02:00
parent 4097143559
commit 167e62fcfc
18 changed files with 928 additions and 558 deletions
@@ -1,145 +1,188 @@
-import { View, Text, Image, Platform } from "react-native";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Platform, StyleSheet, View } from "react-native";
 import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
-import { responsiveHeight } from "react-native-responsive-dimensions";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
-import { FlatList, Alert } from "react-native";
-import { BlurView } from "expo-blur";
 import { useUser } from "../../providers/UserDataProvider";
-import MusicCard from "../Library/components/MusicCard";
+import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
+import FeatureCarousel from "../../components/FeatureCarousel/FeatureCarousel";
 import GradientButton from "../../components/GradientButton";
-import MoreMenu from "../../components/MoreMenu";
-import { projectsRef } from "../../config/firebase";
-import { useGlobal } from "reactn";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import { isWeb } from "../../hooks/useLayoutType.js";
+import ShareBtn from "../../components/ShareBtn/ShareBtn";
+import {
+  getCreationStageStates,
+  getStageAction,
+} from "../../utils/projectStages";

 const Home = () => {
-  const { userProjects = [], resetSelectedProject, selectProject } = useUser();
+  const {
+    userProjects = [],
+    resetSelectedProject,
+    selectProject,
+    selectedProject,
+    selectedProjectId,
+  } = useUser();
+
  const projects = useMemo(
    () => (Array.isArray(userProjects) ? userProjects : []),
    [userProjects],
  );
-  const [, setTooltip] = useGlobal("_tooltip");
-  const [menuTop, setMenuTop] = useState(0);
-  const [showMenu, setShowMenu] = useState(false);
-  const [menuProjectId, setMenuProjectId] = useState(null);

+  const currentProject = useMemo(() => {
+    if (!projects.length) return null;
+    const activeId = selectedProject?.id || selectedProjectId;
+    if (!activeId) {
+      return projects[0];
+    }
+    return projects.find((project) => project?.id === activeId) || projects[0];
+  }, [projects, selectedProject?.id, selectedProjectId]);
+
+  const formatDate = useCallback((timestamp) => {
+    try {
+      const value = timestamp?.toDate ? timestamp.toDate() : timestamp;
+      const date = value ? new Date(value) : null;
+      if (!date || Number.isNaN(date.getTime())) {
+        return "";
+      }
+      const day = date.getDate().toString().padStart(2, "0");
+      const month = (date.getMonth() + 1).toString().padStart(2, "0");
+      return `${day}/${month}`;
+    } catch (error) {
+      console.warn("Home.web: formatDate error", error);
+      return "";
+    }
+  }, []);
+
+  const handleSelectProject = (project) => {
+    if (!project?.id) return;
+    selectProject(project.id);
+  };
+
+  const handleModifyProject = (project) => {
+    if (!project?.id) return;
+    selectProject(project.id);
+    navigate(Routes.FlowSelection);
+  };
+
+  const handleCreateNew = () => {
+    resetSelectedProject();
+    navigate(Routes.FlowSelection);
+  };
+
+  const stageStates = useMemo(
+    () => getCreationStageStates(currentProject),
+    [currentProject],
+  );
+
+  const firstUnlockedIndex = useMemo(() => {
+    const index = stageStates.findIndex((stage) => !stage.isLocked);
+    return index === -1 ? 0 : index;
+  }, [stageStates]);
+
+  const [activeStageIndex, setActiveStageIndex] = useState(firstUnlockedIndex);
+
+  useEffect(() => {
+    setActiveStageIndex((prev) => {
+      if (prev == null || prev >= stageStates.length) {
+        return firstUnlockedIndex;
+      }
+      const current = stageStates[prev];
+      const fallback = stageStates[firstUnlockedIndex];
+      if (current?.isLocked && fallback && !fallback.isLocked) {
+        return firstUnlockedIndex;
+      }
+      return prev;
+    });
+  }, [stageStates, firstUnlockedIndex]);
+
+  const activeStage =
+    stageStates[activeStageIndex] || stageStates[firstUnlockedIndex];
+  const stageAction = useMemo(() => {
+    if (!activeStage) {
+      return null;
+    }
+    return getStageAction(activeStage.key, currentProject);
+  }, [activeStage, currentProject]);
+
+  const stageRoute = stageAction?.route || null;
+  const stageParams = stageAction?.params;
+  const stageLocked = activeStage?.isLocked ?? true;
+
+  const ensureProjectSelected = useCallback(() => {
+    if (!currentProject?.id) {
+      return;
+    }
+    if (selectedProject?.id !== currentProject.id) {
+      selectProject(currentProject.id);
+    }
+  }, [currentProject?.id, selectProject, selectedProject?.id]);
+
+  const handleStageAction = useCallback(() => {
+    if (stageLocked || !stageRoute) {
+      return;
+    }
+    ensureProjectSelected();
+    navigate(stageRoute, stageParams);
+  }, [ensureProjectSelected, stageLocked, stageParams, stageRoute]);
+
+  const primaryDisabled = stageLocked || !stageRoute;
  return (
-    <Page backgroundImg={background.homeBG} headerType="NONE">
-      <View style={{ flex: 1 }}>
-        <Image
-          source={img.goodVibe}
-          style={{ alignSelf: "center", position: "absolute" }}
-        />
-        {projects.length > 0 && (
-          <View
-            style={{
-              height: responsiveHeight(70),
-              paddingTop: responsiveHeight(6),
-            }}
-          >
-            <BlurView
-              intensity={Platform.OS !== "ios" ? 10 : 20}
-              style={{
-                flex: 1,
-                borderRadius: 20,
-                overflow: "hidden",
-                backgroundColor: Palette.glass,
-                padding: 12,
-                gap: 8,
-              }}
-              // experimentalBlurMethod={
-              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-              // }
-            >
-              <Text
-                style={{
-                  fontSize: 22,
-                  color: Palette.white,
-                  fontFamily: FONT_FAMILY.InterSemiBold,
-                  marginBottom: 8,
-                  textAlign: "center",
-                }}
-              >
-                Musiques en cours
-              </Text>
-              <FlatList
-                data={projects}
-                keyExtractor={(item) => item.id}
-                contentContainerStyle={{ gap: 10, paddingBottom: 10 }}
-                renderItem={({ item }) => (
-                  <MusicCard
-                    title={item?.title || "Sans titre"}
-                    subtitle={"MusicLand"}
-                    imageUri={item?.coverUrl || null}
-                    projectId={item?.id}
-                    likedBy={item?.likedBy || []}
-                    onPress={() => {
-                      selectProject(item.id);
-                      navigate(Routes.FlowSelection);
-                    }}
-                    onPressMore={(posTop) => {
-                      setMenuProjectId(item.id);
-                      setMenuTop(posTop);
-                      setShowMenu((prev) => !prev || posTop !== menuTop);
-                    }}
-                  />
-                )}
-              />
-              <MoreMenu
-                visible={showMenu}
-                top={menuTop}
-                onClose={() => setShowMenu(false)}
-                inPlaylist={false}
-                projectId={menuProjectId}
-                extraItems={[
-                  {
-                    label: "Supprimer",
-                    onPress: () =>
-                      Alert.alert(
-                        "Confirmer la suppression",
-                        "Cette action supprimera définitivement ce projet.",
-                        [
-                          { text: "Annuler", style: "cancel" },
-                          {
-                            text: "Supprimer",
-                            style: "destructive",
-                            onPress: async () => {
-                              try {
-                                if (!menuProjectId) return;
-                                await projectsRef.doc(menuProjectId).delete();
-                                setTooltip({
-                                  type: "success",
-                                  text: "Projet supprimé",
-                                });
-                              } catch (e) {
-                                setTooltip({
-                                  type: "error",
-                                  text: e?.message || "Suppression impossible",
-                                });
-                              }
-                            },
-                          },
-                        ],
-                        { cancelable: true },
-                      ),
-                  },
-                ]}
-              />
-            </BlurView>
-          </View>
-        )}
-        <View style={{ paddingTop: 12, marginBottom: responsiveHeight(10) }}>
+    <Page shareBtn backgroundImg={background.homeBGWeb} headerType="NONE">
+      <View style={styles.root}>
+        <View
+          style={{
+            zIndex: 10,
+            position: "absolute",
+            top: 10,
+            width: 400,
+            alignSelf: "center",
+            flexDirection: isWeb ? "column" : "row",
+            alignItems: "center",
+            paddingHorizontal: isWeb ? 0 : gutters,
+            gap: 10,
+          }}
+        >
+          <ProjectDropDown
+            style={[isWeb ? { width: "100%" } : { flex: 1 }]}
+            projects={projects}
+            selectedProject={currentProject}
+            onSelectProject={handleSelectProject}
+            onModifyProject={handleModifyProject}
+            onCreateProject={handleCreateNew}
+            formatDate={formatDate}
+          />
+          {!isWeb && <ShareBtn />}
+        </View>
+        <View style={styles.carouselSection}>
+          <FeatureCarousel
+            selectedProject={currentProject}
+            activeIndex={activeStageIndex}
+            onActiveIndexChange={setActiveStageIndex}
+          />
+        </View>
+        <View
+          style={{
+            position: "absolute",
+            bottom: isWeb ? 180 : 120,
+            flexDirection: isWeb ? "row" : "column",
+            gap: 5,
+            alignSelf: "center",
+          }}
+        >
          <GradientButton
-            title="Créer une nouvelle musique"
-            containerStyle={{ width: "80%", alignSelf: "center" }}
-            onPress={() => {
-              resetSelectedProject();
-              navigate(Routes.FlowSelection);
-            }}
+            containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
+            title={"Commencer à créer"}
+            onPress={handleStageAction}
+            disabled={primaryDisabled}
+          />
+          <BorderGradientButton
+            containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
+            title={"Continuer la création"}
+            onPress={handleStageAction}
+            disabled={primaryDisabled}
          />
        </View>
      </View>
@@ -148,3 +191,27 @@ const Home = () => {
 };

 export default Home;
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  heroImage: {
+    position: "absolute",
+    top: -60,
+    alignSelf: "center",
+    width: "80%",
+    maxWidth: 920,
+    height: 420,
+    opacity: 0.9,
+  },
+  shareIcon: {
+    width: 18,
+    height: 18,
+    tintColor: Palette.white,
+  },
+  carouselSection: {
+    width: "100%",
+    flex: 1,
+  },
+});
@@ -1,333 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import {
-  FlatList,
-  Image,
-  StyleSheet,
-  Text,
-  View,
-  useWindowDimensions,
-} from "react-native";
-import { BlurView } from "expo-blur";
-import Page from "../../layouts/Page";
-import { background, img } from "../../assets";
-import { Palette } from "../../styles";
-import { FONT_FAMILY } from "../../styles/Fonts";
-import { navigate } from "../../navigation/NavigationService";
-import { Routes } from "../../navigation";
-import { useUser } from "../../providers/UserDataProvider";
-import ProjectDropDown from "../../components/ProjectDropDown/ProjectDropDown";
-
-const ITEM_SPACING = 24;
-
-const Home = () => {
-  const {
-    userProjects = [],
-    resetSelectedProject,
-    selectProject,
-    selectedProject,
-    selectedProjectId,
-  } = useUser();
-
-  const projects = useMemo(
-    () => (Array.isArray(userProjects) ? userProjects : []),
-    [userProjects],
-  );
-
-  const { width: windowWidth } = useWindowDimensions();
-
-  const carouselItems = useMemo(
-    () => [
-      {
-        id: "project-vision",
-        title: "Composez sans limites",
-        description:
-          "Créez instantanément des maquettes professionnelles et explorez de nouveaux genres.",
-        image: img.placeholder,
-      },
-      {
-        id: "project-community",
-        title: "Collaborez en équipe",
-        description:
-          "Partagez vos projets, échangez des idées et co-créez en temps réel.",
-        image: img.placeholder2,
-      },
-      {
-        id: "project-ai",
-        title: "Optimisé par l'IA",
-        description:
-          "Accédez à des suggestions intelligentes pour les paroles, arrangements et mixages.",
-        image: img.placeholder3,
-      },
-      {
-        id: "project-stage",
-        title: "Prêt pour la scène",
-        description:
-          "Finalisez vos titres et exportez-les facilement pour le live ou le streaming.",
-        image: img.placeholder4,
-      },
-    ],
-    [],
-  );
-
-  const carouselItemWidth = useMemo(() => {
-    const baseWidth = Math.min(windowWidth * 0.9, 640);
-    return Math.max(baseWidth, 320);
-  }, [windowWidth]);
-
-  const carouselItemHeight = useMemo(() => {
-    const baseHeight = Math.min(windowWidth * 0.6, 360);
-    return Math.max(baseHeight, 240);
-  }, [windowWidth]);
-
-  const snapInterval = useMemo(
-    () => carouselItemHeight + ITEM_SPACING,
-    [carouselItemHeight],
-  );
-
-  const currentProject = useMemo(() => {
-    if (!projects.length) return null;
-    const activeId = selectedProject?.id || selectedProjectId;
-    if (!activeId) {
-      return projects[0];
-    }
-    return projects.find((project) => project?.id === activeId) || projects[0];
-  }, [projects, selectedProject?.id, selectedProjectId]);
-
-  const formatDate = useCallback((timestamp) => {
-    try {
-      const value = timestamp?.toDate ? timestamp.toDate() : timestamp;
-      const date = value ? new Date(value) : null;
-      if (!date || Number.isNaN(date.getTime())) {
-        return "";
-      }
-      const day = date.getDate().toString().padStart(2, "0");
-      const month = (date.getMonth() + 1).toString().padStart(2, "0");
-      return `${day}/${month}`;
-    } catch (error) {
-      console.warn("Home.web: formatDate error", error);
-      return "";
-    }
-  }, []);
-
-  const handleSelectProject = (project) => {
-    if (!project?.id) return;
-    selectProject(project.id);
-  };
-
-  const handleModifyProject = (project) => {
-    if (!project?.id) return;
-    selectProject(project.id);
-    navigate(Routes.FlowSelection);
-  };
-
-  const handleCreateNew = () => {
-    resetSelectedProject();
-    navigate(Routes.FlowSelection);
-  };
-
-  const renderCarouselItem = useCallback(
-    ({ item, index }) => {
-      const isImageOnRight = index % 2 === 1;
-
-      let imageSize = Math.min(carouselItemHeight - 24, 280);
-      let availableWidth = carouselItemWidth - imageSize - 48;
-
-      if (availableWidth < 140) {
-        const minImageSize = Math.max(carouselItemWidth - 140 - 48, 140);
-        imageSize = Math.min(imageSize, minImageSize);
-        availableWidth = carouselItemWidth - imageSize - 48;
-      }
-
-      const blurWidth = Math.min(Math.max(availableWidth, 120), 260);
-      const blurHeight = Math.max(
-        Math.min(imageSize * 0.75, carouselItemHeight - 48),
-        140,
-      );
-
-      return (
-        <View
-          style={[
-            { width: carouselItemWidth, height: carouselItemHeight },
-            isImageOnRight ? styles.carouselItemRight : styles.carouselItemLeft,
-          ]}
-        >
-          <Image
-            source={item.image}
-            style={[
-              styles.carouselImage,
-              { width: imageSize, height: imageSize },
-              isImageOnRight
-                ? styles.carouselImageRight
-                : styles.carouselImageLeft,
-            ]}
-            resizeMode="cover"
-          />
-          <BlurView
-            intensity={30}
-            tint="dark"
-            style={[
-              styles.carouselBlur,
-              { width: blurWidth, height: blurHeight },
-              isImageOnRight
-                ? styles.carouselBlurRight
-                : styles.carouselBlurLeft,
-            ]}
-          >
-            <View style={styles.carouselTextContainer}>
-              <Text style={styles.carouselTitle}>{item.title}</Text>
-              <Text style={styles.carouselDescription}>{item.description}</Text>
-            </View>
-          </BlurView>
-        </View>
-      );
-    },
-    [carouselItemHeight, carouselItemWidth],
-  );
-
-  const keyExtractor = useCallback((item) => item.id, []);
-
-  return (
-    <Page shareBtn backgroundImg={background.homeBGWeb} headerType="NONE">
-      <View style={styles.root}>
-        <View style={styles.dropdownArea}>
-          <ProjectDropDown
-            style={styles.dropdownContainer}
-            projects={projects}
-            selectedProject={currentProject}
-            onSelectProject={handleSelectProject}
-            onModifyProject={handleModifyProject}
-            onCreateProject={handleCreateNew}
-            formatDate={formatDate}
-          />
-        </View>
-        <View style={styles.carouselSection}>
-          <FlatList
-            data={carouselItems}
-            keyExtractor={keyExtractor}
-            renderItem={renderCarouselItem}
-            showsVerticalScrollIndicator={false}
-            snapToInterval={snapInterval}
-            snapToAlignment="start"
-            decelerationRate="fast"
-            disableIntervalMomentum={true}
-            pagingEnabled
-            style={[styles.carouselList, { height: carouselItemHeight }]}
-            contentContainerStyle={{
-              paddingVertical: ITEM_SPACING / 2,
-              alignItems: "center",
-            }}
-            ItemSeparatorComponent={() => (
-              <View style={{ height: ITEM_SPACING }} />
-            )}
-          />
-        </View>
-      </View>
-    </Page>
-  );
-};
-
-export default Home;
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    paddingHorizontal: 24,
-    position: "relative",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    width: "100%",
-  },
-  heroImage: {
-    position: "absolute",
-    top: -60,
-    alignSelf: "center",
-    width: "80%",
-    maxWidth: 920,
-    height: 420,
-    opacity: 0.9,
-  },
-  dropdownArea: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingTop: 72,
-    zIndex: 2,
-  },
-  dropdownContainer: {
-    width: "100%",
-  },
-  shareIcon: {
-    width: 18,
-    height: 18,
-    tintColor: Palette.white,
-  },
-  carouselSection: {
-    width: "100%",
-    marginTop: 48,
-  },
-  carouselList: {
-    width: "100%",
-  },
-  carouselItem: {
-    borderRadius: 18,
-    backgroundColor: "rgba(0, 0, 0, 0.18)",
-    borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.1)",
-    paddingVertical: 24,
-    paddingHorizontal: 16,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  carouselItemRight: {
-    flexDirection: "row-reverse",
-    alignItems: "center",
-  },
-  carouselItemLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  carouselImage: {
-    borderRadius: 28,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.25,
-    shadowRadius: 20,
-  },
-  carouselImageRight: {
-    marginLeft: 20,
-  },
-  carouselImageLeft: {
-    marginRight: 20,
-  },
-  carouselBlur: {
-    borderRadius: 20,
-    overflow: "hidden",
-    paddingHorizontal: 18,
-    paddingVertical: 16,
-    justifyContent: "center",
-    alignItems: "flex-start",
-    backgroundColor: "rgba(0, 0, 0, 0.25)",
-    gap: 8,
-  },
-  carouselBlurRight: {
-    marginRight: 12,
-  },
-  carouselBlurLeft: {
-    marginLeft: 12,
-  },
-  carouselTextContainer: {
-    width: "100%",
-  },
-  carouselTitle: {
-    fontSize: 20,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterSemiBold,
-    marginBottom: 8,
-  },
-  carouselDescription: {
-    fontSize: 14,
-    lineHeight: 20,
-    color: "rgba(255, 255, 255, 0.7)",
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
-});
@@ -0,0 +1,150 @@
+import { View, Text, Image, Platform } from "react-native";
+import React, { useMemo, useState } from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+import { FlatList, Alert } from "react-native";
+import { BlurView } from "expo-blur";
+import { useUser } from "../../providers/UserDataProvider";
+import MusicCard from "../Library/components/MusicCard";
+import GradientButton from "../../components/GradientButton";
+import MoreMenu from "../../components/MoreMenu";
+import { projectsRef } from "../../config/firebase";
+import { useGlobal } from "reactn";
+
+const HomeSave = () => {
+  const { userProjects = [], resetSelectedProject, selectProject } = useUser();
+  const projects = useMemo(
+    () => (Array.isArray(userProjects) ? userProjects : []),
+    [userProjects],
+  );
+  const [, setTooltip] = useGlobal("_tooltip");
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [menuProjectId, setMenuProjectId] = useState(null);
+
+  return (
+    <Page backgroundImg={background.homeBG} headerType="NONE">
+      <View style={{ flex: 1 }}>
+        <Image
+          source={img.goodVibe}
+          style={{ alignSelf: "center", position: "absolute" }}
+        />
+        {projects.length > 0 && (
+          <View
+            style={{
+              height: responsiveHeight(70),
+              paddingTop: responsiveHeight(6),
+            }}
+          >
+            <BlurView
+              intensity={Platform.OS !== "ios" ? 10 : 20}
+              style={{
+                flex: 1,
+                borderRadius: 20,
+                overflow: "hidden",
+                backgroundColor: Palette.glass,
+                padding: 12,
+                gap: 8,
+              }}
+              // experimentalBlurMethod={
+              //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              // }
+            >
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                  marginBottom: 8,
+                  textAlign: "center",
+                }}
+              >
+                Musiques en cours
+              </Text>
+              <FlatList
+                data={projects}
+                keyExtractor={(item) => item.id}
+                contentContainerStyle={{ gap: 10, paddingBottom: 10 }}
+                renderItem={({ item }) => (
+                  <MusicCard
+                    title={item?.title || "Sans titre"}
+                    subtitle={"MusicLand"}
+                    imageUri={item?.coverUrl || null}
+                    projectId={item?.id}
+                    likedBy={item?.likedBy || []}
+                    onPress={() => {
+                      selectProject(item.id);
+                      navigate(Routes.FlowSelection);
+                    }}
+                    onPressMore={(posTop) => {
+                      setMenuProjectId(item.id);
+                      setMenuTop(posTop);
+                      setShowMenu((prev) => !prev || posTop !== menuTop);
+                    }}
+                  />
+                )}
+              />
+              <MoreMenu
+                visible={showMenu}
+                top={menuTop}
+                onClose={() => setShowMenu(false)}
+                inPlaylist={false}
+                projectId={menuProjectId}
+                extraItems={[
+                  {
+                    label: "Supprimer",
+                    onPress: () =>
+                      Alert.alert(
+                        "Confirmer la suppression",
+                        "Cette action supprimera définitivement ce projet.",
+                        [
+                          { text: "Annuler", style: "cancel" },
+                          {
+                            text: "Supprimer",
+                            style: "destructive",
+                            onPress: async () => {
+                              try {
+                                if (!menuProjectId) return;
+                                await projectsRef.doc(menuProjectId).delete();
+                                setTooltip({
+                                  type: "success",
+                                  text: "Projet supprimé",
+                                });
+                              } catch (e) {
+                                setTooltip({
+                                  type: "error",
+                                  text: e?.message || "Suppression impossible",
+                                });
+                              }
+                            },
+                          },
+                        ],
+                        { cancelable: true },
+                      ),
+                  },
+                ]}
+              />
+            </BlurView>
+          </View>
+        )}
+        <View style={{ paddingTop: 12, marginBottom: responsiveHeight(10) }}>
+          <GradientButton
+            title="Créer une nouvelle musique"
+            containerStyle={{ width: "80%", alignSelf: "center" }}
+            onPress={() => {
+              resetSelectedProject();
+              navigate(Routes.FlowSelection);
+            }}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Home;
@@ -1,18 +1,19 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { BlurView } from "expo-blur";
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import { Image, Platform, Pressable, Text, View } from "react-native";
 import { ai, background } from "../assets";
 import Page from "../layouts/Page";
-import { Routes } from "../navigation";
 import { navigate } from "../navigation/NavigationService";
 import { useUserData } from "../providers/UserDataProvider";
+import { getCreationStageStates, getStageAction } from "../utils/projectStages";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 import palette from "../styles/Palette";

 const CREATE_DATA = [
  {
+    stageKey: "songwriter",
    img: ai.nathalie,
    bg: background.writingBG,
    label: "Nathalie",
@@ -20,6 +21,7 @@ const CREATE_DATA = [
    type: "Songwriter",
  },
  {
+    stageKey: "beatmaker",
    img: ai.theo,
    bg: background.studioBG,
    label: "Theo",
@@ -27,6 +29,7 @@ const CREATE_DATA = [
    type: "Beatmaker",
  },
  {
+    stageKey: "designer",
    img: ai.bena,
    bg: background.productionBG,
    label: "Bena",
@@ -34,6 +37,7 @@ const CREATE_DATA = [
    type: "Designer",
  },
  {
+    stageKey: "director",
    img: ai.john,
    bg: background.playbackBG,
    label: "John",
@@ -44,69 +48,32 @@ const CREATE_DATA = [

 const NewMusicOptions = () => {
  const { selectedProject } = useUserData();
+  const stageStates = useMemo(
+    () => getCreationStageStates(selectedProject),
+    [selectedProject],
+  );

-  // Lock rules per option index:
-  // 0 (Songwriter): allowed if no project OR no songUrl
-  // 1 (Beatmaker): allowed only if lyrics exist and no songUrl
-  // 2 (Designer): allowed only if songUrl exists and no coverUrl
-  // 3 (Director): allowed only if coverUrl exists
-  const isLocked = (index) => {
-    const songUrl = selectedProject?.songUrl || null;
-    const coverUrl = selectedProject?.coverUrl || null;
-    const playbackUrl = selectedProject?.songUrl || null;
-    const lyricsLen = Array.isArray(selectedProject?.lyrics)
-      ? selectedProject.lyrics.length
-      : 0;
+  const stageStateByKey = useMemo(() => {
+    return stageStates.reduce((acc, stage) => {
+      acc[stage.key] = stage;
+      return acc;
+    }, {});
+  }, [stageStates]);

-    switch (index) {
-      case 0: // Songwriter
-        return !!songUrl; // locked if a song already exists
-      case 1: // Beatmaker
-        return !(lyricsLen > 0 && !songUrl);
-      case 2: // Designer
-        return !(!!songUrl && !!playbackUrl);
-      case 3: // Director
-        return !!!coverUrl;
-      default:
-        return true;
-    }
-  };
-
-  const onPressOption = (index, item) => {
-    if (isLocked(index)) return;
-    switch (index) {
-      case 0:
-        if (selectedProject?.lyrics?.length) {
-          navigate(Routes.Lyrics);
-        } else {
-          navigate(Routes.WritingLyrics);
-        }
-        break;
-      case 1:
-        if (selectedProject?.musicStatus === "GENERATING") {
-          navigate(Routes.GeneratingSong);
-        } else if (selectedProject?.musicStatus === "GENERATED") {
-          navigate(Routes.SongReady);
-        } else {
-          navigate(Routes.Compose);
-        }
-        break;
-      case 2:
-        if (selectedProject?.coverUrl) {
-          navigate(Routes.ValidateCover);
-        } else {
-          navigate(Routes.ChooseCoverType);
-        }
-        break;
-      case 3:
-        console.log("test");
-        navigate(Routes.Playback, {
-          project: selectedProject,
-        });
-      default:
-        break;
-    }
-  };
+  const onPressOption = useCallback(
+    (stageKey) => {
+      const stageState = stageStateByKey[stageKey];
+      if (!stageState || stageState.isLocked) {
+        return;
+      }
+      const action = getStageAction(stageKey, selectedProject);
+      if (!action?.route) {
+        return;
+      }
+      navigate(action.route, action.params);
+    },
+    [stageStateByKey, selectedProject],
+  );

  return (
    <Page
@@ -116,10 +83,13 @@ const NewMusicOptions = () => {
      scrollEnabled={true}
    >
      <View style={{ gap: 10 }}>
-        {CREATE_DATA.map((item, index) => {
-          const locked = isLocked(index);
+        {CREATE_DATA.map((item) => {
+          const locked = stageStateByKey[item.stageKey]?.isLocked ?? true;
          return (
-            <Pressable key={index} onPress={() => onPressOption(index, item)}>
+            <Pressable
+              key={item.stageKey}
+              onPress={() => onPressOption(item.stageKey)}
+            >
              <BlurView
                tint="dark"
                intensity={Platform.OS !== "ios" ? 10 : 20}