From 1a3beb7e6f0a4a268012693b931fb3f2738227bc Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Thu, 24 Apr 2025 23:50:54 +0200
Subject: [PATCH] Details are working again

---
 packages/frontend/src/components/SongList.tsx | 61 +++++++++++++++----
 1 file changed, 49 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/SongList.tsx b/packages/frontend/src/components/SongList.tsx
index a4a9828..c151de8 100644
--- a/packages/frontend/src/components/SongList.tsx
+++ b/packages/frontend/src/components/SongList.tsx
@@ -93,11 +93,6 @@ export const SongList: React.FC<SongListProps> = ({
     }
   };
 
-  const handleSongClick = (e: MouseEvent<HTMLButtonElement>, song: Song) => {
-    e.stopPropagation();
-    onSongSelect(song);
-  };
-
   return (
     <Box>
       {/* Search Bar */}
@@ -181,7 +176,16 @@ export const SongList: React.FC<SongListProps> = ({
       {/* Song List */}
       <Flex direction="column" gap={2}>
         {filteredSongs.map((song) => (
-          <Flex key={uuidv4()} alignItems="center" p={2} borderBottom="1px" borderColor="gray.200">
+          <Flex 
+            key={song.id}
+            alignItems="center" 
+            p={2} 
+            borderBottom="1px" 
+            borderColor="gray.700"
+            bg={selectedSongId === song.id ? "gray.700" : "transparent"}
+            _hover={{ bg: "gray.800", cursor: "pointer" }}
+            onClick={() => onSongSelect(song)}
+          >
             <Checkbox
               isChecked={selectedSongs.has(song.id)}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -189,17 +193,50 @@ export const SongList: React.FC<SongListProps> = ({
                 toggleSelection(song.id);
               }}
               mr={4}
+              onClick={(e) => e.stopPropagation()}
             />
             <Box flex="1">
-              <Text fontWeight="bold">{song.title}</Text>
-              <Text fontSize="sm" color="gray.600">{song.artist}</Text>
+              <Text fontWeight="bold" color={selectedSongId === song.id ? "white" : "gray.100"}>
+                {song.title}
+              </Text>
+              <Text fontSize="sm" color={selectedSongId === song.id ? "gray.300" : "gray.500"}>
+                {song.artist}
+              </Text>
             </Box>
             <Menu>
-              <MenuButton as={IconButton} aria-label="Options" icon={<span>⋮</span>} variant="ghost" />
+              <MenuButton 
+                as={IconButton} 
+                aria-label="Options" 
+                icon={<ChevronDownIcon />} 
+                variant="ghost"
+                onClick={(e) => e.stopPropagation()}
+              />
               <MenuList>
-                <MenuItem onClick={(e: MouseEvent<HTMLButtonElement>) => handleSongClick(e, song)}>Select</MenuItem>
-                <MenuItem onClick={(e: MouseEvent<HTMLButtonElement>) => handleSongClick(e, song)}>Add to Playlist</MenuItem>
-                <MenuItem onClick={(e: MouseEvent<HTMLButtonElement>) => handleSongClick(e, song)}>Remove from Playlist</MenuItem>
+                {allPlaylists.map((playlist) => (
+                  <MenuItem
+                    key={playlist.id}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onAddToPlaylist([song.id], playlist.name);
+                    }}
+                  >
+                    Add to {playlist.name}
+                  </MenuItem>
+                ))}
+                {currentPlaylist !== "All Songs" && onRemoveFromPlaylist && (
+                  <>
+                    <MenuDivider />
+                    <MenuItem
+                      color="red.300"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onRemoveFromPlaylist([song.id]);
+                      }}
+                    >
+                      Remove from {currentPlaylist}
+                    </MenuItem>
+                  </>
+                )}
               </MenuList>
             </Menu>
           </Flex>