fix: blur and music duration

src/screens/Studio/Studio.js

@@ -1,5 +1,5 @@
 import { View, Text, ScrollView, Pressable } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
@@ -11,10 +11,15 @@ import { useUser } from "../../providers/UserDataProvider";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 
 const Studio = () => {
-  const [selected, setSelected] = useState(null);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
 
   const { userProjects: projects, selectProject } = useUser();
 
+  const selectedProject = useMemo(() => {
+    if (!Array.isArray(projects) || !projects.length) return null;
+    return projects.find((p) => p?.id === selectedProjectId) ?? null;
+  }, [projects, selectedProjectId]);
+
   return (
     <Page
       headerType="NONE"
@@ -41,7 +46,7 @@ const Studio = () => {
               {projects.map((p) => {
                 const couplet = p?.lyrics?.couplet || "";
                 const preview = couplet.split("\n").slice(0, 2).join(" ");
-                const isSelected = selected === p;
+                const isSelected = selectedProjectId === p?.id;
                 const createdAt = p?.createdAt?.toDate
                   ? p.createdAt.toDate()
                   : p?.createdAt
@@ -54,13 +59,20 @@ const Studio = () => {
                 return (
                   <Pressable
                     key={p.id}
-                    onPress={() => setSelected(p)}
+                    onPress={() => setSelectedProjectId(p?.id ?? null)}
                     style={{
-                      backgroundColor: "#0F0C1933",
+                      backgroundColor: isSelected
+                        ? "rgba(15, 12, 25, 0.75)"
+                        : "rgba(15, 12, 25, 0.2)",
                       borderRadius: 12,
                       padding: 12,
                       borderWidth: isSelected ? 2 : 0,
                       borderColor: isSelected ? "#F94697" : "transparent",
+                      shadowColor: "rgba(0, 0, 0, 0.55)",
+                      shadowOpacity: isSelected ? 0.6 : 0.35,
+                      shadowRadius: isSelected ? 8 : 4,
+                      shadowOffset: { width: 0, height: 4 },
+                      elevation: isSelected ? 6 : 1,
                     }}
                   >
                     <Text
@@ -100,20 +112,21 @@ const Studio = () => {
       <View style={{ justifyContent: "flex-end" }}>
         <GradientButton
           title="Commencer"
-          disabled={!selected}
+          disabled={!selectedProject}
           onPress={() => {
-            if (selected.musicStatus === "GENERATING") {
+            if (selectedProject?.musicStatus === "GENERATING") {
               alert(
                 "Attention",
                 "La chanson est en cours de génération. Veuillez patienter.",
               );
             } else {
-              selectProject(selected.id);
+              if (!selectedProject?.id) return;
+              selectProject(selectedProject.id);
               navigate(Routes.Compose);
             }
           }}
         />
-        {selected?.musicUrls?.length > 0 && (
+        {selectedProject?.musicUrls?.length > 0 && (
           <>
             <GradientButton
               title="Ecouter les audios"
@@ -121,18 +134,20 @@ const Studio = () => {
                 marginTop: responsiveHeight(2),
               }}
               onPress={() => {
-                selectProject(selected.id);
+                if (!selectedProject?.id) return;
+                selectProject(selectedProject.id);
                 navigate(Routes.SongReady);
               }}
             />
-            {!selected?.coverUrl && (
+            {!selectedProject?.coverUrl && (
               <GradientButton
                 title="Générer une pochette"
                 containerStyle={{
                   marginTop: responsiveHeight(2),
                 }}
                 onPress={() => {
-                  selectProject(selected.id);
+                  if (!selectedProject?.id) return;
+                  selectProject(selectedProject.id);
                   navigate(Routes.PouchReady);
                 }}
               />