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; }
No other variations found for this song