fix layout, year param

client/app/components/rewind/Rewind.tsx

@@ -13,7 +13,7 @@ export default function Rewind(props: Props) {
   const trackimg = props.stats.top_tracks[0].image;
   return (
     <div className="flex flex-col gap-7">
-      <h1>{props.stats.title}</h1>
+      <h2>{props.stats.title}</h2>
       <RewindTopItem
         title="Top Artist"
         imageSrc={imageUrl(artistimg, "medium")}

client/app/components/sidebar/Sidebar.tsx

@@ -44,7 +44,7 @@ export default function Sidebar() {
         <SidebarSearch size={iconSize} />
         <SidebarItem
           space={10}
-          to="/rewind"
+          to={`/rewind?year=${new Date().getFullYear()}`}
           name="Rewind"
           onClick={() => {}}
           modal={<></>}

client/app/routes/RewindPage.tsx

@@ -2,30 +2,50 @@ import Rewind from "~/components/rewind/Rewind";
 import type { Route } from "./+types/Home";
 import { getRewindStats, type RewindStats } from "api/api";
 import { useEffect, useState } from "react";
+import type { LoaderFunctionArgs } from "react-router";
+import { useLoaderData } from "react-router";
+
+export async function clientLoader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const year = url.searchParams.get("year") || new Date().getFullYear();
+
+  const res = await fetch(`/apis/web/v1/summary?year=${year}`);
+  if (!res.ok) {
+    throw new Response("Failed to load summary", { status: 500 });
+  }
+
+  const stats: RewindStats = await res.json();
+  stats.title = `Your ${year} Rewind`;
+  return { stats };
+}
 
 export function meta({}: Route.MetaArgs) {
-  return [{ title: "Koito" }, { name: "description", content: "Koito" }];
+  return [
+    { title: `Rewind - Koito` },
+    { name: "description", content: "Rewind - Koito" },
+  ];
 }
 
 export default function RewindPage() {
-  const [stats, setStats] = useState<RewindStats | undefined>(undefined);
   const [showTime, setShowTime] = useState(false);
-  useEffect(() => {
+  const { stats: stats } = useLoaderData<{ stats: RewindStats }>();
-    getRewindStats({ year: 2025 }).then((r) => setStats(r));
-  }, []);
   return (
-    <div className="flex flex-col items-start mt-20">
+    <main className="w-18/20">
-      <div className="flex items-center gap-3">
+      <title>{stats.title} - Koito</title>
-        <label htmlFor="show-time-checkbox">Show time listened?</label>
+      <meta property="og:title" content={`${stats.title} - Koito`} />
-        <input
+      <meta name="description" content={`${stats.title} - Koito`} />
-          type="checkbox"
+      <div className="flex flex-col items-start mt-20 gap-10">
-          name="show-time-checkbox"
+        <div className="flex items-center gap-3">
-          checked={showTime}
+          <label htmlFor="show-time-checkbox">Show time listened?</label>
-          onChange={(e) => setShowTime(!showTime)}
+          <input
-        ></input>
+            type="checkbox"
+            name="show-time-checkbox"
+            checked={showTime}
+            onChange={(e) => setShowTime(!showTime)}
+          ></input>
+        </div>
+        {stats !== undefined && <Rewind stats={stats} includeTime={showTime} />}
       </div>
-      <h2 className="mt-12">Your 2025 Rewind</h2>
+    </main>
-      {stats !== undefined && <Rewind stats={stats} includeTime={showTime} />}
-    </div>
   );
 }