master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Improve playlist hierarchy visualization - Increase indentation for nested playlists (16px per level) - Add visual indicators (gray bars) for nested items - Add extra padding for better visual separation - Make folder structure more clearly visible

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-06 10:21:12 +02:00
parent 4f16c859db
commit 5fb878a0b0
2 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/frontend/src/components/PlaylistManager.tsx
View File

@ -78,7 +78,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
allFolders, allFolders,
}) => { }) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const indent = level * 10; const indent = level * 16; // Increased indentation for better visibility
if (node.type === 'folder') { if (node.type === 'folder') {
return ( return (
@ -89,7 +89,9 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
{...getButtonStyles(false)} {...getButtonStyles(false)}
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
ml={indent} ml={indent}
pl={level > 0 ? 6 : 4} // Add extra padding for nested items
justifyContent="flex-start" justifyContent="flex-start"
position="relative"
leftIcon={ leftIcon={
<Box position="relative" display="flex" alignItems="center"> <Box position="relative" display="flex" alignItems="center">
<ChevronRightIcon <ChevronRightIcon
@ -102,6 +104,18 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
</Box> </Box>
} }
> >
{level > 0 && (
<Box
position="absolute"
left="8px"
top="50%"
transform="translateY(-50%)"
width="2px"
height="12px"
bg="gray.500"
borderRadius="1px"
/>
)}
<Icon <Icon
viewBox="0 0 24 24" viewBox="0 0 24 24"
color="blue.300" color="blue.300"
@ -143,10 +157,24 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
{...getButtonStyles(selectedItem === node.name)} {...getButtonStyles(selectedItem === node.name)}
onClick={() => onPlaylistSelect(node.name)} onClick={() => onPlaylistSelect(node.name)}
ml={indent} ml={indent}
pl={level > 0 ? 6 : 4} // Add extra padding for nested items
borderRightRadius={0} borderRightRadius={0}
borderRight="1px solid" borderRight="1px solid"
borderRightColor="whiteAlpha.200" borderRightColor="whiteAlpha.200"
position="relative"
> >
{level > 0 && (
<Box
position="absolute"
left="8px"
top="50%"
transform="translateY(-50%)"
width="2px"
height="12px"
bg="gray.500"
borderRadius="1px"
/>
)}
{node.name} {node.name}
</Button> </Button>
<Menu> <Menu>

11
packages/frontend/src/hooks/usePaginatedSongs.ts
View File

@ -34,10 +34,11 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
}, []); }, []);
// Load songs for a specific page // Load songs for a specific page
const loadPage = useCallback(async (page: number, search: string = searchQuery, targetPlaylist?: string) => { const loadPage = useCallback(async (page: number, search?: string, targetPlaylist?: string) => {
if (loadingRef.current) return; if (loadingRef.current) return;
const playlistToUse = targetPlaylist || playlistName; const searchToUse = search ?? searchQuery;
const playlistToUse = targetPlaylist ?? playlistName;
// Cleanup previous request // Cleanup previous request
cleanup(); cleanup();
@ -54,10 +55,10 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
if (playlistToUse && playlistToUse !== 'All Songs') { if (playlistToUse && playlistToUse !== 'All Songs') {
// Load songs for specific playlist // Load songs for specific playlist
response = await api.getPlaylistSongsPaginated(playlistToUse, page, pageSize, search); response = await api.getPlaylistSongsPaginated(playlistToUse, page, pageSize, searchToUse);
} else { } else {
// Load all songs // Load all songs
response = await api.getSongsPaginated(page, pageSize, search); response = await api.getSongsPaginated(page, pageSize, searchToUse);
} }
// Check if request was aborted // Check if request was aborted
@ -88,7 +89,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
setIsInitialLoad(false); setIsInitialLoad(false);
} }
} }
}, [pageSize, searchQuery, playlistName, cleanup]); }, [pageSize, cleanup]); // Remove searchQuery and playlistName from dependencies
// Load next page (for infinite scroll) // Load next page (for infinite scroll)
const loadNextPage = useCallback(() => { const loadNextPage = useCallback(() => {