From cf46c4599a2edf51144ef3e11eacf2a2a38f9d8c Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Tue, 30 Sep 2025 16:38:48 +0200
Subject: [PATCH] playlists web

---
 src/screens/Library/AllMyPlaylist.web.js     | 137 ++++++++++++++-----
 src/screens/Library/components/MyPlaylist.js |  28 ++--
 2 files changed, 117 insertions(+), 48 deletions(-)

diff --git a/src/screens/Library/AllMyPlaylist.web.js b/src/screens/Library/AllMyPlaylist.web.js
index 0b79139..2c9bbe5 100644
--- a/src/screens/Library/AllMyPlaylist.web.js
+++ b/src/screens/Library/AllMyPlaylist.web.js
@@ -1,6 +1,6 @@
 import { BlurView } from "expo-blur";
 import React, { useState } from "react";
-import { Image, Platform, Pressable, Text, View } from "react-native";
+import { Image, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { background, icons } from "../../assets";
 import MoreMenu from "../../components/MoreMenu";
@@ -16,9 +16,12 @@ import { FONT_FAMILY } from "../../styles/Fonts";
 import { size } from "../../styles/Style";
 import MusicCard from "./components/MusicCard";
 
-const AllMyPlaylist = () => {
+const AllMyPlaylist = ({ route }) => {
+  const { playListId } = route?.params || {};
   const { userPlaylists = [] } = useUser();
-  const [selectedPlaylistId, setSelectedPlaylistId] = useState(null);
+  const [selectedPlaylistId, setSelectedPlaylistId] = useState(
+    playListId || null
+  );
   const { data: playlist } = useDataFromRef({
     ref: selectedPlaylistId ? playlistsRef.doc(selectedPlaylistId) : null,
     simpleRef: true,
@@ -67,46 +70,106 @@ const AllMyPlaylist = () => {
             flex: 1,
             padding: 10,
             borderRadius: 12,
+            backgroundColor: Palette.ultraLightWhite,
+            ...Style.defaultBorder,
           }}
         >
-          <View style={{ gap: 8 }}>
-            {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
-              <Pressable
-                key={item?.id}
-                onPress={() => setSelectedPlaylistId(item?.id)}
+          <View style={{ flex: 1, gap: 12 }}>
+            <View style={{ gap: 8 }}>
+              {(Array.isArray(userPlaylists) ? userPlaylists : []).map(
+                (item) => {
+                  const isSelected = selectedPlaylistId === item?.id;
+
+                  return (
+                    <Pressable
+                      key={item?.id}
+                      onPress={() => setSelectedPlaylistId(item?.id)}
+                    >
+                      <View
+                        style={{
+                          borderRadius: 14,
+                          overflow: "hidden",
+                          borderWidth: 1,
+                          borderColor: Palette.transparentWhite,
+                          transform: [{ scaleX: isSelected ? 1.04 : 1 }],
+                        }}
+                      >
+                        <BlurView
+                          intensity={30}
+                          style={{
+                            ...Style.containerSpaceBetween,
+                            height: 59,
+                            paddingHorizontal: 16,
+                          }}
+                        >
+                          <Text
+                            style={{
+                              fontSize: isSelected ? 18 : 16,
+                              color: Palette.white,
+                              fontFamily: isSelected
+                                ? FONT_FAMILY.InterSemiBold
+                                : FONT_FAMILY.InterRegular,
+                            }}
+                          >
+                            {item?.name || "Sans nom"}
+                          </Text>
+                          <Pressable>
+                            <Image
+                              source={icons.chevronDown}
+                              style={{
+                                ...size({ size: 15 }),
+                                transform: [{ rotate: "-90deg" }],
+                              }}
+                              resizeMode="contain"
+                            />
+                          </Pressable>
+                        </BlurView>
+                      </View>
+                    </Pressable>
+                  );
+                }
+              )}
+            </View>
+            <Pressable
+              onPress={() =>
+                SheetManager.show("Playlist", {
+                  payload: { startAtCreate: true },
+                })
+              }
+            >
+              <View
+                style={{
+                  borderRadius: 12,
+                  overflow: "hidden",
+                  borderWidth: 1,
+                  borderColor: Palette.transparentWhite,
+                }}
               >
-                <View style={{ borderRadius: 12, overflow: "hidden" }}>
-                  <BlurView
-                    intensity={Platform.OS !== "ios" ? 10 : 20}
+                <BlurView
+                  intensity={30}
+                  style={{
+                    ...Style.containerSpaceBetween,
+                    paddingHorizontal: 16,
+                    height: 59,
+                  }}
+                >
+                  <Text
                     style={{
-                      ...Style.containerSpaceBetween,
-                      height: 59,
-                      paddingHorizontal: 10,
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterSemiBold,
                     }}
                   >
-                    <Text
-                      style={{
-                        fontSize: 16,
-                        color: Palette.white,
-                        fontFamily: FONT_FAMILY.InterRegular,
-                      }}
-                    >
-                      {item?.name || "Sans nom"}
-                    </Text>
-                    <Pressable>
-                      <Image
-                        source={icons.chevronDown}
-                        style={{
-                          ...size({ size: 15 }),
-                          transform: [{ rotate: "-90deg" }],
-                        }}
-                        resizeMode="contain"
-                      />
-                    </Pressable>
-                  </BlurView>
-                </View>
-              </Pressable>
-            ))}
+                    Ajouter une playlist
+                  </Text>
+                  <Image
+                    source={icons.add}
+                    style={size({ size: 20 })}
+                    resizeMode="contain"
+                  />
+                </BlurView>
+              </View>
+            </Pressable>
           </View>
         </View>
         <View style={{ flex: 2, gap: 10 }}>
diff --git a/src/screens/Library/components/MyPlaylist.js b/src/screens/Library/components/MyPlaylist.js
index 48769a8..b8f25c3 100644
--- a/src/screens/Library/components/MyPlaylist.js
+++ b/src/screens/Library/components/MyPlaylist.js
@@ -1,20 +1,21 @@
-import { View, Text, Pressable, Image, Platform } from "react-native";
-import React from "react";
-import CardContainer from "./CardContainer";
 import { BlurView } from "expo-blur";
+import React from "react";
+import { Image, Platform, Pressable, Text, View } from "react-native";
 import { icons } from "../../../assets";
-import Style, { size } from "../../../styles/Style";
+import useLayoutType from "../../../hooks/useLayoutType";
+import { Routes } from "../../../navigation";
+import { navigate } from "../../../navigation/NavigationService";
+import { useUser } from "../../../providers/UserDataProvider";
 import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
-import { navigate } from "../../../navigation/NavigationService";
-import { Routes } from "../../../navigation";
-import { useUser } from "../../../providers/UserDataProvider";
-
+import Style, { size } from "../../../styles/Style";
+import CardContainer from "./CardContainer";
 const MyPlaylist = () => {
   const { userPlaylists = [] } = useUser();
   const playlists = Array.isArray(userPlaylists)
     ? userPlaylists.slice(0, 2)
     : [];
+  const { isWeb } = useLayoutType();
   return (
     <CardContainer
       label="Mes Playlists"
@@ -25,9 +26,14 @@ const MyPlaylist = () => {
           <Pressable
             key={item.id}
             style={{ borderRadius: 12, overflow: "hidden" }}
-            onPress={() =>
-              navigate(Routes.PlaylistDetails, { playlistId: item.id })
-            }
+            onPress={() => {
+              console.log("isWeb", isWeb);
+              if (isWeb) {
+                navigate(Routes.AllMyPlaylist, { playListId: item.id });
+              } else {
+                navigate(Routes.PlaylistDetails, { playlistId: item.id });
+              }
+            }}
           >
             <BlurView
               intensity={Platform.OS !== "ios" ? 10 : 20}