feat(ui): adjust select-all behavior to clear then select; replace playlist menu chevron with more-horizontal icon

This commit is contained in:
Geert Rademakes 2025-08-08 16:32:01 +02:00
parent 73b4bc6eb1
commit 924f36f4f7
2 changed files with 17 additions and 8 deletions

View File

@ -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) => {

View File

@ -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">