angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update commit SHA, enhance UI components with improved layouts and functionality, and refine Favorites page with new features

Browse Source
This commit is contained in:
angel
2025-07-01 23:33:40 +00:00
committed by GitHub
parent 0cb4f23f12
commit 4499bdf147
7 changed files with 27 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local
View File

@@ -1 +1 @@
NEXT_PUBLIC_COMMIT_SHA=87a2f06
NEXT_PUBLIC_COMMIT_SHA=0cb4f23

2
app/browse/page.tsx
View File

@@ -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}
/>
))}

10
app/components/WhatsNewPopup.tsx
View File

@@ -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'
]
}
];

5
app/components/artist-icon.tsx
View File

@@ -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

10
app/components/sidebar.tsx
View File

@@ -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"}

42
app/favorites/page.tsx
View File

@@ -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>
))}

5
app/library/artists/page.tsx
View File

@@ -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">