Spotify UI V0 Template: Music Player Layout for Next.js

Replace the fake setInterval timer in the usePlayer hook with the Web Audio API's HTMLAudioElement. Add an audioRef = useRef<HTMLAudioElement>(null) inside usePlayer and render an <audio ref={audioRef} src={currentTrack.audioUrl} /> element in NowPlayingBar. Connect the PlaybackControls play button to audioRef.current.play() and the pause button to audioRef.current.pause(). Sync the ProgressSlider's value with the audio element's currentTime by adding a timeupdate event listener that updates a state variable. Add a cleanup in useEffect to remove the timeupdate listener on unmount. Initialize all time display values with '0:00' to avoid React hydration mismatch on the ProgressSlider.

Add a light/dark theme toggle button to the SpotifyLayout header area. When light mode is active, update the SpotifyLayout background to bg-white, the SidebarLibrary panel to bg-gray-50, and the NowPlayingBar to bg-gray-100 border-t border-gray-200. Change all text colors from text-white and text-zinc-400 to text-gray-900 and text-gray-500. Update each AlbumGrid CardAlbum to use bg-gray-100 hover:bg-gray-200. Use Tailwind's dark: prefix classes and toggle a class attribute on the html element to switch between modes.

Add a text input in the main content area's header row — above the AlbumGrid — with a placeholder 'Search tracks and albums…'. Wire it to a searchQuery state variable. Filter the albumData array in real-time using a case-insensitive String.includes() check on both the track title and artist name fields. When the filtered array is empty, render a centered message 'No results for "{searchQuery}"' in place of the AlbumGrid. Keep the SidebarLibrary search input filtering playlists independently from this main search.

Create a GET /api/spotify/tracks route handler in Next.js App Router that calls the Spotify Web API's Get Playlist Tracks endpoint. Use a SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET stored as server-side environment variables (no NEXT_PUBLIC_ prefix) to implement the Client Credentials OAuth flow — POST to https://accounts.spotify.com/api/token and cache the access token in memory with its expiry. Return a normalized array of { id, title, artist, albumArt, durationMs } objects. In the AlbumGrid component, fetch this route on mount using useEffect and replace the hardcoded albumData constant with the API response. Show shadcn/ui Skeleton loaders in the AlbumGrid card positions while the data loads.

Add a Lucide Heart icon button to each AlbumGrid CardAlbum. When clicked, call a Server Action that inserts { user_id, track_id, track_title, artist, cover_url } into a Supabase liked_tracks table. On mount, fetch the user's liked track IDs from Supabase using supabase.from('liked_tracks').select('track_id').eq('user_id', userId) and store them in a Set for O(1) lookups. Render a filled HeartFilled icon for tracks in the Set and an outline Heart for the rest. Use NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY from environment variables. Use Clerk's auth() server function to get userId — redirect to /sign-in if the user is not authenticated.