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 (
<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>