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

feat: Move 'Add Playlist' and 'Add Folder' buttons to the top - Position buttons right after 'All Songs' for better accessibility - Add proper spacing with mb={2} for visual separation - Improve UX by making action buttons more prominent

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-06 10:21:49 +02:00
parent 5fb878a0b0
commit 50f29b900e
1 changed files with 33 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/frontend/src/components/PlaylistManager.tsx
View File

@ -294,6 +294,39 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
>
All Songs
</Button>
{/* Add Playlist and Folder buttons at the top */}
<Flex gap={2} mb={2}>
<Button
onClick={onPlaylistModalOpen}
colorScheme="blue"
size="sm"
flex={1}
leftIcon={<AddIcon />}
borderRadius="md"
_hover={{
transform: "translateY(-1px)",
boxShadow: "sm",
}}
>
New Playlist
</Button>
<Button
onClick={onFolderModalOpen}
colorScheme="teal"
size="sm"
flex={1}
leftIcon={<ViewIcon />}
borderRadius="md"
_hover={{
transform: "translateY(-1px)",
boxShadow: "sm",
}}
>
New Folder
</Button>
</Flex>
{playlists.map((node, index) => (
<PlaylistItem
key={node.id || index}
@ -308,37 +341,6 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
))}
</VStack>
<Flex gap={2}>
<Button
onClick={onPlaylistModalOpen}
colorScheme="blue"
size="sm"
flex={1}
leftIcon={<AddIcon />}
borderRadius="md"
_hover={{
transform: "translateY(-1px)",
boxShadow: "sm",
}}
>
New Playlist
</Button>
<Button
onClick={onFolderModalOpen}
colorScheme="teal"
size="sm"
flex={1}
leftIcon={<ViewIcon />}
borderRadius="md"
_hover={{
transform: "translateY(-1px)",
boxShadow: "sm",
}}
>
New Folder
</Button>
</Flex>
{/* New Playlist Modal */}
<Modal
isOpen={isPlaylistModalOpen}