feat: Add ListeningStreakCard component for tracking listening streaks

feat: Implement InfiniteScroll component for loading more items on scroll

feat: Create useListeningStreak hook to manage listening streak data and statistics

feat: Develop useProgressiveAlbumLoading hook for progressive loading of albums

feat: Implement background sync service worker for automatic data synchronization

app/page.tsx

@@ -15,6 +15,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { UserProfile } from './components/UserProfile';
 import { OfflineStatusIndicator } from './components/OfflineStatusIndicator';
+import CompactListeningStreak from './components/CompactListeningStreak';
 
 type TimeOfDay = 'morning' | 'afternoon' | 'evening';
 
@@ -218,6 +219,11 @@ function MusicPageContent() {
       <div className="mb-8">
         <SongRecommendations userName={userName} />
       </div>
+            
+      {/* Listening Streak Section - Only shown when 3+ days streak */}
+      <div className="mb-6">
+        <CompactListeningStreak />
+      </div>
       
       <>
       <Tabs defaultValue="music" className="h-full space-y-6">