wip

2026-04-22 20:11:50 -07:00 · 2025-12-31 00:46:32 -05:00 · 2025-12-31 00:46:32 -05:00 · b5e8d88451
commit b5e8d88451
parent 6b73f83484
29 changed files with 1271 additions and 963 deletions
--- a/client/api/api.ts
+++ b/client/api/api.ts
@ -15,6 +15,14 @@ interface getActivityArgs {
  album_id: number;
  track_id: number;
 }
+interface timeframe {
+  week?: number;
+  month?: number;
+  year?: number;
+  from?: number;
+  to?: number;
+  period?: string;
+}

 async function handleJson<T>(r: Response): Promise<T> {
  if (!r.ok) {
@ -281,6 +289,13 @@ function getNowPlaying(): Promise<NowPlaying> {
  return fetch("/apis/web/v1/now-playing").then((r) => r.json());
 }

+async function getRewindStats(args: timeframe): Promise<RewindStats> {
+  const r = await fetch(
+    `/apis/web/v1/summary?week=${args.week}&month=${args.month}&year=${args.year}&from=${args.from}&to=${args.to}`
+  );
+  return handleJson<RewindStats>(r);
+}
+
 export {
  getLastListens,
  getTopTracks,
@ -312,6 +327,7 @@ export {
  getExport,
  submitListen,
  getNowPlaying,
+  getRewindStats,
 };
 type Track = {
  id: number;
@ -404,6 +420,22 @@ type NowPlaying = {
  currently_playing: boolean;
  track: Track;
 };
+type RewindStats = {
+  title: string;
+  top_artists: Artist[];
+  top_albums: Album[];
+  top_tracks: Track[];
+  minutes_listened: number;
+  avg_minutes_listened_per_day: number;
+  plays: number;
+  avg_plays_per_day: number;
+  unique_tracks: number;
+  unique_albums: number;
+  unique_artists: number;
+  new_tracks: number;
+  new_albums: number;
+  new_artists: number;
+};

 export type {
  getItemsArgs,
@ -422,4 +454,5 @@ export type {
  Config,
  NowPlaying,
  Stats,
+  RewindStats,
 };
--- a/client/app/app.css
+++ b/client/app/app.css
@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=League+Spartan:wght@100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=League+Spartan:wght@100..900&display=swap");
@import "tailwindcss";

@theme {
@ -49,11 +49,8 @@
      opacity: 0;
    }
  }
-    
 }

-
-
 :root {
  --header-xl: 36px;
  --header-lg: 28px;
@ -66,7 +63,7 @@
@media (min-width: 60rem) {
  :root {
    --header-xl: 78px;
-    --header-lg: 28px;
+    --header-lg: 44px;
    --header-md: 22px;
    --header-sm: 16px;
    --header-xl-weight: 600;
@ -74,7 +71,6 @@
  }
 }

-
 html,
 body {
  background-color: var(--color-bg);
@ -106,16 +102,18 @@ h1 {
 h2 {
  font-family: "League Spartan";
  font-weight: var(--header-weight);
-  font-size: var(--header-md);
-  margin-bottom: 0.5em;
+  font-size: var(--header-lg);
 }
 h3 {
  font-family: "League Spartan";
-  font-size: var(--header-sm);
  font-weight: var(--header-weight);
+  font-size: var(--header-md);
+  margin-bottom: 0.5em;
 }
 h4 {
-  font-size: var(--header-md);
+  font-family: "League Spartan";
+  font-size: var(--header-sm);
+  font-weight: var(--header-weight);
 }
 .header-font {
  font-family: "League Spartan";
--- a/client/app/components/ActivityGrid.tsx
+++ b/client/app/components/ActivityGrid.tsx
@ -69,14 +69,14 @@ export default function ActivityGrid({
  if (isPending) {
    return (
      <div className="w-[500px]">
-        <h2>Activity</h2>
+        <h3>Activity</h3>
        <p>Loading...</p>
      </div>
    );
  } else if (isError) {
    return (
      <div className="w-[500px]">
-        <h2>Activity</h2>
+        <h3>Activity</h3>
        <p className="error">Error: {error.message}</p>
      </div>
    );
@ -148,7 +148,7 @@ export default function ActivityGrid({

  return (
    <div className="flex flex-col items-start">
-      <h2>Activity</h2>
+      <h3>Activity</h3>
      {configurable ? (
        <ActivityOptsSelector
          rangeSetter={setRange}
--- a/client/app/components/AlbumDisplay.tsx
+++ b/client/app/components/AlbumDisplay.tsx
@ -2,8 +2,8 @@ import { imageUrl, type Album } from "api/api";
 import { Link } from "react-router";

 interface Props {
-    album: Album 
-    size: number
+  album: Album;
+  size: number;
 }

 export default function AlbumDisplay({ album, size }: Props) {
@ -11,15 +11,22 @@ export default function AlbumDisplay({ album, size }: Props) {
    <div className="flex gap-3" key={album.id}>
      <div>
        <Link to={`/album/${album.id}`}>
-                <img src={imageUrl(album.image, "large")} alt={album.title} style={{width: size}}/>
+          <img
+            src={imageUrl(album.image, "large")}
+            alt={album.title}
+            style={{ width: size }}
+          />
        </Link>
      </div>
      <div className="flex flex-col items-start" style={{ width: size }}>
-                <Link to={`/album/${album.id}`} className="hover:text-(--color-fg-secondary)">
+        <Link
+          to={`/album/${album.id}`}
+          className="hover:text-(--color-fg-secondary)"
+        >
          <h4>{album.title}</h4>
        </Link>
        <p className="color-fg-secondary">{album.listen_count} plays</p>
      </div>
    </div>
-    )
+  );
 }
--- a/client/app/components/AllTimeStats.tsx
+++ b/client/app/components/AllTimeStats.tsx
@ -10,7 +10,7 @@ export default function AllTimeStats() {
  if (isPending) {
    return (
      <div className="w-[200px]">
-        <h2>All Time Stats</h2>
+        <h3>All Time Stats</h3>
        <p>Loading...</p>
      </div>
    );
@ -18,7 +18,7 @@ export default function AllTimeStats() {
    return (
      <>
        <div>
-          <h2>All Time Stats</h2>
+          <h3>All Time Stats</h3>
          <p className="error">Error: {error.message}</p>
        </div>
      </>
@ -29,7 +29,7 @@ export default function AllTimeStats() {

  return (
    <div>
-      <h2>All Time Stats</h2>
+      <h3>All Time Stats</h3>
      <div>
        <span
          className={numberClasses}
--- a/client/app/components/ArtistAlbums.tsx
+++ b/client/app/components/ArtistAlbums.tsx
@ -1,51 +1,59 @@
-import { useQuery } from "@tanstack/react-query"
-import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api"
-import { Link } from "react-router"
+import { useQuery } from "@tanstack/react-query";
+import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api";
+import { Link } from "react-router";

 interface Props {
-    artistId: number
-    name: string
-    period: string
+  artistId: number;
+  name: string;
+  period: string;
 }

 export default function ArtistAlbums({ artistId, name, period }: Props) {
-
  const { isPending, isError, data, error } = useQuery({
-        queryKey: ['top-albums', {limit: 99, period: "all_time", artist_id: artistId, page: 0}], 
+    queryKey: [
+      "top-albums",
+      { limit: 99, period: "all_time", artist_id: artistId, page: 0 },
+    ],
    queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
-    })
+  });

  if (isPending) {
    return (
      <div>
-                <h2>Albums From This Artist</h2>
+        <h3>Albums From This Artist</h3>
        <p>Loading...</p>
      </div>
-        )
+    );
  }
  if (isError) {
    return (
      <div>
-                <h2>Albums From This Artist</h2>
+        <h3>Albums From This Artist</h3>
        <p className="error">Error:{error.message}</p>
      </div>
-        )
+    );
  }

  return (
    <div>
-            <h2>Albums featuring {name}</h2>
+      <h3>Albums featuring {name}</h3>
      <div className="flex flex-wrap gap-8">
        {data.items.map((item) => (
          <Link to={`/album/${item.id}`} className="flex gap-2 items-start">
-                    <img src={imageUrl(item.image, "medium")} alt={item.title} style={{width: 130}} />
+            <img
+              src={imageUrl(item.image, "medium")}
+              alt={item.title}
+              style={{ width: 130 }}
+            />
            <div className="w-[180px] flex flex-col items-start gap-1">
              <p>{item.title}</p>
-                        <p className="text-sm color-fg-secondary">{item.listen_count} play{item.listen_count > 1 ? 's' : ''}</p>
+              <p className="text-sm color-fg-secondary">
+                {item.listen_count} play{item.listen_count > 1 ? "s" : ""}
+              </p>
            </div>
          </Link>
        ))}
      </div>
    </div>
-    )
+  );
 }
--- a/client/app/components/LastPlays.tsx
+++ b/client/app/components/LastPlays.tsx
@ -63,14 +63,14 @@ export default function LastPlays(props: Props) {
  if (isPending) {
    return (
      <div className="w-[300px] sm:w-[500px]">
-        <h2>Last Played</h2>
+        <h3>Last Played</h3>
        <p>Loading...</p>
      </div>
    );
  } else if (isError) {
    return (
      <div className="w-[300px] sm:w-[500px]">
-        <h2>Last Played</h2>
+        <h3>Last Played</h3>
        <p className="error">Error: {error.message}</p>
      </div>
    );
@ -85,9 +85,9 @@ export default function LastPlays(props: Props) {

  return (
    <div className="text-sm sm:text-[16px]">
-      <h2 className="hover:underline">
+      <h3 className="hover:underline">
        <Link to={`/listens?period=all_time${params}`}>Last Played</Link>
-      </h2>
+      </h3>
      <table className="-ml-4">
        <tbody>
          {props.showNowPlaying && npData && npData.currently_playing && (
--- a/client/app/components/TopAlbums.tsx
+++ b/client/app/components/TopAlbums.tsx
@ -33,14 +33,14 @@ export default function TopAlbums(props: Props) {
  if (isPending) {
    return (
      <div className="w-[300px]">
-        <h2>Top Albums</h2>
+        <h3>Top Albums</h3>
        <p>Loading...</p>
      </div>
    );
  } else if (isError) {
    return (
      <div className="w-[300px]">
-        <h2>Top Albums</h2>
+        <h3>Top Albums</h3>
        <p className="error">Error: {error.message}</p>
      </div>
    );
@ -48,7 +48,7 @@ export default function TopAlbums(props: Props) {

  return (
    <div>
-      <h2 className="hover:underline">
+      <h3 className="hover:underline">
        <Link
          to={`/chart/top-albums?period=${props.period}${
            props.artistId ? `&artist_id=${props.artistId}` : ""
@ -56,7 +56,7 @@ export default function TopAlbums(props: Props) {
        >
          Top Albums
        </Link>
-      </h2>
+      </h3>
      <div className="max-w-[300px]">
        <TopItemList type="album" data={data} />
        {data.items.length < 1 ? "Nothing to show" : ""}
--- a/client/app/components/TopArtists.tsx
+++ b/client/app/components/TopArtists.tsx
@ -24,14 +24,14 @@ export default function TopArtists(props: Props) {
  if (isPending) {
    return (
      <div className="w-[300px]">
-        <h2>Top Artists</h2>
+        <h3>Top Artists</h3>
        <p>Loading...</p>
      </div>
    );
  } else if (isError) {
    return (
      <div className="w-[300px]">
-        <h2>Top Artists</h2>
+        <h3>Top Artists</h3>
        <p className="error">Error: {error.message}</p>
      </div>
    );
@ -39,11 +39,11 @@ export default function TopArtists(props: Props) {

  return (
    <div>
-      <h2 className="hover:underline">
+      <h3 className="hover:underline">
        <Link to={`/chart/top-artists?period=${props.period}`}>
          Top Artists
        </Link>
-      </h2>
+      </h3>
      <div className="max-w-[300px]">
        <TopItemList type="artist" data={data} />
        {data.items.length < 1 ? "Nothing to show" : ""}
--- a/client/app/components/TopThreeAlbums.tsx
+++ b/client/app/components/TopThreeAlbums.tsx
@ -1,38 +1,43 @@
-import { useQuery } from "@tanstack/react-query"
-import { getTopAlbums, type getItemsArgs } from "api/api"
-import AlbumDisplay from "./AlbumDisplay"
+import { useQuery } from "@tanstack/react-query";
+import { getTopAlbums, type getItemsArgs } from "api/api";
+import AlbumDisplay from "./AlbumDisplay";

 interface Props {
-    period: string
-    artistId?: Number
-    vert?: boolean
-    hideTitle?: boolean
+  period: string;
+  artistId?: Number;
+  vert?: boolean;
+  hideTitle?: boolean;
 }

 export default function TopThreeAlbums(props: Props) {
-
  const { isPending, isError, data, error } = useQuery({
-        queryKey: ['top-albums', {limit: 3, period: props.period, artist_id: props.artistId, page: 0}], 
+    queryKey: [
+      "top-albums",
+      { limit: 3, period: props.period, artist_id: props.artistId, page: 0 },
+    ],
    queryFn: ({ queryKey }) => getTopAlbums(queryKey[1] as getItemsArgs),
-    })
+  });

  if (isPending) {
-        return <p>Loading...</p>
+    return <p>Loading...</p>;
  }
  if (isError) {
-        return <p className="error">Error:{error.message}</p>
+    return <p className="error">Error:{error.message}</p>;
  }

-    console.log(data)
+  console.log(data);

  return (
    <div>
-            {!props.hideTitle && <h2>Top Three Albums</h2>}
-            <div className={`flex ${props.vert ? 'flex-col' : ''}`} style={{gap: 15}}>
+      {!props.hideTitle && <h3>Top Three Albums</h3>}
+      <div
+        className={`flex ${props.vert ? "flex-col" : ""}`}
+        style={{ gap: 15 }}
+      >
        {data.items.map((item, index) => (
          <AlbumDisplay album={item} size={index === 0 ? 190 : 130} />
        ))}
      </div>
    </div>
-    )
+  );
 }
--- a/client/app/components/TopTracks.tsx
+++ b/client/app/components/TopTracks.tsx
@ -31,14 +31,14 @@ const TopTracks = (props: Props) => {
  if (isPending) {
    return (
      <div className="w-[300px]">
-        <h2>Top Tracks</h2>
+        <h3>Top Tracks</h3>
        <p>Loading...</p>
      </div>
    );
  } else if (isError) {
    return (
      <div className="w-[300px]">
-        <h2>Top Tracks</h2>
+        <h3>Top Tracks</h3>
        <p className="error">Error: {error.message}</p>
      </div>
    );
@ -51,11 +51,11 @@ const TopTracks = (props: Props) => {

  return (
    <div>
-      <h2 className="hover:underline">
+      <h3 className="hover:underline">
        <Link to={`/chart/top-tracks?period=${props.period}${params}`}>
          Top Tracks
        </Link>
-      </h2>
+      </h3>
      <div className="max-w-[300px]">
        <TopItemList type="track" data={data} />
        {data.items.length < 1 ? "Nothing to show" : ""}
--- a/client/app/components/modals/Account.tsx
+++ b/client/app/components/modals/Account.tsx
@ -1,66 +1,76 @@
-import { logout, updateUser } from "api/api"
-import { useState } from "react"
-import { AsyncButton } from "../AsyncButton"
-import { useAppContext } from "~/providers/AppProvider"
+import { logout, updateUser } from "api/api";
+import { useState } from "react";
+import { AsyncButton } from "../AsyncButton";
+import { useAppContext } from "~/providers/AppProvider";

 export default function Account() {
-    const [username, setUsername] = useState('')
-    const [password, setPassword] = useState('')
-    const [confirmPw, setConfirmPw] = useState('')
-    const [loading, setLoading] = useState(false)
-    const [error, setError] = useState('')
-    const [success, setSuccess] = useState('')
-    const { user, setUsername: setCtxUsername } = useAppContext()
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPw, setConfirmPw] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
+  const { user, setUsername: setCtxUsername } = useAppContext();

  const logoutHandler = () => {
-        setLoading(true)
+    setLoading(true);
    logout()
-        .then(r => {
+      .then((r) => {
        if (r.ok) {
-                window.location.reload()
+          window.location.reload();
        } else {
-                r.json().then(r => setError(r.error))
-            }
-        }).catch(err => setError(err))
-        setLoading(false)
+          r.json().then((r) => setError(r.error));
        }
+      })
+      .catch((err) => setError(err));
+    setLoading(false);
+  };
  const updateHandler = () => {
-        setError('')
-        setSuccess('')
+    setError("");
+    setSuccess("");
    if (password != "" && confirmPw === "") {
-            setError("confirm your new password before submitting")
-            return
+      setError("confirm your new password before submitting");
+      return;
    }
-        setError('')
-        setSuccess('')
-        setLoading(true)
+    setError("");
+    setSuccess("");
+    setLoading(true);
    updateUser(username, password)
-        .then(r => {
+      .then((r) => {
        if (r.ok) {
-                setSuccess("sucessfully updated user")
+          setSuccess("sucessfully updated user");
          if (username != "") {
-                    setCtxUsername(username)
+            setCtxUsername(username);
          }
-                setUsername('')
-                setPassword('')
-                setConfirmPw('')
+          setUsername("");
+          setPassword("");
+          setConfirmPw("");
        } else {
-                r.json().then((r) => setError(r.error))
-            }
-        }).catch(err => setError(err))
-        setLoading(false)
+          r.json().then((r) => setError(r.error));
        }
+      })
+      .catch((err) => setError(err));
+    setLoading(false);
+  };

  return (
    <>
-        <h2>Account</h2>
+      <h3>Account</h3>
      <div className="flex flex-col gap-6">
        <div className="flex flex-col gap-4 items-center">
-                <p>You're logged in as <strong>{user?.username}</strong></p>
-                <AsyncButton loading={loading} onClick={logoutHandler}>Logout</AsyncButton>
+          <p>
+            You're logged in as <strong>{user?.username}</strong>
+          </p>
+          <AsyncButton loading={loading} onClick={logoutHandler}>
+            Logout
+          </AsyncButton>
        </div>
-            <h2>Update User</h2>
-            <form action="#" onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-4">
+        <h3>Update User</h3>
+        <form
+          action="#"
+          onSubmit={(e) => e.preventDefault()}
+          className="flex flex-col gap-4"
+        >
          <div className="flex flex gap-4">
            <input
              name="koito-update-username"
@ -72,10 +82,16 @@ export default function Account() {
            />
          </div>
          <div className="w-sm">
-                    <AsyncButton loading={loading} onClick={updateHandler}>Submit</AsyncButton>
+            <AsyncButton loading={loading} onClick={updateHandler}>
+              Submit
+            </AsyncButton>
          </div>
        </form>
-            <form action="#" onSubmit={(e) => e.preventDefault()} className="flex flex-col gap-4">
+        <form
+          action="#"
+          onSubmit={(e) => e.preventDefault()}
+          className="flex flex-col gap-4"
+        >
          <div className="flex flex gap-4">
            <input
              name="koito-update-password"
@ -95,12 +111,14 @@ export default function Account() {
            />
          </div>
          <div className="w-sm">
-                    <AsyncButton loading={loading} onClick={updateHandler}>Submit</AsyncButton>
+            <AsyncButton loading={loading} onClick={updateHandler}>
+              Submit
+            </AsyncButton>
          </div>
        </form>
        {success != "" && <p className="success">{success}</p>}
        {error != "" && <p className="error">{error}</p>}
      </div>
    </>
-    )
+  );
 }
--- a/client/app/components/modals/AddListenModal.tsx
+++ b/client/app/components/modals/AddListenModal.tsx
@ -5,43 +5,44 @@ import { submitListen } from "api/api";
 import { useNavigate } from "react-router";

 interface Props {
-    open: boolean 
-    setOpen: Function
-    trackid: number
+  open: boolean;
+  setOpen: Function;
+  trackid: number;
 }

 export default function AddListenModal({ open, setOpen, trackid }: Props) {
-    const [ts, setTS] = useState<Date>(new Date);
-    const [loading, setLoading] = useState(false)
-    const [error, setError] = useState('')
-    const navigate = useNavigate()
+  const [ts, setTS] = useState<Date>(new Date());
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const navigate = useNavigate();

  const close = () => {
-        setOpen(false)
-    }
+    setOpen(false);
+  };

  const submit = () => {
-        setLoading(true)
-        submitListen(trackid.toString(), ts)
-        .then(r => {
+    setLoading(true);
+    submitListen(trackid.toString(), ts).then((r) => {
      if (r.ok) {
-                setLoading(false)
-                navigate(0)
+        setLoading(false);
+        navigate(0);
      } else {
-                r.json().then(r => setError(r.error))
-                setLoading(false)
-            }
-        })
+        r.json().then((r) => setError(r.error));
+        setLoading(false);
      }
+    });
+  };

  const formatForDatetimeLocal = (d: Date) => {
    const pad = (n: number) => n.toString().padStart(2, "0");
-        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(
+      d.getDate()
+    )}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  };

  return (
    <Modal isOpen={open} onClose={close}>
-            <h2>Add Listen</h2>
+      <h3>Add Listen</h3>
      <div className="flex flex-col items-center gap-4">
        <input
          type="datetime-local"
@ -49,9 +50,11 @@ export default function AddListenModal({ open, setOpen, trackid }: Props) {
          value={formatForDatetimeLocal(ts)}
          onChange={(e) => setTS(new Date(e.target.value))}
        />
-                <AsyncButton loading={loading} onClick={submit}>Submit</AsyncButton>
+        <AsyncButton loading={loading} onClick={submit}>
+          Submit
+        </AsyncButton>
        <p className="error">{error}</p>
      </div>
    </Modal>
-    )
+  );
 }
--- a/client/app/components/modals/ApiKeysModal.tsx
+++ b/client/app/components/modals/ApiKeysModal.tsx
@ -11,10 +11,10 @@ type CopiedState = {
 };

 export default function ApiKeysModal() {
-    const [input, setInput] = useState('')
-    const [loading, setLoading ] = useState(false)
-    const [err, setError ] = useState<string>()
-    const [displayData, setDisplayData] = useState<ApiKey[]>([])
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [err, setError] = useState<string>();
+  const [displayData, setDisplayData] = useState<ApiKey[]>([]);
  const [copied, setCopied] = useState<CopiedState | null>(null);
  const [expandedKey, setExpandedKey] = useState<string | null>(null);
  const textRefs = useRef<Record<string, HTMLDivElement | null>>({});
@ -34,9 +34,7 @@ export default function ApiKeysModal() {
  };

  const { isPending, isError, data, error } = useQuery({
-        queryKey: [
-            'api-keys'
-        ], 
+    queryKey: ["api-keys"],
    queryFn: () => {
      return getApiKeys();
    },
@ -44,19 +42,15 @@ export default function ApiKeysModal() {

  useEffect(() => {
    if (data) {
-            setDisplayData(data)
+      setDisplayData(data);
    }
-    }, [data])    
+  }, [data]);

  if (isError) {
-        return (
-            <p className="error">Error: {error.message}</p>
-        )
+    return <p className="error">Error: {error.message}</p>;
  }
  if (isPending) {
-        return (
-            <p>Loading...</p>
-        )
+    return <p>Loading...</p>;
  }

  const handleCopy = (e: React.MouseEvent<HTMLButtonElement>, text: string) => {
@ -66,7 +60,9 @@ export default function ApiKeysModal() {
      fallbackCopy(text);
    }

-        const parentRect = (e.currentTarget.closest(".relative") as HTMLElement).getBoundingClientRect();
+    const parentRect = (
+      e.currentTarget.closest(".relative") as HTMLElement
+    ).getBoundingClientRect();
    const buttonRect = e.currentTarget.getBoundingClientRect();

    setCopied({
@ -94,56 +90,69 @@ export default function ApiKeysModal() {
  };

  const handleCreateApiKey = () => {
-        setError(undefined)
+    setError(undefined);
    if (input === "") {
-            setError("a label must be provided")
-            return
+      setError("a label must be provided");
+      return;
    }
-        setLoading(true)
+    setLoading(true);
    createApiKey(input)
-        .then(r => {
-            setDisplayData([r, ...displayData])
-            setInput('')
-        }).catch((err) => setError(err.message))
-        setLoading(false)
-    }
+      .then((r) => {
+        setDisplayData([r, ...displayData]);
+        setInput("");
+      })
+      .catch((err) => setError(err.message));
+    setLoading(false);
+  };

  const handleDeleteApiKey = (id: number) => {
-        setError(undefined)
-        setLoading(true)
-        deleteApiKey(id)
-        .then(r => {
+    setError(undefined);
+    setLoading(true);
+    deleteApiKey(id).then((r) => {
      if (r.ok) {
-                setDisplayData(displayData.filter((v) => v.id != id))
+        setDisplayData(displayData.filter((v) => v.id != id));
      } else {
-                r.json().then((r) => setError(r.error))
-            }
-        })
-        setLoading(false)
-
+        r.json().then((r) => setError(r.error));
      }
+    });
+    setLoading(false);
+  };

  return (
    <div className="">
-        <h2>API Keys</h2>
+      <h3>API Keys</h3>
      <div className="flex flex-col gap-4 relative">
        {displayData.map((v) => (
-                <div className="flex gap-2"><div
+          <div className="flex gap-2">
+            <div
              key={v.key}
-                        ref={el => {
+              ref={(el) => {
                textRefs.current[v.key] = el;
              }}
              onClick={() => handleRevealAndSelect(v.key)}
              className={`bg p-3 rounded-md flex-grow cursor-pointer select-text ${
-                            expandedKey === v.key ? '' : 'truncate'
+                expandedKey === v.key ? "" : "truncate"
              }`}
-                        style={{ whiteSpace: 'nowrap' }}
+              style={{ whiteSpace: "nowrap" }}
              title={v.key} // optional tooltip
            >
-                        {expandedKey === v.key ? v.key : `${v.key.slice(0, 8)}... ${v.label}`}
+              {expandedKey === v.key
+                ? v.key
+                : `${v.key.slice(0, 8)}... ${v.label}`}
            </div>
-                    <button onClick={(e) => handleCopy(e, v.key)} className="large-button px-5 rounded-md"><Copy size={16} /></button>
-                    <AsyncButton loading={loading} onClick={() => handleDeleteApiKey(v.id)} confirm><Trash size={16} /></AsyncButton>
+            <button
+              onClick={(e) => handleCopy(e, v.key)}
+              className="large-button px-5 rounded-md"
+            >
+              <Copy size={16} />
+            </button>
+            <AsyncButton
+              loading={loading}
+              onClick={() => handleDeleteApiKey(v.id)}
+              confirm
+            >
+              <Trash size={16} />
+            </AsyncButton>
          </div>
        ))}
        <div className="flex gap-2 w-3/5">
@ -154,7 +163,9 @@ export default function ApiKeysModal() {
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
-                <AsyncButton loading={loading} onClick={handleCreateApiKey}>Create</AsyncButton>
+          <AsyncButton loading={loading} onClick={handleCreateApiKey}>
+            Create
+          </AsyncButton>
        </div>
        {err && <p className="error">{err}</p>}
        {copied?.visible && (
@ -172,5 +183,5 @@ export default function ApiKeysModal() {
        )}
      </div>
    </div>
-    )
+  );
 }
--- a/client/app/components/modals/DeleteModal.tsx
+++ b/client/app/components/modals/DeleteModal.tsx
@ -1,40 +1,41 @@
-import { deleteItem } from "api/api"
-import { AsyncButton } from "../AsyncButton"
-import { Modal } from "./Modal"
-import { useNavigate } from "react-router"
-import { useState } from "react"
+import { deleteItem } from "api/api";
+import { AsyncButton } from "../AsyncButton";
+import { Modal } from "./Modal";
+import { useNavigate } from "react-router";
+import { useState } from "react";

 interface Props {
-    open: boolean
-    setOpen: Function
-    title: string,
-    id: number,
-    type: string
+  open: boolean;
+  setOpen: Function;
+  title: string;
+  id: number;
+  type: string;
 }

 export default function DeleteModal({ open, setOpen, title, id, type }: Props) {
-    const [loading, setLoading] = useState(false)
-    const navigate = useNavigate()
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();

  const doDelete = () => {
-        setLoading(true)
-        deleteItem(type.toLowerCase(), id)
-        .then(r => {
+    setLoading(true);
+    deleteItem(type.toLowerCase(), id).then((r) => {
      if (r.ok) {
-                navigate('/')
+        navigate("/");
      } else {
-                console.log(r)
-            }
-        })
+        console.log(r);
      }
+    });
+  };

  return (
    <Modal isOpen={open} onClose={() => setOpen(false)}>
-            <h2>Delete "{title}"?</h2>
+      <h3>Delete "{title}"?</h3>
      <p>This action is irreversible!</p>
      <div className="flex flex-col mt-3 items-center">
-                <AsyncButton loading={loading} onClick={doDelete}>Yes, Delete It</AsyncButton>
+        <AsyncButton loading={loading} onClick={doDelete}>
+          Yes, Delete It
+        </AsyncButton>
      </div>
    </Modal>
-    )
+  );
 }
--- a/client/app/components/modals/EditModal/EditModal.tsx
+++ b/client/app/components/modals/EditModal/EditModal.tsx
@ -108,7 +108,7 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
    <Modal maxW={1000} isOpen={open} onClose={handleClose}>
      <div className="flex flex-col items-start gap-6 w-full">
        <div className="w-full">
-          <h2>Alias Manager</h2>
+          <h3>Alias Manager</h3>
          <div className="flex flex-col gap-4">
            {displayData.map((v) => (
              <div className="flex gap-2">
--- a/client/app/components/modals/EditModal/SetPrimaryArtist.tsx
+++ b/client/app/components/modals/EditModal/SetPrimaryArtist.tsx
@ -1,26 +1,28 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAlbum, type Artist } from "api/api";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";

 interface Props {
-    id: number
-    type: string
+  id: number;
+  type: string;
 }

 export default function SetPrimaryArtist({ id, type }: Props) {
-    const [err, setErr] = useState('')
-    const [primary, setPrimary] = useState<Artist>()
-    const [success, setSuccess] = useState('')
+  const [err, setErr] = useState("");
+  const [primary, setPrimary] = useState<Artist>();
+  const [success, setSuccess] = useState("");

  const { isPending, isError, data, error } = useQuery({
    queryKey: [
-            'get-artists-'+type.toLowerCase(), 
+      "get-artists-" + type.toLowerCase(),
      {
-                id: id
+        id: id,
      },
    ],
    queryFn: () => {
-            return fetch('/apis/web/v1/artists?'+type.toLowerCase()+'_id='+id).then(r => r.json()) as Promise<Artist[]>;
+      return fetch(
+        "/apis/web/v1/artists?" + type.toLowerCase() + "_id=" + id
+      ).then((r) => r.json()) as Promise<Artist[]>;
    },
  });

@ -28,45 +30,43 @@ export default function SetPrimaryArtist({ id, type }: Props) {
    if (data) {
      for (let a of data) {
        if (a.is_primary) {
-                    setPrimary(a)
-                    break
+          setPrimary(a);
+          break;
        }
      }
    }
-    }, [data]) 
+  }, [data]);

  if (isError) {
-        return (
-            <p className="error">Error: {error.message}</p>
-        )
+    return <p className="error">Error: {error.message}</p>;
  }
  if (isPending) {
-        return (
-            <p>Loading...</p>
-        )
+    return <p>Loading...</p>;
  }

  const updatePrimary = (artist: number, val: boolean) => {
-        setErr('');
-        setSuccess('');
-        fetch(`/apis/web/v1/artists/primary?artist_id=${artist}&${type.toLowerCase()}_id=${id}&is_primary=${val}`, { 
-            method: 'POST',
+    setErr("");
+    setSuccess("");
+    fetch(
+      `/apis/web/v1/artists/primary?artist_id=${artist}&${type.toLowerCase()}_id=${id}&is_primary=${val}`,
+      {
+        method: "POST",
        headers: {
-                "Content-Type": "application/x-www-form-urlencoded"
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
      }
-        })
-            .then(r => {
+    ).then((r) => {
      if (r.ok) {
-                    setSuccess('successfully updated primary artists');
+        setSuccess("successfully updated primary artists");
      } else {
-                    r.json().then(r => setErr(r.error));
+        r.json().then((r) => setErr(r.error));
      }
    });
-    }
+  };

  return (
    <div className="w-full">
-            <h2>Set Primary Artist</h2>
+      <h3>Set Primary Artist</h3>
      <div className="flex flex-col gap-4">
        <select
          name="mark-various-artists"
--- a/client/app/components/modals/EditModal/SetVariousArtist.tsx
+++ b/client/app/components/modals/EditModal/SetVariousArtist.tsx
@ -1,21 +1,21 @@
 import { useQuery } from "@tanstack/react-query";
 import { getAlbum } from "api/api";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";

 interface Props {
-    id: number
+  id: number;
 }

 export default function SetVariousArtists({ id }: Props) {
-    const [err, setErr] = useState('')
-    const [va, setVA] = useState(false)
-    const [success, setSuccess] = useState('')
+  const [err, setErr] = useState("");
+  const [va, setVA] = useState(false);
+  const [success, setSuccess] = useState("");

  const { isPending, isError, data, error } = useQuery({
    queryKey: [
-            'get-album', 
+      "get-album",
      {
-                id: id
+        id: id,
      },
    ],
    queryFn: ({ queryKey }) => {
@ -26,37 +26,34 @@ export default function SetVariousArtists({ id }: Props) {

  useEffect(() => {
    if (data) {
-            setVA(data.is_various_artists)
+      setVA(data.is_various_artists);
    }
-    }, [data]) 
+  }, [data]);

  if (isError) {
-        return (
-            <p className="error">Error: {error.message}</p>
-        )
+    return <p className="error">Error: {error.message}</p>;
  }
  if (isPending) {
-        return (
-            <p>Loading...</p>
-        )
+    return <p>Loading...</p>;
  }

  const updateVA = (val: boolean) => {
-        setErr('');
-        setSuccess('');
-        fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, { method: 'PATCH' })
-            .then(r => {
+    setErr("");
+    setSuccess("");
+    fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, {
+      method: "PATCH",
+    }).then((r) => {
      if (r.ok) {
-                    setSuccess('Successfully updated album');
+        setSuccess("Successfully updated album");
      } else {
-                    r.json().then(r => setErr(r.error));
+        r.json().then((r) => setErr(r.error));
      }
    });
-    }
+  };

  return (
    <div className="w-full">
-            <h2>Mark as Various Artists</h2>
+      <h3>Mark as Various Artists</h3>
      <div className="flex flex-col gap-4">
        <select
          name="mark-various-artists"
@ -64,7 +61,7 @@ export default function SetVariousArtists({ id }: Props) {
          className="w-30 px-3 py-2 rounded-md"
          value={va.toString()}
          onChange={(e) => {
-                    const val = e.target.value === 'true';
+            const val = e.target.value === "true";
            setVA(val);
            updateVA(val);
          }}
@ -76,5 +73,5 @@ export default function SetVariousArtists({ id }: Props) {
        {success && <p className="success">{success}</p>}
      </div>
    </div>
-    )
+  );
 }
--- a/client/app/components/modals/ExportModal.tsx
+++ b/client/app/components/modals/ExportModal.tsx
@ -3,43 +3,45 @@ import { AsyncButton } from "../AsyncButton";
 import { getExport } from "api/api";

 export default function ExportModal() {
-    const [loading, setLoading] = useState(false)
-    const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");

  const handleExport = () => {
-        setLoading(true)
+    setLoading(true);
    fetch(`/apis/web/v1/export`, {
-            method: "GET"
+      method: "GET",
    })
-        .then(res => {
+      .then((res) => {
        if (res.ok) {
-                res.blob()
-                .then(blob => {
-                    const url = window.URL.createObjectURL(blob)
-                    const a = document.createElement("a")
-                    a.href = url
-                    a.download = "koito_export.json"
-                    document.body.appendChild(a)
-                    a.click()
-                    a.remove()
-                    window.URL.revokeObjectURL(url)
-                    setLoading(false)
-                })
+          res.blob().then((blob) => {
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "koito_export.json";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            window.URL.revokeObjectURL(url);
+            setLoading(false);
+          });
        } else {
-                res.json().then(r => setError(r.error))
-                setLoading(false)
+          res.json().then((r) => setError(r.error));
+          setLoading(false);
        }
-        }).catch(err => {
-            setError(err)
-            setLoading(false)
      })
-    }
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  };

  return (
    <div>
-            <h2>Export</h2>
-            <AsyncButton loading={loading} onClick={handleExport}>Export Data</AsyncButton>
+      <h3>Export</h3>
+      <AsyncButton loading={loading} onClick={handleExport}>
+        Export Data
+      </AsyncButton>
      {error && <p className="error">{error}</p>}
    </div>
-    )
+  );
 }
--- a/client/app/components/modals/ImageReplaceModal.tsx
+++ b/client/app/components/modals/ImageReplaceModal.tsx
@ -50,7 +50,7 @@ export default function ImageReplaceModal({

  return (
    <Modal isOpen={open} onClose={closeModal}>
-      <h2>Replace Image</h2>
+      <h3>Replace Image</h3>
      <div className="flex flex-col items-center">
        <input
          type="text"
--- a/client/app/components/modals/LoginForm.tsx
+++ b/client/app/components/modals/LoginForm.tsx
@ -1,37 +1,45 @@
-import { login } from "api/api"
-import { useEffect, useState } from "react"
-import { AsyncButton } from "../AsyncButton"
+import { login } from "api/api";
+import { useEffect, useState } from "react";
+import { AsyncButton } from "../AsyncButton";

 export default function LoginForm() {
-    const [loading, setLoading] = useState(false)
-    const [error, setError] = useState('')
-    const [username, setUsername] = useState('')
-    const [password, setPassword] = useState('')
-    const [remember, setRemember] = useState(false)
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [remember, setRemember] = useState(false);

  const loginHandler = () => {
    if (username && password) {
-            setLoading(true)
+      setLoading(true);
      login(username, password, remember)
-            .then(r => {
+        .then((r) => {
          if (r.status >= 200 && r.status < 300) {
-                    window.location.reload()
+            window.location.reload();
          } else {
-                    r.json().then(r => setError(r.error))
+            r.json().then((r) => setError(r.error));
          }
-            }).catch(err => setError(err))
-            setLoading(false)
+        })
+        .catch((err) => setError(err));
+      setLoading(false);
    } else if (username || password) {
-            setError("username and password are required")
-        }
+      setError("username and password are required");
    }
+  };

  return (
    <>
-        <h2>Log In</h2>
+      <h3>Log In</h3>
      <div className="flex flex-col items-center gap-4 w-full">
-            <p>Logging in gives you access to <strong>admin tools</strong>, such as updating images, merging items, deleting items, and more.</p>
-                <form action="#" className="flex flex-col items-center gap-4 w-3/4" onSubmit={(e) => e.preventDefault()}>
+        <p>
+          Logging in gives you access to <strong>admin tools</strong>, such as
+          updating images, merging items, deleting items, and more.
+        </p>
+        <form
+          action="#"
+          className="flex flex-col items-center gap-4 w-3/4"
+          onSubmit={(e) => e.preventDefault()}
+        >
          <input
            name="koito-username"
            type="text"
@ -47,13 +55,20 @@ export default function LoginForm() {
            onChange={(e) => setPassword(e.target.value)}
          />
          <div className="flex gap-2">
-                    <input type="checkbox" name="koito-remember" id="koito-remember" onChange={() => setRemember(!remember)} />
+            <input
+              type="checkbox"
+              name="koito-remember"
+              id="koito-remember"
+              onChange={() => setRemember(!remember)}
+            />
            <label htmlFor="kotio-remember">Remember me</label>
          </div>
-                <AsyncButton loading={loading} onClick={loginHandler}>Login</AsyncButton>
+          <AsyncButton loading={loading} onClick={loginHandler}>
+            Login
+          </AsyncButton>
        </form>
        <p className="error">{error}</p>
      </div>
    </>
-    )
+  );
 }
--- a/client/app/components/modals/MergeModal.tsx
+++ b/client/app/components/modals/MergeModal.tsx
@ -2,76 +2,81 @@ import { useEffect, useState } from "react";
 import { Modal } from "./Modal";
 import { search, type SearchResponse } from "api/api";
 import SearchResults from "../SearchResults";
-import type { MergeFunc, MergeSearchCleanerFunc } from "~/routes/MediaItems/MediaLayout";
+import type {
+  MergeFunc,
+  MergeSearchCleanerFunc,
+} from "~/routes/MediaItems/MediaLayout";
 import { useNavigate } from "react-router";

 interface Props {
-    open: boolean 
-    setOpen: Function
-    type: string
-    currentId: number
-    currentTitle: string
-    mergeFunc: MergeFunc
-    mergeCleanerFunc: MergeSearchCleanerFunc
+  open: boolean;
+  setOpen: Function;
+  type: string;
+  currentId: number;
+  currentTitle: string;
+  mergeFunc: MergeFunc;
+  mergeCleanerFunc: MergeSearchCleanerFunc;
 }

 export default function MergeModal(props: Props) {
-    const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
  const [data, setData] = useState<SearchResponse>();
  const [debouncedQuery, setDebouncedQuery] = useState(query);
-    const [mergeTarget, setMergeTarget] = useState<{title: string, id: number}>({title: '', id: 0})
-    const [mergeOrderReversed, setMergeOrderReversed] = useState(false)
-    const [replaceImage, setReplaceImage] = useState(false)
-    const navigate = useNavigate()
-
+  const [mergeTarget, setMergeTarget] = useState<{ title: string; id: number }>(
+    { title: "", id: 0 }
+  );
+  const [mergeOrderReversed, setMergeOrderReversed] = useState(false);
+  const [replaceImage, setReplaceImage] = useState(false);
+  const navigate = useNavigate();

  const closeMergeModal = () => {
-        props.setOpen(false)
-        setQuery('')
-        setData(undefined)
-        setMergeOrderReversed(false)
-        setMergeTarget({title: '', id: 0})
-    }
+    props.setOpen(false);
+    setQuery("");
+    setData(undefined);
+    setMergeOrderReversed(false);
+    setMergeTarget({ title: "", id: 0 });
+  };

-    const toggleSelect = ({title, id}: {title: string, id: number}) => {
-        setMergeTarget({title: title, id: id})
-    }
+  const toggleSelect = ({ title, id }: { title: string; id: number }) => {
+    setMergeTarget({ title: title, id: id });
+  };

  useEffect(() => {
-        console.log("mergeTarget",mergeTarget)
-    }, [mergeTarget])
+    console.log("mergeTarget", mergeTarget);
+  }, [mergeTarget]);

  const doMerge = () => {
-        let from, to
+    let from, to;
    if (!mergeOrderReversed) {
-            from = mergeTarget
-            to = {id: props.currentId, title: props.currentTitle}
+      from = mergeTarget;
+      to = { id: props.currentId, title: props.currentTitle };
    } else {
-            from = {id: props.currentId, title: props.currentTitle}
-            to = mergeTarget
+      from = { id: props.currentId, title: props.currentTitle };
+      to = mergeTarget;
    }
-        props.mergeFunc(from.id, to.id, replaceImage)
-        .then(r => {
+    props
+      .mergeFunc(from.id, to.id, replaceImage)
+      .then((r) => {
        if (r.ok) {
          if (mergeOrderReversed) {
-                    navigate(`/${props.type.toLowerCase()}/${mergeTarget.id}`)
-                    closeMergeModal()
+            navigate(`/${props.type.toLowerCase()}/${mergeTarget.id}`);
+            closeMergeModal();
          } else {
-                    window.location.reload()
+            window.location.reload();
          }
        } else {
          // TODO: handle error
-                console.log(r)
+          console.log(r);
        }
      })
-        .catch((err) => console.log(err))
-    }
+      .catch((err) => console.log(err));
+  };

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
-            if (query === '') {
-                setData(undefined)
+      if (query === "") {
+        setData(undefined);
      }
    }, 300);

@ -83,7 +88,7 @@ export default function MergeModal(props: Props) {
  useEffect(() => {
    if (debouncedQuery) {
      search(debouncedQuery).then((r) => {
-                r = props.mergeCleanerFunc(r, props.currentId)
+        r = props.mergeCleanerFunc(r, props.currentId);
        setData(r);
      });
    }
@ -91,39 +96,64 @@ export default function MergeModal(props: Props) {

  return (
    <Modal isOpen={props.open} onClose={closeMergeModal}>
-        <h2>Merge {props.type}s</h2>
+      <h3>Merge {props.type}s</h3>
      <div className="flex flex-col items-center">
        <input
          type="text"
          autoFocus
          // i find my stupid a(n) logic to be a little silly so im leaving it in even if its not optimal
-                placeholder={`Search for a${props.type.toLowerCase()[0] === 'a' ? 'n' : ''} ${props.type.toLowerCase()} to be merged into the current ${props.type.toLowerCase()}`}
+          placeholder={`Search for a${
+            props.type.toLowerCase()[0] === "a" ? "n" : ""
+          } ${props.type.toLowerCase()} to be merged into the current ${props.type.toLowerCase()}`}
          className="w-full mx-auto fg bg rounded p-2"
          onChange={(e) => setQuery(e.target.value)}
        />
        <SearchResults selectorMode data={data} onSelect={toggleSelect} />
-            { mergeTarget.id !== 0 ? 
+        {mergeTarget.id !== 0 ? (
          <>
-            {mergeOrderReversed ? 
-            <p className="mt-5"><strong>{props.currentTitle}</strong> will be merged into <strong>{mergeTarget.title}</strong></p>
-            :
-            <p className="mt-5"><strong>{mergeTarget.title}</strong> will be merged into <strong>{props.currentTitle}</strong></p>
-            }
-            <button className="hover:cursor-pointer px-5 py-2 rounded-md mt-5 bg-(--color-bg) hover:bg-(--color-bg-tertiary)" onClick={doMerge}>Merge Items</button>
+            {mergeOrderReversed ? (
+              <p className="mt-5">
+                <strong>{props.currentTitle}</strong> will be merged into{" "}
+                <strong>{mergeTarget.title}</strong>
+              </p>
+            ) : (
+              <p className="mt-5">
+                <strong>{mergeTarget.title}</strong> will be merged into{" "}
+                <strong>{props.currentTitle}</strong>
+              </p>
+            )}
+            <button
+              className="hover:cursor-pointer px-5 py-2 rounded-md mt-5 bg-(--color-bg) hover:bg-(--color-bg-tertiary)"
+              onClick={doMerge}
+            >
+              Merge Items
+            </button>
            <div className="flex gap-2 mt-3">
-                <input type="checkbox" name="reverse-merge-order" checked={mergeOrderReversed} onChange={() => setMergeOrderReversed(!mergeOrderReversed)} />
+              <input
+                type="checkbox"
+                name="reverse-merge-order"
+                checked={mergeOrderReversed}
+                onChange={() => setMergeOrderReversed(!mergeOrderReversed)}
+              />
              <label htmlFor="reverse-merge-order">Reverse merge order</label>
            </div>
-            {
-            (props.type.toLowerCase() === "album" || props.type.toLowerCase() === "artist") &&
+            {(props.type.toLowerCase() === "album" ||
+              props.type.toLowerCase() === "artist") && (
              <div className="flex gap-2 mt-3">
-                <input type="checkbox" name="replace-image" checked={replaceImage} onChange={() => setReplaceImage(!replaceImage)} />
+                <input
+                  type="checkbox"
+                  name="replace-image"
+                  checked={replaceImage}
+                  onChange={() => setReplaceImage(!replaceImage)}
+                />
                <label htmlFor="replace-image">Replace image</label>
              </div>
-            }
-            </> :
-            ''}
+            )}
+          </>
+        ) : (
+          ""
+        )}
      </div>
    </Modal>
-    )
+  );
 }
--- a/client/app/components/modals/SearchModal.tsx
+++ b/client/app/components/modals/SearchModal.tsx
@ -4,26 +4,26 @@ import { search, type SearchResponse } from "api/api";
 import SearchResults from "../SearchResults";

 interface Props {
-    open: boolean 
-    setOpen: Function
+  open: boolean;
+  setOpen: Function;
 }

 export default function SearchModal({ open, setOpen }: Props) {
-    const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
  const [data, setData] = useState<SearchResponse>();
  const [debouncedQuery, setDebouncedQuery] = useState(query);

  const closeSearchModal = () => {
-        setOpen(false)
-        setQuery('')
-        setData(undefined)
-    }
+    setOpen(false);
+    setQuery("");
+    setData(undefined);
+  };

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedQuery(query);
-            if (query === '') {
-                setData(undefined)
+      if (query === "") {
+        setData(undefined);
      }
    }, 300);

@ -42,7 +42,7 @@ export default function SearchModal({ open, setOpen }: Props) {

  return (
    <Modal isOpen={open} onClose={closeSearchModal}>
-            <h2>Search</h2>
+      <h3>Search</h3>
      <div className="flex flex-col items-center">
        <input
          type="text"
@ -56,5 +56,5 @@ export default function SearchModal({ open, setOpen }: Props) {
        </div>
      </div>
    </Modal>
-    )
+  );
 }
--- a/client/app/components/rewind/Rewind.tsx
+++ b/client/app/components/rewind/Rewind.tsx
@ -0,0 +1,114 @@
+import { imageUrl, type RewindStats } from "api/api";
+import RewindTopItem from "./RewindTopItem";
+
+interface Props {
+  stats: RewindStats;
+  includeTime: boolean;
+}
+
+export default function Rewind(props: Props) {
+  const artistimg = props.stats.top_artists[0].image;
+  const albumimg = props.stats.top_albums[0].image;
+  const trackimg = props.stats.top_tracks[0].image;
+  return (
+    <div className="flex flex-col gap-10">
+      <h1>{props.stats.title}</h1>
+      <div className="flex gap-5">
+        <div className="rewind-top-item-image">
+          <img className="w-58 h-58" src={imageUrl(artistimg, "medium")} />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4>Top Artist</h4>
+          <div className="flex items-center gap-2">
+            <div className="flex flex-col items-start mb-3">
+              <h2>{props.stats.top_artists[0].name}</h2>
+              <span className="text-(--color-fg-tertiary) -mt-3">
+                {`${props.stats.top_artists[0].listen_count} plays`}
+                {props.includeTime
+                  ? ` (${Math.floor(
+                      props.stats.top_artists[0].time_listened / 60
+                    )} minutes)`
+                  : ``}
+              </span>
+            </div>
+          </div>
+          {props.stats.top_artists.slice(1).map((e, i) => (
+            <div className="" key={e.id}>
+              {e.name}
+              <span className="text-(--color-fg-tertiary)">
+                {` - ${e.listen_count} plays`}
+                {props.includeTime
+                  ? ` (${Math.floor(e.time_listened / 60)} minutes)`
+                  : ``}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex gap-5">
+        <div className="rewind-top-item-image">
+          <img className="w-58 h-58" src={imageUrl(albumimg, "medium")} />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4>Top Album</h4>
+          <div className="flex items-center gap-2">
+            <div className="flex flex-col items-start mb-3">
+              <h2>{props.stats.top_albums[0].title}</h2>
+              <span className="text-(--color-fg-tertiary) -mt-3">
+                {`${props.stats.top_albums[0].listen_count} plays`}
+                {props.includeTime
+                  ? ` (${Math.floor(
+                      props.stats.top_albums[0].time_listened / 60
+                    )} minutes)`
+                  : ``}
+              </span>
+            </div>
+          </div>
+          {props.stats.top_albums.slice(1).map((e, i) => (
+            <div className="" key={e.id}>
+              {e.title}
+              <span className="text-(--color-fg-tertiary)">
+                {` - ${e.listen_count} plays`}
+                {props.includeTime
+                  ? ` (${Math.floor(e.time_listened / 60)} minutes)`
+                  : ``}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex gap-5">
+        <div className="rewind-top-item-image">
+          <img className="w-58 h-58" src={imageUrl(trackimg, "medium")} />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h4>Top Track</h4>
+          <div className="flex items-center gap-2">
+            <div className="flex flex-col items-start mb-3">
+              <h2>{props.stats.top_tracks[0].title}</h2>
+              <span className="text-(--color-fg-tertiary) -mt-3">
+                {`${props.stats.top_tracks[0].listen_count} plays`}
+                {props.includeTime
+                  ? ` (${Math.floor(
+                      props.stats.top_tracks[0].time_listened / 60
+                    )} minutes)`
+                  : ``}
+              </span>
+            </div>
+          </div>
+          {props.stats.top_tracks.slice(1).map((e, i) => (
+            <div className="" key={e.id}>
+              {e.title}
+              <span className="text-(--color-fg-tertiary)">
+                {` - ${e.listen_count} plays`}
+                {props.includeTime
+                  ? ` (${Math.floor(e.time_listened / 60)} minutes)`
+                  : ``}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/client/app/components/rewind/RewindTopItem.tsx
+++ b/client/app/components/rewind/RewindTopItem.tsx
@ -0,0 +1,32 @@
+import { imageUrl, type Artist } from "api/api";
+
+interface args {
+  title?: string;
+  name?: string;
+  image: string;
+  minutes_listened: number;
+  time_listened: number;
+  artists?: Artist;
+}
+
+export default function RewindTopItem(args: args[]) {
+  console.log(args);
+  if (args === undefined || args.length < 1) {
+    return <></>;
+  }
+  const img = imageUrl(args[0].image, "medium");
+
+  return (
+    <div className="flex gap-2">
+      <div className="rewind-top-item-image">
+        <img src={img} />
+      </div>
+      <div className="flex flex-col gap-1">
+        <h3>{args[0].title || args[0].name}</h3>
+        {args.map((e) => (
+          <div className="">{e.title || e.name}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/client/app/components/sidebar/Sidebar.tsx
+++ b/client/app/components/sidebar/Sidebar.tsx
@ -1,4 +1,4 @@
-import { ExternalLink, Home, Info } from "lucide-react";
+import { ExternalLink, History, Home, Info } from "lucide-react";
 import SidebarSearch from "./SidebarSearch";
 import SidebarItem from "./SidebarItem";
 import SidebarSettings from "./SidebarSettings";
@ -7,7 +7,8 @@ export default function Sidebar() {
  const iconSize = 20;

  return (
-        <div className="
+    <div
+      className="
            z-50
            flex
            sm:flex-col
@ -28,12 +29,28 @@ export default function Sidebar() {
            sm:px-1
            px-4
            bg-(--color-bg)
-        ">
+        "
+    >
      <div className="flex gap-4 sm:flex-col">
-                <SidebarItem space={10} to="/" name="Home" onClick={() => {}} modal={<></>}>
+        <SidebarItem
+          space={10}
+          to="/"
+          name="Home"
+          onClick={() => {}}
+          modal={<></>}
+        >
          <Home size={iconSize} />
        </SidebarItem>
        <SidebarSearch size={iconSize} />
+        <SidebarItem
+          space={10}
+          to="/rewind"
+          name="Rewind"
+          onClick={() => {}}
+          modal={<></>}
+        >
+          <History size={iconSize} />
+        </SidebarItem>
      </div>
      <div className="flex gap-4 sm:flex-col">
        <SidebarItem
--- a/client/app/components/themeSwitcher/ThemeSwitcher.tsx
+++ b/client/app/components/themeSwitcher/ThemeSwitcher.tsx
@ -44,7 +44,7 @@ export function ThemeSwitcher() {
    <div className="flex flex-col gap-10">
      <div>
        <div className="flex items-center gap-3">
-          <h2>Select Theme</h2>
+          <h3>Select Theme</h3>
          <div className="mb-3">
            <AsyncButton onClick={resetTheme}>Reset</AsyncButton>
          </div>
@ -61,7 +61,7 @@ export function ThemeSwitcher() {
        </div>
      </div>
      <div>
-        <h2>Use Custom Theme</h2>
+        <h3>Use Custom Theme</h3>
        <div className="flex flex-col items-center gap-3 bg-secondary p-5 rounded-lg">
          <textarea
            name="custom-theme"
--- a/client/app/routes.ts
+++ b/client/app/routes.ts
@ -9,5 +9,6 @@ export default [
  route("/chart/top-artists", "routes/Charts/ArtistChart.tsx"),
  route("/chart/top-tracks", "routes/Charts/TrackChart.tsx"),
  route("/listens", "routes/Charts/Listens.tsx"),
+  route("/rewind", "routes/RewindPage.tsx"),
  route("/theme-helper", "routes/ThemeHelper.tsx"),
 ] satisfies RouteConfig;
--- a/client/app/routes/RewindPage.tsx
+++ b/client/app/routes/RewindPage.tsx
@ -0,0 +1,16 @@
+import Rewind from "~/components/rewind/Rewind";
+import type { Route } from "./+types/Home";
+import { getRewindStats, type RewindStats } from "api/api";
+import { useEffect, useState } from "react";
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: "Koito" }, { name: "description", content: "Koito" }];
+}
+
+export default function RewindPage() {
+  const [stats, setStats] = useState<RewindStats | undefined>(undefined);
+  useEffect(() => {
+    getRewindStats({ year: 2025 }).then((r) => setStats(r));
+  }, []);
+  return <>{stats !== undefined && <Rewind stats={stats} includeTime />}</>;
+}