feat: all time rank display (#149)

* add all time rank to item pages

* fix artist albums component

* add no rows check

* fix rewind page

client/app/routes/MediaItems/Album.tsx

@@ -30,6 +30,7 @@ export default function Album() {
       title={album.title}
       img={album.image}
       id={album.id}
+      rank={album.all_time_rank}
       musicbrainzId={album.musicbrainz_id}
       imgItemId={album.id}
       mergeFunc={mergeAlbums}

client/app/routes/MediaItems/Artist.tsx

@@ -36,6 +36,7 @@ export default function Artist() {
       title={artist.name}
       img={artist.image}
       id={artist.id}
+      rank={artist.all_time_rank}
       musicbrainzId={artist.musicbrainz_id}
       imgItemId={artist.id}
       mergeFunc={mergeArtists}

client/app/routes/MediaItems/MediaLayout.tsx

@@ -28,6 +28,7 @@ interface Props {
   title: string;
   img: string;
   id: number;
+  rank: number;
   musicbrainzId: string;
   imgItemId: number;
   mergeFunc: MergeFunc;
@@ -96,7 +97,15 @@ export default function MediaLayout(props: Props) {
           </div>
           <div className="flex flex-col items-start">
             <h3>{props.type}</h3>
-            <h1>{props.title}</h1>
+            <div className="flex">
+              <h1>
+                {props.title}
+                <span className="text-xl font-medium text-(--color-fg-secondary)">
+                  {" "}
+                  #{props.rank}
+                </span>
+              </h1>
+            </div>
             {props.subContent}
           </div>
           <div className="absolute left-1 sm:right-1 sm:left-auto -top-9 sm:top-1 flex gap-3 items-center">

client/app/routes/MediaItems/Track.tsx

@@ -34,6 +34,7 @@ export default function Track() {
       title={track.title}
       img={track.image}
       id={track.id}
+      rank={track.all_time_rank}
       musicbrainzId={track.musicbrainz_id}
       imgItemId={track.album_id}
       mergeFunc={mergeTracks}