feat: Rewind (#116)

* wip

* chore: update counts to allow unix timeframe

* feat: add db functions for counting new items

* wip: endpoint working

* wip

* wip: initial ui done

* add header, adjust ui

* add time listened toggle

* fix layout, year param

* param fixes

client/app/routes/RewindPage.tsx

@@ -0,0 +1,52 @@
+import Rewind from "~/components/rewind/Rewind";
+import type { Route } from "./+types/Home";
+import { type RewindStats } from "api/api";
+import { useState } from "react";
+import type { LoaderFunctionArgs } from "react-router";
+import { useLoaderData } from "react-router";
+import { getRewindYear } from "~/utils/utils";
+
+export async function clientLoader({ request }: LoaderFunctionArgs) {
+  const url = new URL(request.url);
+  const year = url.searchParams.get("year") || getRewindYear();
+
+  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: `Rewind - Koito` },
+    { name: "description", content: "Rewind - Koito" },
+  ];
+}
+
+export default function RewindPage() {
+  const [showTime, setShowTime] = useState(false);
+  const { stats: stats } = useLoaderData<{ stats: RewindStats }>();
+  return (
+    <main className="w-18/20">
+      <title>{stats.title} - Koito</title>
+      <meta property="og:title" content={`${stats.title} - Koito`} />
+      <meta name="description" content={`${stats.title} - Koito`} />
+      <div className="flex flex-col items-start mt-20 gap-10">
+        <div className="flex items-center gap-3">
+          <label htmlFor="show-time-checkbox">Show time listened?</label>
+          <input
+            type="checkbox"
+            name="show-time-checkbox"
+            checked={showTime}
+            onChange={(e) => setShowTime(!showTime)}
+          ></input>
+        </div>
+        {stats !== undefined && <Rewind stats={stats} includeTime={showTime} />}
+      </div>
+    </main>
+  );
+}