From 4499bdf147a04aefe960b5b0168d58eac6f135db Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Tue, 1 Jul 2025 23:33:40 +0000
Subject: [PATCH] feat: update commit SHA, enhance UI components with improved
 layouts and functionality, and refine Favorites page with new features

---
 .env.local                       |  2 +-
 app/browse/page.tsx              |  2 +-
 app/components/WhatsNewPopup.tsx | 10 ++++++--
 app/components/artist-icon.tsx   |  5 ++--
 app/components/sidebar.tsx       | 10 ++++----
 app/favorites/page.tsx           | 42 +++++++-------------------------
 app/library/artists/page.tsx     |  5 +---
 7 files changed, 27 insertions(+), 49 deletions(-)

diff --git a/.env.local b/.env.local
index d7ce315..0b91c98 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=87a2f06
+NEXT_PUBLIC_COMMIT_SHA=0cb4f23
diff --git a/app/browse/page.tsx b/app/browse/page.tsx
index f89f3ee..38d937b 100644
--- a/app/browse/page.tsx
+++ b/app/browse/page.tsx
@@ -119,7 +119,7 @@ export default function BrowsePage() {
                   <ArtistIcon
                     key={artist.id}
                     artist={artist}
-                    className="flex-shrink-0"
+                    className="flex-shrink-0 overflow-hidden"
                     size={190}
                   />
                 ))}
diff --git a/app/components/WhatsNewPopup.tsx b/app/components/WhatsNewPopup.tsx
index 17dc71d..60f4593 100644
--- a/app/components/WhatsNewPopup.tsx
+++ b/app/components/WhatsNewPopup.tsx
@@ -17,7 +17,6 @@ const CHANGELOG = [
     date: '2025-07-01',
     title: 'Initial Release',
     changes: [
-      'Added Favorites functionality for albums, songs, and artists',
       'Integrated standalone Last.fm scrobbling support',
       'Added collapsible sidebar with icon-only mode',
       'Improved search and browsing experience',
@@ -27,9 +26,16 @@ const CHANGELOG = [
       'Added settings page for customization options',
       'Introduced Whats New popup for version updates',
       'Improved UI consistency with new Badge component',
+      'New Favorites page with album, song, and artist sections',
     ],
     breaking: [],
-    fixes: []
+    fixes: [
+      'Fixed issue with audio player not resuming playback after pause',
+      'Resolved bug with search results not displaying correctly',
+      'Improved performance for large libraries',
+      'Fixed layout issues on smaller screens',
+      'Resolved scrobbling issues with Last.fm integration'
+    ]
   }
 ];
 
diff --git a/app/components/artist-icon.tsx b/app/components/artist-icon.tsx
index 894cf7b..59230f5 100644
--- a/app/components/artist-icon.tsx
+++ b/app/components/artist-icon.tsx
@@ -83,11 +83,10 @@ export function ArtistIcon({
     <div className={cn("space-y-3", className)} {...props}>
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card key={artist.id} className="overflow-hidden">
+          <Card key={artist.id} className="overflow-hidden cursor-pointer" onClick={() => handleClick()}>
             <div
-              className="aspect-square relative group cursor-pointer"
+              className="aspect-square relative group"
               style={{ width: size, height: size }}
-              onClick={() => handleClick()}
             >
               <div className="w-full h-full">
                 <Image
diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
index 09ab212..7f6fa5e 100644
--- a/app/components/sidebar.tsx
+++ b/app/components/sidebar.tsx
@@ -44,7 +44,7 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
   const isAnySidebarRouteActive = Object.values(routes).some(Boolean);
 
   return (
-    <div className={cn("pb-6 relative", className)}>
+    <div className={cn("pb-23 relative", className)}>
       {/* Collapse/Expand Button */}
       <Button
         variant="ghost"
@@ -55,7 +55,7 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
         {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
       </Button>
 
-      <div className="space-y-4 py-4">
+      <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
@@ -178,7 +178,7 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
           </div>
         </div>
           <div>
-            <div className="px-3 py-2">
+            <div className="px-3 py-0 pt-0">
               <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
                 Library
               </p>
@@ -322,8 +322,8 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
               </div>
             </div>
           </div>
-          <div className="px-3 py-2 mt-4">
-            <div className="space-y-1">
+          <div className="px-3">
+            <div className="space-y-0">
               <Link href="/settings">
                 <Button 
                   variant={routes.isSettings ? "secondary" : "ghost"} 
diff --git a/app/favorites/page.tsx b/app/favorites/page.tsx
index 03bef8b..1d5d7fa 100644
--- a/app/favorites/page.tsx
+++ b/app/favorites/page.tsx
@@ -8,7 +8,7 @@ import { useNavidrome } from "@/app/components/NavidromeContext";
 import { AlbumArtwork } from "@/app/components/album-artwork";
 import { ArtistIcon } from "@/app/components/artist-icon";
 import { Album, Artist, Song } from "@/lib/navidrome";
-import { Heart, Music, Disc, Mic } from "lucide-react";
+import { Heart, Music, Disc, Mic, Play } from "lucide-react";
 import { useAudioPlayer } from "@/app/components/AudioPlayerContext";
 import Image from "next/image";
 
@@ -126,10 +126,9 @@ const FavoritesPage = () => {
   }
 
   return (
-    <div className="container mx-auto p-6">
+    <div className="container mx-auto p-6 pb-24">
       <div className="space-y-6">
         <div className="flex items-center gap-3">
-          <Heart className="w-8 h-8 text-red-500" />
           <div>
             <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
             <p className="text-muted-foreground">Your starred albums, songs, and artists</p>
@@ -164,7 +163,7 @@ const FavoritesPage = () => {
                 <p className="text-sm text-muted-foreground mt-2">Star albums to see them here</p>
               </div>
             ) : (
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
                 {favoriteAlbums.map((album) => (
                   <Card key={album.id} className="overflow-hidden">
                     <div className="aspect-square relative group">
@@ -182,16 +181,7 @@ const FavoritesPage = () => {
                             </div>
                         )}
                         <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                            <Button size="sm" onClick={() => handlePlayAlbum(album)}>
-                                Play
-                            </Button>
-                            <Button 
-                                size="sm" 
-                                variant="outline"
-                                onClick={() => toggleFavorite(album.id, 'album', !!album.starred)}
-                            >
-                                <Heart className={`w-4 h-4 ${album.starred ? 'fill-red-500 text-red-500' : ''}`} />
-                            </Button>
+                          <Play className="w-12 h-12 mx-auto hidden group-hover:block" onClick={() => handlePlayAlbum(album)}/>
                         </div>
                     </div>
                     <CardContent className="p-4">
@@ -277,16 +267,16 @@ const FavoritesPage = () => {
                 <p className="text-sm text-muted-foreground mt-2">Star artists to see them here</p>
               </div>
             ) : (
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7">
                 {favoriteArtists.map((artist) => (
                   <Card key={artist.id} className="overflow-hidden">
-                    <CardContent className="p-6 text-center">
-                      <div className="w-20 h-20 mx-auto mb-4">
+                    <CardContent className="p-3 text-center">
+                      <div className="w-24 h-24 mx-auto mb-4">
                       <Image
                         src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'}
                         alt={artist.name}
-                        width={200}
-                        height={200}
+                        width={250}
+                        height={250}
                         className="object-cover w-full h-full"
                       />
                       </div>
@@ -294,20 +284,6 @@ const FavoritesPage = () => {
                       <p className="text-sm text-muted-foreground">
                         {artist.albumCount} albums
                       </p>
-                      <div className="flex justify-center gap-2 mt-4">
-                        <Button size="sm" variant="outline" asChild>
-                          <a href={`/artist/${encodeURIComponent(artist.name)}`}>
-                            View
-                          </a>
-                        </Button>
-                        <Button 
-                          size="sm" 
-                          variant="outline"
-                          onClick={() => toggleFavorite(artist.id, 'artist', !!artist.starred)}
-                        >
-                          <Heart className={`w-4 h-4 ${artist.starred ? 'fill-red-500 text-red-500' : ''}`} />
-                        </Button>
-                      </div>
                     </CardContent>
                   </Card>
                 ))}
diff --git a/app/library/artists/page.tsx b/app/library/artists/page.tsx
index 299a298..c06ca8d 100644
--- a/app/library/artists/page.tsx
+++ b/app/library/artists/page.tsx
@@ -104,7 +104,7 @@ export default function ArtistPage() {
           <Separator className="my-4" />
           <div className="relative">
             <ScrollArea>
-              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+              <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 cursor-pointer">
                 {filteredArtists.map((artist) => (
                   <Card key={artist.id} className="overflow-hidden">
                     <div className="aspect-square relative group cursor-pointer" onClick={() => handleViewArtist(artist)}>
@@ -118,9 +118,6 @@ export default function ArtistPage() {
                         />
                         </div>
                       <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
-                        <Button size="sm">
-                          View Artist
-                        </Button>
                       </div>
                     </div>
                     <CardContent className="p-4">