fix tickets add reort mail and design fixes

src/screens/Playbacks/Playbacks.js

@@ -28,6 +28,8 @@ import {
   LIKE_TARGET,
   toggleProjectLike,
 } from "../../utils/likes";
+import { SheetManager } from "react-native-actions-sheet";
+import { Feather } from "@expo/vector-icons";
 
 const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
   const { currentUID, followUser, unfollowUser } = useUser() || {};
@@ -142,6 +144,18 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
       } catch (e) {}
     };
   }, [videoPlayer]);
+  const handleReport = useCallback(() => {
+    if (!item?.id) return;
+    SheetManager.show("Report", {
+      payload: {
+        targetType: "playback",
+        projectId: item?.id || null,
+        playbackId: item?.id || null,
+        title: item?.title || "",
+        ownerId: item?.userId || null,
+      },
+    });
+  }, [item?.id, item?.title, item?.userId]);
 
   // Build alignedWords from item musicTimestamps
   const alignedWords = useMemo(() => {
@@ -365,6 +379,20 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
           >
             <Image source={icons.share} style={size({ size: 26 })} />
           </Pressable>
+          <Pressable onPress={handleReport} style={{ alignItems: "center" }}>
+            <Feather name="flag" size={26} color={Palette.white} />
+            <Text
+              style={{
+                color: Palette.white,
+                fontSize: 11,
+                marginTop: 4,
+                fontFamily: FONT_FAMILY.InterMedium,
+                textAlign: "center",
+              }}
+            >
+              Signaler
+            </Text>
+          </Pressable>
         </View>
         <View style={{ paddingHorizontal: 28 }}>
           <BlurView