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

src/screens/Playbacks/components/PlaybackItem.web.js

@@ -30,6 +30,8 @@ import {
   LIKE_TARGET,
   toggleProjectLike,
 } from "../../../utils/likes";
+import { SheetManager } from "react-native-actions-sheet";
+import { Feather } from "@expo/vector-icons";
 
 // Debug logging toggle for web playback
 const DEBUG_PLAYBACK_WEB = true;
@@ -252,6 +254,19 @@ const PlaybackItem = ({
   const descriptionText =
     item?.description || item?.title || "Description chanson";
 
+  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]);
+
   const handleLayout = useCallback((event) => {
     const { width = 0, height = 0 } = event?.nativeEvent?.layout || {};
     setLayoutSize((prev) => ({
@@ -486,6 +501,13 @@ const PlaybackItem = ({
                   resizeMode="contain"
                 />
               </Pressable>
+              <Pressable
+                onPress={handleReport}
+                style={[styles.actionButton, styles.actionSpacing]}
+              >
+                <Feather name="flag" size={20} color={Palette.white} />
+                <Text style={styles.actionLabel}>Signaler</Text>
+              </Pressable>
             </View>
 
             <View style={styles.lyricsContainer}>