diff --git a/README.md b/README.md index 10134b5..3478ac8 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ A real-time karaoke application designed for in-home party use with multi-user s - **Artist Browsing** - Browse songs by artist with modal views - **Song Lists** - Predefined song collections with availability matching - **Top Played** - Popular songs based on play history -- **New Songs** - Recently added songs to the catalog (see PRD for implementation details) +- **New Songs** - Recently added songs to the catalog (see PRD for implementation details) (see PRD for implementation details) (see PRD for implementation details) ### **Admin Features** - **Queue Control** - Reorder and delete queue items diff --git a/src/components/common/SongItem.tsx b/src/components/common/SongItem.tsx index c9dc48b..a5fa7ff 100644 --- a/src/components/common/SongItem.tsx +++ b/src/components/common/SongItem.tsx @@ -10,7 +10,7 @@ import type { SongItemProps, QueueItem, Song } from '../../types'; import { SongItemContext } from '../../types'; import { ActionButtonVariant, ActionButtonSize, ActionButtonIconSlot } from '../../types'; import { Icons } from '../../constants'; -import { star } from 'ionicons/icons'; +import { star, heart } from 'ionicons/icons'; // Utility function to extract filename from path const extractFilename = (path: string): string => { @@ -31,12 +31,14 @@ export const SongInfoDisplay: React.FC<{ showCount?: boolean; showFullPath?: boolean; showTopPlayedStar?: boolean; + showFavoriteHeart?: boolean; }> = React.memo(({ song, showPath = false, showCount = false, showFullPath = false, - showTopPlayedStar = false + showTopPlayedStar = false, + showFavoriteHeart = false }) => { return ( @@ -59,6 +61,13 @@ export const SongInfoDisplay: React.FC<{ style={{ fontSize: '1rem' }} /> )} + {showFavoriteHeart && ( + + )} {song.title}
= React.memo(({ showCount={shouldShowCount} showFullPath={showFullPath} showTopPlayedStar={isInTopPlayed} + showFavoriteHeart={isInFavorites} /> {showActions && (