feat: fix menubar, add lazy loading, improve image quality, limit search results, filter browse artists

app/components/album-artwork.tsx

@@ -36,6 +36,7 @@ interface AlbumArtworkProps extends Omit<
   aspectRatio?: "portrait" | "square"
   width?: number
   height?: number
+  loading?: 'eager' | 'lazy'
 }
 
 export function AlbumArtwork({
@@ -43,6 +44,7 @@ export function AlbumArtwork({
   aspectRatio = "portrait",
   width,
   height,
+  loading = 'lazy',
   className,
   ...props
 }: AlbumArtworkProps) {
@@ -160,7 +162,7 @@ export function AlbumArtwork({
                   onLoad={handleImageLoad}
                   onError={handleImageError}
                   priority={false}
-                  loading="lazy"
+                  loading={loading}
                 />
               ) : (
                 <div className="w-full h-full bg-muted rounded flex items-center justify-center">

app/components/artist-icon.tsx

@@ -27,6 +27,7 @@ interface ArtistIconProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: number
   imageOnly?: boolean
   responsive?: boolean
+  loading?: 'eager' | 'lazy'
 }
 
 export function ArtistIcon({
@@ -34,6 +35,7 @@ export function ArtistIcon({
   size = 150,
   imageOnly = false,
   responsive = false,
+  loading = 'lazy',
   className,
   ...props
 }: ArtistIconProps) {
@@ -77,6 +79,7 @@ export function ArtistIcon({
           width={size}
           height={size}
           className="w-full h-full object-cover transition-all hover:scale-105"
+          loading={loading}
         />
       </div>
     );
@@ -116,6 +119,7 @@ export function ArtistIcon({
                       }
                   )}
                   className={isResponsive ? "object-cover" : "object-cover w-full h-full"}
+                  loading={loading}
                 />
               </div>
             </div>

app/components/menu.tsx

@@ -191,11 +191,8 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           <MenubarMenu>
         <MenubarTrigger className="relative">File</MenubarTrigger>
         <MenubarContent>
-          <MenubarSub>
-            <MenubarSubTrigger>New</MenubarSubTrigger>
-            <MenubarSubContent className="w-[230px]">
-          <MenubarItem>
-            Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+          <MenubarItem onClick={() => router.push('/library/playlists')}>
+            View Playlists
           </MenubarItem>
           <MenubarItem disabled>
             Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
@@ -205,8 +202,6 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarItem>
           <MenubarItem>Playlist Folder</MenubarItem>
           <MenubarItem disabled>Genius Playlist</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
           <MenubarItem>
             Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
           </MenubarItem>
@@ -386,7 +381,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
               ) : navidromeUrl ? (
                 navidromeUrl
               ) : (
-                <span className="italic text-gray-400">Not set</span>
+                <span className="italic text-gray-400">Auto-configured</span>
               )}
             </span>
           </div>