music options

src/screens/Library/Research.js

@@ -17,12 +17,16 @@ import BorderGradient from "../../components/BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
 import ResearchHeader from "./components/ResearchHeader";
 import MusicCard from "./components/MusicCard";
+import MoreMenu from "../../components/MoreMenu";
 import { size } from "../../styles/Style";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 
 const Research = () => {
   const [selected, setSelected] = useState(null);
+  const [menuTop, setMenuTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+  const [selectedProjectId, setSelectedProjectId] = useState(null);
 
   const onPressMenu = (item) => {
     if (selected === item) {
@@ -61,6 +65,11 @@ const Research = () => {
                       <MusicCard
                         key={index}
                         onPress={() => navigate(Routes.MusicDetails)}
+                        onPressMore={(posTop) => {
+                          setSelectedProjectId(null);
+                          setMenuTop(posTop);
+                          setShowMenu((prev) => !prev || posTop !== menuTop);
+                        }}
                       />
                     ))}
                   </View>
@@ -135,6 +144,13 @@ const Research = () => {
                 </CreateLyricsHeader>
               </View>
             )}
+            <MoreMenu
+              visible={showMenu}
+              top={menuTop}
+              onClose={() => setShowMenu(false)}
+              inPlaylist={false}
+              projectId={selectedProjectId}
+            />
           </ScrollView>
         </View>
       </View>