continue generating flow, add backend connection on main tabs

src/screens/CreateSongs.js

@@ -1,5 +1,5 @@
 import { View, Text, Image, Pressable, Platform } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import Page from "../layouts/Page";
 import { ai, background, icons } from "../assets";
 import { Palette, Style } from "../styles";
@@ -9,10 +9,29 @@ import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../styles/Fonts";
 import { size } from "../styles/Style";
 import GradientButton from "../components/GradientButton";
-import { goBack } from "../navigation/NavigationService";
+import { goBack, navigate } from "../navigation/NavigationService";
+import { Routes } from "../navigation";
+import { useUser } from "../providers/UserDataProvider";
 
 const CreateSongs = () => {
   const [selectedIndex, setSelectedIndex] = useState(null);
+  const { userProjects = [] } = useUser();
+  const projects = useMemo(
+    () => (Array.isArray(userProjects) ? userProjects.slice(0, 3) : []),
+    [userProjects],
+  );
+  const fmtDate = (ts) => {
+    try {
+      const d = ts?.toDate ? ts.toDate() : ts ? new Date(ts) : null;
+      if (!d || Number.isNaN(d.getTime())) return "";
+      const dd = `${d.getDate().toString().padStart(2, "0")}/${(d.getMonth() + 1)
+        .toString()
+        .padStart(2, "0")}`;
+      return dd;
+    } catch (_) {
+      return "";
+    }
+  };
 
   return (
     <Page backgroundImg={background.homeBG} headerType="NONE">
@@ -102,7 +121,7 @@ const CreateSongs = () => {
                 </Text>
               </View>
               <View style={{ gap: 10, zIndex: 1 }}>
-                {Array.from({ length: 3 }).map((item, index) => (
+                {projects.map((item, index) => (
                   <Pressable
                     key={index}
                     onPress={() => {
@@ -140,7 +159,7 @@ const CreateSongs = () => {
                             fontFamily: FONT_FAMILY.InterRegular,
                           }}
                         >
-                          Chanson sans titre
+                          {item?.title || "Sans titre"}
                         </Text>
                         <Text
                           style={{
@@ -152,7 +171,7 @@ const CreateSongs = () => {
                             fontFamily: FONT_FAMILY.InterRegular,
                           }}
                         >
-                          Modifié le 23/04
+                          {`Modifié le ${fmtDate(item?.updatedAt || item?.createdAt)}`}
                         </Text>
                       </View>
                       <Pressable>
@@ -175,12 +194,13 @@ const CreateSongs = () => {
                 ))}
               </View>
               <GradientButton
-                title="Créer un texte"
+                title={selectedIndex !== null ? "Poursuivre la création" : "Créer un texte"}
                 containerStyle={{
                   width: "80%",
                   alignSelf: "center",
                   marginTop: 10,
                 }}
+                onPress={() => navigate(Routes.Writing)}
               />
             </BlurView>
           </BorderGradient>