add all time rank to item pages

client/api/api.ts

@@ -367,6 +367,7 @@ type Track = {
   musicbrainz_id: string;
   time_listened: number;
   first_listen: number;
+  all_time_rank: number;
 };
 type Artist = {
   id: number;
@@ -378,6 +379,7 @@ type Artist = {
   time_listened: number;
   first_listen: number;
   is_primary: boolean;
+  all_time_rank: number;
 };
 type Album = {
   id: number;
@@ -389,6 +391,7 @@ type Album = {
   musicbrainz_id: string;
   time_listened: number;
   first_listen: number;
+  all_time_rank: number;
 };
 type Alias = {
   id: number;

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}