UPDATE track/artist display in StatView

app/src/model/parser.ts

@@ -39,7 +39,7 @@ const getListenedArtists = (streams: stream[], startDate: string, endDate: strin
     const artistMap: Record<string, stream> = {};
 
     streams.forEach(stream => {
-        if (stream.ts < startDate || stream.ts > endDate) {
+        if (stream.ts < startDate || stream.ts > endDate || !stream.master_metadata_album_artist_name) {
             return; // Skip streams outside the date range
         }
 

app/src/pages/StatView.tsx

@@ -48,8 +48,13 @@ const StatView = () => {
                     <h1>Track Statistics</h1>
                     <ul className="truncate">
                         {mostListenedSongs.map((track, index) => (
-                            <li key={index} className="w-full h-6 overflow-hidden text-ellipsis whitespace-nowrap hover:underline">
+                            <li key={index} className="w-full h-6 flex items-center justify-between overflow-hidden hover:underline">
-                                {track.master_metadata_track_name} - {formatSeconds(track.ms_played/1000)}
+                                  <div className="text-left truncate">
+                                    {index + 1}. {track.master_metadata_track_name}
+                                </div>
+                                <div className="text-right flex-shrink-0 ml-2">
+                                    {formatSeconds(track.ms_played / 1000)}
+                                </div>
                             </li>
                         ))}
                     </ul>
@@ -59,8 +64,13 @@ const StatView = () => {
                     <h1>Artist Statistics</h1>
                     <ul className="truncate">
                         {mostListenedArtists.map((artist, index) => (
-                            <li key={index} className="w-full h-6 overflow-hidden text-ellipsis whitespace-nowrap hover:underline">
+                            <li key={index} className="w-full h-6 flex items-center justify-between overflow-hidden hover:underline">
-                                {artist.master_metadata_album_artist_name} - {formatSeconds(artist.ms_played/1000)}
+                                <div className="text-left truncate">
+                                    {index + 1}. {artist.master_metadata_album_artist_name}
+                                </div>
+                                <div className="text-right flex-shrink-0 ml-2">
+                                    {formatSeconds(artist.ms_played / 1000)}
+                                </div>
                             </li>
                         ))}
                     </ul>
@@ -80,9 +90,47 @@ const StatView = () => {
                 className="w-full"
             />
 
-            <p className="text-center">
+            <div className="text-center">
-                {dateRange[0].toUTCString()} - {dateRange[1].toUTCString()} ({getDaysBetween(dateRange[0], dateRange[1])} days)
+                <input
-            </p>
+                    type="date"
+                    value={dateRange[0].toISOString().split('T')[0]}
+                    onChange={(e) => {
+                        if (new Date(e.target.value) > dateRange[1]) {
+                            alert('Start date cannot be after end date');
+                            return;
+                        }
+
+
+                        // check if valid date
+                        if (isNaN(new Date(e.target.value).getTime())) {
+                            return;
+                        }
+                        
+                        setDateRange([new Date(e.target.value), dateRange[1]])
+                    }}
+                    className="mr-2"
+                />
+                <input
+                    type="date"
+                    value={dateRange[1].toISOString().split('T')[0]}
+                    onChange={(e) => {
+                        if (new Date(e.target.value) < dateRange[0]) {
+                            alert('End date cannot be before start date');
+                            return;
+                        }
+
+                        // check if valid date
+                        if (isNaN(new Date(e.target.value).getTime())) {
+                            return;
+                        }
+
+                        setDateRange([dateRange[0], new Date(e.target.value)]);
+                    }}
+                    className="ml-2"
+                />
+
+                <p>({getDaysBetween(dateRange[0], dateRange[1])} days)</p>
+            </div>
         </div>
     )
 }

app/src/util/time.ts

@@ -4,9 +4,9 @@ const formatSeconds = (seconds: number): string => {
     const secs = Math.floor(seconds % 60);
 
     return [
-        hours > 0 ? `${hours}h` : '',
+        hours > 0 ? `${hours}h` : '0h',
-        minutes > 0 ? `${minutes}m` : '',
+        minutes > 0 ? `${minutes}m` : '0m',
-        secs > 0 ? `${secs}s` : ''
+        secs > 0 ? `${secs}s` : '0s'
     ].filter(Boolean).join(' ');
 }