music options

src/screens/Profile/Profile.js

@@ -17,6 +17,7 @@ import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import MusicCard from "../Library/components/MusicCard";
+import MoreMenu from "../../components/MoreMenu";
 import { useUser } from "../../providers/UserDataProvider";
 import { SheetManager } from "react-native-actions-sheet";
 import { navigate } from "../../navigation/NavigationService";
@@ -201,96 +202,48 @@ const Profile = () => {
                   }
                   onPressMore={(posTop) => {
                     setSelectedProjectId(item.id);
-                    if (showMenu) {
-                      if (posTop === menuTop) {
-                        setShowMenu(false);
-                      } else {
-                        setShowMenu(false);
-                        setTimeout(() => {
-                          setMenuTop(posTop);
-                          setShowMenu(true);
-                        }, 200);
-                      }
-                    } else {
-                      setMenuTop(posTop);
-                      setShowMenu(true);
-                    }
+                    setMenuTop(posTop);
+                    setShowMenu((prev) => !prev || posTop !== menuTop);
                   }}
                 />
               )}
             />
-            {showMenu && (
-              <Animated.View
-                entering={FadeIn.duration(200).easing(Easing.ease)}
-                exiting={FadeOut.duration(200).easing(Easing.ease)}
-                style={{ position: "absolute", right: 0, top: menuTop, zIndex: 2 }}
-              >
-                <BlurView
-                  intensity={20}
-                  style={{
-                    paddingHorizontal: 12,
-                    paddingVertical: 10,
-                    backgroundColor: Palette.glass,
-                    borderRadius: 12,
-                    overflow: "hidden",
-                    gap: 10,
-                  }}
-                  experimentalBlurMethod={
-                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                  }
-                >
-                  <Pressable onPress={() => setShowMenu(false)}>
-                    <Text
-                      style={{
-                        fontSize: 14,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      Annuler
-                    </Text>
-                  </Pressable>
-                  <Pressable
-                    onPress={() => {
-                      setShowMenu(false);
-                      alert(
-                        "Confirmer la suppression",
-                        "Cette action supprimera définitivement ce projet.",
-                        [
-                          { text: "Annuler", style: "cancel", onPress: () => {} },
-                          {
-                            text: "Supprimer",
-                            onPress: async () => {
-                              try {
-                                if (!selectedProjectId) return;
-                                await projectsRef.doc(selectedProjectId).delete();
-                                setTooltip({ type: "success", text: "Projet supprimé" });
-                              } catch (e) {
-                                setTooltip({
-                                  type: "error",
-                                  text: e?.message || "Suppression impossible",
-                                });
-                              }
-                            },
+            <MoreMenu
+              visible={showMenu}
+              top={menuTop}
+              onClose={() => setShowMenu(false)}
+              inPlaylist={false}
+              projectId={selectedProjectId}
+              extraItems={[
+                {
+                  label: "Supprimer",
+                  onPress: () =>
+                    alert(
+                      "Confirmer la suppression",
+                      "Cette action supprimera définitivement ce projet.",
+                      [
+                        { text: "Annuler", style: "cancel", onPress: () => {} },
+                        {
+                          text: "Supprimer",
+                          onPress: async () => {
+                            try {
+                              if (!selectedProjectId) return;
+                              await projectsRef.doc(selectedProjectId).delete();
+                              setTooltip({ type: "success", text: "Projet supprimé" });
+                            } catch (e) {
+                              setTooltip({
+                                type: "error",
+                                text: e?.message || "Suppression impossible",
+                              });
+                            }
                           },
-                        ],
-                        { cancelable: true },
-                      );
-                    }}
-                  >
-                    <Text
-                      style={{
-                        fontSize: 14,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      Supprimer
-                    </Text>
-                  </Pressable>
-                </BlurView>
-              </Animated.View>
-            )}
+                        },
+                      ],
+                      { cancelable: true },
+                    ),
+                },
+              ]}
+            />
           </View>
         )}
       </View>