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

packages/frontend/src/components/PlaylistManager.tsx

@@ -294,21 +294,9 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
         >
           All Songs
         </Button>
-        {playlists.map((node, index) => (
-          <PlaylistItem
-            key={node.id || index}
-            node={node}
-            level={0}
-            selectedItem={selectedItem}
-            onPlaylistSelect={onPlaylistSelect}
-            onPlaylistDelete={onPlaylistDelete}
-            onPlaylistMove={onPlaylistMove}
-            allFolders={allFolders}
-          />
-        ))}
-      </VStack>
         
-      <Flex gap={2}>
+        {/* Add Playlist and Folder buttons at the top */}
+        <Flex gap={2} mb={2}>
           <Button
             onClick={onPlaylistModalOpen}
             colorScheme="blue"
@@ -339,6 +327,20 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
           </Button>
         </Flex>
         
+        {playlists.map((node, index) => (
+          <PlaylistItem
+            key={node.id || index}
+            node={node}
+            level={0}
+            selectedItem={selectedItem}
+            onPlaylistSelect={onPlaylistSelect}
+            onPlaylistDelete={onPlaylistDelete}
+            onPlaylistMove={onPlaylistMove}
+            allFolders={allFolders}
+          />
+        ))}
+      </VStack>
+
       {/* New Playlist Modal */}
       <Modal
         isOpen={isPlaylistModalOpen}