feat: add song recommendations component with loading state and shuffle functionality

app/components/RootLayoutClient.tsx

@@ -14,15 +14,19 @@ import Image from "next/image";
 
 function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
   const { error } = useNavidrome();
+  const [isClient, setIsClient] = React.useState(false);
+  const [hasCompletedOnboarding, setHasCompletedOnboarding] = React.useState(true); // Default to true to prevent flash
   
-  // Check if this is a first-time user
-  const hasCompletedOnboarding = typeof window !== 'undefined' 
-    ? localStorage.getItem('onboarding-completed') 
-    : false;
+  // Client-side hydration
+  React.useEffect(() => {
+    setIsClient(true);
+    const onboardingStatus = localStorage.getItem('onboarding-completed');
+    setHasCompletedOnboarding(!!onboardingStatus);
+  }, []);
 
   // Simple check: has config in localStorage or environment
   const hasAnyConfig = React.useMemo(() => {
-    if (typeof window === 'undefined') return false;
+    if (!isClient) return true; // Assume config exists during SSR to prevent flash
     
     // Check localStorage config
     const savedConfig = localStorage.getItem('navidrome-config');
@@ -45,7 +49,12 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
     }
     
     return false;
-  }, []);
+  }, [isClient]);
+  
+  // Don't show anything until client-side hydration is complete
+  if (!isClient) {
+    return <>{children}</>;
+  }
   
   // Show start screen ONLY if:
   // 1. First-time user (no onboarding completed), OR

app/components/SongRecommendations.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Song } from '@/lib/navidrome';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Play, Heart, Music, Shuffle } from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface SongRecommendationsProps {
+  userName?: string;
+}
+
+export function SongRecommendations({ userName }: SongRecommendationsProps) {
+  const { api, isConnected } = useNavidrome();
+  const { playTrack, shuffle, toggleShuffle } = useAudioPlayer();
+  const [recommendedSongs, setRecommendedSongs] = useState<Song[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [songStates, setSongStates] = useState<Record<string, boolean>>({});
+
+  // Get greeting based on time of day
+  const hour = new Date().getHours();
+  const greeting = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+
+  useEffect(() => {
+    const loadRecommendations = async () => {
+      if (!api || !isConnected) return;
+      
+      setLoading(true);
+      try {
+        // Get random albums and extract songs from them
+        const randomAlbums = await api.getAlbums('random', 10); // Get 10 random albums
+        const allSongs: Song[] = [];
+        
+        // Get songs from first few albums
+        for (let i = 0; i < Math.min(3, randomAlbums.length); i++) {
+          try {
+            const albumSongs = await api.getAlbumSongs(randomAlbums[i].id);
+            allSongs.push(...albumSongs);
+          } catch (error) {
+            console.error('Failed to get album songs:', error);
+          }
+        }
+        
+        // Shuffle and limit to 6 songs
+        const shuffled = allSongs.sort(() => Math.random() - 0.5);
+        const recommendations = shuffled.slice(0, 6);
+        setRecommendedSongs(recommendations);
+        
+        // Initialize starred states
+        const states: Record<string, boolean> = {};
+        recommendations.forEach((song: Song) => {
+          states[song.id] = !!song.starred;
+        });
+        setSongStates(states);
+      } catch (error) {
+        console.error('Failed to load song recommendations:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadRecommendations();
+  }, [api, isConnected]);
+
+  const handlePlaySong = async (song: Song) => {
+    if (!api) return;
+    
+    try {
+      const track = {
+        id: song.id,
+        name: song.title,
+        url: api.getStreamUrl(song.id),
+        artist: song.artist || 'Unknown Artist',
+        artistId: song.artistId || '',
+        album: song.album || 'Unknown Album',
+        albumId: song.albumId || '',
+        duration: song.duration || 0,
+        coverArt: song.coverArt,
+        starred: !!song.starred
+      };
+      await playTrack(track, true);
+    } catch (error) {
+      console.error('Failed to play song:', error);
+    }
+  };
+
+  const handleShuffleAll = async () => {
+    if (recommendedSongs.length === 0) return;
+    
+    // Enable shuffle if not already on
+    if (!shuffle) {
+      toggleShuffle();
+    }
+    
+    // Play a random song from recommendations
+    const randomSong = recommendedSongs[Math.floor(Math.random() * recommendedSongs.length)];
+    await handlePlaySong(randomSong);
+  };
+
+  const formatDuration = (duration: number): string => {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+          <div className="h-4 w-64 bg-muted animate-pulse rounded" />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="h-16 bg-muted animate-pulse rounded" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">
+            {greeting}{userName ? `, ${userName}` : ''}!
+          </h2>
+          <p className="text-muted-foreground">
+            Here are some songs you might enjoy
+          </p>
+        </div>
+        {recommendedSongs.length > 0 && (
+          <Button onClick={handleShuffleAll} variant="outline" size="sm">
+            <Shuffle className="w-4 h-4 mr-2" />
+            Shuffle All
+          </Button>
+        )}
+      </div>
+      
+      {recommendedSongs.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {recommendedSongs.map((song) => (
+            <Card 
+              key={song.id} 
+              className="group cursor-pointer hover:bg-accent/50 transition-colors py-2"
+              onClick={() => handlePlaySong(song)}
+            >
+              <CardContent className="px-2">
+                <div className="flex items-center gap-3">
+                  <div className="relative w-12 h-12 rounded overflow-hidden bg-muted flex-shrink-0">
+                    {song.coverArt && api ? (
+                      <Image
+                        src={api.getCoverArtUrl(song.coverArt, 100)}
+                        alt={song.title}
+                        fill
+                        className="object-cover"
+                        sizes="48px"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center">
+                        <Music className="w-6 h-6 text-muted-foreground" />
+                      </div>
+                    )}
+                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                      <Play className="w-4 h-4 text-white" />
+                    </div>
+                  </div>
+                  
+                  <div className="flex-1 min-w-0">
+                    <p className="font-medium truncate">{song.title}</p>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Link 
+                        href={`/artist/${song.artistId}`}
+                        className="hover:underline truncate"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        {song.artist}
+                      </Link>
+                      {song.duration && (
+                        <>
+                          <span>•</span>
+                          <span>{formatDuration(song.duration)}</span>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                  
+                  {songStates[song.id] && (
+                    <Heart className="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" />
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="p-6 text-center">
+            <Music className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
+            <p className="text-muted-foreground">
+              No songs available for recommendations
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

app/components/album-artwork.tsx

@@ -46,6 +46,8 @@ export function AlbumArtwork({
   const router = useRouter();
   const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
   const { playlists, starItem, unstarItem } = useNavidrome();
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
 
   const handleClick = () => {
     router.push(`/album/${album.id}`);
@@ -115,28 +117,54 @@ export function AlbumArtwork({
           <Card key={album.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
                               <div className="aspect-square relative group">
                                   {album.coverArt && api ? (
-                                      <Image
-                                          src={api.getCoverArtUrl(album.coverArt)}
-                                          alt={album.name}
-                                          fill
-                                          className="w-full h-full object-cover"
-                                          sizes="(max-width: 768px) 100vw, 300px"
-                                      />
+                                      <>
+                                        {imageLoading && (
+                                          <div className="absolute inset-0 bg-muted animate-pulse rounded flex items-center justify-center">
+                                            <Disc className="w-12 h-12 text-muted-foreground animate-spin" />
+                                          </div>
+                                        )}
+                                        <Image
+                                            src={api.getCoverArtUrl(album.coverArt)}
+                                            alt={album.name}
+                                            fill
+                                            className={`w-full h-full object-cover transition-opacity duration-300 ${
+                                              imageLoading ? 'opacity-0' : 'opacity-100'
+                                            }`}
+                                            sizes="(max-width: 768px) 100vw, 300px"
+                                            onLoad={() => setImageLoading(false)}
+                                            onError={() => {
+                                              setImageLoading(false);
+                                              setImageError(true);
+                                            }}
+                                        />
+                                      </>
                                   ) : (
                                       <div className="w-full h-full bg-muted rounded flex items-center justify-center">
                                           <Disc className="w-12 h-12 text-muted-foreground" />
                                       </div>
                                   )}
-                                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                                      <Play className="w-6 h-6 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
-                                  </div>
+                                  {!imageLoading && (
+                                    <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
+                                        <Play className="w-6 h-6 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
+                                    </div>
+                                  )}
                               </div>
                               <CardContent className="p-4">
-                                <h3 className="font-semibold truncate">{album.name}</h3>
-                                <p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
-                                <p className="text-xs text-muted-foreground mt-1">
-                                  {album.songCount} songs • {Math.floor(album.duration / 60)} min
-                                </p>
+                                {imageLoading ? (
+                                  <>
+                                    <div className="h-5 w-3/4 bg-muted animate-pulse rounded mb-2" />
+                                    <div className="h-4 w-1/2 bg-muted animate-pulse rounded mb-1" />
+                                    <div className="h-3 w-2/3 bg-muted animate-pulse rounded" />
+                                  </>
+                                ) : (
+                                  <>
+                                    <h3 className="font-semibold truncate">{album.name}</h3>
+                                    <p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                      {album.songCount} songs • {Math.floor(album.duration / 60)} min
+                                    </p>
+                                  </>
+                                )}
                               </CardContent>
                             </Card>
           {/* <div onClick={handleClick} className="overflow-hidden rounded-md">

app/page.tsx

@@ -5,14 +5,17 @@ import { Separator } from '../components/ui/separator';
 import { Tabs, TabsContent } from '../components/ui/tabs';
 import { AlbumArtwork } from './components/album-artwork';
 import { useNavidrome } from './components/NavidromeContext';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Suspense } from 'react';
 import { Album } from '@/lib/navidrome';
 import { useNavidromeConfig } from './components/NavidromeConfigContext';
 import { useSearchParams } from 'next/navigation';
 import { useAudioPlayer } from './components/AudioPlayerContext';
+import { SongRecommendations } from './components/SongRecommendations';
+import { Skeleton } from '@/components/ui/skeleton';
 
 type TimeOfDay = 'morning' | 'afternoon' | 'evening';
-export default function MusicPage() {
+
+function MusicPageContent() {
   const { albums, isLoading, api, isConnected } = useNavidrome();
   const { playAlbum, playTrack, shuffle, toggleShuffle, addToQueue } = useAudioPlayer();
   const searchParams = useSearchParams();
@@ -158,19 +161,6 @@ export default function MusicPage() {
     return () => clearTimeout(timeout);
   }, [searchParams, api, isConnected, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue]);
 
-  // Get greeting and time of day
-  const hour = new Date().getHours();
-  const greeting = hour < 12 ? 'Good morning' : 'Good afternoon';
-  let timeOfDay: TimeOfDay;
-  if (hour >= 5 && hour < 12) {
-    timeOfDay = 'morning';
-  } else if (hour >= 12 && hour < 18) {
-    timeOfDay = 'afternoon';
-  } else {
-    timeOfDay = 'evening';
-  }
-
-
   // Try to get user name from navidrome context, fallback to 'user'
   let userName = '';
   // If you add user info to NavidromeContext, update this logic
@@ -182,25 +172,11 @@ export default function MusicPage() {
 
   return (
     <div className="p-6 pb-24 w-full">
-      <div className="relative rounded-lg p-8">
-          <div className="relative rounded-sm p-10">
-            <div
-              className="absolute inset-0 bg-center bg-cover bg-no-repeat blur-xl bg-linear-to-r from-primary to-secondary"
- style={{
-                backgroundImage:
- timeOfDay === 'morning'
- ? 'linear-gradient(to right, #ff9a9e, #fad0c4, #fad0c4)' // Warm tones for morning
- : timeOfDay === 'evening'
- ? 'linear-gradient(to right, #a18cd1, #fbc2eb)' // Cool tones for evening
- : 'linear-gradient(to right, #a8edea, #fed6e3)', // Default/afternoon colors
- }} />
-            <div className="relative z-10 flex items-center space-x-6">
-              <div className="flex-1">
-                <h1 className="text-3xl font-bold mb-4">{greeting}{userName ? `, ${userName}` : ''}!</h1>
-              </div>
-          </div>
-        </div>
-       </div>
+      {/* Song Recommendations Section */}
+      <div className="mb-8">
+        <SongRecommendations userName={userName} />
+      </div>
+      
       <>
       <Tabs defaultValue="music" className="h-full space-y-6">
         <TabsContent value="music" className="border-none p-0 outline-hidden">
@@ -221,7 +197,14 @@ export default function MusicPage() {
                 {isLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md shrink-0" />
+                    <div key={i} className="w-[220px] shrink-0 space-y-3">
+                      <Skeleton className="aspect-square w-full" />
+                      <div className="space-y-2 p-1">
+                        <Skeleton className="h-4 w-3/4" />
+                        <Skeleton className="h-3 w-1/2" />
+                        <Skeleton className="h-3 w-2/3" />
+                      </div>
+                    </div>
                   ))
                 ) : (
                   recentAlbums.map((album) => (
@@ -258,7 +241,14 @@ export default function MusicPage() {
                     {favoritesLoading ? (
                       // Loading skeletons
                       Array.from({ length: 10 }).map((_, i) => (
-                        <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md shrink-0" />
+                        <div key={i} className="w-[220px] shrink-0 space-y-3">
+                          <Skeleton className="aspect-square w-full" />
+                          <div className="space-y-2 p-1">
+                            <Skeleton className="h-4 w-3/4" />
+                            <Skeleton className="h-3 w-1/2" />
+                            <Skeleton className="h-3 w-2/3" />
+                          </div>
+                        </div>
                       ))
                     ) : (
                       favoriteAlbums.map((album) => (
@@ -294,7 +284,14 @@ export default function MusicPage() {
             {isLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
-                    <div key={i} className="w-[220px] h-[320px] bg-muted animate-pulse rounded-md shrink-0" />
+                    <div key={i} className="w-[220px] shrink-0 space-y-3">
+                      <Skeleton className="aspect-square w-full" />
+                      <div className="space-y-2 p-1">
+                        <Skeleton className="h-4 w-3/4" />
+                        <Skeleton className="h-3 w-1/2" />
+                        <Skeleton className="h-3 w-2/3" />
+                      </div>
+                    </div>
                   ))
                 ) : (
                   newestAlbums.map((album) => (
@@ -317,4 +314,12 @@ export default function MusicPage() {
       </>
     </div>
   );
+}
+
+export default function MusicPage() {
+  return (
+    <Suspense fallback={<div className="p-6">Loading...</div>}>
+      <MusicPageContent />
+    </Suspense>
+  );
 }