diff --git a/src/features/TopPlayed/Top100.tsx b/src/features/TopPlayed/Top100.tsx index 8c1a7ef..0c20fb8 100644 --- a/src/features/TopPlayed/Top100.tsx +++ b/src/features/TopPlayed/Top100.tsx @@ -1,6 +1,6 @@ import React, { useState, useMemo, useCallback } from 'react'; -import { IonChip, IonModal, IonIcon, IonContent, IonList } from '@ionic/react'; -import { list } from 'ionicons/icons'; +import { IonChip, IonModal, IonIcon, IonContent, IonList, IonItem } from '@ionic/react'; +import { list, star, layers } from 'ionicons/icons'; import { useTopPlayed } from '../../hooks'; import { useAppSelector } from '../../redux'; import { selectTopPlayed, selectSongsArray } from '../../redux'; @@ -63,6 +63,9 @@ const Top100: React.FC = () => { return filteredSongs; }, [selectedTopPlayed, allSongs]); + // Separate the most played song from other variations + const mostPlayedSong = selectedSongs.find(song => song.path === selectedTopPlayed?.path); + const otherVariations = selectedSongs.filter(song => song.path !== selectedTopPlayed?.path); // Use real Firebase data from the hook @@ -118,18 +121,60 @@ const Top100: React.FC = () => { - - {selectedSongs.map((song) => ( - - ))} - + {/* Most Played Section */} + {mostPlayedSong && ( + <> + +

+ + Most Played Version +

+
+ + + + + )} + + {/* Other Variations Section */} + {otherVariations.length > 0 && ( + <> + +

+ + Other Variations ({otherVariations.length}) +

+
+ + {otherVariations.map((song) => ( + + ))} + + + )} + + {/* No variations found */} + {selectedSongs.length === 0 && ( +
+ +

No other variations found for this song

+
+ )}
diff --git a/src/types/index.ts b/src/types/index.ts index 4835b49..c7de08b 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -84,6 +84,7 @@ export interface SongListSong extends Keyable { export interface TopPlayed extends Keyable { artist: string; title: string; + path: string; count: number; }