feat: Enhance sidebar functionality and favorite albums feature

- Updated GitHub workflows to include additional metadata in labels for Docker images.
- Modified Dockerfile to copy README.md into the app directory for documentation purposes.
- Added favorite albums functionality in the album page, allowing users to mark albums as favorites.
- Improved AudioPlayer component to save playback position more frequently.
- Refactored sidebar component to include a favorites section and improved navigation.
- Introduced useFavoriteAlbums hook to manage favorite albums state and local storage.
- Updated settings page to allow users to toggle sidebar visibility.

.github/workflows/nightly.yml

@@ -109,7 +109,10 @@ jobs:
           context: .
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: |
+            ${{ steps.meta.outputs.labels }}
+            org.opencontainers.image.description=$(cat README.md | head -20 | tr '\n' ' ')
+            org.opencontainers.image.documentation=https://github.com/sillyangel/stillnavidrome/blob/main/README.md
           platforms: |
             linux/amd64
             linux/arm64/v8

.github/workflows/release.yml

@@ -66,7 +66,10 @@ jobs:
           context: .
           push: true
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: |
+            ${{ steps.meta.outputs.labels }}
+            org.opencontainers.image.description=$(cat README.md | head -20 | tr '\n' ' ')
+            org.opencontainers.image.documentation=https://github.com/sillyangel/stillnavidrome/blob/main/README.md
           platforms: |
             linux/amd64
             linux/arm64/v8

Dockerfile

@@ -16,6 +16,9 @@ RUN pnpm install
 # Copy source code
 COPY . .
 
+# Copy README.md to the app directory for documentation
+COPY README.md /app/
+
 # Set environment variable placeholders during build
 # These will be replaced at runtime with actual values
 ENV NEXT_PUBLIC_NAVIDROME_URL=NEXT_PUBLIC_NAVIDROME_URL

app/album/[id]/page.tsx

@@ -12,6 +12,8 @@ import Loading from "@/app/components/loading";
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { getNavidromeAPI } from '@/lib/navidrome';
+import { useFavoriteAlbums } from '@/hooks/use-favorite-albums';
+import { Star } from 'lucide-react';
 
 export default function AlbumPage() {
   const { id } = useParams();
@@ -22,6 +24,7 @@ export default function AlbumPage() {
   const [starredSongs, setStarredSongs] = useState<Set<string>>(new Set());
   const { getAlbum, starItem, unstarItem } = useNavidrome();
   const { playTrack, addAlbumToQueue, playAlbum, playAlbumFromTrack, currentTrack } = useAudioPlayer();
+  const { isFavoriteAlbum, toggleFavoriteAlbum } = useFavoriteAlbums();
   const api = getNavidromeAPI();
 
   useEffect(() => {
@@ -137,9 +140,16 @@ export default function AlbumPage() {
           <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">
+              <Button onClick={handleStar} variant="ghost" title={isStarred ? "Unstar album" : "Star album"}>
                 <Heart className={isStarred ? 'text-primary' : 'text-gray-500'} fill={isStarred ? 'var(--primary)' : ""}/>
               </Button>
+              <Button 
+                onClick={() => toggleFavoriteAlbum(album.id)} 
+                variant="ghost" 
+                title={isFavoriteAlbum(album.id) ? "Remove from sidebar favorites" : "Add to sidebar favorites"}
+              >
+                <Star className={isFavoriteAlbum(album.id) ? 'text-yellow-500' : 'text-gray-500'} fill={isFavoriteAlbum(album.id) ? 'currentColor' : ""}/>
+              </Button>
             </div>
             <Link href={`/artist/${album.artistId}`}>
               <p className="text-xl text-primary mt-0 mb-4 underline">{album.artist}</p>

app/components/AudioPlayer.tsx

@@ -116,7 +116,7 @@ export const AudioPlayer: React.FC = () => {
   useEffect(() => {
     const audioCurrent = audioRef.current;
     return () => {
-      if (audioCurrent && currentTrack && audioCurrent.currentTime > 10) {
+      if (audioCurrent && currentTrack && audioCurrent.currentTime > 5) {
         localStorage.setItem('navidrome-current-track-time', audioCurrent.currentTime.toString());
       }
     };
@@ -134,12 +134,12 @@ export const AudioPlayer: React.FC = () => {
       // Notify scrobbler about new track
       onTrackStart(currentTrack);
       
-      // Check for saved timestamp (only restore if more than 10 seconds in)
+      // Check for saved timestamp (only restore if more than 5 seconds in)
       const savedTime = localStorage.getItem('navidrome-current-track-time');
       if (savedTime) {
         const time = parseFloat(savedTime);
-        // Only restore if we were at least 10 seconds in and not near the end
+        // Only restore if we were at least 5 seconds in and not near the end
-        if (time > 10 && time < (currentTrack.duration - 30)) {
+        if (time > 5 && time < (currentTrack.duration - 15)) {
           const restorePosition = () => {
             if (audioCurrent.readyState >= 2) { // HAVE_CURRENT_DATA
               audioCurrent.currentTime = time;
@@ -181,9 +181,9 @@ export const AudioPlayer: React.FC = () => {
       if (audioCurrent && currentTrack) {
         setProgress((audioCurrent.currentTime / audioCurrent.duration) * 100);
         
-        // Save current time every 30 seconds, but only if we've moved forward significantly
+        // Save current time every 10 seconds, but only if we've moved forward significantly
         const currentTime = audioCurrent.currentTime;
-        if (Math.abs(currentTime - lastSavedTime) >= 30 && currentTime > 10) {
+        if (Math.abs(currentTime - lastSavedTime) >= 10 && currentTime > 5) {
           localStorage.setItem('navidrome-current-track-time', currentTime.toString());
           lastSavedTime = currentTime;
         }

app/components/ihateserverside.tsx

@@ -5,7 +5,8 @@ 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"
+import { Toaster } from "@/components/ui/toaster";
+import { useFavoriteAlbums } from "@/hooks/use-favorite-albums";
 
 interface IhateserversideProps {
   children: React.ReactNode;
@@ -18,12 +19,15 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isClient, setIsClient] = useState(false);
   const { playlists } = useNavidrome();
+  const { favoriteAlbums, removeFavoriteAlbum } = useFavoriteAlbums();
 
   // Handle client-side hydration
   useEffect(() => {
     setIsClient(true);
     const savedCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
+    const savedVisible = localStorage.getItem('sidebar-visible') !== 'false'; // Default to true
     setIsSidebarCollapsed(savedCollapsed);
+    setIsSidebarVisible(savedVisible);
   }, []);
 
   const toggleSidebarCollapse = () => {
@@ -34,6 +38,14 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
     }
   };
 
+  const toggleSidebarVisibility = () => {
+    const newVisible = !isSidebarVisible;
+    setIsSidebarVisible(newVisible);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('sidebar-visible', newVisible.toString());
+    }
+  };
+
   const handleTransitionEnd = () => {
     if (!isSidebarVisible) {
       setIsSidebarHidden(true); // This will fully hide the sidebar after transition
@@ -53,7 +65,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
           }}
         >
           <Menu
-            toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
+            toggleSidebar={toggleSidebarVisibility}
             isSidebarVisible={isSidebarVisible}
             toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
             isStatusBarVisible={isStatusBarVisible}
@@ -62,15 +74,19 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
 
         {/* Main Content Area */}
         <div className="flex-1 flex overflow-hidden w-full">
-          <div className="w-64 shrink-0 border-r transition-all duration-200">
+          {isSidebarVisible && (
-            <Sidebar
+            <div className="w-16 shrink-0 border-r transition-all duration-200">
-              playlists={playlists}
+              <Sidebar
-              className="h-full overflow-y-auto"
+                playlists={playlists}
-              collapsed={false}
+                className="h-full overflow-y-auto"
-              onToggle={toggleSidebarCollapse}
+                collapsed={true}
-              onTransitionEnd={handleTransitionEnd}
+                visible={isSidebarVisible}
-            />
+                favoriteAlbums={favoriteAlbums}
-          </div>
+                onToggle={toggleSidebarCollapse}
+                onTransitionEnd={handleTransitionEnd}
+              />
+            </div>
+          )}
           <div className="flex-1 overflow-y-auto min-w-0">
             <div>{children}</div>
           </div>
@@ -93,7 +109,7 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
         }}
       >
         <Menu
-          toggleSidebar={() => setIsSidebarVisible(!isSidebarVisible)}
+          toggleSidebar={toggleSidebarVisibility}
           isSidebarVisible={isSidebarVisible}
           toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
           isStatusBarVisible={isStatusBarVisible}
@@ -101,22 +117,25 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       </div>
 
       {/* Main Content Area */}
-      <div className="flex-1 flex overflow-hidden w-full">
+        <div className="flex-1 flex overflow-hidden w-full">
-        {isSidebarVisible && (
+          {isSidebarVisible && (
-          <div className={`${isSidebarCollapsed ? 'w-16' : 'w-64'} shrink-0 border-r transition-all duration-200`}>
+            <div className="w-16 shrink-0 border-r transition-all duration-200">
-            <Sidebar
+              <Sidebar
-              playlists={playlists}
+                playlists={playlists}
-              className="h-full overflow-y-auto"
+                className="h-full overflow-y-auto"
-              collapsed={isSidebarCollapsed}
+                collapsed={true}
-              onToggle={toggleSidebarCollapse}
+                visible={isSidebarVisible}
-              onTransitionEnd={handleTransitionEnd}
+                favoriteAlbums={favoriteAlbums}
-            />
+                onToggle={toggleSidebarCollapse}
+                onTransitionEnd={handleTransitionEnd}
+                onRemoveFavoriteAlbum={removeFavoriteAlbum}
+              />
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto min-w-0">
+            <div>{children}</div>
           </div>
-        )}
-        <div className="flex-1 overflow-y-auto min-w-0">
-          <div>{children}</div>
         </div>
-      </div>
 
       {/* Floating Audio Player */}
       {isStatusBarVisible && (

app/components/sidebar.tsx

@@ -6,17 +6,33 @@ import { usePathname } from 'next/navigation';
 import { Button } from "../../components/ui/button";
 import { ScrollArea } from "../../components/ui/scroll-area";
 import Link from "next/link";
+import Image from "next/image";
 import { Playlist } from "@/lib/navidrome";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useNavidrome } from "./NavidromeContext";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 
 interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
   playlists: Playlist[];
   collapsed?: boolean;
   onToggle?: () => void;
+  visible?: boolean;
+  favoriteAlbums?: Array<{id: string, name: string, artist: string, coverArt?: string}>;
+  onRemoveFavoriteAlbum?: (albumId: string) => void;
 }
 
-export function Sidebar({ className, playlists, collapsed = false, onToggle }: SidebarProps) {
+export function Sidebar({ className, playlists, collapsed = false, onToggle, visible = true, favoriteAlbums = [], onRemoveFavoriteAlbum }: SidebarProps) {
   const pathname = usePathname();
+  const { api } = useNavidrome();
+
+  if (!visible) {
+    return null;
+  }
   
   // Define all routes and their active states
   const routes = {
@@ -44,74 +60,20 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
   const isAnySidebarRouteActive = Object.values(routes).some(Boolean);
 
   return (
-    <div className={cn("pb-23 relative", className)}>
+    <div className={cn("pb-23 relative w-16", className)}>
-      {/* Collapse/Expand Button */}
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={onToggle}
-        className="absolute top-2 right-2 z-10 h-6 w-6 p-0"
-      >
-        {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-      </Button>
 
       <div className="space-y-4 py-4 pt-6">
         <div className="px-3 py-2">
           <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
-            Discover
+            Navigation
           </p>
           <div className="space-y-1">
-            <Link href="/">
+            {/* Search */}
-              <Button 
-                variant={routes.isRoot ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Listen Now" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <polygon points="10 8 16 12 10 16 10 8" />
-                </svg>
-                {!collapsed && "Listen Now"}
-              </Button>
-            </Link>
-            <Link href="/browse">
-              <Button 
-                variant={routes.isBrowse ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                title={collapsed ? "Browse" : undefined}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
-                >
-                  <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>
-                {!collapsed && "Browse"}
-              </Button>
-            </Link>
             <Link href="/search">
               <Button 
                 variant={routes.isSearch ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
+                className={cn("w-full justify-center px-2")}
-                title={collapsed ? "Search" : undefined}
+                title="Search"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -121,19 +83,43 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
+                  className="h-4 w-4"
                 >
                   <circle cx="11" cy="11" r="8" />
                   <path d="m21 21-4.35-4.35" />
                 </svg>
-                {!collapsed && "Search"}
               </Button>
             </Link>
+            
+            {/* Home */}
+            <Link href="/">
+              <Button 
+                variant={routes.isRoot ? "secondary" : "ghost"} 
+                className={cn("w-full justify-center px-2")}
+                title="Home"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-4 w-4"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polygon points="10 8 16 12 10 16 10 8" />
+                </svg>
+              </Button>
+            </Link>
+            
+            {/* Queue */}
             <Link href="/queue">
               <Button 
                 variant={routes.isQueue ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
+                className={cn("w-full justify-center px-2")}
-                title={collapsed ? "Queue" : undefined}
+                title="Queue"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -143,18 +129,19 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
+                  className="h-4 w-4"
                 >
                   <path d="M3 6h18M3 12h18M3 18h18" />
                 </svg>
-                {!collapsed && "Queue"}
               </Button>
             </Link>
+            
+            {/* Radio */}
             <Link href="/radio">
               <Button 
                 variant={routes.isRadio ? "secondary" : "ghost"} 
-                className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
+                className={cn("w-full justify-center px-2")}
-                title={collapsed ? "Radio" : undefined}
+                title="Radio"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -164,7 +151,7 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                   strokeWidth="2"
                   strokeLinecap="round"
                   strokeLinejoin="round"
-                  className={cn("h-4 w-4", !collapsed && "mr-2")}
+                  className="h-4 w-4"
                 >
                   <path d="M4.9 19.1C1 15.2 1 8.8 4.9 4.9"/>
                   <path d="M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5"/>
@@ -172,22 +159,118 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                   <path d="M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5"/>
                   <path d="M19.1 4.9C23 8.8 23 15.2 19.1 19.1"/>
                 </svg>
-                {!collapsed && "Radio"}
+              </Button>
+            </Link>
+            
+            {/* Artists */}
+            <Link href="/library/artists">
+              <Button 
+                variant={routes.isArtists ? "secondary" : "ghost"} 
+                className={cn("w-full justify-center px-2")}
+                title="Artists"
+              >
+                <svg 
+                  className="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>
+              </Button>
+            </Link>
+            
+            {/* Albums */}
+            <Link href="/library/albums">
+              <Button 
+                variant={routes.isAlbums ? "secondary" : "ghost"} 
+                className={cn("w-full justify-center px-2")}
+                title="Albums"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-4 w-4"
+                >
+                  <path d="m16 6 4 14" />
+                  <path d="M12 6v14" />
+                  <path d="M8 8v12" />
+                  <path d="M4 4v16" />
+                </svg>
+              </Button>
+            </Link>
+            
+            {/* Playlists */}
+            <Link href="/library/playlists">
+              <Button 
+                variant={routes.isPlaylists ? "secondary" : "ghost"} 
+                className={cn("w-full justify-center px-2")}
+                title="Playlists"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="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>
+              </Button>
+            </Link>
+            
+            {/* Favorites */}
+            <Link href="/favorites">
+              <Button 
+                variant={routes.isFavorites ? "secondary" : "ghost"} 
+                className={cn("w-full justify-center px-2")}
+                title="Favorites"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-4 w-4"
+                >
+                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+                </svg>
               </Button>
             </Link>
           </div>
         </div>
-          <div>
+        <div>
-            <div className="px-3 py-0 pt-0">
+          <div className="px-3 py-0 pt-0">
-              <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
+            <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight sr-only")}>
-                Library
+              Library
-              </p>
+            </p>
-              <div className="space-y-1">
+            <div className="space-y-1">
-                <Link href="/library/playlists">
+              {/* Browse */}
+              <Link href="/browse">
                 <Button 
-                  variant={routes.isPlaylists ? "secondary" : "ghost"} 
+                  variant={routes.isBrowse ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-1", collapsed && "justify-center px-2")}
+                  className={cn("w-full justify-center px-2")}
-                  title={collapsed ? "Playlists" : undefined}
+                  title="Browse"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -197,25 +280,25 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className={cn("h-4 w-4", !collapsed && "mr-2")}
+                    className="h-4 w-4"
                   >
-                    <path d="M21 15V6" />
+                    <rect width="7" height="7" x="3" y="3" rx="1" />
-                    <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
+                    <rect width="7" height="7" x="14" y="3" rx="1" />
-                    <path d="M12 12H3" />
+                    <rect width="7" height="7" x="14" y="14" rx="1" />
-                    <path d="M16 6H3" />
+                    <rect width="7" height="7" x="3" y="14" rx="1" />
-                    <path d="M12 18H3" />
                   </svg>
-                  {!collapsed && "Playlists"}
                 </Button>
-                </Link>
+              </Link>
-                <Link href="/library/songs">
+              
+              {/* Songs */}
+              <Link href="/library/songs">
                 <Button 
                   variant={routes.isSongs ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
+                  className={cn("w-full justify-center px-2")}
-                  title={collapsed ? "Songs" : undefined}
+                  title="Songs"
                 >
                   <svg 
-                    className={cn("h-4 w-4", !collapsed && "mr-2")} 
+                    className="h-4 w-4" 
                     xmlns="http://www.w3.org/2000/svg" 
                     viewBox="0 0 24 24" 
                     fill="none" 
@@ -227,108 +310,15 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                     <circle cx="8" cy="18" r="4" />
                     <path d="M12 18V2l7 4" />
                   </svg>
-                  {!collapsed && "Songs"}
                 </Button>
-                </Link>
+              </Link>
-                <Link href="/library/artists">
+              
+              {/* History */}
+              <Link href="/history">
                 <Button 
-                  variant={routes.isArtists ? "secondary" : "ghost"} 
+                  variant={routes.isHistory ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
+                  className={cn("w-full justify-center px-2")}
-                  title={collapsed ? "Artists" : undefined}
+                  title="History"
-                >
-                <svg 
-                  className={cn("h-4 w-4", !collapsed && "mr-2")} 
-                  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>
-                    {!collapsed && "Artists"}
-                  </Button>
-                </Link>
-                <Link href="/library/albums">
-                  <Button 
-                    variant={routes.isAlbums ? "secondary" : "ghost"} 
-                    className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                    title={collapsed ? "Albums" : undefined}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className={cn("h-4 w-4", !collapsed && "mr-2")}
-                    >
-                      <path d="m16 6 4 14" />
-                      <path d="M12 6v14" />
-                      <path d="M8 8v12" />
-                      <path d="M4 4v16" />
-                    </svg>
-                    {!collapsed && "Albums"}
-                  </Button>
-                </Link>
-                <Link href="/history">
-                  <Button 
-                    variant={routes.isHistory ? "secondary" : "ghost"} 
-                    className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                    title={collapsed ? "History" : undefined}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className={cn("h-4 w-4", !collapsed && "mr-2")}
-                    >
-                      <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>
-                    {!collapsed && "History"}
-                  </Button>
-                </Link>
-                <Link href="/favorites">
-                  <Button 
-                    variant={routes.isFavorites ? "secondary" : "ghost"} 
-                    className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                    title={collapsed ? "Favorites" : undefined}
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      className={cn("h-4 w-4", !collapsed && "mr-2")}
-                    >
-                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
-                    </svg>
-                    {!collapsed && "Favorites"}
-                  </Button>
-                </Link>
-              </div>
-            </div>
-          </div>
-          <div className="px-3">
-            <div className="space-y-0">
-              <Link href="/settings">
-                <Button 
-                  variant={routes.isSettings ? "secondary" : "ghost"} 
-                  className={cn("w-full justify-start mb-2", collapsed && "justify-center px-2")}
-                  title={collapsed ? "Settings" : undefined}
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -338,16 +328,131 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className={cn("h-4 w-4", !collapsed && "mr-2")}
+                    className="h-4 w-4"
                   >
-                    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+                    <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" />
-                    <circle cx="12" cy="12" r="3" />
+                    <path d="M12 8v4l4 2" />
                   </svg>
-                  {!collapsed && "Settings"}
                 </Button>
               </Link>
+              
+              {/* Favorite Albums Section */}
+              {favoriteAlbums.length > 0 && (
+                <>
+                  <div className="border-t my-2"></div>
+                  {favoriteAlbums.slice(0, 5).map((album) => (
+                    <ContextMenu key={album.id}>
+                      <ContextMenuTrigger asChild>
+                        <Link href={`/album/${album.id}`}>
+                          <Button 
+                            variant="ghost" 
+                            className="w-full justify-center px-2"
+                            title={`${album.name} - ${album.artist}`}
+                          >
+                            {album.coverArt ? (
+                              <Image 
+                                src={album.coverArt} 
+                                alt={album.name} 
+                                width={16} 
+                                height={16} 
+                                className="w-4 h-4 rounded" 
+                              />
+                            ) : (
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="h-4 w-4"
+                              >
+                                <path d="m16 6 4 14" />
+                                <path d="M12 6v14" />
+                                <path d="M8 8v12" />
+                                <path d="M4 4v16" />
+                              </svg>
+                            )}
+                          </Button>
+                        </Link>
+                      </ContextMenuTrigger>
+                      <ContextMenuContent>
+                        <ContextMenuItem 
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onRemoveFavoriteAlbum?.(album.id);
+                          }}
+                          className="text-destructive focus:text-destructive"
+                        >
+                          Remove from favorites
+                        </ContextMenuItem>
+                      </ContextMenuContent>
+                    </ContextMenu>
+                  ))}
+                </>
+              )}
+              
+              {/* Playlists Section */}
+              {playlists.length > 0 && (
+                <>
+                  <div className="border-t my-2"></div>
+                  {playlists.slice(0, 5).map((playlist) => {
+                    const playlistImageUrl = playlist.coverArt && api
+                      ? api.getCoverArtUrl(playlist.coverArt, 32)
+                      : '/play.png'; // fallback to a music icon
+                    
+                    return (
+                      <Link key={playlist.id} href={`/playlist/${playlist.id}`}>
+                        <Button 
+                          variant="ghost" 
+                          className="w-full justify-center px-2 h-10"
+                          title={`${playlist.name} by ${playlist.owner} - ${playlist.songCount} songs`}
+                        >
+                          <div className="w-6 h-6 rounded-sm overflow-hidden">
+                            <Image
+                              src={playlistImageUrl}
+                              alt={playlist.name}
+                              width={24}
+                              height={24}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                        </Button>
+                      </Link>
+                    );
+                  })}
+                </>
+              )}
             </div>
           </div>
+        </div>
+        <div className="px-3">
+          <div className="space-y-0">
+            <Link href="/settings">
+              <Button 
+                variant={routes.isSettings ? "secondary" : "ghost"} 
+                className={cn("w-full justify-center px-2")}
+                title="Settings"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="h-4 w-4"
+                >
+                  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>
+              </Button>
+            </Link>
+          </div>
+        </div>
       </div>
     </div>
   );

app/settings/page.tsx

@@ -52,6 +52,7 @@ const SettingsPage = () => {
 
     // Sidebar settings
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [sidebarVisible, setSidebarVisible] = useState(true);
 
     // Initialize client-side state after hydration
     useEffect(() => {
@@ -80,6 +81,13 @@ const SettingsPage = () => {
             setSidebarCollapsed(savedSidebarCollapsed === 'true');
         }
 
+        const savedSidebarVisible = localStorage.getItem('sidebar-visible');
+        if (savedSidebarVisible !== null) {
+            setSidebarVisible(savedSidebarVisible === 'true');
+        } else {
+            setSidebarVisible(true); // Default to visible
+        }
+
         // Load Last.fm credentials
         const storedCredentials = localStorage.getItem('lastfm-credentials');
         if (storedCredentials) {
@@ -232,6 +240,24 @@ const SettingsPage = () => {
         }
     };
 
+    const handleSidebarVisibilityToggle = (visible: boolean) => {
+        setSidebarVisible(visible);
+        if (isClient) {
+            localStorage.setItem('sidebar-visible', visible.toString());
+        }
+        toast({
+            title: visible ? "Sidebar Shown" : "Sidebar Hidden",
+            description: visible 
+                ? "Sidebar is now visible" 
+                : "Sidebar is now hidden",
+        });
+        
+        // Trigger a custom event to notify the sidebar component
+        if (typeof window !== 'undefined') {
+            window.dispatchEvent(new CustomEvent('sidebar-visibility-toggle', { detail: { visible } }));
+        }
+    };
+
     const handleLastFmAuth = () => {
         if (!lastFmCredentials.apiKey) {
             toast({
@@ -527,25 +553,25 @@ const SettingsPage = () => {
                     </CardHeader>
                     <CardContent className="space-y-6">
                         <div className="space-y-2">
-                            <Label htmlFor="sidebar-mode">Sidebar Mode</Label>
+                            <Label htmlFor="sidebar-visibility">Sidebar Visibility</Label>
                             <Select 
-                                value={sidebarCollapsed ? "collapsed" : "expanded"} 
+                                value={sidebarVisible ? "visible" : "hidden"} 
-                                onValueChange={(value) => handleSidebarToggle(value === "collapsed")}
+                                onValueChange={(value) => handleSidebarVisibilityToggle(value === "visible")}
                             >
-                                <SelectTrigger id="sidebar-mode">
+                                <SelectTrigger id="sidebar-visibility">
                                     <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
-                                    <SelectItem value="expanded">Expanded (with labels)</SelectItem>
+                                    <SelectItem value="visible">Visible</SelectItem>
-                                    <SelectItem value="collapsed">Collapsed (icons only)</SelectItem>
+                                    <SelectItem value="hidden">Hidden</SelectItem>
                                 </SelectContent>
                             </Select>
                         </div>
 
                         <div className="text-sm text-muted-foreground space-y-2">
-                            <p><strong>Expanded:</strong> Shows full navigation labels</p>
+                            <p><strong>Visible:</strong> Sidebar is always shown with icon navigation</p>
-                            <p><strong>Collapsed:</strong> Shows only icons with tooltips</p>
+                            <p><strong>Hidden:</strong> Sidebar is completely hidden for maximum space</p>
-                            <p className="mt-3"><strong>Note:</strong> You can also toggle the sidebar using the collapse button in the sidebar.</p>
+                            <p className="mt-3"><strong>Note:</strong> The sidebar now shows only icons with tooltips on hover for a cleaner interface.</p>
                         </div>
                     </CardContent>
                 </Card>

hooks/use-favorite-albums.ts

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+
+export interface FavoriteAlbum {
+  id: string;
+  name: string;
+  artist: string;
+  coverArt?: string;
+}
+
+export function useFavoriteAlbums() {
+  const [favoriteAlbums, setFavoriteAlbums] = useState<FavoriteAlbum[]>([]);
+  const { api } = useNavidrome();
+
+  // Load favorite albums from localStorage
+  useEffect(() => {
+    const saved = localStorage.getItem('favorite-albums');
+    if (saved) {
+      try {
+        setFavoriteAlbums(JSON.parse(saved));
+      } catch (error) {
+        console.error('Failed to parse favorite albums:', error);
+      }
+    }
+  }, []);
+
+  // Save to localStorage when favorites change
+  useEffect(() => {
+    localStorage.setItem('favorite-albums', JSON.stringify(favoriteAlbums));
+  }, [favoriteAlbums]);
+
+  const addFavoriteAlbum = (album: FavoriteAlbum) => {
+    setFavoriteAlbums(prev => {
+      const exists = prev.some(fav => fav.id === album.id);
+      if (exists) return prev;
+      return [...prev, album].slice(0, 10); // Keep only 10 favorites
+    });
+  };
+
+  const removeFavoriteAlbum = (albumId: string) => {
+    setFavoriteAlbums(prev => prev.filter(fav => fav.id !== albumId));
+  };
+
+  const isFavoriteAlbum = (albumId: string) => {
+    return favoriteAlbums.some(fav => fav.id === albumId);
+  };
+
+  const toggleFavoriteAlbum = async (albumId: string) => {
+    if (!api) return;
+    
+    try {
+      if (isFavoriteAlbum(albumId)) {
+        removeFavoriteAlbum(albumId);
+      } else {
+        // Fetch album details to add to favorites
+        const { album } = await api.getAlbum(albumId);
+        const favoriteAlbum: FavoriteAlbum = {
+          id: album.id,
+          name: album.name,
+          artist: album.artist,
+          coverArt: album.coverArt ? api.getCoverArtUrl(album.coverArt, 64) : undefined
+        };
+        addFavoriteAlbum(favoriteAlbum);
+      }
+    } catch (error) {
+      console.error('Failed to toggle favorite album:', error);
+    }
+  };
+
+  return {
+    favoriteAlbums,
+    addFavoriteAlbum,
+    removeFavoriteAlbum,
+    isFavoriteAlbum,
+    toggleFavoriteAlbum
+  };
+}