Delete playlist added

packages/frontend/src/App.tsx

@@ -140,6 +140,15 @@ export default function RekordboxReader() {
     document.body.removeChild(a);
   };
 
+  const handlePlaylistDelete = async (name: string) => {
+    const updatedPlaylists = playlists.filter(p => p.name !== name);
+    const savedPlaylists = await api.savePlaylists(updatedPlaylists);
+    setPlaylists(savedPlaylists);
+    if (currentPlaylist === name) {
+      navigate("/"); // Navigate back to All Songs if the current playlist is deleted
+    }
+  };
+
   const displayedSongs = currentPlaylist === "All Songs"
     ? songs
     : songs.filter((song) =>
@@ -180,6 +189,7 @@ export default function RekordboxReader() {
             selectedItem={currentPlaylist}
             onPlaylistCreate={handleCreatePlaylist}
             onPlaylistSelect={handlePlaylistSelect}
+            onPlaylistDelete={handlePlaylistDelete}
           />
         </Box>
         <Box flex={1}>

packages/frontend/src/components/PlaylistManager.tsx

@@ -13,7 +13,13 @@ import {
   Text,
   useDisclosure,
   VStack,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
 } from "@chakra-ui/react";
+import { ChevronDownIcon, DeleteIcon } from "@chakra-ui/icons";
 import React, { useState } from "react";
 import { Playlist } from "../types/Playlist";
 
@@ -21,7 +27,8 @@ interface PlaylistManagerProps {
   playlists: Playlist[];
   selectedItem: string | null;
   onPlaylistCreate: (name: string) => void;
-  onPlaylistSelect: (id: string | null) => void;
+  onPlaylistSelect: (name: string | null) => void;
+  onPlaylistDelete: (name: string) => void;
 }
 
 const getButtonStyles = (isSelected: boolean) => ({
@@ -48,6 +55,7 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
   selectedItem,
   onPlaylistCreate,
   onPlaylistSelect,
+  onPlaylistDelete,
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [newPlaylistName, setNewPlaylistName] = useState("");
@@ -70,13 +78,37 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
           All Songs
         </Button>
         {playlists.map((playlist) => (
-          <Button
+          <Flex key={playlist._id} align="center" gap={1}>
-            key={playlist._id}
+            <Button
-            {...getButtonStyles(selectedItem === playlist.name)}
+              flex={1}
-            onClick={() => onPlaylistSelect(playlist.name)}
+              {...getButtonStyles(selectedItem === playlist.name)}
-          >
+              onClick={() => onPlaylistSelect(playlist.name)}
-            {playlist.name}
+            >
-          </Button>
+              {playlist.name}
+            </Button>
+            <Menu>
+              <MenuButton
+                as={IconButton}
+                aria-label="Playlist options"
+                icon={<ChevronDownIcon />}
+                variant="ghost"
+                size="sm"
+                color="gray.400"
+                _hover={{ color: "white", bg: "whiteAlpha.200" }}
+              />
+              <MenuList bg="gray.800" borderColor="gray.700">
+                <MenuItem
+                  bg="gray.800"
+                  color="red.300"
+                  _hover={{ bg: "gray.700" }}
+                  icon={<DeleteIcon />}
+                  onClick={() => onPlaylistDelete(playlist.name)}
+                >
+                  Delete Playlist
+                </MenuItem>
+              </MenuList>
+            </Menu>
+          </Flex>
         ))}
       </VStack>