feat(ui): adjust select-all behavior to clear then select; replace playlist menu chevron with more-horizontal icon
This commit is contained in:
parent
73b4bc6eb1
commit
924f36f4f7
@ -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) => {
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user