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,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}