s

app/album/[id]/page.tsx

@@ -0,0 +1,152 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import Image from 'next/image';
+import { Album, Song } from '@/lib/navidrome';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { Play, Heart } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+import { PlusIcon } from "@radix-ui/react-icons";
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext'
+import Loading from "@/app/components/loading";
+import { Separator } from '@/components/ui/separator';
+import { getNavidromeAPI } from '@/lib/navidrome';
+
+export default function AlbumPage() {
+  const { id } = useParams();
+  const [album, setAlbum] = useState<Album | null>(null);
+  const [tracklist, setTracklist] = useState<Song[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isStarred, setIsStarred] = useState(false);
+  const { getAlbum, starItem, unstarItem } = useNavidrome();
+  const { playTrack, addAlbumToQueue, playAlbum, playAlbumFromTrack } = useAudioPlayer();
+  const api = getNavidromeAPI();
+
+  useEffect(() => {
+    const fetchAlbum = async () => {
+      setLoading(true);
+      console.log(`Fetching album with id: ${id}`);
+      
+      try {
+        const albumData = await getAlbum(id as string);
+        setAlbum(albumData.album);
+        setTracklist(albumData.songs);
+        setIsStarred(!!albumData.album.starred);
+        console.log(`Album found: ${albumData.album.name}`);
+      } catch (error) {
+        console.error('Failed to fetch album:', error);
+      }
+      
+      setLoading(false);
+    };
+
+    if (id) {
+      fetchAlbum();
+    }
+  }, [id, getAlbum]);
+
+  const handleStar = async () => {
+    if (!album) return;
+    
+    try {
+      if (isStarred) {
+        await unstarItem(album.id, 'album');
+        setIsStarred(false);
+      } else {
+        await starItem(album.id, 'album');
+        setIsStarred(true);
+      }
+    } catch (error) {
+      console.error('Failed to star/unstar album:', error);
+    }
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (!album) {
+    return <p>Album not found</p>;
+  }
+
+  const handlePlayClick = async (song: Song): Promise<void> => {
+    if (!album) return;
+    
+    try {
+      await playAlbumFromTrack(album.id, song.id);
+    } catch (error) {
+      console.error('Failed to play album from track:', error);
+    }
+  };
+
+  const formatDuration = (duration: number): string => {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  // Get cover art URL with proper fallback
+  const coverArtUrl = album.coverArt 
+    ? api.getCoverArtUrl(album.coverArt, 300)
+    : '/default-user.jpg';
+
+  return (
+    <>
+    <div className="h-full px-4 py-6 lg:px-8">
+      <div className="space-y-4">
+        <div className="flex items-start gap-6">
+          <Image 
+            src={coverArtUrl} 
+            alt={album.name} 
+            width={300} 
+            height={300}
+            className="rounded-md"
+          />
+          <div className="space-y-2">
+            <div className="flex items-center space-x-4">
+              <p className="text-3xl font-semibold tracking-tight">{album.name}</p>
+              <Button onClick={handleStar} variant="ghost">
+                <Heart className={isStarred ? 'text-primary' : 'text-gray-500'} fill={isStarred ? 'var(--primary)' : ""}/>
+              </Button>
+            </div>
+            <Link href={`/artist/${album.artistId}`}>
+              <p className="text-xl text-primary mt-0 mb-4 underline">{album.artist}</p>
+            </Link>
+            <Button className="px-5" onClick={() => playAlbum(album.id)}>
+              <Play />
+              Play Album
+            </Button>
+            <div className="text-sm text-muted-foreground">
+              <p>{album.songCount} songs • {album.year} • {album.genre}</p>
+              <p>Duration: {formatDuration(album.duration)}</p>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Separator />
+          {tracklist.map((song, index) => (
+            <div key={song.id} className="py-2 flex justify-between items-center hover:bg-hover rounded-lg cursor-pointer" onClick={() => handlePlayClick(song)}>
+              <div className="flex items-center">
+                <div className="mr-2 w-6 text-right">{song.track || index + 1}</div>
+                <div>
+                  <p className="font-semibold text-lg flex items-center">
+                    {song.title}
+                  </p>
+                  <p className="text-sm font-normal flex items-center">
+                    <p className="text-gray-400">{song.artist}</p>
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <p className="text-sm mr-4">{formatDuration(song.duration)}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+    <br/>
+    </>
+  );
+}

app/artist/[artist]/page.tsx

@@ -0,0 +1,123 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import { Album, Artist } from '@/lib/navidrome';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { AlbumArtwork } from '@/app/components/album-artwork';
+import Image from 'next/image';
+import { Button } from '@/components/ui/button';
+import { Heart } from 'lucide-react';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import Loading from '@/app/components/loading';
+import { getNavidromeAPI } from '@/lib/navidrome';
+
+export default function ArtistPage() {
+  const { artist: artistId } = useParams();
+  const [isStarred, setIsStarred] = useState(false);
+  const [artistAlbums, setArtistAlbums] = useState<Album[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [artist, setArtist] = useState<Artist | null>(null);
+  const { getArtist, starItem, unstarItem } = useNavidrome();
+  const api = getNavidromeAPI();
+
+  useEffect(() => {
+    const fetchArtistData = async () => {
+      setLoading(true);
+      try {
+        if (artistId) {
+          const artistData = await getArtist(artistId as string);
+          setArtist(artistData.artist);
+          setArtistAlbums(artistData.albums);
+          setIsStarred(!!artistData.artist.starred);
+        }
+      } catch (error) {
+        console.error('Failed to fetch artist data:', error);
+      }
+      setLoading(false);
+    };
+
+    fetchArtistData();
+  }, [artistId, getArtist]);
+
+  const handleStar = async () => {
+    if (!artist) return;
+    
+    try {
+      if (isStarred) {
+        await unstarItem(artist.id, 'artist');
+        setIsStarred(false);
+      } else {
+        await starItem(artist.id, 'artist');
+        setIsStarred(true);
+      }
+    } catch (error) {
+      console.error('Failed to star/unstar artist:', error);
+    }
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (!artist || artistAlbums.length === 0) {
+    return (
+      <div className="h-full px-4 py-6 lg:px-8 flex items-center justify-center">
+        <p>No albums found for this artist</p>
+      </div>
+    );
+  }
+
+  // Get artist image URL with proper fallback
+  const artistImageUrl = artist.coverArt 
+    ? api.getCoverArtUrl(artist.coverArt, 300)
+    : '/default-user.jpg';
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+      <div className="space-y-6">
+        {/* Artist Header */}
+        <div className="relative bg-gradient-to-r from-blue-900 to-purple-900 rounded-lg p-8">
+          <div className="flex items-center space-x-6">
+            <div className="relative">
+              <Image 
+                src={artistImageUrl} 
+                alt={artist.name} 
+                width={120} 
+                height={120}
+                className="rounded-full border-4 border-white shadow-lg"
+              />
+            </div>
+            <div className="flex-1">
+              <h1 className="text-4xl font-bold text-white mb-2">{artist.name}</h1>
+              <p className="text-white/80 mb-4">{artist.albumCount} albums</p>
+              <Button onClick={handleStar} variant="secondary" className="mr-4">
+                <Heart className={isStarred ? 'text-red-500' : 'text-gray-500'} fill={isStarred ? 'red' : 'none'}/>
+                {isStarred ? 'Starred' : 'Star Artist'}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Albums Section */}
+        <div className="space-y-4">
+          <h2 className="text-2xl font-semibold tracking-tight">Albums</h2>
+          <ScrollArea>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 pb-4">
+              {artistAlbums.map((album) => (
+                <AlbumArtwork
+                  key={album.id}
+                  album={album}
+                  className="w-full"
+                  aspectRatio="square"
+                  width={200}
+                  height={200}
+                />
+              ))}
+            </div>
+            <ScrollBar orientation="horizontal" />
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  );
+}

app/browse/page.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+'use client';
+
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Tabs, TabsContent } from '@/components/ui/tabs';
+import { AlbumArtwork } from '@/app/components/album-artwork';
+import { ArtistIcon } from '@/app/components/artist-icon';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import Loading from '@/app/components/loading';
+
+export default function BrowsePage() {
+  const { albums, artists, isLoading } = useNavidrome();
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+    <>
+      <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
+        <TabsContent value="music" className="border-none p-0 outline-none flex flex-col flex-grow">
+        <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <p className="text-2xl font-semibold tracking-tight">
+                Artists
+              </p>
+              <p className="text-sm text-muted-foreground">
+                the people who make the music
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative flex-grow">
+            <div className="relative">
+            <ScrollArea>
+            <div className="flex space-x-4 pb-4">
+            {artists.map((artist) => (
+                  <ArtistIcon
+                    key={artist.id}
+                    artist={artist}
+                    className="flex-shrink-0"
+                    size={150}
+                  />
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <p className="text-2xl font-semibold tracking-tight">
+                Browse
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Browse the full collection of music available.
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative flex-grow">
+            <ScrollArea className="h-full">
+              <div className="h-full overflow-y-auto">
+                <div className="flex flex-wrap gap-4 p-4">
+                  {albums.map((album) => (
+                    <AlbumArtwork
+                      key={album.id}
+                      album={album}
+                      className="w-[230px]"
+                      aspectRatio="square"
+                      width={230}
+                      height={230}
+                    />
+                  ))}
+                </div>
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </>
+    </div>
+  );
+}

app/components/AudioPlayer.tsx

@@ -0,0 +1,202 @@
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward } from "react-icons/fa6";
+import ColorThief from '@neutrixs/colorthief';
+import { Progress } from '@/components/ui/progress';
+import { useToast } from '@/hooks/use-toast';
+
+export const AudioPlayer: React.FC = () => {
+  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue } = useAudioPlayer();
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [isClient, setIsClient] = useState(false);
+  const audioCurrent = audioRef.current;
+  const { toast } = useToast();
+  
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Save position when component unmounts or track changes
+  useEffect(() => {
+    return () => {
+      const audioCurrent = audioRef.current;
+      if (audioCurrent && currentTrack && audioCurrent.currentTime > 10) {
+        localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, audioCurrent.currentTime.toString());
+      }
+    };
+  }, [currentTrack?.id]);
+
+  useEffect(() => {
+    const audioCurrent = audioRef.current;
+    
+    if (currentTrack && audioCurrent && audioCurrent.src !== currentTrack.url) {
+      audioCurrent.src = currentTrack.url;
+      
+      // Check for saved timestamp (only restore if more than 10 seconds in)
+      const savedTime = localStorage.getItem(`navidrome-track-time-${currentTrack.id}`);
+      if (savedTime) {
+        const time = parseFloat(savedTime);
+        // Only restore if we were at least 10 seconds in and not near the end
+        if (time > 10 && time < (currentTrack.duration - 30)) {
+          const restorePosition = () => {
+            if (audioCurrent.readyState >= 2) { // HAVE_CURRENT_DATA
+              audioCurrent.currentTime = time;
+              audioCurrent.removeEventListener('loadeddata', restorePosition);
+            }
+          };
+          
+          if (audioCurrent.readyState >= 2) {
+            audioCurrent.currentTime = time;
+          } else {
+            audioCurrent.addEventListener('loadeddata', restorePosition);
+          }
+        }
+      }
+      
+      audioCurrent.play();
+      setIsPlaying(true);
+    }
+  }, [currentTrack?.id, currentTrack?.url]);
+
+  useEffect(() => {
+    const audioCurrent = audioRef.current;
+    let lastSavedTime = 0;
+
+    const updateProgress = () => {
+      if (audioCurrent && currentTrack) {
+        setProgress((audioCurrent.currentTime / audioCurrent.duration) * 100);
+        
+        // Save current time every 10 seconds, but only if we've moved forward significantly
+        const currentTime = audioCurrent.currentTime;
+        if (Math.abs(currentTime - lastSavedTime) >= 10 && currentTime > 10) {
+          localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, currentTime.toString());
+          lastSavedTime = currentTime;
+        }
+      }
+    };
+
+    const handleTrackEnd = () => {
+      if (currentTrack) {
+        // Clear saved time when track ends
+        localStorage.removeItem(`navidrome-track-time-${currentTrack.id}`);
+      }
+      playNextTrack();
+    };
+
+    const handleSeeked = () => {
+      if (audioCurrent && currentTrack) {
+        // Save immediately when user seeks
+        localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, audioCurrent.currentTime.toString());
+        lastSavedTime = audioCurrent.currentTime;
+      }
+    };
+    
+    if (audioCurrent) {
+      audioCurrent.addEventListener('timeupdate', updateProgress);
+      audioCurrent.addEventListener('ended', handleTrackEnd);
+      audioCurrent.addEventListener('seeked', handleSeeked);
+    }
+    
+    return () => {
+      if (audioCurrent) {
+        audioCurrent.removeEventListener('timeupdate', updateProgress);
+        audioCurrent.removeEventListener('ended', handleTrackEnd);
+        audioCurrent.removeEventListener('seeked', handleSeeked);
+      }
+    };
+  }, [playNextTrack, currentTrack]);
+  
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (audioCurrent && currentTrack) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clickX = e.clientX - rect.left;
+      const newTime = (clickX / rect.width) * audioCurrent.duration;
+      audioCurrent.currentTime = newTime;
+      
+      // Save the new position immediately
+      localStorage.setItem(`navidrome-track-time-${currentTrack.id}`, newTime.toString());
+    }
+  };
+
+  const togglePlayPause = () => {
+    if (audioCurrent) {
+      if (isPlaying) {
+        audioCurrent.pause();
+      } else {
+        audioCurrent.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+    if (audioCurrent) {
+      audioCurrent.volume = newVolume;
+    }
+  };
+  
+  function formatTime(seconds: number): string {
+    if (isNaN(seconds) || seconds < 0) {
+      return "0:00";
+    }
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60).toString().padStart(2, "0");
+    return `${minutes}:${secs}`;
+  }
+  
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <div className="bg-background w-full text-white p-4 border-t border-t-1">
+      {currentTrack ? (
+        <div className="flex items-center">
+          <Image 
+            src={currentTrack.coverArt || '/default-user.jpg'} 
+            alt={currentTrack.name} 
+            width={64} 
+            height={64} 
+            className="w-16 h-16 mr-4 rounded-md" 
+          />
+          <div className="flex-1 w-auto mr-4">
+            <p className="mb-0 font-semibold">{currentTrack.name}</p>
+            <p className='text-sm mt-0 text-gray-400'>{currentTrack.artist}</p>
+          </div>
+          <div className="flex flex-col items-center mr-6">
+            <div className="flex items-center space-x-2 mb-2">
+              <button className="p-2 hover:bg-gray-700 rounded-full transition-colors" onClick={playPreviousTrack}>
+                <FaBackward className="w-4 h-4" />
+              </button>
+              <button className='p-3 hover:bg-gray-700 rounded-full transition-colors' onClick={togglePlayPause}>
+                {isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
+              </button>
+              <button className='p-2 hover:bg-gray-700 rounded-full transition-colors' onClick={playNextTrack}>
+                <FaForward className="w-4 h-4" />
+              </button>
+            </div>
+            <div className="flex items-center space-x-2 w-full">
+              <span className="text-xs text-gray-400 w-10 text-right">
+                {formatTime(audioCurrent?.currentTime ?? 0)}
+              </span>
+              <Progress value={progress} className="flex-1 cursor-pointer" onClick={handleProgressClick}/>
+              <span className="text-xs text-gray-400 w-10">
+                {formatTime(audioCurrent?.duration ?? 0)}
+              </span>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p>No track playing</p>
+      )}
+      <audio ref={audioRef} hidden />
+    </div>
+  );
+};

app/components/AudioPlayerContext.tsx

@@ -0,0 +1,311 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { Song, Album, Artist } from '@/lib/navidrome';
+import { getNavidromeAPI } from '@/lib/navidrome';
+import { useToast } from "@/hooks/use-toast";
+
+interface Track {
+  id: string;
+  name: string;
+  url: string;
+  artist: string;
+  album: string;
+  duration: number;
+  coverArt?: string;
+  albumId: string;
+  artistId: string;
+}
+
+interface AudioPlayerContextProps {
+  currentTrack: Track | null;
+  playTrack: (track: Track) => void;
+  queue: Track[];
+  addToQueue: (track: Track) => void;
+  playNextTrack: () => void;
+  clearQueue: () => void;
+  addAlbumToQueue: (albumId: string) => Promise<void>;
+  playAlbum: (albumId: string) => Promise<void>;
+  playAlbumFromTrack: (albumId: string, startingSongId: string) => Promise<void>;
+  removeTrackFromQueue: (index: number) => void;
+  skipToTrackInQueue: (index: number) => void;
+  addArtistToQueue: (artistId: string) => Promise<void>;
+  playPreviousTrack: () => void;
+  isLoading: boolean;
+}
+
+const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
+
+export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
+  const [queue, setQueue] = useState<Track[]>([]);
+  const [playedTracks, setPlayedTracks] = useState<Track[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const { toast } = useToast();
+  const api = useMemo(() => getNavidromeAPI(), []);
+
+  useEffect(() => {
+    const savedQueue = localStorage.getItem('navidrome-audioQueue');
+    if (savedQueue) {
+      try {
+        setQueue(JSON.parse(savedQueue));
+      } catch (error) {
+        console.error('Failed to parse saved queue:', error);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('navidrome-audioQueue', JSON.stringify(queue));
+  }, [queue]);
+
+  useEffect(() => {
+    const savedCurrentTrack = localStorage.getItem('navidrome-currentTrack');
+    if (savedCurrentTrack) {
+      try {
+        setCurrentTrack(JSON.parse(savedCurrentTrack));
+      } catch (error) {
+        console.error('Failed to parse saved current track:', error);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (currentTrack) {
+      localStorage.setItem('navidrome-currentTrack', JSON.stringify(currentTrack));
+    } else {
+      localStorage.removeItem('navidrome-currentTrack');
+    }
+  }, [currentTrack]);
+
+  const songToTrack = useMemo(() => (song: Song): Track => {
+    return {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId
+    };
+  }, [api]);
+
+  const playTrack = useCallback((track: Track) => {
+    if (currentTrack) {
+      setPlayedTracks((prev) => [...prev, currentTrack]);
+    }
+    setCurrentTrack(track);
+    
+    // Scrobble the track
+    api.scrobble(track.id).catch(error => {
+      console.error('Failed to scrobble track:', error);
+    });
+  }, [currentTrack, api]);
+
+  const addToQueue = useCallback((track: Track) => {
+    setQueue((prevQueue) => [...prevQueue, track]);
+  }, []);
+
+  const clearQueue = useCallback(() => {
+    setQueue([]);
+  }, []);
+
+  const removeTrackFromQueue = useCallback((index: number) => {
+    setQueue((prevQueue) => prevQueue.filter((_, i) => i !== index));
+  }, []);
+
+  const playNextTrack = () => {
+    if (queue.length > 0) {
+      const nextTrack = queue[0];
+      setQueue((prevQueue) => prevQueue.slice(1));
+      playTrack(nextTrack);
+    }
+  };
+
+  const playPreviousTrack = () => {
+    if (playedTracks.length > 0) {
+      const previousTrack = playedTracks[playedTracks.length - 1];
+      setPlayedTracks((prevPlayedTracks) => prevPlayedTracks.slice(0, -1));
+      
+      // Add current track back to beginning of queue
+      if (currentTrack) {
+        setQueue((prevQueue) => [currentTrack, ...prevQueue]);
+      }
+      
+      setCurrentTrack(previousTrack);
+    }
+  };
+
+  const addAlbumToQueue = async (albumId: string) => {
+    setIsLoading(true);
+    try {
+      const { album, songs } = await api.getAlbum(albumId);
+      const tracks = songs.map(songToTrack);
+      setQueue((prevQueue) => [...prevQueue, ...tracks]);
+      
+      toast({
+        title: "Album Added",
+        description: `Added "${album.name}" to queue`,
+      });
+    } catch (error) {
+      console.error('Failed to add album to queue:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to add album to queue",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const addArtistToQueue = async (artistId: string) => {
+    setIsLoading(true);
+    try {
+      const { artist, albums } = await api.getArtist(artistId);
+      
+      // Add all albums from this artist to queue
+      for (const album of albums) {
+        const { songs } = await api.getAlbum(album.id);
+        const tracks = songs.map(songToTrack);
+        setQueue((prevQueue) => [...prevQueue, ...tracks]);
+      }
+      
+      toast({
+        title: "Artist Added",
+        description: `Added all albums by "${artist.name}" to queue`,
+      });
+    } catch (error) {
+      console.error('Failed to add artist to queue:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to add artist to queue",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const playAlbum = async (albumId: string) => {
+    setIsLoading(true);
+    try {
+      const { album, songs } = await api.getAlbum(albumId);
+      const tracks = songs.map(songToTrack);
+      
+      // Clear the queue and set the new tracks
+      setQueue(tracks.slice(1)); // All tracks except the first one
+      
+      // Play the first track immediately
+      if (tracks.length > 0) {
+        playTrack(tracks[0]);
+      }
+      
+      toast({
+        title: "Playing Album",
+        description: `Now playing "${album.name}"`,
+      });
+    } catch (error) {
+      console.error('Failed to play album:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to play album",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const playAlbumFromTrack = async (albumId: string, startingSongId: string) => {
+    setIsLoading(true);
+    try {
+      const { album, songs } = await api.getAlbum(albumId);
+      const tracks = songs.map(songToTrack);
+      
+      // Find the starting track index
+      const startingIndex = tracks.findIndex(track => track.id === startingSongId);
+      
+      if (startingIndex === -1) {
+        throw new Error('Starting song not found in album');
+      }
+      
+      // Clear the queue and set the remaining tracks after the starting track
+      setQueue(tracks.slice(startingIndex + 1));
+      
+      // Play the starting track immediately
+      playTrack(tracks[startingIndex]);
+      
+      toast({
+        title: "Playing Album",
+        description: `Playing "${album.name}" from "${tracks[startingIndex].name}"`,
+      });
+    } catch (error) {
+      console.error('Failed to play album from track:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to play album from selected track",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const skipToTrackInQueue = useCallback((index: number) => {
+    if (index >= 0 && index < queue.length) {
+      const targetTrack = queue[index];
+      // Remove all tracks before the target track (including the target track)
+      setQueue((prevQueue) => prevQueue.slice(index + 1));
+      // Play the target track
+      playTrack(targetTrack);
+    }
+  }, [queue, playTrack]);
+
+  const contextValue = useMemo(() => ({
+    currentTrack, 
+    playTrack, 
+    queue, 
+    addToQueue, 
+    playNextTrack, 
+    clearQueue, 
+    addAlbumToQueue, 
+    removeTrackFromQueue, 
+    addArtistToQueue, 
+    playPreviousTrack,
+    isLoading,
+    playAlbum,
+    playAlbumFromTrack,
+    skipToTrackInQueue
+  }), [
+    currentTrack, 
+    queue, 
+    isLoading, 
+    playTrack, 
+    addToQueue, 
+    playNextTrack, 
+    clearQueue, 
+    addAlbumToQueue, 
+    removeTrackFromQueue, 
+    addArtistToQueue, 
+    playPreviousTrack,
+    playAlbum,
+    playAlbumFromTrack,
+    skipToTrackInQueue
+  ]);
+
+  return (
+    <AudioPlayerContext.Provider value={contextValue}>
+      {children}
+    </AudioPlayerContext.Provider>
+  );
+};
+
+export const useAudioPlayer = () => {
+  const context = useContext(AudioPlayerContext);
+  if (!context) {
+    throw new Error('useAudioPlayer must be used within an AudioPlayerProvider');
+  }
+  return context;
+};

app/components/NavidromeContext.tsx

@@ -0,0 +1,295 @@
+'use client';
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { getNavidromeAPI, Album, Artist, Song, Playlist } from '@/lib/navidrome';
+
+interface NavidromeContextType {
+  // Data
+  albums: Album[];
+  artists: Artist[];
+  playlists: Playlist[];
+  
+  // Loading states
+  isLoading: boolean;
+  albumsLoading: boolean;
+  artistsLoading: boolean;
+  playlistsLoading: boolean;
+  
+  // Error states
+  error: string | null;
+  
+  // Methods
+  searchMusic: (query: string) => Promise<{ artists: Artist[]; albums: Album[]; songs: Song[] }>;
+  getAlbum: (albumId: string) => Promise<{ album: Album; songs: Song[] }>;
+  getArtist: (artistId: string) => Promise<{ artist: Artist; albums: Album[] }>;
+  getPlaylist: (playlistId: string) => Promise<{ playlist: Playlist; songs: Song[] }>;
+  getAllSongs: () => Promise<Song[]>;
+  refreshData: () => Promise<void>;
+  createPlaylist: (name: string, songIds?: string[]) => Promise<Playlist>;
+  updatePlaylist: (playlistId: string, name?: string, comment?: string, songIds?: string[]) => Promise<void>;
+  deletePlaylist: (playlistId: string) => Promise<void>;
+  starItem: (id: string, type: 'song' | 'album' | 'artist') => Promise<void>;
+  unstarItem: (id: string, type: 'song' | 'album' | 'artist') => Promise<void>;
+  scrobble: (songId: string) => Promise<void>;
+}
+
+const NavidromeContext = createContext<NavidromeContextType | undefined>(undefined);
+
+interface NavidromeProviderProps {
+  children: ReactNode;
+}
+
+export const NavidromeProvider: React.FC<NavidromeProviderProps> = ({ children }) => {
+  const [albums, setAlbums] = useState<Album[]>([]);
+  const [artists, setArtists] = useState<Artist[]>([]);
+  const [playlists, setPlaylists] = useState<Playlist[]>([]);
+  
+  const [albumsLoading, setAlbumsLoading] = useState(false);
+  const [artistsLoading, setArtistsLoading] = useState(false);
+  const [playlistsLoading, setPlaylistsLoading] = useState(false);
+  
+  const [error, setError] = useState<string | null>(null);
+
+  const isLoading = albumsLoading || artistsLoading || playlistsLoading;
+
+  const api = getNavidromeAPI();
+
+  const loadAlbums = async () => {
+    setAlbumsLoading(true);
+    setError(null);
+    try {
+      const recentAlbums = await api.getAlbums('recent', 50);
+      const newestAlbums = await api.getAlbums('newest', 50);
+      
+      // Combine and deduplicate albums
+      const allAlbums = [...recentAlbums, ...newestAlbums];
+      const uniqueAlbums = allAlbums.filter((album, index, self) =>
+        index === self.findIndex(a => a.id === album.id)
+      );
+      
+      setAlbums(uniqueAlbums);
+    } catch (err) {
+      console.error('Failed to load albums:', err);
+      setError('Failed to load albums');
+    } finally {
+      setAlbumsLoading(false);
+    }
+  };
+
+  const loadArtists = async () => {
+    setArtistsLoading(true);
+    setError(null);
+    try {
+      const artistList = await api.getArtists();
+      setArtists(artistList);
+    } catch (err) {
+      console.error('Failed to load artists:', err);
+      setError('Failed to load artists');
+    } finally {
+      setArtistsLoading(false);
+    }
+  };
+
+  const loadPlaylists = async () => {
+    setPlaylistsLoading(true);
+    setError(null);
+    try {
+      const playlistList = await api.getPlaylists();
+      setPlaylists(playlistList);
+    } catch (err) {
+      console.error('Failed to load playlists:', err);
+      setError('Failed to load playlists');
+    } finally {
+      setPlaylistsLoading(false);
+    }
+  };
+
+  const refreshData = async () => {
+    await Promise.all([loadAlbums(), loadArtists(), loadPlaylists()]);
+  };
+
+  const searchMusic = async (query: string) => {
+    setError(null);
+    try {
+      return await api.search(query);
+    } catch (err) {
+      console.error('Search failed:', err);
+      setError('Search failed');
+      return { artists: [], albums: [], songs: [] };
+    }
+  };
+
+  const getAlbum = async (albumId: string) => {
+    setError(null);
+    try {
+      return await api.getAlbum(albumId);
+    } catch (err) {
+      console.error('Failed to get album:', err);
+      setError('Failed to get album');
+      throw err;
+    }
+  };
+
+  const getArtist = async (artistId: string) => {
+    setError(null);
+    try {
+      return await api.getArtist(artistId);
+    } catch (err) {
+      console.error('Failed to get artist:', err);
+      setError('Failed to get artist');
+      throw err;
+    }
+  };
+
+  const getPlaylist = async (playlistId: string) => {
+    setError(null);
+    try {
+      return await api.getPlaylist(playlistId);
+    } catch (err) {
+      console.error('Failed to get playlist:', err);
+      setError('Failed to get playlist');
+      throw err;
+    }
+  };
+
+  const getAllSongs = async () => {
+    setError(null);
+    try {
+      return await api.getAllSongs();
+    } catch (err) {
+      console.error('Failed to get all songs:', err);
+      setError('Failed to get all songs');
+      throw err;
+    }
+  };
+
+  const createPlaylist = async (name: string, songIds?: string[]) => {
+    setError(null);
+    try {
+      const playlist = await api.createPlaylist(name, songIds);
+      await loadPlaylists(); // Refresh playlists
+      return playlist;
+    } catch (err) {
+      console.error('Failed to create playlist:', err);
+      setError('Failed to create playlist');
+      throw err;
+    }
+  };
+
+  const updatePlaylist = async (playlistId: string, name?: string, comment?: string, songIds?: string[]) => {
+    setError(null);
+    try {
+      await api.updatePlaylist(playlistId, name, comment, songIds);
+      await loadPlaylists(); // Refresh playlists
+    } catch (err) {
+      console.error('Failed to update playlist:', err);
+      setError('Failed to update playlist');
+      throw err;
+    }
+  };
+
+  const deletePlaylist = async (playlistId: string) => {
+    setError(null);
+    try {
+      await api.deletePlaylist(playlistId);
+      await loadPlaylists(); // Refresh playlists
+    } catch (err) {
+      console.error('Failed to delete playlist:', err);
+      setError('Failed to delete playlist');
+      throw err;
+    }
+  };
+
+  const starItem = async (id: string, type: 'song' | 'album' | 'artist') => {
+    setError(null);
+    try {
+      await api.star(id, type);
+    } catch (err) {
+      console.error('Failed to star item:', err);
+      setError('Failed to star item');
+      throw err;
+    }
+  };
+
+  const unstarItem = async (id: string, type: 'song' | 'album' | 'artist') => {
+    setError(null);
+    try {
+      await api.unstar(id, type);
+    } catch (err) {
+      console.error('Failed to unstar item:', err);
+      setError('Failed to unstar item');
+      throw err;
+    }
+  };
+
+  const scrobble = async (songId: string) => {
+    try {
+      await api.scrobble(songId);
+    } catch (err) {
+      console.error('Failed to scrobble:', err);
+      // Don't set error state for scrobbling failures as they're not critical
+    }
+  };
+
+  useEffect(() => {
+    // Test connection and load initial data
+    const initialize = async () => {
+      try {
+        const isConnected = await api.ping();
+        if (isConnected) {
+          await refreshData();
+        } else {
+          setError('Failed to connect to Navidrome server');
+        }
+      } catch (err) {
+        console.error('Failed to initialize Navidrome:', err);
+        setError('Failed to initialize Navidrome connection');
+      }
+    };
+
+    initialize();
+  }, []);
+
+  const value: NavidromeContextType = {
+    // Data
+    albums,
+    artists,
+    playlists,
+    
+    // Loading states
+    isLoading,
+    albumsLoading,
+    artistsLoading,
+    playlistsLoading,
+    
+    // Error state
+    error,
+    
+    // Methods
+    searchMusic,
+    getAlbum,
+    getArtist,
+    getPlaylist,
+    getAllSongs,
+    refreshData,
+    createPlaylist,
+    updatePlaylist,
+    deletePlaylist,
+    starItem,
+    unstarItem,
+    scrobble
+  };
+
+  return (
+    <NavidromeContext.Provider value={value}>
+      {children}
+    </NavidromeContext.Provider>
+  );
+};
+
+export const useNavidrome = (): NavidromeContextType => {
+  const context = useContext(NavidromeContext);
+  if (context === undefined) {
+    throw new Error('useNavidrome must be used within a NavidromeProvider');
+  }
+  return context;
+};

app/components/album-artwork.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import Image from "next/image"
+import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { useRouter } from 'next/navigation';
+
+import { cn } from "@/lib/utils"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "../../components/ui/context-menu"
+
+import { Album } from "@/lib/navidrome"
+import { useNavidrome } from "./NavidromeContext"
+import Link from "next/link";
+import { useAudioPlayer } from "@/app/components/AudioPlayerContext";
+import { getNavidromeAPI } from "@/lib/navidrome";
+
+interface AlbumArtworkProps extends React.HTMLAttributes<HTMLDivElement> {
+  album: Album
+  aspectRatio?: "portrait" | "square"
+  width?: number
+  height?: number
+}
+
+export function AlbumArtwork({
+  album,
+  aspectRatio = "portrait",
+  width,
+  height,
+  className,
+  ...props
+}: AlbumArtworkProps) {
+  const router = useRouter();
+  const { addAlbumToQueue } = useAudioPlayer();
+  const { playlists, starItem, unstarItem } = useNavidrome();
+  const api = getNavidromeAPI();
+
+  const handleClick = () => {
+    router.push(`/album/${album.id}`);
+  };
+
+  const handleAddToQueue = () => {
+    addAlbumToQueue(album.id);
+  };
+
+  const handleStar = () => {
+    if (album.starred) {
+      unstarItem(album.id, 'album');
+    } else {
+      starItem(album.id, 'album');
+    }
+  };
+
+  // Get cover art URL with proper fallback
+  const coverArtUrl = album.coverArt 
+    ? api.getCoverArtUrl(album.coverArt, 300)
+    : '/default-user.jpg';
+
+  return (
+    <div className={cn("space-y-3", className)} {...props}>
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <div onClick={handleClick} className="overflow-hidden rounded-md">
+            <Image
+              src={coverArtUrl}
+              alt={album.name}
+              width={width}
+              height={height}
+              
+              className={cn(
+                "h-auto w-auto object-cover transition-all hover:scale-105",
+                aspectRatio === "portrait" ? "aspect-[3/4]" : "aspect-square"
+              )}
+            />
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-40">
+          <ContextMenuItem onClick={handleStar}>
+            {album.starred ? 'Remove from Favorites' : 'Add to Favorites'}
+          </ContextMenuItem>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
+            <ContextMenuSubContent className="w-48">
+              <ContextMenuItem>
+                <PlusCircledIcon className="mr-2 h-4 w-4" />
+                New Playlist
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              {playlists.map((playlist) => (
+                <ContextMenuItem key={playlist.id}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="mr-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 15V6M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12 12H3M16 6H3M12 18H3" />
+                  </svg>
+                  {playlist.name}
+                </ContextMenuItem>
+              ))}
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={handleAddToQueue}>Add Album to Queue</ContextMenuItem>
+          <ContextMenuItem>Play Next</ContextMenuItem>
+          <ContextMenuItem>Play Later</ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={handleStar}>
+            {album.starred ? '★ Starred' : '☆ Star'}
+          </ContextMenuItem>
+          <ContextMenuItem>Share</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+      <div className="space-y-1 text-sm" >
+        <p className="font-medium leading-none" onClick={handleClick}>{album.name}</p>
+        <p className="text-xs text-muted-foreground underline">
+          <Link href={`/artist/${album.artistId}`}>{album.artist}</Link>
+        </p>
+      </div>
+    </div>
+  )
+}

app/components/artist-icon.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import Image from "next/image"
+import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { useRouter } from 'next/navigation';
+
+import { cn } from "@/lib/utils"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "../../components/ui/context-menu"
+
+import { Artist } from "@/lib/navidrome"
+import { useNavidrome } from "./NavidromeContext"
+import { useAudioPlayer } from "@/app/components/AudioPlayerContext";
+import { getNavidromeAPI } from "@/lib/navidrome";
+
+interface ArtistIconProps extends React.HTMLAttributes<HTMLDivElement> {
+  artist: Artist
+  size?: number
+}
+
+export function ArtistIcon({
+  artist,
+  size = 150,
+  className,
+  ...props
+}: ArtistIconProps) {
+  const router = useRouter();
+  const { addArtistToQueue } = useAudioPlayer();
+  const { playlists, starItem, unstarItem } = useNavidrome();
+  const api = getNavidromeAPI();
+  
+  const handleClick = () => {
+    router.push(`/artist/${artist.id}`);
+  };
+
+  const handleAddToQueue = () => {
+    addArtistToQueue(artist.id);
+  };
+
+  const handleStar = () => {
+    if (artist.starred) {
+      unstarItem(artist.id, 'artist');
+    } else {
+      starItem(artist.id, 'artist');
+    }
+  };
+
+  // Get cover art URL with proper fallback
+  const artistImageUrl = artist.coverArt 
+    ? api.getCoverArtUrl(artist.coverArt, 200)
+    : '/default-user.jpg';
+
+  return (
+    <div className={cn("space-y-3", className)} {...props}>
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <div className={cn("overflow-hidden")} onClick={handleClick}>
+            <Image
+              src={artistImageUrl}
+              alt={artist.name}
+              width={width}
+              height={height}
+              className={cn(
+                "transition-all hover:scale-105"
+              )}
+            />
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-40">
+          <ContextMenuItem onClick={handleStar}>
+            {artist.starred ? 'Remove from Favorites' : 'Add to Favorites'}
+          </ContextMenuItem>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
+            <ContextMenuSubContent className="w-48">
+              <ContextMenuItem>
+                <PlusCircledIcon className="mr-2 h-4 w-4" />
+                New Playlist
+              </ContextMenuItem>
+              <ContextMenuSeparator />
+              {playlists.map((playlist) => (
+                <ContextMenuItem key={playlist.id}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    className="mr-2 h-4 w-4"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M21 15V6M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12 12H3M16 6H3M12 18H3" />
+                  </svg>
+                  {playlist.name}
+                </ContextMenuItem>
+              ))}
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={handleAddToQueue}>Add All Songs to Queue</ContextMenuItem>
+          <ContextMenuItem>Play Next</ContextMenuItem>
+          <ContextMenuItem>Play Later</ContextMenuItem>
+          <ContextMenuSeparator />
+          <ContextMenuItem onClick={handleStar}>
+            {artist.starred ? '★ Starred' : '☆ Star'}
+          </ContextMenuItem>
+          <ContextMenuItem>Share</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+      <div className="space-y-1 text-sm" onClick={handleClick}>
+        <p className="font-medium leading-none text-center">{artist.name}</p>
+        <p className="text-xs text-muted-foreground text-center">{artist.albumCount} albums</p>
+      </div>
+    </div>
+  );
+}

app/components/feedbackpopup.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+const FeedbackPopup: React.FC = () => {
+  const [showPopup, setShowPopup] = useState(false);
+
+  useEffect(() => {
+    const isFirstVisit = localStorage.getItem('isFirstVisit');
+    if (!isFirstVisit) {
+      setShowPopup(true);
+      localStorage.setItem('isFirstVisit', 'true');
+    }
+  }, []);
+
+  const handleClosePopup = () => {
+    setShowPopup(false);
+  };
+
+  if (!showPopup) return null;
+
+  return (
+    <div className="fixed inset-0 flex justify-center items-start bg-black bg-opacity-50 z-50">
+      <div className="bg-border p-6 rounded-lg mt-10 text-center">
+        <h2 className="text-xl font-bold mb-4">We value your feedback!</h2>
+        <p className="mb-4">Please take a moment to fill out our feedback form.</p>
+        <a 
+          href="https://forms.gle/yHaXE4jEubsKsE6f6" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="text-blue-500 underline mb-4 block"
+        >
+          Give Feedback
+        </a>
+        <button 
+          onClick={handleClosePopup} 
+          className="bg-blue-500 text-white px-4 py-2 rounded"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default FeedbackPopup;

app/components/ihateserverside.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Menu } from "@/app/components/menu";
+import { Sidebar } from "@/app/components/sidebar";
+import { useNavidrome } from "@/app/components/NavidromeContext";
+import { AudioPlayer } from "./AudioPlayer";
+import { Toaster } from "@/components/ui/toaster"
+
+interface IhateserversideProps {
+  children: React.ReactNode;
+}
+
+const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
+  const [isSidebarVisible, setIsSidebarVisible] = useState(true);
+  const [isStatusBarVisible, setIsStatusBarVisible] = useState(true);
+  const [isSidebarHidden, setIsSidebarHidden] = useState(false);
+  const { playlists } = useNavidrome();
+
+  const handleTransitionEnd = () => {
+    if (!isSidebarVisible) {
+      setIsSidebarHidden(true); // This will fully hide the sidebar after transition
+    }
+  };
+  return (
+    <div className="hidden md:flex md:flex-col md:h-screen">
+      {/* Top Menu */}
+      <div className="sticky top-0 z-10 bg-background border-b">
+        <Menu
+          toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
+          isSidebarVisible={isSidebarVisible}
+          toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
+          isStatusBarVisible={isStatusBarVisible}
+        />
+      </div>
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex overflow-hidden">
+        {isSidebarVisible && (
+          <div className="w-64 flex-shrink-0">
+            <Sidebar
+              playlists={playlists}
+              className="h-full overflow-y-auto"
+              onTransitionEnd={handleTransitionEnd}
+            />
+          </div>
+        )}
+        <div className={`flex-1 overflow-y-auto ${isStatusBarVisible ? 'pb-24' : ''}`}>
+          <div>{children}</div>
+        </div>
+      </div>
+
+      {/* Audio Player */}
+      {isStatusBarVisible && (
+        <div className="fixed bottom-0 left-0 right-0 z-50 bg-background">
+          <AudioPlayer />
+        </div>
+      )}
+      <Toaster />
+    </div>
+  );
+};
+
+export default Ihateserverside;

app/components/loading.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import React from 'react';
+
+const Loading: React.FC = () => {
+  return (
+    <>
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center">
+            <div className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mb-4"></div>
+            <p>Loading...</p>
+          </div>
+        </div>
+    </>
+  );
+};
+
+export default Loading;

app/components/menu.tsx

@@ -0,0 +1,294 @@
+import { useCallback } from "react";
+import { useRouter } from 'next/navigation';
+import Image from "next/image";
+import { Github, Mail } from "lucide-react"
+import {
+    Menubar,
+    MenubarCheckboxItem,
+    MenubarContent,
+    MenubarLabel,
+    MenubarItem,
+    MenubarMenu,
+    MenubarSeparator,
+    MenubarShortcut,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarTrigger,
+  } from "@/components/ui/menubar"
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Separator } from '@/components/ui/separator';
+import { useNavidrome } from "./NavidromeContext";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+  } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+interface MenuProps {
+  toggleSidebar: () => void;
+  isSidebarVisible: boolean;
+  toggleStatusBar: () => void;
+  isStatusBarVisible: boolean;
+}
+
+export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatusBarVisible }: MenuProps) {
+    const [isFullScreen, setIsFullScreen] = useState(false)
+    const router = useRouter();
+    const [open, setOpen] = useState(false);
+    const { isConnected } = useNavidrome();
+
+    // For this demo, we'll show connection status instead of user auth
+    const connectionStatus = isConnected ? "Connected to Navidrome" : "Not connected";
+
+    const handleFullScreen = useCallback(() => {
+      if (!isFullScreen) {
+        document.documentElement.requestFullscreen()
+      } else {
+        document.exitFullscreen()
+      }
+      setIsFullScreen(!isFullScreen)
+    }, [isFullScreen])
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if ((event.metaKey || event.ctrlKey) && event.key === ',') {
+                event.preventDefault();
+                router.push('/settings');
+            }
+            if ((event.metaKey || event.ctrlKey) && event.key === 's') {
+                event.preventDefault();
+                toggleSidebar();
+            }
+            if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
+              event.preventDefault();
+              handleFullScreen();
+            }
+        };
+      
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [router, toggleSidebar, handleFullScreen]);
+
+    return (
+      <>
+      <Menubar className="rounded-none border-b border-none px-2 lg:px-4">
+        <MenubarMenu>
+          <MenubarTrigger className="font-bold">offbrand spotify</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem onClick={() => router.push('/settings')}>
+              Preferences <MenubarShortcut>⌘,</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Hide Music <MenubarShortcut>⌘H</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Hide Others <MenubarShortcut>⇧⌘H</MenubarShortcut>
+            </MenubarItem>
+            <MenubarShortcut />
+            <MenubarItem>
+              Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <div className="border-r-4 w-0"><p className="invisible">j</p></div>
+        <MenubarMenu>
+          <MenubarTrigger className="relative">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger>New</MenubarSubTrigger>
+              <MenubarSubContent className="w-[230px]">
+                <MenubarItem>
+                  Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem disabled>
+                  Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  Smart Playlist <MenubarShortcut>⌥⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>Playlist Folder</MenubarItem>
+                <MenubarItem disabled>Genius Playlist</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarItem>
+              Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Close Window <MenubarShortcut>⌘W</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Library</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Update Cloud Library</MenubarItem>
+                <MenubarItem>Update Genius</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Organize Library</MenubarItem>
+                <MenubarItem>Export Library</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Import Playlist</MenubarItem>
+                <MenubarItem disabled>Export Playlist</MenubarItem>
+                <MenubarItem>Show Duplicate Items</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Get Album Artwork</MenubarItem>
+                <MenubarItem disabled>Get Track Names</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarItem>
+              Import <MenubarShortcut>⌘O</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>Burn Playlist to Disc</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
+            </MenubarItem>
+            <MenubarItem>Convert</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>Page Setup</MenubarItem>
+            <MenubarItem disabled>
+              Print <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem disabled>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem disabled>
+              Cut <MenubarShortcut>⌘X</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Copy <MenubarShortcut>⌘C</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Paste <MenubarShortcut>⌘V</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Select All <MenubarShortcut>⌘A</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Smart Dictation{" "}
+              <MenubarShortcut>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="h-4 w-4"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
+                  <circle cx="17" cy="7" r="5" />
+                </svg>
+              </MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Emoji & Symbols{" "}
+              <MenubarShortcut>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  className="h-4 w-4"
+                  viewBox="0 0 24 24"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10z" />
+                </svg>
+              </MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem disabled>Show Playing Next</MenubarCheckboxItem>
+            <MenubarCheckboxItem disabled>Show Lyrics</MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarItem inset onClick={toggleStatusBar}>
+              {isStatusBarVisible ? "Hide Status Bar" : "Show Status Bar"}
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset onClick={toggleSidebar}>
+              {isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
+              <MenubarShortcut>⌘S</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem inset onClick={handleFullScreen}>
+            {isFullScreen ? "Exit Full Screen" : "Enter Full Screen"}
+          </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger className="hidden md:block">Account</MenubarTrigger>
+          <MenubarContent forceMount>
+            <MenubarLabel>Server Status</MenubarLabel>
+            <MenubarItem>{connectionStatus}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem onClick={() => router.push('/settings')}>
+              Settings
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="sm:max-w-[425px]">
+            <DialogHeader>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div>
+                <Image
+                  src="/splash.png"
+                  alt="music"
+                  width={400}
+                  height={400}
+                  />
+              </div>
+              <Separator />
+              <p>
+                a music player that doesn&apos;t (yet) play music
+              </p>
+                <div className="flex space-x-4">
+                <a href="https://github.com/sillyangel/project-still" target="_blank" rel="noreferrer">
+                  <Github />
+                </a>
+                <a href="mailto:angel@sillyangel.xyz">
+                  <Mail />
+                </a>
+                </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+        </>
+    )
+  }

app/components/sidebar.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { cn } from "@/lib/utils";
+import { usePathname } from 'next/navigation';
+import { Button } from "../../components/ui/button";
+import { ScrollArea } from "../../components/ui/scroll-area";
+import Link from "next/link";
+import { Playlist } from "@/lib/navidrome";
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  playlists: Playlist[];
+}
+
+export function Sidebar({ className, playlists }: SidebarProps) {
+  const isRoot = usePathname() === "/";
+  const isBrowse = usePathname() === "/browse";
+  const isAlbums = usePathname() === "/library/albums";
+  const isArtists = usePathname() === "/library/artists";
+  const isQueue = usePathname() === "/queue";
+  const isHistory = usePathname() === "/history";
+  const isSongs = usePathname() === "/library/songs";  const isPlaylists = usePathname() === "/library/playlists";
+
+  return (
+    <div className={cn("pb-6", className)}>
+      <div className="space-y-4 py-4">
+        <div className="px-3 py-2">
+          <p className="mb-2 px-4 text-lg font-semibold tracking-tight">
+            Discover
+          </p>
+          <div className="space-y-1">
+            <Link href="/">
+              <Button variant={isRoot ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="mr-2 h-4 w-4"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polygon points="10 8 16 12 10 16 10 8" />
+                </svg>
+                Listen Now
+              </Button>
+            </Link>
+            <Link href="/browse">
+              <Button variant={isBrowse ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="mr-2 h-4 w-4"
+                >
+                  <rect width="7" height="7" x="3" y="3" rx="1" />
+                  <rect width="7" height="7" x="14" y="3" rx="1" />
+                  <rect width="7" height="7" x="14" y="14" rx="1" />
+                  <rect width="7" height="7" x="3" y="14" rx="1" />
+                </svg>
+                Browse
+              </Button>
+            </Link>
+            <Link href="/queue">
+              <Button variant={isQueue ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="mr-2 h-4 w-4"
+                >
+                  <path d="M3 6h18M3 12h18M3 18h18" />
+                </svg>
+                Queue
+              </Button>
+            </Link>
+          </div>
+        </div>
+          <div>
+            <div className="px-3 py-2">
+              <p className="mb-2 px-4 text-lg font-semibold tracking-tight">
+                Library
+              </p>
+              <div className="space-y-1">
+                <Link href="/library/playlists">
+                <Button variant={isPlaylists ? "secondary" : "ghost"} className="w-full justify-start mb-1">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="mr-2 h-4 w-4"
+                  >
+                    <path d="M21 15V6" />
+                    <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
+                    <path d="M12 12H3" />
+                    <path d="M16 6H3" />
+                    <path d="M12 18H3" />
+                  </svg>
+                  Playlists
+                </Button>
+                </Link>
+                <Link href="/library/songs">
+                <Button variant={isSongs ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                  <svg className="mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="8" cy="18" r="4" />
+                    <path d="M12 18V2l7 4" />
+                  </svg>
+                  Songs
+                </Button>
+                </Link>
+                <Link href="/library/artists">
+                <Button variant={isArtists ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                <svg className="mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" >
+                      <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
+                      <circle cx="17" cy="7" r="5" />
+                    </svg>
+                    Artists
+                  </Button>
+                </Link>
+                <Link href="/library/albums">
+                  <Button variant={isAlbums ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="mr-2 h-4 w-4"
+                    >
+                      <path d="m16 6 4 14" />
+                      <path d="M12 6v14" />
+                      <path d="M8 8v12" />
+                      <path d="M4 4v16" />
+                    </svg>
+                    Albums
+                  </Button>
+                </Link>
+                <Link href="/history">
+                  <Button variant={isHistory ? "secondary" : "ghost"} className="w-full justify-start mb-2">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="mr-2 h-4 w-4"
+                    >
+                      <path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10 5.52 0 10-4.48 10-10 0-5.52-4.48-10-10-10Z" />
+                      <path d="M12 8v4l4 2" />
+                    </svg>
+                    History
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,120 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --hover: 240 27% 11%;
+  }
+}
+
+
+
+
+:focus-visible { outline-color: var(rgb(59 130 246)); }
+::selection { background-color: var(rgb(59 130 246)); }
+::marker { color: var(rgb(59 130 246)); }
+
+  
+::selection {
+  background: var(--primary);
+}
+
+@layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+    h1 {
+      @apply text-2xl;
+      @apply font-black;
+    }
+    h2 {
+      @apply text-xl;
+      @apply font-black;
+    }
+    h3 {
+      @apply text-lg;
+      @apply font-black;
+    }
+    h4 {
+      @apply text-base;
+      @apply font-black;
+    }
+    h5 {
+      @apply text-sm;
+      @apply font-black;
+    }
+    h6 {
+      @apply text-xs;
+      @apply font-black;
+    }
+    ul {
+      @apply list-disc;
+      @apply ml-9;
+    }
+  }

app/layout.tsx

@@ -0,0 +1,70 @@
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import React from 'react';
+import { Analytics }  from "@vercel/analytics/react";
+import localFont from "next/font/local";
+import "./globals.css";
+import { AudioPlayerProvider } from "./components/AudioPlayerContext";
+import { NavidromeProvider } from "./components/NavidromeContext";
+import { Metadata } from "next";
+import type { Viewport } from 'next';
+import Ihateserverside from './components/ihateserverside';
+
+export const viewport: Viewport = {
+  themeColor: 'black',
+};
+
+export const metadata: Metadata = {
+  title: {
+    template: 'offbrand spotify | %s',
+    default: 'offbrand spotify',
+  },
+  description: 'a very awesome music streaming service',
+  robots: {
+    index: true,
+    follow: true,
+    nocache: true,
+    googleBot: {
+      index: true,
+      follow: false,
+      noimageindex: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
+  },
+};
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  
+
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiase dark bg-background`}>
+        <NavidromeProvider>
+          <AudioPlayerProvider>
+            <SpeedInsights />
+            <Analytics />
+            <Ihateserverside>
+              {children}
+            </Ihateserverside>
+          </AudioPlayerProvider>
+        </NavidromeProvider>
+      </body>
+    </html>
+  );
+}

app/library/albums/page.tsx

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+'use client';
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useState, useEffect } from 'react';
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { AlbumArtwork } from '@/app/components/album-artwork';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { Album } from '@/lib/navidrome';
+import Loading  from '@/app/components/loading';
+
+export default function Albumpage() {
+  const { albums, isLoading } = useNavidrome();
+  const [sortedAlbums, setSortedAlbums] = useState<Album[]>([]);
+
+  useEffect(() => {
+    if (albums.length > 0) {
+      // Sort albums alphabetically by name
+      const sorted = [...albums].sort((a, b) => a.name.localeCompare(b.name));
+      setSortedAlbums(sorted);
+    }
+  }, [albums]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+      <Tabs defaultValue="music" className="h-full space-y-6">
+        <TabsContent value="music" className="border-none p-0 outline-none">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <p className="text-2xl font-semibold tracking-tight">
+                Albums 
+              </p>
+              <p className="text-sm text-muted-foreground">
+                All albums in your music library ({sortedAlbums.length} albums)
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative">
+            <ScrollArea>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 pb-4">
+                {sortedAlbums.map((album) => (
+                  <AlbumArtwork
+                    key={album.id}
+                    album={album}
+                    className="w-full"
+                    aspectRatio="square"
+                    width={200}
+                    height={200}
+                  />
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

app/library/artists/page.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+'use client';
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { useState, useEffect } from 'react';
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { ArtistIcon } from '@/app/components/artist-icon';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { Artist } from '@/lib/navidrome';
+import Loading  from '@/app/components/loading';
+
+export default function ArtistPage() {
+  const { artists, isLoading } = useNavidrome();
+  const [sortedArtists, setSortedArtists] = useState<Artist[]>([]);
+
+  useEffect(() => {
+    if (artists.length > 0) {
+      // Sort artists alphabetically by name
+      const sorted = [...artists].sort((a, b) => a.name.localeCompare(b.name));
+      setSortedArtists(sorted);
+    }
+  }, [artists]);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+      <Tabs defaultValue="music" className="h-full space-y-6">
+        <TabsContent value="music" className="border-none p-0 outline-none">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <p className="text-2xl font-semibold tracking-tight">
+                Artists
+              </p>
+              <p className="text-sm text-muted-foreground">
+                All artists in your music library ({sortedArtists.length} artists)
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative">
+            <ScrollArea>
+              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 pb-4">
+                {sortedArtists.map((artist) => (
+                  <ArtistIcon
+                    key={artist.id}
+                    artist={artist}
+                    className="flex justify-center"
+                    size={150}
+                  />
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

app/library/playlists/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import Loading from '@/app/components/loading';
+import { Button } from '@/components/ui/button';
+import { PlusCircledIcon } from "@radix-ui/react-icons";
+import Link from 'next/link';
+
+const PlaylistsPage: React.FC = () => {
+  const { playlists, isLoading, createPlaylist } = useNavidrome();
+
+  const handleCreatePlaylist = async () => {
+    const name = prompt('Enter playlist name:');
+    if (name) {
+      try {
+        await createPlaylist(name);
+      } catch (error) {
+        console.error('Failed to create playlist:', error);
+      }
+    }
+  };
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+      <Tabs defaultValue="music" className="h-full space-y-6">
+        <TabsContent value="music" className="border-none p-0 outline-none">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <p className="text-2xl font-semibold tracking-tight">
+                Playlists
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Your custom playlists ({playlists.length} playlists)
+              </p>
+            </div>
+            <Button onClick={handleCreatePlaylist}>
+              <PlusCircledIcon className="mr-2 h-4 w-4" />
+              New Playlist
+            </Button>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative">
+            <ScrollArea>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-4">
+                {playlists.map((playlist) => (
+                  <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
+                    <div className="p-4 rounded-lg border border-border hover:bg-accent hover:text-accent-foreground transition-colors cursor-pointer">
+                      <div className="flex items-center space-x-4">
+                        <div className="w-12 h-12 bg-muted rounded-md flex items-center justify-center">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            className="h-6 w-6"
+                            viewBox="0 0 24 24"
+                          >
+                            <path d="M21 15V6M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12 12H3M16 6H3M12 18H3" />
+                          </svg>
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="font-medium leading-none truncate">{playlist.name}</p>
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {playlist.songCount} songs
+                          </p>
+                          {playlist.comment && (
+                            <p className="text-xs text-muted-foreground mt-1 truncate">
+                              {playlist.comment}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default PlaylistsPage;

app/library/songs/page.tsx

@@ -0,0 +1,294 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Song } from '@/lib/navidrome';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search, Play, Plus, Clock, User, Disc } from 'lucide-react';
+import Loading from '@/app/components/loading';
+import { getNavidromeAPI } from '@/lib/navidrome';
+
+type SortOption = 'title' | 'artist' | 'album' | 'year' | 'duration' | 'track';
+type SortDirection = 'asc' | 'desc';
+
+export default function SongsPage() {
+  const { getAllSongs } = useNavidrome();
+  const { playTrack, addToQueue, currentTrack } = useAudioPlayer();
+  const [songs, setSongs] = useState<Song[]>([]);
+  const [filteredSongs, setFilteredSongs] = useState<Song[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<SortOption>('title');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const api = getNavidromeAPI();
+
+  useEffect(() => {
+    const fetchSongs = async () => {
+      setLoading(true);
+      try {
+        const allSongs = await getAllSongs();
+        setSongs(allSongs);
+        setFilteredSongs(allSongs);
+      } catch (error) {
+        console.error('Failed to fetch songs:', error);
+      }
+      setLoading(false);
+    };
+
+    fetchSongs();
+  }, [getAllSongs]);
+
+  useEffect(() => {
+    let filtered = songs;
+
+    // Apply search filter
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      filtered = songs.filter(song =>
+        song.title.toLowerCase().includes(query) ||
+        song.artist.toLowerCase().includes(query) ||
+        song.album.toLowerCase().includes(query)
+      );
+    }
+
+    // Apply sorting
+    filtered = [...filtered].sort((a, b) => {
+      let aValue: string | number;
+      let bValue: string | number;
+
+      switch (sortBy) {
+        case 'title':
+          aValue = a.title.toLowerCase();
+          bValue = b.title.toLowerCase();
+          break;
+        case 'artist':
+          aValue = a.artist.toLowerCase();
+          bValue = b.artist.toLowerCase();
+          break;
+        case 'album':
+          aValue = a.album.toLowerCase();
+          bValue = b.album.toLowerCase();
+          break;
+        case 'year':
+          aValue = a.year || 0;
+          bValue = b.year || 0;
+          break;
+        case 'duration':
+          aValue = a.duration;
+          bValue = b.duration;
+          break;
+        case 'track':
+          aValue = a.track || 0;
+          bValue = b.track || 0;
+          break;
+        default:
+          aValue = a.title.toLowerCase();
+          bValue = b.title.toLowerCase();
+      }
+
+      if (sortDirection === 'asc') {
+        return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+      } else {
+        return aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+      }
+    });
+
+    setFilteredSongs(filtered);
+  }, [songs, searchQuery, sortBy, sortDirection]);
+
+  const handlePlaySong = (song: Song) => {
+    const track = {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId
+    };
+
+    playTrack(track);
+  };
+
+  const handleAddToQueue = (song: Song) => {
+    const track = {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId
+    };
+
+    addToQueue(track);
+  };
+
+  const formatDuration = (seconds: number): string => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
+
+  const isCurrentlyPlaying = (song: Song): boolean => {
+    return currentTrack?.id === song.id;
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="space-y-2">
+          <h1 className="text-3xl font-semibold tracking-tight">Songs</h1>
+          <p className="text-sm text-muted-foreground">
+            {filteredSongs.length} of {songs.length} songs
+          </p>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+            <Input
+              placeholder="Search songs, artists, or albums..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+          <div className="flex gap-2">
+            <Select value={sortBy} onValueChange={(value: SortOption) => setSortBy(value)}>
+              <SelectTrigger className="w-[140px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="title">Title</SelectItem>
+                <SelectItem value="artist">Artist</SelectItem>
+                <SelectItem value="album">Album</SelectItem>
+                <SelectItem value="year">Year</SelectItem>
+                <SelectItem value="duration">Duration</SelectItem>
+                <SelectItem value="track">Track #</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button 
+              variant="outline" 
+              size="sm" 
+              onClick={() => setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc')}
+            >
+              {sortDirection === 'asc' ? '↑' : '↓'}
+            </Button>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Songs List */}
+        <ScrollArea className="h-[calc(100vh-300px)]">
+          {filteredSongs.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">
+                {searchQuery ? 'No songs found matching your search.' : 'No songs available.'}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {filteredSongs.map((song, index) => (
+                <div
+                  key={song.id}
+                  className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
+                    isCurrentlyPlaying(song) ? 'bg-accent/50 border-l-4 border-primary' : ''
+                  }`}
+                  onClick={() => handlePlaySong(song)}
+                >
+                  {/* Track Number / Play Indicator */}
+                  <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                    {isCurrentlyPlaying(song) ? (
+                      <div className="w-4 h-4 mx-auto">
+                        <div className="w-full h-full bg-primary rounded-full animate-pulse" />
+                      </div>
+                    ) : (
+                      <span className="group-hover:hidden">{index + 1}</span>
+                    )}
+                    <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
+                  </div>
+
+                  {/* Album Art */}
+                  <div className="w-12 h-12 mr-4 flex-shrink-0">
+                    <Image
+                      src={song.coverArt ? api.getCoverArtUrl(song.coverArt, 100) : '/default-user.jpg'}
+                      alt={song.album}
+                      width={48}
+                      height={48}
+                      className="w-full h-full object-cover rounded-md"
+                    />
+                  </div>
+
+                  {/* Song Info */}
+                  <div className="flex-1 min-w-0 mr-4">
+                    <div className="flex items-center gap-2 mb-1">
+                      <p className={`font-semibold truncate ${
+                        isCurrentlyPlaying(song) ? 'text-primary' : ''
+                      }`}>
+                        {song.title}
+                      </p>
+                      {song.year && (
+                        <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+                          {song.year}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center text-sm text-muted-foreground space-x-4">
+                      <div className="flex items-center gap-1">
+                        <User className="w-3 h-3" />
+                        <span className="truncate">{song.artist}</span>
+                      </div>
+                      <div className="flex items-center gap-1">
+                        <Disc className="w-3 h-3" />
+                        <span className="truncate">{song.album}</span>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Duration */}
+                  <div className="flex items-center text-sm text-muted-foreground mr-4">
+                    <Clock className="w-3 h-3 mr-1" />
+                    {formatDuration(song.duration)}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleAddToQueue(song);
+                      }}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Plus className="w-4 h-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}

app/manifest.ts

@@ -0,0 +1,44 @@
+import type { MetadataRoute } from 'next'
+ 
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'Offbrand Spotify',
+    short_name: 'Offbrand',
+    description: 'a very offbrand spotify clone',
+    start_url: '/',
+    categories: ["music", "entertainment"],
+    display_override: ['window-controls-overlay'],
+    display: 'standalone',
+    background_color: '#0f0f0f',
+    theme_color: '#0f0f0f',
+    icons: [
+      { 
+         src: '/favicon.ico', 
+         type: 'image/x-icon', 
+         sizes: '16x16 32x32'
+      },
+      { 
+         src: '/icon-192.png', 
+         type: 'image/png', 
+         sizes: '192x192' 
+      },
+      { 
+         src: '/icon-512.png', 
+         type: 'image/png', 
+         sizes: '512x512' 
+      },
+      { 
+         src: '/icon-192-maskable.png', 
+         type: 'image/png', 
+         sizes: '192x192', 
+         purpose: 'maskable' 
+      },
+      { 
+         src: './icon-512-maskable.png', 
+         type: 'image/png', 
+         sizes: '512x512', 
+         purpose: 'maskable'
+      }
+   ],
+  }
+}

app/page.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { ScrollArea, ScrollBar } from '../components/ui/scroll-area';
+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 { Album } from '@/lib/navidrome';
+
+export default function MusicPage() {
+  const { albums, isLoading, error } = useNavidrome();
+  const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
+  const [newestAlbums, setNewestAlbums] = useState<Album[]>([]);
+
+  useEffect(() => {
+    if (albums.length > 0) {
+      // Split albums into recent and newest for display
+      const recent = albums.slice(0, Math.ceil(albums.length / 2));
+      const newest = albums.slice(Math.ceil(albums.length / 2));
+      setRecentAlbums(recent);
+      setNewestAlbums(newest);
+    }
+  }, [albums]);
+
+  if (error) {
+    return (
+      <div className="h-full px-4 py-6 lg:px-8 flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-xl font-semibold text-destructive mb-2">Connection Error</p>
+          <p className="text-muted-foreground">{error}</p>
+          <p className="text-sm text-muted-foreground mt-2">
+            Please check your Navidrome server configuration.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+    <>
+      <Tabs defaultValue="music" className="h-full space-y-6">
+        <TabsContent value="music" className="border-none p-0 outline-none">
+          <div className="flex items-center justify-between">
+            <div className="space-y-1">
+              <p className="text-2xl font-semibold tracking-tight">
+                Recently Added
+              </p>
+              <p className="text-sm text-muted-foreground">
+                Latest additions to your music library.
+              </p>
+            </div>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative">
+            <ScrollArea>
+              <div className="flex space-x-4 pb-4">
+                {isLoading ? (
+                  // Loading skeletons
+                  Array.from({ length: 6 }).map((_, i) => (
+                    <div key={i} className="w-[300px] h-[300px] bg-muted animate-pulse rounded-md" />
+                  ))
+                ) : (
+                  recentAlbums.map((album) => (
+                    <AlbumArtwork
+                      key={album.id}
+                      album={album}
+                      className="w-[300px]"
+                      aspectRatio="square"
+                      width={300}
+                      height={300}
+                    />
+                  ))
+                )}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+          <div className="mt-6 space-y-1">
+            <p className="text-2xl font-semibold tracking-tight">
+              Your Library
+            </p>
+            <p className="text-sm text-muted-foreground">
+              Albums from your music collection.
+            </p>
+          </div>
+          <Separator className="my-4" />
+          <div className="relative">
+            <ScrollArea>
+            <div className="flex space-x-4 pb-4">
+            {isLoading ? (
+                  // Loading skeletons
+                  Array.from({ length: 10 }).map((_, i) => (
+                    <div key={i} className="w-[150px] h-[150px] bg-muted animate-pulse rounded-md" />
+                  ))
+                ) : (
+                  newestAlbums.map((album) => (
+                    <AlbumArtwork
+                      key={album.id}
+                      album={album}
+                      className="w-[150px]"
+                      aspectRatio="square"
+                      width={150}
+                      height={150}
+                    />
+                  ))
+                )}
+              </div>
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          </div>
+        </TabsContent>
+      </Tabs>
+      </>
+    </div>
+  );
+}

app/playlist/[id]/page.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+import Image from 'next/image';
+import { Playlist, Song } from '@/lib/navidrome';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Play, Heart, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import Loading from "@/app/components/loading";
+import { Separator } from '@/components/ui/separator';
+
+export default function PlaylistPage() {
+  const { id } = useParams();
+  const [playlist, setPlaylist] = useState<Playlist | null>(null);
+  const [tracklist, setTracklist] = useState<Song[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { getPlaylist } = useNavidrome();
+  const { playTrack, addToQueue } = useAudioPlayer();
+
+  useEffect(() => {
+    const fetchPlaylist = async () => {
+      setLoading(true);
+      console.log(`Fetching playlist with id: ${id}`);
+      
+      try {
+        const playlistData = await getPlaylist(id as string);
+        setPlaylist(playlistData.playlist);
+        setTracklist(playlistData.songs);
+        console.log(`Playlist found: ${playlistData.playlist.name}`);
+      } catch (error) {
+        console.error('Failed to fetch playlist:', error);
+      }
+      
+      setLoading(false);
+    };
+
+    if (id) {
+      fetchPlaylist();
+    }
+  }, [id, getPlaylist]);
+
+  const handlePlayClick = (song: Song) => {
+    const track = {
+      id: song.id,
+      name: song.title,
+      url: '', // Will be set by the context
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt,
+      albumId: song.albumId,
+      artistId: song.artistId
+    };
+    playTrack(track);
+  };
+
+  const handleAddToQueue = (song: Song) => {
+    const track = {
+      id: song.id,
+      name: song.title,
+      url: '', // Will be set by the context
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt,
+      albumId: song.albumId,
+      artistId: song.artistId
+    };
+    addToQueue(track);
+  };
+
+  const formatDuration = (seconds: number) => {
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
+    return `${minutes}:${secs}`;
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (!playlist) {
+    return (
+      <div className="h-full px-4 py-6 lg:px-8">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold">Playlist not found</h2>
+          <p className="text-muted-foreground">The playlist you're looking for doesn't exist.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full px-4 py-6 lg:px-8">
+      <div className="space-y-4">
+        <div className="flex items-start gap-6">
+          <div className="w-[300px] h-[300px] bg-muted rounded-md flex items-center justify-center">
+            <Play className="h-16 w-16 text-muted-foreground" />
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center space-x-4">
+              <p className="text-3xl font-semibold tracking-tight">{playlist.name}</p>
+            </div>
+            {playlist.comment && (
+              <p className="text-lg text-muted-foreground">{playlist.comment}</p>
+            )}
+            <div className="text-sm text-muted-foreground">
+              <p>{playlist.songCount} songs • {formatDuration(playlist.duration || 0)}</p>
+              {playlist.public !== undefined && (
+                <p>{playlist.public ? 'Public' : 'Private'} playlist</p>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Separator />
+          {tracklist.length > 0 ? (
+            tracklist.map((song, index) => (
+              <div key={song.id} className="py-2 flex justify-between items-center hover:bg-hover rounded-lg cursor-pointer" onClick={() => handlePlayClick(song)}>
+                <div className="flex items-center">
+                  <div className="mr-2 w-6 text-right">{index + 1}</div>
+                  <div>
+                    <p className="font-semibold text-lg flex items-center">
+                      {song.title}
+                    </p>
+                    <p className="text-sm font-normal flex items-center">
+                      <span className="text-gray-400">{song.artist}</span>
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <p className="text-sm mr-4">{formatDuration(song.duration)}</p>
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleAddToQueue(song);
+                    }}
+                  >
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-8">
+              <p className="text-muted-foreground">This playlist is empty</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/queue/page.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+
+const QueuePage: React.FC = () => {
+  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue } = useAudioPlayer();
+
+  return (
+    <div className="p-4">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-semibold mb-1">Queue</h1>
+          <p className="text-sm text-muted-foreground">Click on a track to skip to it</p>
+        </div>
+        <button 
+          onClick={clearQueue} 
+          className="px-4 py-2 bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90"
+          disabled={queue.length === 0}
+        >
+          Clear queue
+        </button>
+      </div>
+
+      {/* Currently Playing */}
+      {currentTrack && (
+        <div className="mb-6">
+          <h2 className="text-lg font-semibold mb-3">Now Playing</h2>
+          <div className="p-4 bg-accent/50 rounded-lg border-l-4 border-primary">
+            <div className="flex items-center">
+              <Image
+                src={currentTrack.coverArt || '/default-user.jpg'}
+                alt={currentTrack.name}
+                width={60}
+                height={60}
+                className="rounded-md mr-4"
+              />
+              <div className="flex-1">
+                <p className="font-semibold text-lg">{currentTrack.name}</p>
+                <p className="text-sm text-muted-foreground">{currentTrack.artist}</p>
+                <p className="text-xs text-muted-foreground">{currentTrack.album}</p>
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {Math.floor(currentTrack.duration / 60)}:{(currentTrack.duration % 60).toString().padStart(2, '0')}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Queue */}
+      <div>
+        <h2 className="text-lg font-semibold mb-3">Up Next</h2>
+        {queue.length === 0 ? (
+          <p className="text-muted-foreground">No tracks in the queue</p>
+        ) : (
+          <div className="space-y-2">
+            {queue.map((track, index) => (
+              <div 
+                key={`${track.id}-${index}`} 
+                className="flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer group"
+                onClick={() => skipToTrackInQueue(index)}
+              >
+                <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                  {index + 1}
+                </div>
+                <Image
+                  src={track.coverArt || '/default-user.jpg'}
+                  alt={track.name}
+                  width={50}
+                  height={50}
+                  className="rounded-md mr-4"
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="font-semibold truncate">{track.name}</p>
+                  <p className="text-sm text-muted-foreground truncate">{track.artist}</p>
+                </div>
+                <div className="flex items-center space-x-4">
+                  <div className="text-sm text-muted-foreground">
+                    {Math.floor(track.duration / 60)}:{(track.duration % 60).toString().padStart(2, '0')}
+                  </div>
+                  <button 
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeTrackFromQueue(index);
+                    }}
+                    className="opacity-0 group-hover:opacity-100 px-3 py-1 text-sm bg-destructive text-destructive-foreground rounded hover:bg-destructive/90 transition-all"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default QueuePage;

app/settings/page.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Label } from '@/components/ui/label';
+import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
+
+const SettingsPage = () => {
+    return (
+        <div className="container mx-auto p-4">
+                    <Label>Theme</Label>
+                    <Select>
+                        <SelectTrigger>
+                            <SelectValue>Light</SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="light">Light</SelectItem>
+                            <SelectItem value="dark">Dark</SelectItem>
+                        </SelectContent>
+                    </Select>
+        </div>
+    );
+};
+
+export default SettingsPage;