From 50f29b900e1f42a123969e3c2aef382658d42333 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 10:21:49 +0200
Subject: [PATCH] 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

---
 .../src/components/PlaylistManager.tsx        | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 599ab82..0bb241f 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -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}