fix: Restore playlist switching functionality - Add previousPlaylistRef to properly detect playlist changes - Fix playlist change detection logic that was broken by ref updates - Ensure playlist switching works while maintaining infinite scroll fix

packages/backend/src/routes/songs.ts

@@ -148,6 +148,15 @@ router.get('/playlist/*', async (req: Request, res: Response) => {
     const totalSongs = await Song.countDocuments(query);
     const totalPages = Math.ceil(totalSongs / limit);
 
+    // Calculate total duration for the entire playlist
+    const allPlaylistSongs = await Song.find({ id: { $in: trackIds } }).lean();
+    const totalDuration = allPlaylistSongs.reduce((total, song: any) => {
+      if (!song.totalTime) return total;
+      const totalTimeStr = String(song.totalTime);
+      const seconds = Math.floor(Number(totalTimeStr) / (totalTimeStr.length > 4 ? 1000 : 1));
+      return total + seconds;
+    }, 0);
+
     // Get songs with pagination
     const songs = await Song.find(query)
       .sort({ title: 1 })
@@ -166,7 +175,8 @@ router.get('/playlist/*', async (req: Request, res: Response) => {
         totalPages,
         hasNextPage: page < totalPages,
         hasPrevPage: page > 1
-      }
+      },
+      totalDuration: totalDuration
     });
   } catch (error) {
     console.error('Error fetching playlist songs:', error);

packages/frontend/src/App.tsx

@@ -8,6 +8,7 @@ import { SongDetails } from "./components/SongDetails";
 import { Configuration } from "./pages/Configuration";
 import { useXmlParser } from "./hooks/useXmlParser";
 import { usePaginatedSongs } from "./hooks/usePaginatedSongs";
+import { formatTotalDuration } from "./utils/formatters";
 
 import { api } from "./services/api";
 import type { Song, PlaylistNode } from "./types/interfaces";
@@ -56,30 +57,40 @@ const findPlaylistByName = (playlists: PlaylistNode[], name: string): PlaylistNo
   return null;
 };
 
-const getAllPlaylistTracks = (node: PlaylistNode): string[] => {
+  const getAllPlaylistTracks = (node: PlaylistNode): string[] => {
-  if (!node.type || node.type === 'playlist') {  // Handle both old and new playlist formats
+    if (!node.type || node.type === 'playlist') {  // Handle both old and new playlist formats
-    return node.tracks || [];
+      return node.tracks || [];
-  }
+    }
-  if (node.type === 'folder' && node.children) {
+    if (node.type === 'folder' && node.children) {
-    return node.children.flatMap(child => getAllPlaylistTracks(child));
+      return node.children.flatMap(child => getAllPlaylistTracks(child));
-  }
+    }
-  return [];
+    return [];
-};
+  };
 
 export default function RekordboxReader() {
   const { playlists, setPlaylists, loading: xmlLoading } = useXmlParser();
   const [selectedSong, setSelectedSong] = useState<Song | null>(null);
+  const [isDatabaseInitialized, setIsDatabaseInitialized] = useState(false);
   
   // Memoized song selection handler to prevent unnecessary re-renders
   const handleSongSelect = useCallback((song: Song) => {
     setSelectedSong(song);
   }, []);
+  
+  // Format total duration for display
+  const getFormattedTotalDuration = useCallback((durationSeconds?: number): string => {
+    if (!durationSeconds) return "";
+    return formatTotalDuration(durationSeconds);
+  }, []);
+
+
+  
   const navigate = useNavigate();
   const location = useLocation();
   const initialLoadDone = useRef(false);
 
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { isOpen: isWelcomeOpen, onClose: onWelcomeClose } = useDisclosure({ defaultIsOpen: true });
+  const { isOpen: isWelcomeOpen, onOpen: onWelcomeOpen, onClose: onWelcomeClose } = useDisclosure({ defaultIsOpen: false });
   
   const isMobile = useBreakpointValue({ base: true, md: false });
   const [sidebarWidth, setSidebarWidth] = useState(400);
@@ -96,11 +107,38 @@ export default function RekordboxReader() {
     loading: songsLoading,
     hasMore,
     totalSongs,
+    totalDuration,
     loadNextPage,
     searchSongs,
     searchQuery
   } = usePaginatedSongs({ pageSize: 50, playlistName: currentPlaylist });
 
+  // Check if database is initialized (has songs or playlists) - moved after useDisclosure
+  useEffect(() => {
+    const checkDatabaseInitialized = async () => {
+      try {
+        // Check if there are any songs in the database
+        const songCount = await api.getSongCount();
+        const hasPlaylists = playlists.length > 0;
+        const isInitialized = songCount > 0 || hasPlaylists;
+        setIsDatabaseInitialized(isInitialized);
+        
+        // Only show welcome modal if database is truly empty
+        if (!isInitialized) {
+          onWelcomeOpen();
+        }
+      } catch (error) {
+        // If we can't get the song count, assume database is not initialized
+        setIsDatabaseInitialized(false);
+        onWelcomeOpen();
+      }
+    };
+
+    if (!xmlLoading) {
+      checkDatabaseInitialized();
+    }
+  }, [xmlLoading, playlists.length, onWelcomeOpen]);
+
   useEffect(() => {
     // Only run this check after the initial data load
     if (!xmlLoading && playlists.length > 0) {
@@ -313,16 +351,11 @@ export default function RekordboxReader() {
     };
   }, [isResizing]);
 
-  if (xmlLoading || songsLoading) {
+  if (xmlLoading) {
     return (
       <Flex height="100vh" align="center" justify="center" direction="column" gap={4}>
         <Spinner size="xl" />
         <Text>Loading your library...</Text>
-        {currentPlaylist !== "All Songs" && (
-          <Text fontSize="sm" color="gray.500">
-            Navigating to playlist: {currentPlaylist}
-          </Text>
-        )}
       </Flex>
     );
   }
@@ -355,7 +388,7 @@ export default function RekordboxReader() {
       userSelect={isResizing ? 'none' : 'auto'}
     >
       {/* Welcome Modal */}
-      {!xmlLoading && !songsLoading && songs.length === 0 && (
+      {!xmlLoading && !isDatabaseInitialized && (
         <Modal isOpen={isWelcomeOpen} onClose={onWelcomeClose} isCentered>
           <ModalOverlay />
           <ModalContent bg="gray.800" maxW="md">
@@ -510,6 +543,7 @@ export default function RekordboxReader() {
                         loading={songsLoading}
                         hasMore={hasMore}
                         totalSongs={totalSongs}
+                        totalPlaylistDuration={getFormattedTotalDuration(totalDuration)}
                         onLoadMore={loadNextPage}
                         onSearch={searchSongs}
                         searchQuery={searchQuery}

packages/frontend/src/components/PaginatedSongList.tsx

@@ -34,6 +34,7 @@ interface PaginatedSongListProps {
   loading: boolean;
   hasMore: boolean;
   totalSongs: number;
+  totalPlaylistDuration?: string; // Total duration of the entire playlist
   onLoadMore: () => void;
   onSearch: (query: string) => void;
   searchQuery: string;
@@ -111,6 +112,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   loading,
   hasMore,
   totalSongs,
+  totalPlaylistDuration,
   onLoadMore,
   onSearch,
   searchQuery,
@@ -121,6 +123,20 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
   const observerRef = useRef<IntersectionObserver | null>(null);
   const loadingRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const isTriggeringRef = useRef(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // Store current values in refs to avoid stale closures
+  const hasMoreRef = useRef(hasMore);
+  const loadingRef_state = useRef(loading);
+  const onLoadMoreRef = useRef(onLoadMore);
+  
+  // Update refs when props change
+  useEffect(() => {
+    hasMoreRef.current = hasMore;
+    loadingRef_state.current = loading;
+    onLoadMoreRef.current = onLoadMore;
+  }, [hasMore, loading, onLoadMore]);
   
   // Debounce search to prevent excessive API calls
   const debouncedSearchQuery = useDebounce(localSearchQuery, 300);
@@ -199,15 +215,19 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
     ));
   }, [songs, selectedSongs, selectedSongId, handleSongSelect, toggleSelection, depth]);
 
-  // Memoized total duration calculation
+  // Use total playlist duration if available, otherwise calculate from current songs
   const totalDuration = useMemo(() => {
+    if (totalPlaylistDuration) {
+      return totalPlaylistDuration;
+    }
+    // Fallback to calculating from current songs
     const totalSeconds = songs.reduce((total, song) => {
       if (!song.totalTime) return total;
       const seconds = Math.floor(Number(song.totalTime) / (song.totalTime.length > 4 ? 1000 : 1));
       return total + seconds;
     }, 0);
     return formatTotalDuration(totalSeconds);
-  }, [songs]);
+  }, [songs, totalPlaylistDuration]);
 
   // Memoized playlist options for bulk actions
   const playlistOptions = useMemo(() => {
@@ -230,8 +250,14 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
     if (loadingRef.current) {
       observerRef.current = new IntersectionObserver(
         (entries) => {
-          if (entries[0].isIntersecting && hasMore && !loading) {
+          // Use current values from refs to avoid stale closure
-            onLoadMore();
+          if (entries[0].isIntersecting && hasMoreRef.current && !loadingRef_state.current && !isTriggeringRef.current) {
+            isTriggeringRef.current = true;
+            onLoadMoreRef.current();
+            // Reset the flag after a short delay to prevent multiple triggers
+            timeoutRef.current = setTimeout(() => {
+              isTriggeringRef.current = false;
+            }, 1000);
           }
         },
         { 
@@ -247,8 +273,11 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
       if (observerRef.current) {
         observerRef.current.disconnect();
       }
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
-  }, [hasMore, loading, onLoadMore]);
+  }, []); // Remove dependencies to prevent recreation
 
   return (
     <Flex direction="column" height="100%">
@@ -298,6 +327,11 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
             </Checkbox>
             <Text color="gray.400" fontSize="sm">
               {songs.length} of {totalSongs} songs • {totalDuration}
+              {hasMore && songs.length > 0 && (
+                <Text as="span" color="blue.400" ml={2}>
+                  • Scroll for more
+                </Text>
+              )}
             </Text>
           </HStack>
           
@@ -354,14 +388,26 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
           
           {/* Loading indicator for infinite scroll */}
           {loading && (
-            <Flex justify="center" p={4} key="loading-spinner">
+            <Flex justify="center" align="center" p={6} key="loading-spinner" gap={3}>
               <Spinner size="md" color="blue.400" />
+              <Text color="gray.400" fontSize="sm">
+                Loading more songs...
+              </Text>
             </Flex>
           )}
           
           {/* Intersection observer target */}
           <div ref={loadingRef} style={{ height: '20px' }} key="intersection-target" />
           
+          {/* Loading more indicator (subtle) */}
+          {!loading && hasMore && songs.length > 0 && (
+            <Flex justify="center" p={3} key="loading-more-indicator">
+              <Text color="gray.600" fontSize="xs">
+                Scroll for more songs
+              </Text>
+            </Flex>
+          )}
+          
           {/* End of results message */}
           {!hasMore && songs.length > 0 && (
             <Flex justify="center" p={4} key="end-message">

packages/frontend/src/components/PlaylistManager.tsx

@@ -78,7 +78,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
   allFolders,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const indent = level * 10;
+  const indent = level * 10; // Reverted back to 10px per level
 
   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,17 +104,29 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
               </Box>
             }
           >
-                <Icon 
+            {level > 0 && (
-                  viewBox="0 0 24 24"
+              <Box
-                  color="blue.300"
+                position="absolute"
-                  ml={1}
+                left="8px"
-                  mr={2}
+                top="50%"
-                >
+                transform="translateY(-50%)"
-                  <path
+                width="2px"
-                    fill="currentColor"
+                height="12px"
-                    d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"
+                bg="gray.500"
-                  />
+                borderRadius="1px"
-                </Icon>
+              />
+            )}
+            <Icon 
+              viewBox="0 0 24 24"
+              color="blue.300"
+              ml={1}
+              mr={2}
+            >
+              <path
+                fill="currentColor"
+                d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"
+              />
+            </Icon>
             {node.name}
           </Button>
         </Flex>
@@ -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>
@@ -266,6 +294,39 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
         >
           All Songs
         </Button>
+        
+        {/* Add Playlist and Folder buttons at the top */}
+        <Flex gap={2} mb={2}>
+          <Button
+            onClick={onPlaylistModalOpen}
+            colorScheme="blue"
+            size="sm"
+            flex={1}
+            leftIcon={<AddIcon />}
+            borderRadius="md"
+            _hover={{
+              transform: "translateY(-1px)",
+              boxShadow: "sm",
+            }}
+          >
+            New Playlist
+          </Button>
+          <Button
+            onClick={onFolderModalOpen}
+            colorScheme="teal"
+            size="sm"
+            flex={1}
+            leftIcon={<ViewIcon />}
+            borderRadius="md"
+            _hover={{
+              transform: "translateY(-1px)",
+              boxShadow: "sm",
+            }}
+          >
+            New Folder
+          </Button>
+        </Flex>
+        
         {playlists.map((node, index) => (
           <PlaylistItem
             key={node.id || index}
@@ -280,37 +341,6 @@ export const PlaylistManager: React.FC<PlaylistManagerProps> = ({
         ))}
       </VStack>
 
-      <Flex gap={2}>
-        <Button
-          onClick={onPlaylistModalOpen}
-          colorScheme="blue"
-          size="sm"
-          flex={1}
-          leftIcon={<AddIcon />}
-          borderRadius="md"
-          _hover={{
-            transform: "translateY(-1px)",
-            boxShadow: "sm",
-          }}
-        >
-          New Playlist
-        </Button>
-        <Button
-          onClick={onFolderModalOpen}
-          colorScheme="teal"
-          size="sm"
-          flex={1}
-          leftIcon={<ViewIcon />}
-          borderRadius="md"
-          _hover={{
-            transform: "translateY(-1px)",
-            boxShadow: "sm",
-          }}
-        >
-          New Folder
-        </Button>
-      </Flex>
-
       {/* New Playlist Modal */}
       <Modal
         isOpen={isPlaylistModalOpen}

packages/frontend/src/hooks/usePaginatedSongs.ts

@@ -18,10 +18,13 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState(initialSearch);
   const [totalSongs, setTotalSongs] = useState(0);
+  const [totalDuration, setTotalDuration] = useState<number | undefined>(undefined);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
   
   const loadingRef = useRef(false);
   const currentPlaylistRef = useRef(playlistName);
+  const currentSearchQueryRef = useRef(searchQuery);
+  const previousPlaylistRef = useRef(playlistName);
   const abortControllerRef = useRef<AbortController | null>(null);
 
   // Cleanup function to prevent memory leaks
@@ -34,10 +37,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 ?? currentSearchQueryRef.current;
+    const playlistToUse = targetPlaylist ?? currentPlaylistRef.current;
     
     // Cleanup previous request
     cleanup();
@@ -54,10 +58,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
@@ -75,6 +79,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
       
       setHasMore(response.pagination.hasNextPage);
       setTotalSongs(response.pagination.totalSongs);
+      setTotalDuration(response.totalDuration);
       setCurrentPage(page);
     } catch (err) {
       // Don't set error if request was aborted
@@ -88,7 +93,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(() => {
@@ -100,7 +105,8 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
   // Search songs with debouncing
   const searchSongs = useCallback((query: string) => {
     setSearchQuery(query);
-    // Don't clear songs immediately - let the new search results replace them
+    // Clear songs for new search to replace them
+    setSongs([]);
     setHasMore(true);
     setCurrentPage(1);
     setError(null);
@@ -131,19 +137,22 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
 
   // Handle playlist changes
   useEffect(() => {
-    if (currentPlaylistRef.current !== playlistName) {
+    if (!isInitialLoad && previousPlaylistRef.current !== playlistName) {
+      // Update refs
       currentPlaylistRef.current = playlistName;
-      if (!isInitialLoad) {
+      currentSearchQueryRef.current = searchQuery;
-        // Don't clear songs immediately - let the new playlist results replace them
+      previousPlaylistRef.current = playlistName;
-        setHasMore(true);
+      
-        setCurrentPage(1);
+      // Clear songs for new playlist to replace them
-        setSearchQuery(initialSearch);
+      setSongs([]);
-        setError(null);
+      setHasMore(true);
-        // Use setTimeout to avoid the dependency issue
+      setCurrentPage(1);
-        setTimeout(() => {
+      setSearchQuery(initialSearch);
-          loadPage(1, initialSearch, playlistName);
+      setError(null);
-        }, 0);
+      // Use setTimeout to avoid the dependency issue
-      }
+      setTimeout(() => {
+        loadPage(1, initialSearch, playlistName);
+      }, 0);
     }
   }, [playlistName, isInitialLoad, initialSearch, loadPage]);
 
@@ -153,6 +162,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
     error,
     hasMore,
     totalSongs,
+    totalDuration,
     currentPage,
     searchQuery,
     isInitialLoad,

packages/frontend/src/services/api.ts

@@ -14,6 +14,7 @@ export interface PaginationInfo {
 export interface SongsResponse {
   songs: Song[];
   pagination: PaginationInfo;
+  totalDuration?: number; // Total duration of the entire playlist in seconds
 }
 
 class Api {