fix: ui tweaks and fixes (#134)

client/app/components/AllTimeStats.tsx

@@ -7,10 +7,12 @@ export default function AllTimeStats() {
     queryFn: ({ queryKey }) => getStats(queryKey[1]),
   });
 
+  const header = "All time stats";
+
   if (isPending) {
     return (
       <div className="w-[200px]">
-        <h3>All Time Stats</h3>
+        <h3>{header}</h3>
         <p>Loading...</p>
       </div>
     );
@@ -18,7 +20,7 @@ export default function AllTimeStats() {
     return (
       <>
         <div>
-          <h3>All Time Stats</h3>
+          <h3>{header}</h3>
           <p className="error">Error: {error.message}</p>
         </div>
       </>
@@ -29,7 +31,7 @@ export default function AllTimeStats() {
 
   return (
     <div>
-      <h3>All Time Stats</h3>
+      <h3>{header}</h3>
       <div>
         <span
           className={numberClasses}

client/app/components/LastPlays.tsx

@@ -42,6 +42,8 @@ export default function LastPlays(props: Props) {
     queryFn: () => getNowPlaying(),
   });
 
+  const header = "Last played";
+
   const [items, setItems] = useState<Listen[] | null>(null);
 
   const handleDelete = async (listen: Listen) => {
@@ -63,14 +65,14 @@ export default function LastPlays(props: Props) {
   if (isPending) {
     return (
       <div className="w-[300px] sm:w-[500px]">
-        <h3>Last Played</h3>
+        <h3>{header}</h3>
         <p>Loading...</p>
       </div>
     );
   } else if (isError) {
     return (
       <div className="w-[300px] sm:w-[500px]">
-        <h3>Last Played</h3>
+        <h3>{header}</h3>
         <p className="error">Error: {error.message}</p>
       </div>
     );
@@ -86,7 +88,7 @@ export default function LastPlays(props: Props) {
   return (
     <div className="text-sm sm:text-[16px]">
       <h3 className="hover:underline">
-        <Link to={`/listens?period=all_time${params}`}>Last Played</Link>
+        <Link to={`/listens?period=all_time${params}`}>{header}</Link>
       </h3>
       <table className="-ml-4">
         <tbody>

client/app/components/TopAlbums.tsx

@@ -30,17 +30,19 @@ export default function TopAlbums(props: Props) {
     queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
   });
 
+  const header = "Top albums";
+
   if (isPending) {
     return (
       <div className="w-[300px]">
-        <h3>Top Albums</h3>
+        <h3>{header}</h3>
         <p>Loading...</p>
       </div>
     );
   } else if (isError) {
     return (
       <div className="w-[300px]">
-        <h3>Top Albums</h3>
+        <h3>{header}</h3>
         <p className="error">Error: {error.message}</p>
       </div>
     );
@@ -54,7 +56,7 @@ export default function TopAlbums(props: Props) {
             props.artistId ? `&artist_id=${props.artistId}` : ""
           }`}
         >
-          Top Albums
+          {header}
         </Link>
       </h3>
       <div className="max-w-[300px]">

client/app/components/TopArtists.tsx

@@ -21,17 +21,19 @@ export default function TopArtists(props: Props) {
     queryFn: ({ queryKey }) => getTopArtists(queryKey[1] as getItemsArgs),
   });
 
+  const header = "Top artists";
+
   if (isPending) {
     return (
       <div className="w-[300px]">
-        <h3>Top Artists</h3>
+        <h3>{header}</h3>
         <p>Loading...</p>
       </div>
     );
   } else if (isError) {
     return (
       <div className="w-[300px]">
-        <h3>Top Artists</h3>
+        <h3>{header}</h3>
         <p className="error">Error: {error.message}</p>
       </div>
     );
@@ -40,9 +42,7 @@ export default function TopArtists(props: Props) {
   return (
     <div>
       <h3 className="hover:underline">
-        <Link to={`/chart/top-artists?period=${props.period}`}>
+        <Link to={`/chart/top-artists?period=${props.period}`}>{header}</Link>
-          Top Artists
-        </Link>
       </h3>
       <div className="max-w-[300px]">
         <TopItemList type="artist" data={data} />

client/app/components/TopTracks.tsx

@@ -28,17 +28,19 @@ const TopTracks = (props: Props) => {
     queryFn: ({ queryKey }) => getTopTracks(queryKey[1] as getItemsArgs),
   });
 
+  const header = "Top tracks";
+
   if (isPending) {
     return (
       <div className="w-[300px]">
-        <h3>Top Tracks</h3>
+        <h3>{header}</h3>
         <p>Loading...</p>
       </div>
     );
   } else if (isError) {
     return (
       <div className="w-[300px]">
-        <h3>Top Tracks</h3>
+        <h3>{header}</h3>
         <p className="error">Error: {error.message}</p>
       </div>
     );
@@ -53,7 +55,7 @@ const TopTracks = (props: Props) => {
     <div>
       <h3 className="hover:underline">
         <Link to={`/chart/top-tracks?period=${props.period}${params}`}>
-          Top Tracks
+          {header}
         </Link>
       </h3>
       <div className="max-w-[300px]">

client/app/routes/MediaItems/Album.tsx

@@ -50,17 +50,17 @@ export default function Album() {
               {album.listen_count} play{album.listen_count > 1 ? "s" : ""}
             </p>
           )}
-          {
+          {album.time_listened && (
             <p title={Math.floor(album.time_listened / 60 / 60) + " hours"}>
               {timeListenedString(album.time_listened)}
             </p>
-          }
+          )}
-          {
+          {album.first_listen && (
             <p title={new Date(album.first_listen * 1000).toLocaleString()}>
               Listening since{" "}
               {new Date(album.first_listen * 1000).toLocaleDateString()}
             </p>
-          }
+          )}
         </div>
       }
     >

client/app/routes/MediaItems/Track.tsx

@@ -49,23 +49,28 @@ export default function Track() {
       }}
       subContent={
         <div className="flex flex-col gap-2 items-start">
-          <Link to={`/album/${track.album_id}`}>appears on {album.title}</Link>
+          <p>
-          {track.listen_count && (
+            Appears on{" "}
+            <Link className="hover:underline" to={`/album/${track.album_id}`}>
+              {album.title}
+            </Link>
+          </p>
+          {track.listen_count !== 0 && (
             <p>
               {track.listen_count} play{track.listen_count > 1 ? "s" : ""}
             </p>
           )}
-          {
+          {track.time_listened !== 0 && (
             <p title={Math.floor(track.time_listened / 60 / 60) + " hours"}>
               {timeListenedString(track.time_listened)}
             </p>
-          }
+          )}
-          {
+          {track.first_listen > 0 && (
             <p title={new Date(track.first_listen * 1000).toLocaleString()}>
               Listening since{" "}
               {new Date(track.first_listen * 1000).toLocaleDateString()}
             </p>
-          }
+          )}
         </div>
       }
     >