wip

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,
 };

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);
+  font-size: var(--header-lg);
-  margin-bottom: 0.5em;
 }
 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";

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}

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 
+  album: Album;
-    size: number
+  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}}>
+      <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>
-    )
+  );
 }

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}

client/app/components/ArtistAlbums.tsx

@@ -1,51 +1,59 @@
-import { useQuery } from "@tanstack/react-query"
+import { useQuery } from "@tanstack/react-query";
-import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api"
+import { getTopAlbums, imageUrl, type getItemsArgs } from "api/api";
-import { Link } from "react-router"
+import { Link } from "react-router";
 
 interface Props {
-    artistId: number
+  artistId: number;
-    name: string
+  name: string;
-    period: string
+  period: string;
 }
 
-export default function ArtistAlbums({artistId, name, period}: Props) {
+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">
+          <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>
-    )
+  );
 }

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 && (

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" : ""}

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" : ""}

client/app/components/TopThreeAlbums.tsx

@@ -1,38 +1,43 @@
-import { useQuery } from "@tanstack/react-query"
+import { useQuery } from "@tanstack/react-query";
-import { getTopAlbums, type getItemsArgs } from "api/api"
+import { getTopAlbums, type getItemsArgs } from "api/api";
-import AlbumDisplay from "./AlbumDisplay"
+import AlbumDisplay from "./AlbumDisplay";
 
 interface Props {
-    period: string
+  period: string;
-    artistId?: Number
+  artistId?: Number;
-    vert?: boolean
+  vert?: boolean;
-    hideTitle?: 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>}
+      {!props.hideTitle && <h3>Top Three Albums</h3>}
-            <div className={`flex ${props.vert ? 'flex-col' : ''}`} style={{gap: 15}}>
+      <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>
-    )
+  );
 }

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" : ""}

client/app/components/modals/Account.tsx

@@ -1,66 +1,76 @@
-import { logout, updateUser } from "api/api"
+import { logout, updateUser } from "api/api";
-import { useState } from "react"
+import { useState } from "react";
-import { AsyncButton } from "../AsyncButton"
+import { AsyncButton } from "../AsyncButton";
-import { useAppContext } from "~/providers/AppProvider"
+import { useAppContext } from "~/providers/AppProvider";
 
 export default function Account() {
-    const [username, setUsername] = useState('')
+  const [username, setUsername] = useState("");
-    const [password, setPassword] = useState('')
+  const [password, setPassword] = useState("");
-    const [confirmPw, setConfirmPw] = useState('')
+  const [confirmPw, setConfirmPw] = useState("");
-    const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const [error, setError] = useState('')
+  const [error, setError] = useState("");
-    const [success, setSuccess] = useState('')
+  const [success, setSuccess] = useState("");
-    const { user, setUsername: setCtxUsername } = useAppContext()
+  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))
+          r.json().then((r) => setError(r.error));
-            }
-        }).catch(err => setError(err))
-        setLoading(false)
         }
+      })
+      .catch((err) => setError(err));
+    setLoading(false);
+  };
   const updateHandler = () => {
-        setError('')
+    setError("");
-        setSuccess('')
+    setSuccess("");
     if (password != "" && confirmPw === "") {
-            setError("confirm your new password before submitting")
+      setError("confirm your new password before submitting");
-            return
+      return;
     }
-        setError('')
+    setError("");
-        setSuccess('')
+    setSuccess("");
-        setLoading(true)
+    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('')
+          setUsername("");
-                setPassword('')
+          setPassword("");
-                setConfirmPw('')
+          setConfirmPw("");
         } 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);
+  };
 
   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>
+          <p>
-                <AsyncButton loading={loading} onClick={logoutHandler}>Logout</AsyncButton>
+            You're logged in as <strong>{user?.username}</strong>
+          </p>
+          <AsyncButton loading={loading} onClick={logoutHandler}>
+            Logout
+          </AsyncButton>
         </div>
-            <h2>Update User</h2>
+        <h3>Update User</h3>
-            <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-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>
     </>
-    )
+  );
 }

client/app/components/modals/AddListenModal.tsx

@@ -5,43 +5,44 @@ import { submitListen } from "api/api";
 import { useNavigate } from "react-router";
 
 interface Props {
-    open: boolean 
+  open: boolean;
-    setOpen: Function
+  setOpen: Function;
-    trackid: number
+  trackid: number;
 }
 
 export default function AddListenModal({ open, setOpen, trackid }: Props) {
-    const [ts, setTS] = useState<Date>(new Date);
+  const [ts, setTS] = useState<Date>(new Date());
-    const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const [error, setError] = useState('')
+  const [error, setError] = useState("");
-    const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const close = () => {
-        setOpen(false)
+    setOpen(false);
-    }
+  };
 
   const submit = () => {
-        setLoading(true)
+    setLoading(true);
-        submitListen(trackid.toString(), ts)
+    submitListen(trackid.toString(), ts).then((r) => {
-        .then(r => {
+      if (r.ok) {
-            if(r.ok) {
+        setLoading(false);
-                setLoading(false)
+        navigate(0);
-                navigate(0)
       } else {
-                r.json().then(r => setError(r.error))
+        r.json().then((r) => setError(r.error));
-                setLoading(false)
+        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>
-    )
+  );
 }

client/app/components/modals/ApiKeysModal.tsx

@@ -11,10 +11,10 @@ type CopiedState = {
 };
 
 export default function ApiKeysModal() {
-    const [input, setInput] = useState('')
+  const [input, setInput] = useState("");
-    const [loading, setLoading ] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const [err, setError ] = useState<string>()
+  const [err, setError] = useState<string>();
-    const [displayData, setDisplayData] = useState<ApiKey[]>([])
+  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: [
+    queryKey: ["api-keys"],
-            '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 (
+    return <p className="error">Error: {error.message}</p>;
-            <p className="error">Error: {error.message}</p>
-        )
   }
   if (isPending) {
-        return (
+    return <p>Loading...</p>;
-            <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")
+      setError("a label must be provided");
-            return
+      return;
     }
-        setLoading(true)
+    setLoading(true);
     createApiKey(input)
-        .then(r => {
+      .then((r) => {
-            setDisplayData([r, ...displayData])
+        setDisplayData([r, ...displayData]);
-            setInput('')
+        setInput("");
-        }).catch((err) => setError(err.message))
+      })
-        setLoading(false)
+      .catch((err) => setError(err.message));
-    }
+    setLoading(false);
+  };
 
   const handleDeleteApiKey = (id: number) => {
-        setError(undefined)
+    setError(undefined);
-        setLoading(true)
+    setLoading(true);
-        deleteApiKey(id)
+    deleteApiKey(id).then((r) => {
-        .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))
+        r.json().then((r) => setError(r.error));
-            }
-        })
-        setLoading(false)
-
       }
+    });
+    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>
+            <button
-                    <AsyncButton loading={loading} onClick={() => handleDeleteApiKey(v.id)} confirm><Trash size={16} /></AsyncButton>
+              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>
-    )
+  );
 }

client/app/components/modals/DeleteModal.tsx

@@ -1,40 +1,41 @@
-import { deleteItem } from "api/api"
+import { deleteItem } from "api/api";
-import { AsyncButton } from "../AsyncButton"
+import { AsyncButton } from "../AsyncButton";
-import { Modal } from "./Modal"
+import { Modal } from "./Modal";
-import { useNavigate } from "react-router"
+import { useNavigate } from "react-router";
-import { useState } from "react"
+import { useState } from "react";
 
 interface Props {
-    open: boolean
+  open: boolean;
-    setOpen: Function
+  setOpen: Function;
-    title: string,
+  title: string;
-    id: number,
+  id: number;
-    type: string
+  type: string;
 }
 
 export default function DeleteModal({ open, setOpen, title, id, type }: Props) {
-    const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const doDelete = () => {
-        setLoading(true)
+    setLoading(true);
-        deleteItem(type.toLowerCase(), id)
+    deleteItem(type.toLowerCase(), id).then((r) => {
-        .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>
-    )
+  );
 }

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">

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
+  id: number;
-    type: string
+  type: string;
 }
 
 export default function SetPrimaryArtist({ id, type }: Props) {
-    const [err, setErr] = useState('')
+  const [err, setErr] = useState("");
-    const [primary, setPrimary] = useState<Artist>()
+  const [primary, setPrimary] = useState<Artist>();
-    const [success, setSuccess] = useState('')
+  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)
+          setPrimary(a);
-                    break
+          break;
         }
       }
     }
-    }, [data]) 
+  }, [data]);
 
   if (isError) {
-        return (
+    return <p className="error">Error: {error.message}</p>;
-            <p className="error">Error: {error.message}</p>
-        )
   }
   if (isPending) {
-        return (
+    return <p>Loading...</p>;
-            <p>Loading...</p>
-        )
   }
 
   const updatePrimary = (artist: number, val: boolean) => {
-        setErr('');
+    setErr("");
-        setSuccess('');
+    setSuccess("");
-        fetch(`/apis/web/v1/artists/primary?artist_id=${artist}&${type.toLowerCase()}_id=${id}&is_primary=${val}`, { 
+    fetch(
-            method: 'POST',
+      `/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"

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 [err, setErr] = useState("");
-    const [va, setVA] = useState(false)
+  const [va, setVA] = useState(false);
-    const [success, setSuccess] = useState('')
+  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 (
+    return <p className="error">Error: {error.message}</p>;
-            <p className="error">Error: {error.message}</p>
-        )
   }
   if (isPending) {
-        return (
+    return <p>Loading...</p>;
-            <p>Loading...</p>
-        )
   }
 
   const updateVA = (val: boolean) => {
-        setErr('');
+    setErr("");
-        setSuccess('');
+    setSuccess("");
-        fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, { method: 'PATCH' })
+    fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, {
-            .then(r => {
+      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>
-    )
+  );
 }

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 [loading, setLoading] = useState(false);
-    const [error, setError] = useState('')
+  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()
+          res.blob().then((blob) => {
-                .then(blob => {
+            const url = window.URL.createObjectURL(blob);
-                    const url = window.URL.createObjectURL(blob)
+            const a = document.createElement("a");
-                    const a = document.createElement("a")
+            a.href = url;
-                    a.href = url
+            a.download = "koito_export.json";
-                    a.download = "koito_export.json"
+            document.body.appendChild(a);
-                    document.body.appendChild(a)
+            a.click();
-                    a.click()
+            a.remove();
-                    a.remove()
+            window.URL.revokeObjectURL(url);
-                    window.URL.revokeObjectURL(url)
+            setLoading(false);
-                    setLoading(false)
+          });
-                })
         } else {
-                res.json().then(r => setError(r.error))
+          res.json().then((r) => setError(r.error));
-                setLoading(false)
+          setLoading(false);
         }
-        }).catch(err => {
-            setError(err)
-            setLoading(false)
       })
-    }
+      .catch((err) => {
+        setError(err);
+        setLoading(false);
+      });
+  };
 
   return (
     <div>
-            <h2>Export</h2>
+      <h3>Export</h3>
-            <AsyncButton loading={loading} onClick={handleExport}>Export Data</AsyncButton>
+      <AsyncButton loading={loading} onClick={handleExport}>
+        Export Data
+      </AsyncButton>
       {error && <p className="error">{error}</p>}
     </div>
-    )
+  );
 }

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"

client/app/components/modals/LoginForm.tsx

@@ -1,37 +1,45 @@
-import { login } from "api/api"
+import { login } from "api/api";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
-import { AsyncButton } from "../AsyncButton"
+import { AsyncButton } from "../AsyncButton";
 
 export default function LoginForm() {
-    const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const [error, setError] = useState('')
+  const [error, setError] = useState("");
-    const [username, setUsername] = useState('')
+  const [username, setUsername] = useState("");
-    const [password, setPassword] = useState('')
+  const [password, setPassword] = useState("");
-    const [remember, setRemember] = useState(false)
+  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>
+        <p>
-                <form action="#" className="flex flex-col items-center gap-4 w-3/4" onSubmit={(e) => e.preventDefault()}>
+          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>
     </>
-    )
+  );
 }

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 
+  open: boolean;
-    setOpen: Function
+  setOpen: Function;
-    type: string
+  type: string;
-    currentId: number
+  currentId: number;
-    currentTitle: string
+  currentTitle: string;
-    mergeFunc: MergeFunc
+  mergeFunc: MergeFunc;
-    mergeCleanerFunc: MergeSearchCleanerFunc
+  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 [mergeTarget, setMergeTarget] = useState<{ title: string; id: number }>(
-    const [mergeOrderReversed, setMergeOrderReversed] = useState(false)
+    { title: "", id: 0 }
-    const [replaceImage, setReplaceImage] = useState(false)
+  );
-    const navigate = useNavigate()
+  const [mergeOrderReversed, setMergeOrderReversed] = useState(false);
-
+  const [replaceImage, setReplaceImage] = useState(false);
+  const navigate = useNavigate();
 
   const closeMergeModal = () => {
-        props.setOpen(false)
+    props.setOpen(false);
-        setQuery('')
+    setQuery("");
-        setData(undefined)
+    setData(undefined);
-        setMergeOrderReversed(false)
+    setMergeOrderReversed(false);
-        setMergeTarget({title: '', id: 0})
+    setMergeTarget({ title: "", id: 0 });
-    }
+  };
 
-    const toggleSelect = ({title, id}: {title: string, id: number}) => {
+  const toggleSelect = ({ title, id }: { title: string; id: number }) => {
-        setMergeTarget({title: title, id: id})
+    setMergeTarget({ title: title, id: id });
-    }
+  };
 
   useEffect(() => {
-        console.log("mergeTarget",mergeTarget)
+    console.log("mergeTarget", mergeTarget);
-    }, [mergeTarget])
+  }, [mergeTarget]);
 
   const doMerge = () => {
-        let from, to
+    let from, to;
     if (!mergeOrderReversed) {
-            from = mergeTarget
+      from = mergeTarget;
-            to = {id: props.currentId, title: props.currentTitle}
+      to = { id: props.currentId, title: props.currentTitle };
     } else {
-            from = {id: props.currentId, title: props.currentTitle}
+      from = { id: props.currentId, title: props.currentTitle };
-            to = mergeTarget
+      to = mergeTarget;
     }
-        props.mergeFunc(from.id, to.id, replaceImage)
+    props
-        .then(r => {
+      .mergeFunc(from.id, to.id, replaceImage)
+      .then((r) => {
         if (r.ok) {
           if (mergeOrderReversed) {
-                    navigate(`/${props.type.toLowerCase()}/${mergeTarget.id}`)
+            navigate(`/${props.type.toLowerCase()}/${mergeTarget.id}`);
-                    closeMergeModal()
+            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 === '') {
+      if (query === "") {
-                setData(undefined)
+        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}/>
+        <SearchResults selectorMode data={data} onSelect={toggleSelect} />
-            { mergeTarget.id !== 0 ? 
+        {mergeTarget.id !== 0 ? (
           <>
-            {mergeOrderReversed ? 
+            {mergeOrderReversed ? (
-            <p className="mt-5"><strong>{props.currentTitle}</strong> will be merged into <strong>{mergeTarget.title}</strong></p>
+              <p className="mt-5">
-            :
+                <strong>{props.currentTitle}</strong> will be merged into{" "}
-            <p className="mt-5"><strong>{mergeTarget.title}</strong> will be merged into <strong>{props.currentTitle}</strong></p>
+                <strong>{mergeTarget.title}</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>
+            ) : (
+              <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() === "album" || props.type.toLowerCase() === "artist") &&
+              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>
-    )
+  );
 }

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 
+  open: boolean;
-    setOpen: Function
+  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)
+    setOpen(false);
-        setQuery('')
+    setQuery("");
-        setData(undefined)
+    setData(undefined);
-    }
+  };
 
   useEffect(() => {
     const handler = setTimeout(() => {
       setDebouncedQuery(query);
-            if (query === '') {
+      if (query === "") {
-                setData(undefined)
+        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"
@@ -52,9 +52,9 @@ export default function SearchModal({ open, setOpen }: Props) {
           onChange={(e) => setQuery(e.target.value)}
         />
         <div className="h-3/4 w-full">
-                <SearchResults data={data} onSelect={closeSearchModal}/>
+          <SearchResults data={data} onSelect={closeSearchModal} />
         </div>
       </div>
     </Modal>
-    )
+  );
 }

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>
+  );
+}

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>
+  );
+}

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

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"

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;

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 />}</>;
+}