master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Details are working again

Browse Source
This commit is contained in:
Geert Rademakes 2025-04-24 23:50:54 +02:00
parent 9e32aa0a99
commit 1a3beb7e6f
1 changed files with 49 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/frontend/src/components/SongList.tsx
View File

@ -93,11 +93,6 @@ export const SongList: React.FC<SongListProps> = ({
} }
}; };
const handleSongClick = (e: MouseEvent<HTMLButtonElement>, song: Song) => {
e.stopPropagation();
onSongSelect(song);
};
return ( return (
<Box> <Box>
{/* Search Bar */} {/* Search Bar */}
@ -181,7 +176,16 @@ export const SongList: React.FC<SongListProps> = ({
{/* Song List */} {/* Song List */}
<Flex direction="column" gap={2}> <Flex direction="column" gap={2}>
{filteredSongs.map((song) => ( {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 <Checkbox
isChecked={selectedSongs.has(song.id)} isChecked={selectedSongs.has(song.id)}
onChange={(e: ChangeEvent<HTMLInputElement>) => { onChange={(e: ChangeEvent<HTMLInputElement>) => {
@ -189,17 +193,50 @@ export const SongList: React.FC<SongListProps> = ({
toggleSelection(song.id); toggleSelection(song.id);
}} }}
mr={4} mr={4}
onClick={(e) => e.stopPropagation()}
/> />
<Box flex="1"> <Box flex="1">
<Text fontWeight="bold">{song.title}</Text> <Text fontWeight="bold" color={selectedSongId === song.id ? "white" : "gray.100"}>
<Text fontSize="sm" color="gray.600">{song.artist}</Text> {song.title}
</Text>
<Text fontSize="sm" color={selectedSongId === song.id ? "gray.300" : "gray.500"}>
{song.artist}
</Text>
</Box> </Box>
<Menu> <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> <MenuList>
<MenuItem onClick={(e: MouseEvent<HTMLButtonElement>) => handleSongClick(e, song)}>Select</MenuItem> {allPlaylists.map((playlist) => (
<MenuItem onClick={(e: MouseEvent<HTMLButtonElement>) => handleSongClick(e, song)}>Add to Playlist</MenuItem> <MenuItem
<MenuItem onClick={(e: MouseEvent<HTMLButtonElement>) => handleSongClick(e, song)}>Remove from 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> </MenuList>
</Menu> </Menu>
</Flex> </Flex>