feat: change mail and change password

src/components/ProjectDropDown/ProjectDropDown.js

@@ -82,6 +82,7 @@ const ProjectDropDown = forwardRef(
       selectedProject,
       onSelectProject,
       onModifyProject,
+      onPlayProject,
       onCreateProject,
       formatDate = defaultFormatDate,
       allowEmptySelection = false,
@@ -269,6 +270,7 @@ const ProjectDropDown = forwardRef(
                 isSelected={currentProject?.id === project?.id}
                 onSelect={handleSelect}
                 onModify={handleModify}
+                onPlay={onPlayProject}
               />
             )}
             nestedScrollEnabled
@@ -348,7 +350,15 @@ const ProjectDropDown = forwardRef(
 
 export default ProjectDropDown
 
-const ProjectRow = ({ project, formatDate, onSelect, onModify, isTitle = false, isOpen }) => {
+const ProjectRow = ({
+  project,
+  formatDate,
+  onSelect,
+  onModify,
+  onPlay,
+  isTitle = false,
+  isOpen,
+}) => {
   const rowRef = useRef(null)
   const [layout, setLayout] = useState(null)
   const [menuPos, setMenuPos] = useState({
@@ -429,15 +439,28 @@ const ProjectRow = ({ project, formatDate, onSelect, onModify, isTitle = false,
             resizeMode="contain"
           />
         ) : (
-          <Pressable
-            hitSlop={8}
-            onPress={(event) => {
-              event.stopPropagation?.()
-              onPressMenu()
-            }}
-          >
-            <Image source={icons.threeDots} style={styles.moreIcon} resizeMode="contain" />
-          </Pressable>
+          <View style={styles.rowActions}>
+            {!!project?.songUrl && (
+              <Pressable
+                hitSlop={8}
+                onPress={(event) => {
+                  event.stopPropagation?.()
+                  onPlay?.(project)
+                }}
+              >
+                <Image source={icons.play} style={styles.playIcon} resizeMode="contain" />
+              </Pressable>
+            )}
+            <Pressable
+              hitSlop={8}
+              onPress={(event) => {
+                event.stopPropagation?.()
+                onPressMenu()
+              }}
+            >
+              <Image source={icons.threeDots} style={styles.moreIcon} resizeMode="contain" />
+            </Pressable>
+          </View>
         )}
       </ThemedBlurView>
     </Pressable>
@@ -558,6 +581,16 @@ const styles = StyleSheet.create({
     color: 'rgba(255, 255, 255, 0.7)',
     fontFamily: FONT_FAMILY.InterRegular,
   },
+  rowActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  playIcon: {
+    width: 18,
+    height: 18,
+    tintColor: Palette.white,
+  },
   moreIcon: {
     width: 18,
     height: 18,