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,
}) => {
const [isOpen, setIsOpen] = useState(false);
const indent = level * 10;
const indent = level * 16; // Increased indentation for better visibility
if (node.type === 'folder') {
return (
@ -89,7 +89,9 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
{...getButtonStyles(false)}
onClick={() => setIsOpen(!isOpen)}
ml={indent}
pl={level > 0 ? 6 : 4} // Add extra padding for nested items
justifyContent="flex-start"
position="relative"
leftIcon={
<Box position="relative" display="flex" alignItems="center">
<ChevronRightIcon
@ -102,6 +104,18 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
</Box>
}
>
{level > 0 && (
<Box
position="absolute"
left="8px"
top="50%"
transform="translateY(-50%)"
width="2px"
height="12px"
bg="gray.500"
borderRadius="1px"
/>
)}
<Icon
viewBox="0 0 24 24"
color="blue.300"
@ -143,10 +157,24 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
{...getButtonStyles(selectedItem === node.name)}
onClick={() => onPlaylistSelect(node.name)}
ml={indent}
pl={level > 0 ? 6 : 4} // Add extra padding for nested items
borderRightRadius={0}
borderRight="1px solid"
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}
</Button>
<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
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;
const playlistToUse = targetPlaylist || playlistName;
const searchToUse = search ?? searchQuery;
const playlistToUse = targetPlaylist ?? playlistName;
// Cleanup previous request
cleanup();
@ -54,10 +55,10 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
if (playlistToUse && playlistToUse !== 'All Songs') {
// Load songs for specific playlist
response = await api.getPlaylistSongsPaginated(playlistToUse, page, pageSize, search);
response = await api.getPlaylistSongsPaginated(playlistToUse, page, pageSize, searchToUse);
} else {
// Load all songs
response = await api.getSongsPaginated(page, pageSize, search);
response = await api.getSongsPaginated(page, pageSize, searchToUse);
}
// Check if request was aborted
@ -88,7 +89,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
setIsInitialLoad(false);
}
}
}, [pageSize, searchQuery, playlistName, cleanup]);
}, [pageSize, cleanup]); // Remove searchQuery and playlistName from dependencies
// Load next page (for infinite scroll)
const loadNextPage = useCallback(() => {