Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

src/features/Artists/Artists.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon, IonChip } from '@ionic/react';
+import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonIcon, IonChip } from '@ionic/react';
 import { close, add, heart, heartOutline } from 'ionicons/icons';
 import { useArtists } from '../../hooks';
 import { useAppSelector } from '../../redux';
@@ -68,6 +68,12 @@ const Artists: React.FC = () => {
   const selectedArtistSongs = selectedArtist ? getSongsByArtist(selectedArtist) : [];
 
   return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Artists</IonTitle>
+        </IonToolbar>
+      </IonHeader>
       <div className="max-w-4xl mx-auto p-6">
         <div className="mb-6">
           <h1 className="text-2xl font-bold text-gray-900 mb-4">Artists</h1>
@@ -161,7 +167,7 @@ const Artists: React.FC = () => {
             </IonToolbar>
           </IonHeader>
           
-        <IonContent>
+          <div className="p-4">
             <IonList>
               {selectedArtistSongs.map((song) => (
                 <IonItem key={song.key}>
@@ -192,9 +198,10 @@ const Artists: React.FC = () => {
                 </IonItem>
               ))}
             </IonList>
-        </IonContent>
+          </div>
         </IonModal>
       </div>
+    </>
   );
 };
 

src/features/Favorites/Favorites.tsx

@@ -34,7 +34,6 @@ const Favorites: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <div style={{ height: '100%', overflowY: 'auto' }}>
       <InfiniteScrollList
         items={favoritesItems}
         isLoading={favoritesCount === 0}
@@ -51,7 +50,6 @@ const Favorites: React.FC = () => {
         loadingMessage="Please wait while favorites data is being loaded"
         debugInfo={`Favorites items loaded: ${favoritesCount}`}
       />
-      </div>
     </>
   );
 };

src/features/NewSongs/NewSongs.tsx

@@ -34,7 +34,6 @@ const NewSongs: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <div style={{ height: '100%', overflowY: 'auto' }}>
       <InfiniteScrollList
         items={newSongsItems}
         isLoading={newSongsCount === 0}
@@ -51,7 +50,6 @@ const NewSongs: React.FC = () => {
         loadingMessage="Please wait while new songs data is being loaded"
         debugInfo={`New songs loaded: ${newSongsCount}`}
       />
-      </div>
     </>
   );
 };

src/features/Singers/Singers.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonChip } from '@ionic/react';
+import { IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonChip } from '@ionic/react';
 import { people, trash, time } from 'ionicons/icons';
 import { EmptyState } from '../../components/common';
 import { useSingers } from '../../hooks';
@@ -34,7 +34,6 @@ const Singers: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent>
       <div className="p-4">
         <p className="text-sm text-gray-600 mb-4">
           {singers.length} singer{singers.length !== 1 ? 's' : ''} in the party
@@ -103,7 +102,6 @@ const Singers: React.FC = () => {
           )}
         </div>
       </div>
-      </IonContent>
     </>
   );
 };

src/features/SongLists/SongLists.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonModal, IonButton, IonIcon, IonChip, IonAccordion, IonAccordionGroup } from '@ionic/react';
+import { IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonLabel, IonModal, IonButton, IonIcon, IonChip, IonAccordion, IonAccordionGroup } from '@ionic/react';
 import { close, documentText, add, heart, heartOutline } from 'ionicons/icons';
 import { useSongLists } from '../../hooks';
 import { useAppSelector } from '../../redux';
@@ -95,7 +95,6 @@ const SongLists: React.FC = () => {
         </IonToolbar>
       </IonHeader>
 
-      <IonContent>
       <div className="p-4">
         <p className="text-sm text-gray-600 mb-4">
           {songLists.length} song list{songLists.length !== 1 ? 's' : ''} available
@@ -166,7 +165,6 @@ const SongLists: React.FC = () => {
           )}
         </div>
       </div>
-      </IonContent>
 
       {/* Song List Modal */}
       <IonModal isOpen={!!finalSelectedList} onDidDismiss={handleCloseSongList}>
@@ -178,8 +176,8 @@ const SongLists: React.FC = () => {
             </IonButton>
           </IonToolbar>
         </IonHeader>
-        
+        {/* Remove IonContent, use a div instead */}
-        <IonContent>
+        <div>
           <IonAccordionGroup>
             {finalSelectedList?.songs.map((songListSong: SongListSong, idx) => {
               const availableSongs = checkSongAvailability(songListSong);
@@ -250,7 +248,7 @@ const SongLists: React.FC = () => {
               );
             })}
           </IonAccordionGroup>
-        </IonContent>
+        </div>
       </IonModal>
     </>
   );

src/features/TopPlayed/Top100.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { IonHeader, IonToolbar, IonTitle, IonChip, IonIcon } from '@ionic/react';
+import { trophy } from 'ionicons/icons';
 import { InfiniteScrollList } from '../../components/common';
 import { useTopPlayed } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectTopPlayed } from '../../redux';
+import type { TopPlayed, Song } from '../../types';
+
+const Top100: React.FC = () => {
+  console.log('Top100 component - RENDERING START');
 
-const TopPlayed: React.FC = () => {
   const {
     topPlayedItems,
-    hasMore,
     loadMore,
     handleAddToQueue,
     handleToggleFavorite,
@@ -17,18 +20,110 @@ const TopPlayed: React.FC = () => {
   const topPlayed = useAppSelector(selectTopPlayed);
   const topPlayedCount = Object.keys(topPlayed).length;
 
-  // Debug logging
+  console.log('Top100 component - Redux data:', { topPlayedCount, topPlayedItems: topPlayedItems.length });
-  console.log('TopPlayed component - top played count:', topPlayedCount);
-  console.log('TopPlayed component - top played items:', topPlayedItems);
 
-  const renderExtraContent = (item: any, index: number) => (
+  // Mock data for testing
-    <div className="flex items-center space-x-2 px-4 py-2">
+  const mockTopPlayedItems: TopPlayed[] = [
-      <div className="flex items-center text-sm text-gray-500">
+    {
-        <IonIcon icon="trophy" className="mr-1" />
+      key: 'mock-1',
-        <span>#{index + 1}</span>
+      title: 'Bohemian Rhapsody',
-      </div>
+      artist: 'Queen',
-    </div>
+      count: 156
-  );
+    },
+    {
+      key: 'mock-2',
+      title: 'Sweet Caroline',
+      artist: 'Neil Diamond',
+      count: 142
+    },
+    {
+      key: 'mock-3',
+      title: 'Don\'t Stop Believin\'',
+      artist: 'Journey',
+      count: 128
+    },
+    {
+      key: 'mock-4',
+      title: 'Livin\' on a Prayer',
+      artist: 'Bon Jovi',
+      count: 115
+    },
+    {
+      key: 'mock-5',
+      title: 'Wonderwall',
+      artist: 'Oasis',
+      count: 98
+    },
+    {
+      key: 'mock-6',
+      title: 'Hotel California',
+      artist: 'Eagles',
+      count: 87
+    },
+    {
+      key: 'mock-7',
+      title: 'Stairway to Heaven',
+      artist: 'Led Zeppelin',
+      count: 76
+    },
+    {
+      key: 'mock-8',
+      title: 'Imagine',
+      artist: 'John Lennon',
+      count: 65
+    },
+    {
+      key: 'mock-9',
+      title: 'Hey Jude',
+      artist: 'The Beatles',
+      count: 54
+    },
+    {
+      key: 'mock-10',
+      title: 'Yesterday',
+      artist: 'The Beatles',
+      count: 43
+    }
+  ];
+
+  // Convert TopPlayed items to Song format for consistent UI
+  const songItems: Song[] = mockTopPlayedItems.map((item: TopPlayed) => ({
+    ...item,
+    path: '', // TopPlayed doesn't have path
+    disabled: false,
+    favorite: false,
+  }));
+
+  // Use mock data for now
+  const displayItems = songItems;
+  const displayCount = songItems.length;
+  const displayHasMore = false; // No more mock data to load
+
+  console.log('Top100 component - Mock data:', { 
+    displayItems: displayItems.length, 
+    displayCount, 
+    displayHasMore,
+    firstItem: displayItems[0]
+  });
+
+  console.log('Top100 component - About to render JSX');
+
+  // Wrapper functions to handle type conversion
+  const handleAddToQueueWrapper = (song: Song) => {
+    console.log('Top100 component - Add to Queue clicked:', song);
+    const topPlayedItem = mockTopPlayedItems.find(item => item.key === song.key);
+    if (topPlayedItem) {
+      handleAddToQueue(topPlayedItem);
+    }
+  };
+
+  const handleToggleFavoriteWrapper = (song: Song) => {
+    console.log('Top100 component - Remove clicked:', song);
+    const topPlayedItem = mockTopPlayedItems.find(item => item.key === song.key);
+    if (topPlayedItem) {
+      handleToggleFavorite(topPlayedItem);
+    }
+  };
 
   return (
     <>
@@ -37,20 +132,19 @@ const TopPlayed: React.FC = () => {
           <IonTitle>
             Top 100 Played
             <IonChip color="primary" className="ml-2">
-              {topPlayedItems.length}
+              {displayItems.length}
             </IonChip>
           </IonTitle>
         </IonToolbar>
       </IonHeader>
 
-      <div style={{ height: '100%', overflowY: 'auto' }}>
       <InfiniteScrollList
-          items={topPlayedItems}
+        items={displayItems}
-          isLoading={topPlayedCount === 0}
+        isLoading={displayCount === 0}
-          hasMore={hasMore}
+        hasMore={displayHasMore}
         onLoadMore={loadMore}
-          onAddToQueue={handleAddToQueue}
+        onAddToQueue={handleAddToQueueWrapper}
-          onToggleFavorite={handleToggleFavorite}
+        onToggleFavorite={handleToggleFavoriteWrapper}
         context="topPlayed"
         title=""
         subtitle=""
@@ -58,12 +152,21 @@ const TopPlayed: React.FC = () => {
         emptyMessage="Play some songs to see the top played list"
         loadingTitle="Loading top played songs..."
         loadingMessage="Please wait while top played data is being loaded"
-          debugInfo={`Top played items loaded: ${topPlayedCount}`}
+        debugInfo={`Top played items loaded: ${displayCount} (Mock Data)`}
-          renderExtraContent={renderExtraContent}
+        renderExtraContent={(item: Song, index: number) => (
-        />
+          <div className="flex items-center space-x-2 px-4 py-2">
+            <div className="flex items-center text-sm text-gray-500">
+              <IonIcon icon={trophy} className="mr-1" />
+              <span>#{index + 1}</span>
             </div>
+            <IonChip color="primary">
+              {item.count} play{item.count !== 1 ? 's' : ''}
+            </IonChip>
+          </div>
+        )}
+      />
     </>
   );
 };
 
-export default TopPlayed; 
+export default Top100;