Change main page and modify flows

src/screens/Library/PlaylistDetails.js

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
-import { View } from "react-native";
+import { View, Pressable, Image, Alert } from "react-native";
+import { useGlobal } from "reactn";
 import Page from "../../layouts/Page";
-import { background } from "../../assets";
+import { background, icons } from "../../assets";
 import { gutters } from "../../styles";
 import { useRoute } from "@react-navigation/native";
 import { useDataFromRef } from "react-native-minuit/src/hooks";
@@ -9,10 +10,11 @@ import useDataFromArrayId from "react-native-minuit/src/hooks/useDataFromArrayId
 import { playlistsRef, projectsRef } from "../../config/firebase";
 import MusicCard from "./components/MusicCard";
 import MoreMenu from "../../components/MoreMenu";
-import { navigate } from "../../navigation/NavigationService";
+import { navigate, goBack } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 
 const PlaylistDetails = () => {
+  const [, setTooltip] = useGlobal("_tooltip");
   const route = useRoute();
   const playlistId = route?.params?.playlistId;
 
@@ -37,11 +39,43 @@ const PlaylistDetails = () => {
   const [showMenu, setShowMenu] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState(null);
 
+  const confirmDelete = () => {
+    Alert.alert(
+      "Supprimer la playlist",
+      "Es-tu sûr de vouloir supprimer cette playlist ?",
+      [
+        { text: "Annuler", style: "cancel" },
+        {
+          text: "Supprimer",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              if (playlistId) {
+                await playlistsRef.doc(playlistId).delete();
+                setTooltip({ type: "success", text: "Playlist supprimée" });
+              }
+            } catch (e) {
+              console.log("Delete playlist error", e?.message);
+              setTooltip({ type: "error", text: e?.message || "Suppression impossible" });
+            } finally {
+              goBack();
+            }
+          },
+        },
+      ],
+    );
+  };
+
   return (
     <Page
       headerType="NAVIGATION"
       backgroundImg={background.libraryBG}
       title={playlist?.name || "Playlist"}
+      rightComponent={() => (
+        <Pressable onPress={confirmDelete}>
+          <Image source={icons.trash} style={{ width: 24, height: 24 }} />
+        </Pressable>
+      )}
       contentContainerStyle={{ paddingBottom: gutters * 2 }}
     >
       <View style={{ flex: 1, gap: 10 }}>