From 924f36f4f79dcdbc89205fb439c2636cbd67ff99 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Fri, 8 Aug 2025 16:32:01 +0200
Subject: [PATCH] feat(ui): adjust select-all behavior to clear then select;
 replace playlist menu chevron with more-horizontal icon

---
 .../src/components/PaginatedSongList.tsx        | 17 ++++++++++++++---
 .../frontend/src/components/PlaylistManager.tsx |  8 +++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 9658123..f947fae 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -219,9 +219,20 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   }, []);
 
   const toggleSelectAll = useCallback(() => {
-    setSelectedSongs(prev => 
-      prev.size === songs.length ? new Set() : new Set(songs.map(s => s.id))
-    );
+    setSelectedSongs(prev => {
+      const noneSelected = prev.size === 0;
+      const allSelected = prev.size === songs.length && songs.length > 0;
+      if (noneSelected) {
+        // Select all from empty state
+        return new Set(songs.map(s => s.id));
+      }
+      if (allSelected) {
+        // Deselect all when everything is selected
+        return new Set();
+      }
+      // Mixed/some selected: clear first, then select all (single state update reflects final state)
+      return new Set(songs.map(s => s.id));
+    });
   }, [songs]);
 
   const handleBulkAddToPlaylist = useCallback((playlistName: string) => {
diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 9cf9826..b269f6e 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -24,7 +24,8 @@ import {
   Icon,
   Badge
 } from "@chakra-ui/react";
-import { ChevronDownIcon, DeleteIcon, ChevronRightIcon, AddIcon, ViewIcon } from "@chakra-ui/icons";
+import { ChevronRightIcon, AddIcon, ViewIcon, DeleteIcon } from "@chakra-ui/icons";
+import { FiMoreHorizontal } from 'react-icons/fi';
 import React, { useState, useCallback } from "react";
 import { PlaylistNode } from "../types/interfaces";
 
@@ -297,10 +298,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
           aria-label="Playlist options"
           p={0}
         >
-          <ChevronDownIcon 
-            color={selectedItem === node.name ? "white" : "gray.400"}
-            _hover={{ color: "white" }}
-          />
+          <Icon as={FiMoreHorizontal} color={selectedItem === node.name ? "white" : "gray.400"} _hover={{ color: "white" }} />
         </MenuButton>
         <MenuList bg="gray.800" borderColor="gray.700">
           <MenuGroup title="Move to folder">