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 <ArtistIcon
key={artist.id} key={artist.id}
artist={artist} artist={artist}
className="flex-shrink-0" className="flex-shrink-0 overflow-hidden"
size={190} size={190}
/> />
))} ))}

10
app/components/WhatsNewPopup.tsx
View File

@@ -17,7 +17,6 @@ const CHANGELOG = [
date: '2025-07-01', date: '2025-07-01',
title: 'Initial Release', title: 'Initial Release',
changes: [ changes: [
'Added Favorites functionality for albums, songs, and artists',
'Integrated standalone Last.fm scrobbling support', 'Integrated standalone Last.fm scrobbling support',
'Added collapsible sidebar with icon-only mode', 'Added collapsible sidebar with icon-only mode',
'Improved search and browsing experience', 'Improved search and browsing experience',
@@ -27,9 +26,16 @@ const CHANGELOG = [
'Added settings page for customization options', 'Added settings page for customization options',
'Introduced Whats New popup for version updates', 'Introduced Whats New popup for version updates',
'Improved UI consistency with new Badge component', 'Improved UI consistency with new Badge component',
'New Favorites page with album, song, and artist sections',
], ],
breaking: [], 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}> <div className={cn("space-y-3", className)} {...props}>
<ContextMenu> <ContextMenu>
<ContextMenuTrigger> <ContextMenuTrigger>
<Card key={artist.id} className="overflow-hidden"> <Card key={artist.id} className="overflow-hidden cursor-pointer" onClick={() => handleClick()}>
<div <div
className="aspect-square relative group cursor-pointer" className="aspect-square relative group"
style={{ width: size, height: size }} style={{ width: size, height: size }}
onClick={() => handleClick()}
> >
<div className="w-full h-full"> <div className="w-full h-full">
<Image <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); const isAnySidebarRouteActive = Object.values(routes).some(Boolean);
return ( return (
<div className={cn("pb-6 relative", className)}> <div className={cn("pb-23 relative", className)}>
{/* Collapse/Expand Button */} {/* Collapse/Expand Button */}
<Button <Button
variant="ghost" 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" />} {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
</Button> </Button>
<div className="space-y-4 py-4"> <div className="space-y-4 py-4 pt-6">
<div className="px-3 py-2"> <div className="px-3 py-2">
<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", collapsed && "sr-only")}>
Discover Discover
@@ -178,7 +178,7 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
</div> </div>
</div> </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")}> <p className={cn("mb-2 px-4 text-lg font-semibold tracking-tight", collapsed && "sr-only")}>
Library Library
</p> </p>
@@ -322,8 +322,8 @@ export function Sidebar({ className, playlists, collapsed = false, onToggle }: S
</div> </div>
</div> </div>
</div> </div>
<div className="px-3 py-2 mt-4"> <div className="px-3">
<div className="space-y-1"> <div className="space-y-0">
<Link href="/settings"> <Link href="/settings">
<Button <Button
variant={routes.isSettings ? "secondary" : "ghost"} 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 { AlbumArtwork } from "@/app/components/album-artwork";
import { ArtistIcon } from "@/app/components/artist-icon"; import { ArtistIcon } from "@/app/components/artist-icon";
import { Album, Artist, Song } from "@/lib/navidrome"; 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 { useAudioPlayer } from "@/app/components/AudioPlayerContext";
import Image from "next/image"; import Image from "next/image";
@@ -126,10 +126,9 @@ const FavoritesPage = () => {
} }
return ( return (
<div className="container mx-auto p-6"> <div className="container mx-auto p-6 pb-24">
<div className="space-y-6"> <div className="space-y-6">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Heart className="w-8 h-8 text-red-500" />
<div> <div>
<h1 className="text-3xl font-semibold tracking-tight">Favorites</h1> <h1 className="text-3xl font-semibold tracking-tight">Favorites</h1>
<p className="text-muted-foreground">Your starred albums, songs, and artists</p> <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> <p className="text-sm text-muted-foreground mt-2">Star albums to see them here</p>
</div> </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) => ( {favoriteAlbums.map((album) => (
<Card key={album.id} className="overflow-hidden"> <Card key={album.id} className="overflow-hidden">
<div className="aspect-square relative group"> <div className="aspect-square relative group">
@@ -182,16 +181,7 @@ const FavoritesPage = () => {
</div> </div>
)} )}
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2"> <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 className="w-12 h-12 mx-auto hidden group-hover:block" 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>
</div> </div>
</div> </div>
<CardContent className="p-4"> <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> <p className="text-sm text-muted-foreground mt-2">Star artists to see them here</p>
</div> </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) => ( {favoriteArtists.map((artist) => (
<Card key={artist.id} className="overflow-hidden"> <Card key={artist.id} className="overflow-hidden">
<CardContent className="p-6 text-center"> <CardContent className="p-3 text-center">
<div className="w-20 h-20 mx-auto mb-4"> <div className="w-24 h-24 mx-auto mb-4">
<Image <Image
src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'} src={artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 200) : '/placeholder-artist.png'}
alt={artist.name} alt={artist.name}
width={200} width={250}
height={200} height={250}
className="object-cover w-full h-full" className="object-cover w-full h-full"
/> />
</div> </div>
@@ -294,20 +284,6 @@ const FavoritesPage = () => {
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{artist.albumCount} albums {artist.albumCount} albums
</p> </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> </CardContent>
</Card> </Card>
))} ))}

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

@@ -104,7 +104,7 @@ export default function ArtistPage() {
<Separator className="my-4" /> <Separator className="my-4" />
<div className="relative"> <div className="relative">
<ScrollArea> <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) => ( {filteredArtists.map((artist) => (
<Card key={artist.id} className="overflow-hidden"> <Card key={artist.id} className="overflow-hidden">
<div className="aspect-square relative group cursor-pointer" onClick={() => handleViewArtist(artist)}> <div className="aspect-square relative group cursor-pointer" onClick={() => handleViewArtist(artist)}>
@@ -118,9 +118,6 @@ export default function ArtistPage() {
/> />
</div> </div>
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2"> <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>
</div> </div>
<CardContent className="p-4"> <CardContent className="p-4">