feat: add ranks to top items charts (#122)

client/app/components/TopItemList.tsx

@@ -1,102 +1,186 @@
 import { Link, useNavigate } from "react-router";
 import ArtistLinks from "./ArtistLinks";
-import { imageUrl, type Album, type Artist, type Track, type PaginatedResponse } from "api/api";
+import {
+  imageUrl,
+  type Album,
+  type Artist,
+  type Track,
+  type PaginatedResponse,
+} from "api/api";
 
 type Item = Album | Track | Artist;
 
 interface Props<T extends Item> {
-    data: PaginatedResponse<T>
-    separators?: ConstrainBoolean
-    type: "album" | "track" | "artist";
-    className?: string,
+  data: PaginatedResponse<T>;
+  separators?: ConstrainBoolean;
+  ranked?: boolean;
+  type: "album" | "track" | "artist";
+  className?: string;
 }
 
-export default function TopItemList<T extends Item>({ data, separators, type, className }: Props<T>) {
+export default function TopItemList<T extends Item>({
+  data,
+  separators,
+  type,
+  className,
+  ranked,
+}: Props<T>) {
+  const currentParams = new URLSearchParams(location.search);
+  const page = Math.max(parseInt(currentParams.get("page") || "1"), 1);
 
-    return (
-        <div className={`flex flex-col gap-1 ${className} min-w-[200px]`}>
-            {data.items.map((item, index) => {
-                const key = `${type}-${item.id}`;
-                return (
-                    <div
-                        key={key}
-                        style={{ fontSize: 12 }}
-                        className={`${
-                            separators && index !== data.items.length - 1 ? 'border-b border-(--color-fg-tertiary) mb-1 pb-2' : ''
-                        }`}
-                    >
-                        <ItemCard item={item} type={type} key={type+item.id} />
-                    </div>
-                );
-            })}
-        </div>
-    );
-}
+  let lastRank = 0;
 
-function ItemCard({ item, type }: { item: Item; type: "album" | "track" | "artist" }) {
-
-    const itemClasses = `flex items-center gap-2`
-
-    switch (type) {
-        case "album": {
-            const album = item as Album;
-    
-            return (
-                <div style={{fontSize: 12}} className={itemClasses}>
-                    <Link to={`/album/${album.id}`}>
-                        <img loading="lazy" src={imageUrl(album.image, "small")} alt={album.title} className="min-w-[48px]" />
-                    </Link>
-                    <div>
-                        <Link to={`/album/${album.id}`} className="hover:text-(--color-fg-secondary)">
-                            <span style={{fontSize: 14}}>{album.title}</span>
-                        </Link>
-                        <br />
-                        {album.is_various_artists ?
-                        <span className="color-fg-secondary">Various Artists</span>
-                        :
-                        <div>
-                           <ArtistLinks artists={album.artists ? [album.artists[0]] : [{id: 0, name: 'Unknown Artist'}]}/>
-                        </div>
-                        }
-                        <div className="color-fg-secondary">{album.listen_count} plays</div>
-                    </div>
-                </div>
-            );
-        }
-        case "track": {
-            const track = item as Track;
-
-            return (
-                <div style={{fontSize: 12}} className={itemClasses}>
-                <Link to={`/track/${track.id}`}>
-                    <img loading="lazy" src={imageUrl(track.image, "small")} alt={track.title} className="min-w-[48px]" />
-                </Link>
-                    <div>
-                        <Link to={`/track/${track.id}`} className="hover:text-(--color-fg-secondary)">
-                            <span style={{fontSize: 14}}>{track.title}</span>
-                        </Link>
-                        <br />
-                            <div>
-                               <ArtistLinks artists={track.artists || [{id: 0, Name: 'Unknown Artist'}]}/>
-                            </div>
-                        <div className="color-fg-secondary">{track.listen_count} plays</div>
-                    </div>
-                </div>
-            );
-        }
-        case "artist": {
-            const artist = item as Artist;
-            return (
-                <div style={{fontSize: 12}}>
-                    <Link className={itemClasses+' mt-1 mb-[6px] hover:text-(--color-fg-secondary)'} to={`/artist/${artist.id}`}>
-                        <img loading="lazy" src={imageUrl(artist.image, "small")} alt={artist.name} className="min-w-[48px]" />
-                        <div>
-                            <span style={{fontSize: 14}}>{artist.name}</span>
-                            <div className="color-fg-secondary">{artist.listen_count} plays</div>
-                        </div>
-                    </Link>
-                </div>
-            );
-        }
+  const calculateRank = (data: Item[], page: number, index: number): number => {
+    if (
+      index === 0 ||
+      data[index] == undefined ||
+      !(data[index].listen_count === data[index - 1].listen_count)
+    ) {
+      lastRank = index + 1 + (page - 1) * 100;
     }
+    return lastRank;
+  };
+
+  return (
+    <div className={`flex flex-col gap-1 ${className} min-w-[200px]`}>
+      {data.items.map((item, index) => {
+        const key = `${type}-${item.id}`;
+        return (
+          <div
+            key={key}
+            style={{ fontSize: 12 }}
+            className={`${
+              separators && index !== data.items.length - 1
+                ? "border-b border-(--color-fg-tertiary) mb-1 pb-2"
+                : ""
+            }`}
+          >
+            <ItemCard
+              ranked={ranked}
+              rank={calculateRank(data.items, page, index)}
+              item={item}
+              type={type}
+              key={type + item.id}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ItemCard({
+  item,
+  type,
+  rank,
+  ranked,
+}: {
+  item: Item;
+  type: "album" | "track" | "artist";
+  rank: number;
+  ranked?: boolean;
+}) {
+  const itemClasses = `flex items-center gap-2`;
+
+  switch (type) {
+    case "album": {
+      const album = item as Album;
+
+      return (
+        <div style={{ fontSize: 12 }} className={itemClasses}>
+          {ranked && <div className="w-7 text-end">{rank}</div>}
+          <Link to={`/album/${album.id}`}>
+            <img
+              loading="lazy"
+              src={imageUrl(album.image, "small")}
+              alt={album.title}
+              className="min-w-[48px]"
+            />
+          </Link>
+          <div>
+            <Link
+              to={`/album/${album.id}`}
+              className="hover:text-(--color-fg-secondary)"
+            >
+              <span style={{ fontSize: 14 }}>{album.title}</span>
+            </Link>
+            <br />
+            {album.is_various_artists ? (
+              <span className="color-fg-secondary">Various Artists</span>
+            ) : (
+              <div>
+                <ArtistLinks
+                  artists={
+                    album.artists
+                      ? [album.artists[0]]
+                      : [{ id: 0, name: "Unknown Artist" }]
+                  }
+                />
+              </div>
+            )}
+            <div className="color-fg-secondary">{album.listen_count} plays</div>
+          </div>
+        </div>
+      );
+    }
+    case "track": {
+      const track = item as Track;
+
+      return (
+        <div style={{ fontSize: 12 }} className={itemClasses}>
+          {ranked && <div className="w-7 text-end">{rank}</div>}
+          <Link to={`/track/${track.id}`}>
+            <img
+              loading="lazy"
+              src={imageUrl(track.image, "small")}
+              alt={track.title}
+              className="min-w-[48px]"
+            />
+          </Link>
+          <div>
+            <Link
+              to={`/track/${track.id}`}
+              className="hover:text-(--color-fg-secondary)"
+            >
+              <span style={{ fontSize: 14 }}>{track.title}</span>
+            </Link>
+            <br />
+            <div>
+              <ArtistLinks
+                artists={track.artists || [{ id: 0, Name: "Unknown Artist" }]}
+              />
+            </div>
+            <div className="color-fg-secondary">{track.listen_count} plays</div>
+          </div>
+        </div>
+      );
+    }
+    case "artist": {
+      const artist = item as Artist;
+      return (
+        <div style={{ fontSize: 12 }} className={itemClasses}>
+          {ranked && <div className="w-7 text-end">{rank}</div>}
+          <Link
+            className={
+              itemClasses + " mt-1 mb-[6px] hover:text-(--color-fg-secondary)"
+            }
+            to={`/artist/${artist.id}`}
+          >
+            <img
+              loading="lazy"
+              src={imageUrl(artist.image, "small")}
+              alt={artist.name}
+              className="min-w-[48px]"
+            />
+            <div>
+              <span style={{ fontSize: 14 }}>{artist.name}</span>
+              <div className="color-fg-secondary">
+                {artist.listen_count} plays
+              </div>
+            </div>
+          </Link>
+        </div>
+      );
+    }
+  }
 }

client/app/routes/Charts/AlbumChart.tsx

@@ -6,7 +6,7 @@ import { type Album, type PaginatedResponse } from "api/api";
 export async function clientLoader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const page = url.searchParams.get("page") || "0";
-  url.searchParams.set('page', page)
+  url.searchParams.set("page", page);
 
   const res = await fetch(
     `/apis/web/v1/top-albums?${url.searchParams.toString()}`
@@ -20,7 +20,9 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
 }
 
 export default function AlbumChart() {
-  const { top_albums: initialData } = useLoaderData<{ top_albums: PaginatedResponse<Album> }>();
+  const { top_albums: initialData } = useLoaderData<{
+    top_albums: PaginatedResponse<Album>;
+  }>();
 
   return (
     <ChartLayout
@@ -29,15 +31,20 @@ export default function AlbumChart() {
       endpoint="chart/top-albums"
       render={({ data, page, onNext, onPrev }) => (
         <div className="flex flex-col gap-5">
-        <div className="flex gap-15 mx-auto">
-          <button className="default" onClick={onPrev} disabled={page <= 1}>
-            Prev
-          </button>
-          <button className="default" onClick={onNext} disabled={!data.has_next_page}>
-            Next
-          </button>
-        </div>
+          <div className="flex gap-15 mx-auto">
+            <button className="default" onClick={onPrev} disabled={page <= 1}>
+              Prev
+            </button>
+            <button
+              className="default"
+              onClick={onNext}
+              disabled={!data.has_next_page}
+            >
+              Next
+            </button>
+          </div>
           <TopItemList
+            ranked
             separators
             data={data}
             className="w-[400px] sm:w-[600px]"
@@ -47,7 +54,11 @@ export default function AlbumChart() {
             <button className="default" onClick={onPrev} disabled={page === 0}>
               Prev
             </button>
-            <button className="default" onClick={onNext} disabled={!data.has_next_page}>
+            <button
+              className="default"
+              onClick={onNext}
+              disabled={!data.has_next_page}
+            >
               Next
             </button>
           </div>

client/app/routes/Charts/ArtistChart.tsx

@@ -6,7 +6,7 @@ import { type Album, type PaginatedResponse } from "api/api";
 export async function clientLoader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const page = url.searchParams.get("page") || "0";
-  url.searchParams.set('page', page)
+  url.searchParams.set("page", page);
 
   const res = await fetch(
     `/apis/web/v1/top-artists?${url.searchParams.toString()}`
@@ -20,7 +20,9 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
 }
 
 export default function Artist() {
-  const { top_artists: initialData } = useLoaderData<{ top_artists: PaginatedResponse<Album> }>();
+  const { top_artists: initialData } = useLoaderData<{
+    top_artists: PaginatedResponse<Album>;
+  }>();
 
   return (
     <ChartLayout
@@ -29,15 +31,20 @@ export default function Artist() {
       endpoint="chart/top-artists"
       render={({ data, page, onNext, onPrev }) => (
         <div className="flex flex-col gap-5">
-        <div className="flex gap-15 mx-auto">
-          <button className="default" onClick={onPrev} disabled={page <= 1}>
-            Prev
-          </button>
-          <button className="default" onClick={onNext} disabled={!data.has_next_page}>
-            Next
-          </button>
-        </div>
+          <div className="flex gap-15 mx-auto">
+            <button className="default" onClick={onPrev} disabled={page <= 1}>
+              Prev
+            </button>
+            <button
+              className="default"
+              onClick={onNext}
+              disabled={!data.has_next_page}
+            >
+              Next
+            </button>
+          </div>
           <TopItemList
+            ranked
             separators
             data={data}
             className="w-[400px] sm:w-[600px]"
@@ -47,7 +54,11 @@ export default function Artist() {
             <button className="default" onClick={onPrev} disabled={page <= 1}>
               Prev
             </button>
-            <button className="default" onClick={onNext} disabled={!data.has_next_page}>
+            <button
+              className="default"
+              onClick={onNext}
+              disabled={!data.has_next_page}
+            >
               Next
             </button>
           </div>

client/app/routes/Charts/ChartLayout.tsx

@@ -1,264 +1,272 @@
-import {
-	useFetcher,
-	useLocation,
-	useNavigate,
-} from "react-router"
-import { useEffect, useState } from "react"
-import { average } from "color.js"
-import { imageUrl, type PaginatedResponse } from "api/api"
-import PeriodSelector from "~/components/PeriodSelector"
+import { useFetcher, useLocation, useNavigate } from "react-router";
+import { useEffect, useState } from "react";
+import { average } from "color.js";
+import { imageUrl, type PaginatedResponse } from "api/api";
+import PeriodSelector from "~/components/PeriodSelector";
 
 interface ChartLayoutProps<T> {
-	title: "Top Albums" | "Top Tracks" | "Top Artists" | "Last Played"
-	initialData: PaginatedResponse<T>
-	endpoint: string
-	render: (opts: {
-		data: PaginatedResponse<T>
-		page: number
-		onNext: () => void
-		onPrev: () => void
-	}) => React.ReactNode
+  title: "Top Albums" | "Top Tracks" | "Top Artists" | "Last Played";
+  initialData: PaginatedResponse<T>;
+  endpoint: string;
+  render: (opts: {
+    data: PaginatedResponse<T>;
+    page: number;
+    onNext: () => void;
+    onPrev: () => void;
+  }) => React.ReactNode;
 }
 
 export default function ChartLayout<T>({
-	title,
-	initialData,
-	endpoint,
-	render,
+  title,
+  initialData,
+  endpoint,
+  render,
 }: ChartLayoutProps<T>) {
-	const pgTitle = `${title} - Koito`
+  const pgTitle = `${title} - Koito`;
 
-	const fetcher = useFetcher()
-	const location = useLocation()
-	const navigate = useNavigate()
+  const fetcher = useFetcher();
+  const location = useLocation();
+  const navigate = useNavigate();
 
-	const currentParams = new URLSearchParams(location.search)
-	const currentPage = parseInt(currentParams.get("page") || "1", 10)
+  const currentParams = new URLSearchParams(location.search);
+  const currentPage = parseInt(currentParams.get("page") || "1", 10);
 
-	const data: PaginatedResponse<T> = fetcher.data?.[endpoint]
-		? fetcher.data[endpoint]
-		: initialData
+  const data: PaginatedResponse<T> = fetcher.data?.[endpoint]
+    ? fetcher.data[endpoint]
+    : initialData;
 
-	const [bgColor, setBgColor] = useState<string>("(--color-bg)")
+  const [bgColor, setBgColor] = useState<string>("(--color-bg)");
 
-	useEffect(() => {
-		if ((data?.items?.length ?? 0) === 0) return
+  useEffect(() => {
+    if ((data?.items?.length ?? 0) === 0) return;
 
-		const img = (data.items[0] as any)?.image
-		if (!img) return
+    const img = (data.items[0] as any)?.image;
+    if (!img) return;
 
-		average(imageUrl(img, "small"), { amount: 1 }).then((color) => {
-			setBgColor(`rgba(${color[0]},${color[1]},${color[2]},0.4)`)
-		})
-	}, [data])
+    average(imageUrl(img, "small"), { amount: 1 }).then((color) => {
+      setBgColor(`rgba(${color[0]},${color[1]},${color[2]},0.4)`);
+    });
+  }, [data]);
 
-	const period = currentParams.get("period") ?? "day"
-	const year = currentParams.get("year") 
-	const month = currentParams.get("month")
-	const week = currentParams.get("week") 
+  const period = currentParams.get("period") ?? "day";
+  const year = currentParams.get("year");
+  const month = currentParams.get("month");
+  const week = currentParams.get("week");
 
-	const updateParams = (params: Record<string, string | null>) => {
-        const nextParams = new URLSearchParams(location.search)
+  const updateParams = (params: Record<string, string | null>) => {
+    const nextParams = new URLSearchParams(location.search);
 
-        for (const key in params) {
-            const val = params[key]
-            if (val !== null) {
-                nextParams.set(key, val)
-            } else {
-                nextParams.delete(key)
-            }
-        }
-    
-        const url = `/${endpoint}?${nextParams.toString()}`
-        navigate(url, { replace: false })
+    for (const key in params) {
+      const val = params[key];
+      if (val !== null) {
+        nextParams.set(key, val);
+      } else {
+        nextParams.delete(key);
+      }
     }
 
-	const handleSetPeriod = (p: string) => {
-		updateParams({
-            period: p,
-            page: "1",
-            year: null,
-            month: null,
-            week: null,
-        })        
-	}
-	const handleSetYear = (val: string) => {
-        if (val == "") {
-            updateParams({
-                period: period,
-                page: "1",
-                year: null,
-                month: null,
-                week: null
-            })
-            return
-        }
-		updateParams({
-            period: null,
-            page: "1",
-            year: val,
-        })  
-	}
-	const handleSetMonth = (val: string) => {
-		updateParams({
-            period: null,
-            page: "1",
-            year: year ?? new Date().getFullYear().toString(),
-            month: val,
-        })  
-	}
-	const handleSetWeek = (val: string) => {
-		updateParams({
-            period: null,
-            page: "1",
-            year: year ?? new Date().getFullYear().toString(),
-            month: null,
-            week: val,
-        })  
-	}
+    const url = `/${endpoint}?${nextParams.toString()}`;
+    navigate(url, { replace: false });
+  };
 
-	useEffect(() => {
-		fetcher.load(`/${endpoint}?${currentParams.toString()}`)
-	}, [location.search])
+  const handleSetPeriod = (p: string) => {
+    updateParams({
+      period: p,
+      page: "1",
+      year: null,
+      month: null,
+      week: null,
+    });
+  };
+  const handleSetYear = (val: string) => {
+    if (val == "") {
+      updateParams({
+        period: period,
+        page: "1",
+        year: null,
+        month: null,
+        week: null,
+      });
+      return;
+    }
+    updateParams({
+      period: null,
+      page: "1",
+      year: val,
+    });
+  };
+  const handleSetMonth = (val: string) => {
+    updateParams({
+      period: null,
+      page: "1",
+      year: year ?? new Date().getFullYear().toString(),
+      month: val,
+    });
+  };
+  const handleSetWeek = (val: string) => {
+    updateParams({
+      period: null,
+      page: "1",
+      year: year ?? new Date().getFullYear().toString(),
+      month: null,
+      week: val,
+    });
+  };
 
-	const setPage = (nextPage: number) => {
-		const nextParams = new URLSearchParams(location.search)
-		nextParams.set("page", String(nextPage))
-		const url = `/${endpoint}?${nextParams.toString()}`
-		fetcher.load(url)
-		navigate(url, { replace: false })
-	}
+  useEffect(() => {
+    fetcher.load(`/${endpoint}?${currentParams.toString()}`);
+  }, [location.search]);
 
-	const handleNextPage = () => setPage(currentPage + 1)
-	const handlePrevPage = () => setPage(currentPage - 1)
+  const setPage = (nextPage: number) => {
+    const nextParams = new URLSearchParams(location.search);
+    nextParams.set("page", String(nextPage));
+    const url = `/${endpoint}?${nextParams.toString()}`;
+    fetcher.load(url);
+    navigate(url, { replace: false });
+  };
 
-	const yearOptions = Array.from({ length: 10 }, (_, i) => `${new Date().getFullYear() - i}`)
-	const monthOptions = Array.from({ length: 12 }, (_, i) => `${i + 1}`)
-	const weekOptions = Array.from({ length: 53 }, (_, i) => `${i + 1}`)
+  const handleNextPage = () => setPage(currentPage + 1);
+  const handlePrevPage = () => setPage(currentPage - 1);
 
-    const getDateRange = (): string => {
-        let from: Date
-        let to: Date
+  const yearOptions = Array.from(
+    { length: 10 },
+    (_, i) => `${new Date().getFullYear() - i}`
+  );
+  const monthOptions = Array.from({ length: 12 }, (_, i) => `${i + 1}`);
+  const weekOptions = Array.from({ length: 53 }, (_, i) => `${i + 1}`);
 
-        const now = new Date()
-        const currentYear = now.getFullYear()
-        const currentMonth = now.getMonth() // 0-indexed
-        const currentDate = now.getDate()
+  const getDateRange = (): string => {
+    let from: Date;
+    let to: Date;
 
-        if (year && month) {
-            from = new Date(parseInt(year), parseInt(month) - 1, 1)
-            to = new Date(from)
-            to.setMonth(from.getMonth() + 1)
-            to.setDate(0)
-        } else if (year && week) {
-            const base = new Date(parseInt(year), 0, 1) // Jan 1 of the year
-            const weekNumber = parseInt(week)
-            from = new Date(base)
-            from.setDate(base.getDate() + (weekNumber - 1) * 7)
-            to = new Date(from)
-            to.setDate(from.getDate() + 6)
-        } else if (year) {
-            from = new Date(parseInt(year), 0, 1)
-            to = new Date(parseInt(year), 11, 31)
-        } else {
-            switch (period) {
-                case "day":
-                    from = new Date(now)
-                    to = new Date(now)
-                    break
-                case "week":
-                    to = new Date(now)
-                    from = new Date(now)
-                    from.setDate(to.getDate() - 6)
-                    break
-                case "month":
-                    to = new Date(now)
-                    from = new Date(now)
-                    if (currentMonth === 0) {
-                        from = new Date(currentYear - 1, 11, currentDate)
-                    } else {
-                        from = new Date(currentYear, currentMonth - 1, currentDate)
-                    }
-                    break
-                case "year":
-                    to = new Date(now)
-                    from = new Date(currentYear - 1, currentMonth, currentDate)
-                    break
-                case "all_time":
-                    return "All Time"
-                default:
-                    return ""
-            }
-        }
+    const now = new Date();
+    const currentYear = now.getFullYear();
+    const currentMonth = now.getMonth(); // 0-indexed
+    const currentDate = now.getDate();
 
-        const formatter = new Intl.DateTimeFormat(undefined, {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-        })
-    
-        return `${formatter.format(from)} - ${formatter.format(to)}`
+    if (year && month) {
+      from = new Date(parseInt(year), parseInt(month) - 1, 1);
+      to = new Date(from);
+      to.setMonth(from.getMonth() + 1);
+      to.setDate(0);
+    } else if (year && week) {
+      const base = new Date(parseInt(year), 0, 1); // Jan 1 of the year
+      const weekNumber = parseInt(week);
+      from = new Date(base);
+      from.setDate(base.getDate() + (weekNumber - 1) * 7);
+      to = new Date(from);
+      to.setDate(from.getDate() + 6);
+    } else if (year) {
+      from = new Date(parseInt(year), 0, 1);
+      to = new Date(parseInt(year), 11, 31);
+    } else {
+      switch (period) {
+        case "day":
+          from = new Date(now);
+          to = new Date(now);
+          break;
+        case "week":
+          to = new Date(now);
+          from = new Date(now);
+          from.setDate(to.getDate() - 6);
+          break;
+        case "month":
+          to = new Date(now);
+          from = new Date(now);
+          if (currentMonth === 0) {
+            from = new Date(currentYear - 1, 11, currentDate);
+          } else {
+            from = new Date(currentYear, currentMonth - 1, currentDate);
+          }
+          break;
+        case "year":
+          to = new Date(now);
+          from = new Date(currentYear - 1, currentMonth, currentDate);
+          break;
+        case "all_time":
+          return "All Time";
+        default:
+          return "";
+      }
     }
 
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
 
-	return (
-		<div
-			className="w-full min-h-screen"
-			style={{
-				background: `linear-gradient(to bottom, ${bgColor}, var(--color-bg) 500px)`,
-				transition: "1000",
-			}}
-		>
-			<title>{pgTitle}</title>
-			<meta property="og:title" content={pgTitle} />
-			<meta name="description" content={pgTitle} />
-			<div className="w-19/20 sm:17/20 mx-auto pt-6 sm:pt-12">
-				<h1>{title}</h1>
-				<div className="flex flex-col items-start md:flex-row sm:items-center gap-4">
-					<PeriodSelector current={period} setter={handleSetPeriod} disableCache />
-					<div className="flex gap-5">
-						<select
-							value={year ?? ""}
-							onChange={(e) => handleSetYear(e.target.value)}
-							className="px-2 py-1 rounded border border-gray-400"
-						>
-							<option value="">Year</option>
-							{yearOptions.map((y) => (
-								<option key={y} value={y}>{y}</option>
-							))}
-						</select>
-						<select
-							value={month ?? ""}
-							onChange={(e) => handleSetMonth(e.target.value)}
-							className="px-2 py-1 rounded border border-gray-400"
-						>
-							<option value="">Month</option>
-							{monthOptions.map((m) => (
-								<option key={m} value={m}>{m}</option>
-							))}
-						</select>
-						<select
-							value={week ?? ""}
-							onChange={(e) => handleSetWeek(e.target.value)}
-							className="px-2 py-1 rounded border border-gray-400"
-						>
-							<option value="">Week</option>
-							{weekOptions.map((w) => (
-								<option key={w} value={w}>{w}</option>
-							))}
-						</select>
-					</div>
-				</div>
-				<p className="mt-2 text-sm text-color-fg-secondary">{getDateRange()}</p>
-				<div className="mt-10 sm:mt-20 flex mx-auto justify-between">
-					{render({
-						data,
-						page: currentPage,
-						onNext: handleNextPage,
-						onPrev: handlePrevPage,
-					})}
-				</div>
-			</div>
-		</div>
-	)
+    return `${formatter.format(from)} - ${formatter.format(to)}`;
+  };
+
+  return (
+    <div
+      className="w-full min-h-screen"
+      style={{
+        background: `linear-gradient(to bottom, ${bgColor}, var(--color-bg) 500px)`,
+        transition: "1000",
+      }}
+    >
+      <title>{pgTitle}</title>
+      <meta property="og:title" content={pgTitle} />
+      <meta name="description" content={pgTitle} />
+      <div className="w-19/20 sm:17/20 mx-auto pt-6 sm:pt-12">
+        <h1>{title}</h1>
+        <div className="flex flex-col items-start md:flex-row sm:items-center gap-4">
+          <PeriodSelector
+            current={period}
+            setter={handleSetPeriod}
+            disableCache
+          />
+          <div className="flex gap-5">
+            <select
+              value={year ?? ""}
+              onChange={(e) => handleSetYear(e.target.value)}
+              className="px-2 py-1 rounded border border-gray-400"
+            >
+              <option value="">Year</option>
+              {yearOptions.map((y) => (
+                <option key={y} value={y}>
+                  {y}
+                </option>
+              ))}
+            </select>
+            <select
+              value={month ?? ""}
+              onChange={(e) => handleSetMonth(e.target.value)}
+              className="px-2 py-1 rounded border border-gray-400"
+            >
+              <option value="">Month</option>
+              {monthOptions.map((m) => (
+                <option key={m} value={m}>
+                  {m}
+                </option>
+              ))}
+            </select>
+            <select
+              value={week ?? ""}
+              onChange={(e) => handleSetWeek(e.target.value)}
+              className="px-2 py-1 rounded border border-gray-400"
+            >
+              <option value="">Week</option>
+              {weekOptions.map((w) => (
+                <option key={w} value={w}>
+                  {w}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <p className="mt-2 text-sm text-color-fg-secondary">{getDateRange()}</p>
+        <div className="mt-10 sm:mt-20 flex mx-auto justify-between">
+          {render({
+            data,
+            page: currentPage,
+            onNext: handleNextPage,
+            onPrev: handlePrevPage,
+          })}
+        </div>
+      </div>
+    </div>
+  );
 }

client/app/routes/Charts/TrackChart.tsx

@@ -6,7 +6,7 @@ import { type Album, type PaginatedResponse } from "api/api";
 export async function clientLoader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const page = url.searchParams.get("page") || "0";
-  url.searchParams.set('page', page)
+  url.searchParams.set("page", page);
 
   const res = await fetch(
     `/apis/web/v1/top-tracks?${url.searchParams.toString()}`
@@ -20,7 +20,9 @@ export async function clientLoader({ request }: LoaderFunctionArgs) {
 }
 
 export default function TrackChart() {
-  const { top_tracks: initialData } = useLoaderData<{ top_tracks: PaginatedResponse<Album> }>();
+  const { top_tracks: initialData } = useLoaderData<{
+    top_tracks: PaginatedResponse<Album>;
+  }>();
 
   return (
     <ChartLayout
@@ -29,15 +31,20 @@ export default function TrackChart() {
       endpoint="chart/top-tracks"
       render={({ data, page, onNext, onPrev }) => (
         <div className="flex flex-col gap-5">
-        <div className="flex gap-15 mx-auto">
-          <button className="default" onClick={onPrev} disabled={page <= 1}>
-            Prev
-          </button>
-          <button className="default" onClick={onNext} disabled={!data.has_next_page}>
-            Next
-          </button>
-        </div>
+          <div className="flex gap-15 mx-auto">
+            <button className="default" onClick={onPrev} disabled={page <= 1}>
+              Prev
+            </button>
+            <button
+              className="default"
+              onClick={onNext}
+              disabled={!data.has_next_page}
+            >
+              Next
+            </button>
+          </div>
           <TopItemList
+            ranked
             separators
             data={data}
             className="w-[400px] sm:w-[600px]"
@@ -47,7 +54,11 @@ export default function TrackChart() {
             <button className="default" onClick={onPrev} disabled={page === 0}>
               Prev
             </button>
-            <button className="default" onClick={onNext} disabled={!data.has_next_page}>
+            <button
+              className="default"
+              onClick={onNext}
+              disabled={!data.has_next_page}
+            >
               Next
             </button>
           </div>