s

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>
+  );
+}