cleanup

src/app/(pages)/api/proxy/route.ts

@@ -21,7 +21,8 @@ export async function GET(request: NextRequest) {
     const { status, headers } = response;
     if (
       !headers.has("content-type") ||
-      (headers.has("content-type") && !headers.get("content-type")?.includes("application/json"))
+      (headers.has("content-type") &&
+        !headers.get("content-type")?.includes("application/json"))
     ) {
       return NextResponse.json({
         error: "We only support proxying JSON responses",
@@ -41,7 +42,7 @@ export async function GET(request: NextRequest) {
         headers: {
           "Access-Control-Allow-Origin": "*",
         },
-      }
+      },
     );
   }
 }

src/app/(pages)/player/[...slug]/page.tsx

@@ -12,7 +12,9 @@ type Props = {
   };
 };
 
-export async function generateMetadata({ params: { slug } }: Props): Promise<Metadata> {
+export async function generateMetadata({
+  params: { slug },
+}: Props): Promise<Metadata> {
   const id = slug[0]; // The players id
   const player = await scoresaberFetcher.lookupPlayer(id, false);
   if (player === undefined) {
@@ -43,7 +45,11 @@ export default async function Search({ params: { slug } }: Props) {
   const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
   const page = parseInt(slug[2]) || 1; // The page number
   const player = await scoresaberFetcher.lookupPlayer(id, false);
-  const scores = await scoresaberFetcher.lookupPlayerScores(id, sort, page);
+  const scores = await scoresaberFetcher.lookupPlayerScores({
+    playerId: id,
+    sort,
+    page,
+  });
 
   if (player == undefined) {
     // Invalid player id
@@ -52,7 +58,12 @@ export default async function Search({ params: { slug } }: Props) {
 
   return (
     <div className="flex flex-col h-full w-full">
-      <PlayerData initialPlayerData={player} initialScoreData={scores} sort={sort} page={page} />
+      <PlayerData
+        initialPlayerData={player}
+        initialScoreData={scores}
+        sort={sort}
+        page={page}
+      />
     </div>
   );
 }

src/app/globals.css

@@ -3,81 +3,82 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
+    --background: #ffffff;
-  --foreground: #171717;
+    --foreground: #171717;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+    :root {
-    --background: #0a0a0a;
+        --background: #0a0a0a;
-    --foreground: #ededed;
+        --foreground: #ededed;
-  }
+    }
 }
 
 body {
-  color: var(--foreground);
+    color: var(--foreground);
-  background: var(--background);
+    background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 @layer utilities {
-  .text-balance {
+    .text-balance {
-    text-wrap: balance;
+        text-wrap: balance;
-  }
+    }
 }
 
 @layer base {
-  :root {
+    :root {
-    --background: 0 0% 100%;
+        --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+        --foreground: 20 14.3% 4.1%;
-    --card: 0 0% 100%;
+        --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+        --card-foreground: 20 14.3% 4.1%;
-    --popover: 0 0% 100%;
+        --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
+        --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24 9.8% 10%;
+        --primary: 24 9.8% 10%;
-    --primary-foreground: 60 9.1% 97.8%;
+        --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
+        --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
+        --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
+        --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
+        --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
+        --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+        --accent-foreground: 24 9.8% 10%;
-    --destructive: 0 84.2% 60.2%;
+        --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
+        --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
+        --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
+        --input: 20 5.9% 90%;
-    --ring: 20 14.3% 4.1%;
+        --ring: 20 14.3% 4.1%;
-    --chart-1: 12 76% 61%;
+        --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
+        --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
+        --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
+        --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+        --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+        --radius: 0.5rem;
-  }
+    }
-  .dark {
+
-    --background: 20 14.3% 4.1%;
+    .dark {
-    --foreground: 60 9.1% 97.8%;
+        --background: 20 14.3% 4.1%;
-    --card: 20 14.3% 4.1%;
+        --foreground: 60 9.1% 97.8%;
-    --card-foreground: 60 9.1% 97.8%;
+        --card: 20 14.3% 4.1%;
-    --popover: 20 14.3% 4.1%;
+        --card-foreground: 60 9.1% 97.8%;
-    --popover-foreground: 60 9.1% 97.8%;
+        --popover: 20 14.3% 4.1%;
-    --primary: 60 9.1% 97.8%;
+        --popover-foreground: 60 9.1% 97.8%;
-    --primary-foreground: 24 9.8% 10%;
+        --primary: 60 9.1% 97.8%;
-    --secondary: 12 6.5% 9.5%;
+        --primary-foreground: 24 9.8% 10%;
-    --secondary-foreground: 60 9.1% 97.8%;
+        --secondary: 12 6.5% 9.5%;
-    --muted: 12 6.5% 15.1%;
+        --secondary-foreground: 60 9.1% 97.8%;
-    --muted-foreground: 24 5.4% 63.9%;
+        --muted: 12 6.5% 15.1%;
-    --accent: 12 6.5% 15.1%;
+        --muted-foreground: 24 5.4% 63.9%;
-    --accent-foreground: 60 9.1% 97.8%;
+        --accent: 12 6.5% 15.1%;
-    --destructive: 0 62.8% 30.6%;
+        --accent-foreground: 60 9.1% 97.8%;
-    --destructive-foreground: 60 9.1% 97.8%;
+        --destructive: 0 62.8% 30.6%;
-    --border: 12 6.5% 15.1%;
+        --destructive-foreground: 60 9.1% 97.8%;
-    --input: 12 6.5% 45.1%;
+        --border: 12 6.5% 15.1%;
-    --ring: 24 5.7% 82.9%;
+        --input: 12 6.5% 45.1%;
-    --chart-1: 220 70% 50%;
+        --ring: 24 5.7% 82.9%;
-    --chart-2: 160 60% 45%;
+        --chart-1: 220 70% 50%;
-    --chart-3: 30 80% 55%;
+        --chart-2: 160 60% 45%;
-    --chart-4: 280 65% 60%;
+        --chart-3: 30 80% 55%;
-    --chart-5: 340 75% 55%;
+        --chart-4: 280 65% 60%;
-  }
+        --chart-5: 340 75% 55%;
+    }
 }

src/app/layout.tsx

@@ -45,12 +45,14 @@ export const metadata: Metadata = {
     "Stream enhancement, Professional overlay, Easy to use overlay builder.",
   openGraph: {
     title: "Scoresaber Reloaded",
-    description: "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
+    description:
+      "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
     url: "https://ssr.fascinated.cc",
     locale: "en_US",
     type: "website",
   },
-  description: "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
+  description:
+    "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
 };
 
 export default function RootLayout({
@@ -60,13 +62,20 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${siteFont.className} antialiased w-full h-full relative`}>
+      <body
+        className={`${siteFont.className} antialiased w-full h-full relative`}
+      >
         <DatabaseLoader>
           <Toaster />
           <BackgroundImage />
           <PreloadResources />
           <TooltipProvider>
-            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+            <ThemeProvider
+              attribute="class"
+              defaultTheme="dark"
+              enableSystem
+              disableTransitionOnChange
+            >
               <QueryProvider>
                 <AnimatePresence>
                   <main className="z-[9999] m-auto flex h-screen flex-col items-center md:max-w-[1200px]">

src/common/data-fetcher/data-fetcher.ts

@@ -38,7 +38,10 @@ export default class DataFetcher {
    * @param url the url to fetch
    * @returns the fetched data
    */
-  public async fetch<T>(useProxy: boolean, url: string): Promise<T | undefined> {
+  public async fetch<T>(
+    useProxy: boolean,
+    url: string,
+  ): Promise<T | undefined> {
     try {
       return await ky
         .get<T>(this.buildRequestUrl(useProxy, url), {

src/common/data-fetcher/impl/beatsaver.ts

@@ -18,18 +18,26 @@ class BeatSaverFetcher extends DataFetcher {
    * @param useProxy whether to use the proxy or not
    * @returns the map that match the query, or undefined if no map were found
    */
-  async lookupMap(query: string, useProxy = true): Promise<BeatSaverMap | undefined> {
+  async lookupMap(
+    query: string,
+    useProxy = true,
+  ): Promise<BeatSaverMap | undefined> {
     const before = performance.now();
     this.log(`Looking up map "${query}"...`);
 
     let map = await db.beatSaverMaps.get(query);
     // The map is cached
     if (map != undefined) {
-      this.log(`Found cached map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
+      this.log(
+        `Found cached map "${query}" in ${(performance.now() - before).toFixed(0)}ms`,
+      );
       return map;
     }
 
-    const response = await this.fetch<BSMap>(useProxy, LOOKUP_MAP_BY_HASH_ENDPOINT.replace(":query", query));
+    const response = await this.fetch<BSMap>(
+      useProxy,
+      LOOKUP_MAP_BY_HASH_ENDPOINT.replace(":query", query),
+    );
     // Map not found
     if (response == undefined) {
       return undefined;
@@ -47,7 +55,9 @@ class BeatSaverFetcher extends DataFetcher {
       fullData: response,
     });
     map = await db.beatSaverMaps.get(query);
-    this.log(`Found map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
+    this.log(
+      `Found map "${query}" in ${(performance.now() - before).toFixed(0)}ms`,
+    );
     return map;
   }
 }

src/common/data-fetcher/impl/scoresaber.ts

@@ -23,12 +23,15 @@ class ScoreSaberFetcher extends DataFetcher {
    * @param useProxy whether to use the proxy or not
    * @returns the players that match the query, or undefined if no players were found
    */
-  async searchPlayers(query: string, useProxy = true): Promise<ScoreSaberPlayerSearch | undefined> {
+  async searchPlayers(
+    query: string,
+    useProxy = true,
+  ): Promise<ScoreSaberPlayerSearch | undefined> {
     const before = performance.now();
     this.log(`Searching for players matching "${query}"...`);
     const results = await this.fetch<ScoreSaberPlayerSearch>(
       useProxy,
-      SEARCH_PLAYERS_ENDPOINT.replace(":query", query)
+      SEARCH_PLAYERS_ENDPOINT.replace(":query", query),
     );
     if (results === undefined) {
       return undefined;
@@ -37,7 +40,9 @@ class ScoreSaberFetcher extends DataFetcher {
       return undefined;
     }
     results.players.sort((a, b) => a.rank - b.rank);
-    this.log(`Found ${results.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
+    this.log(
+      `Found ${results.players.length} players in ${(performance.now() - before).toFixed(0)}ms`,
+    );
     return results;
   }
 
@@ -48,14 +53,22 @@ class ScoreSaberFetcher extends DataFetcher {
    * @param useProxy whether to use the proxy or not
    * @returns the player that matches the ID, or undefined
    */
-  async lookupPlayer(playerId: string, useProxy = true): Promise<ScoreSaberPlayer | undefined> {
+  async lookupPlayer(
+    playerId: string,
+    useProxy = true,
+  ): Promise<ScoreSaberPlayer | undefined> {
     const before = performance.now();
     this.log(`Looking up player "${playerId}"...`);
-    const response = await this.fetch<ScoreSaberPlayer>(useProxy, LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId));
+    const response = await this.fetch<ScoreSaberPlayer>(
+      useProxy,
+      LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId),
+    );
     if (response === undefined) {
       return undefined;
     }
-    this.log(`Found player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
+    this.log(
+      `Found player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`,
+    );
     return response;
   }
 
@@ -65,28 +78,40 @@ class ScoreSaberFetcher extends DataFetcher {
    * @param playerId the ID of the player to look up
    * @param sort the sort to use
    * @param page the page to get scores for
+   * @param search
    * @param useProxy whether to use the proxy or not
    * @returns the scores of the player, or undefined
    */
-  async lookupPlayerScores(
+  async lookupPlayerScores({
-    playerId: string,
+    playerId,
-    sort: ScoreSort,
+    sort,
-    page: number,
+    page,
-    useProxy = true
+    search,
-  ): Promise<ScoreSaberPlayerScoresPage | undefined> {
+    useProxy = true,
+  }: {
+    playerId: string;
+    sort: ScoreSort;
+    page: number;
+    search?: string;
+    useProxy?: boolean;
+  }): Promise<ScoreSaberPlayerScoresPage | undefined> {
     const before = performance.now();
-    this.log(`Looking up scores for player "${playerId}", sort "${sort}", page "${page}"...`);
+    this.log(
+      `Looking up scores for player "${playerId}", sort "${sort}", page "${page}"${search ? `, search "${search}"` : ""}...`,
+    );
     const response = await this.fetch<ScoreSaberPlayerScoresPage>(
       useProxy,
       LOOKUP_PLAYER_SCORES_ENDPOINT.replace(":id", playerId)
         .replace(":limit", 8 + "")
         .replace(":sort", sort)
-        .replace(":page", page.toString())
+        .replace(":page", page + "") + (search ? `&search=${search}` : ""),
     );
     if (response === undefined) {
       return undefined;
     }
-    this.log(`Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
+    this.log(
+      `Found scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`,
+    );
     return response;
   }
 
@@ -102,18 +127,25 @@ class ScoreSaberFetcher extends DataFetcher {
   async lookupLeaderboardScores(
     leaderboardId: string,
     page: number,
-    useProxy = true
+    useProxy = true,
   ): Promise<ScoreSaberLeaderboardScoresPage | undefined> {
     const before = performance.now();
-    this.log(`Looking up scores for leaderboard "${leaderboardId}", page "${page}"...`);
+    this.log(
+      `Looking up scores for leaderboard "${leaderboardId}", page "${page}"...`,
+    );
     const response = await this.fetch<ScoreSaberLeaderboardScoresPage>(
       useProxy,
-      LOOKUP_LEADERBOARD_SCORES_ENDPOINT.replace(":id", leaderboardId).replace(":page", page.toString())
+      LOOKUP_LEADERBOARD_SCORES_ENDPOINT.replace(":id", leaderboardId).replace(
+        ":page",
+        page.toString(),
+      ),
     );
     if (response === undefined) {
       return undefined;
     }
-    this.log(`Found scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`);
+    this.log(
+      `Found scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`,
+    );
     return response;
   }
 }

src/common/time-utils.ts

@@ -20,7 +20,10 @@ export function timeAgo(input: Date | number) {
   for (const key in ranges) {
     if (ranges[key] < Math.abs(secondsElapsed)) {
       const delta = secondsElapsed / ranges[key];
-      return formatter.format(Math.round(delta), key as Intl.RelativeTimeFormatUnit);
+      return formatter.format(
+        Math.round(delta),
+        key as Intl.RelativeTimeFormatUnit,
+      );
     }
   }
 }

src/common/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

src/common/youtube-utils.ts

@@ -6,7 +6,11 @@
  * @param author the author of the song
  * @returns the YouTube link for the song
  */
-export function songNameToYouTubeLink(name: string, songSubName: string, author: string) {
+export function songNameToYouTubeLink(
+  name: string,
+  songSubName: string,
+  author: string,
+) {
   const baseUrl = "https://www.youtube.com/results?search_query=";
   let query = "";
   if (name) {

src/components/background-image.tsx

@@ -9,7 +9,10 @@ export default function BackgroundImage() {
   const database = useDatabase();
   const settings = useLiveQuery(() => database.getSettings());
 
-  if (settings?.backgroundImage == undefined || settings?.backgroundImage == "") {
+  if (
+    settings?.backgroundImage == undefined ||
+    settings?.backgroundImage == ""
+  ) {
     return null; // Don't render anything if the background image is not set
   }
 

src/components/card.tsx

@@ -6,5 +6,14 @@ type Props = {
 };
 
 export default function Card({ children, className }: Props) {
-  return <div className={clsx("flex flex-col bg-secondary/90 p-3 rounded-md", className)}>{children}</div>;
+  return (
+    <div
+      className={clsx(
+        "flex flex-col bg-secondary/90 p-3 rounded-md",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
 }

src/components/chart/customized-axis-tick.tsx

@@ -12,7 +12,14 @@ export const CustomizedAxisTick = ({
 }) => {
   return (
     <g transform={`translate(${x},${y})`}>
-      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform={`rotate(${rotateAngle})`}>
+      <text
+        x={0}
+        y={0}
+        dy={16}
+        textAnchor="end"
+        fill="#666"
+        transform={`rotate(${rotateAngle})`}
+      >
         {payload.value}
       </text>
     </g>

src/components/country-flag.tsx

@@ -6,6 +6,11 @@ type Props = {
 export default function CountryFlag({ country, size = 24 }: Props) {
   return (
     // eslint-disable-next-line @next/next/no-img-element
-    <img alt="Player Country" src={`/assets/flags/${country}.png`} width={size * 2} height={size} />
+    <img
+      alt="Player Country"
+      src={`/assets/flags/${country}.png`}
+      width={size * 2}
+      height={size}
+    />
   );
 }

src/components/input/pagination.tsx

@@ -2,13 +2,13 @@ import { ArrowPathIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import { useEffect, useState } from "react";
 import {
+  Pagination as ShadCnPagination,
   PaginationContent,
   PaginationEllipsis,
   PaginationItem,
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-  Pagination as ShadCnPagination,
 } from "../ui/pagination";
 
 type PaginationItemWrapperProps = {
@@ -23,7 +23,10 @@ type PaginationItemWrapperProps = {
   children: React.ReactNode;
 };
 
-function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrapperProps) {
+function PaginationItemWrapper({
+  isLoadingPage,
+  children,
+}: PaginationItemWrapperProps) {
   return (
     <PaginationItem
       className={clsx(isLoadingPage ? "cursor-not-allowed" : "cursor-pointer")}
@@ -62,7 +65,13 @@ type Props = {
   onPageChange: (page: number) => void;
 };
 
-export default function Pagination({ mobilePagination, page, totalPages, loadingPage, onPageChange }: Props) {
+export default function Pagination({
+  mobilePagination,
+  page,
+  totalPages,
+  loadingPage,
+  onPageChange,
+}: Props) {
   totalPages = Math.round(totalPages);
   const isLoading = loadingPage !== undefined;
   const [currentPage, setCurrentPage] = useState(page);
@@ -72,7 +81,12 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
   }, [page]);
 
   const handlePageChange = (newPage: number) => {
-    if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
+    if (
+      newPage < 1 ||
+      newPage > totalPages ||
+      newPage == currentPage ||
+      isLoading
+    ) {
       return;
     }
 
@@ -95,15 +109,20 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
       pageNumbers.push(
         <>
           <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
-            <PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
+            <PaginationLink onClick={() => handlePageChange(1)}>
+              1
+            </PaginationLink>
           </PaginationItemWrapper>
           {/* Only show ellipsis if more than 2 pages from the start */}
           {startPage > 2 && (
-            <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
+            <PaginationItemWrapper
+              key="ellipsis-start"
+              isLoadingPage={isLoading}
+            >
               <PaginationEllipsis />
             </PaginationItemWrapper>
           )}
-        </>
+        </>,
       );
     }
 
@@ -111,10 +130,17 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
     for (let i = startPage; i <= endPage; i++) {
       pageNumbers.push(
         <PaginationItemWrapper key={i} isLoadingPage={isLoading}>
-          <PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
+          <PaginationLink
-            {loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
+            isActive={i === currentPage}
+            onClick={() => handlePageChange(i)}
+          >
+            {loadingPage === i ? (
+              <ArrowPathIcon className="w-4 h-4 animate-spin" />
+            ) : (
+              i
+            )}
           </PaginationLink>
-        </PaginationItemWrapper>
+        </PaginationItemWrapper>,
       );
     }
 
@@ -126,22 +152,31 @@ export default function Pagination({ mobilePagination, page, totalPages, loading
       <PaginationContent>
         {/* Previous button for mobile and desktop */}
         <PaginationItemWrapper isLoadingPage={isLoading}>
-          <PaginationPrevious onClick={() => handlePageChange(currentPage - 1)} />
+          <PaginationPrevious
+            onClick={() => handlePageChange(currentPage - 1)}
+          />
         </PaginationItemWrapper>
 
         {renderPageNumbers()}
 
         {/* For desktop, show ellipsis and link to the last page */}
-        {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
+        {!mobilePagination &&
-          <>
+          currentPage < totalPages &&
-            <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
+          totalPages - currentPage > 2 && (
-              <PaginationEllipsis className="cursor-default" />
+            <>
-            </PaginationItemWrapper>
+              <PaginationItemWrapper
-            <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
+                key="ellipsis-end"
-              <PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
+                isLoadingPage={isLoading}
-            </PaginationItemWrapper>
+              >
-          </>
+                <PaginationEllipsis className="cursor-default" />
-        )}
+              </PaginationItemWrapper>
+              <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
+                <PaginationLink onClick={() => handlePageChange(totalPages)}>
+                  {totalPages}
+                </PaginationLink>
+              </PaginationItemWrapper>
+            </>
+          )}
 
         {/* Next button for mobile and desktop */}
         <PaginationItemWrapper isLoadingPage={isLoading}>

src/components/input/search-player.tsx

@@ -40,7 +40,10 @@ export default function SearchPlayer() {
     <div className="flex flex-col gap-3">
       {/* Search */}
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-end gap-2">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="flex items-end gap-2"
+        >
           <FormField
             control={form.control}
             name="username"
@@ -48,7 +51,11 @@ export default function SearchPlayer() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input className="w-full sm:w-72 text-sm" placeholder="Query..." {...field} />
+                  <Input
+                    className="w-full sm:w-72 text-sm"
+                    placeholder="Query..."
+                    {...field}
+                  />
                 </FormControl>
               </FormItem>
             )}
@@ -79,7 +86,9 @@ export default function SearchPlayer() {
                   </Avatar>
                   <div>
                     <p>{player.name}</p>
-                    <p className="text-gray-400 text-sm">#{formatNumberWithCommas(player.rank)}</p>
+                    <p className="text-gray-400 text-sm">
+                      #{formatNumberWithCommas(player.rank)}
+                    </p>
                   </div>
                 </Link>
               );

src/components/leaderboard/leaderboard-score-stats.tsx

@@ -7,7 +7,10 @@ import clsx from "clsx";
 
 type Badge = {
   name: string;
-  create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
+  create: (
+    score: ScoreSaberScore,
+    leaderboard: ScoreSaberLeaderboard,
+  ) => string | React.ReactNode | undefined;
 };
 
 const badges: Badge[] = [
@@ -35,8 +38,16 @@ const badges: Badge[] = [
 
       return (
         <>
-          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <p>
-          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+            {fullCombo ? (
+              <span className="text-green-400">FC</span>
+            ) : (
+              formatNumberWithCommas(score.missedNotes)
+            )}
+          </p>
+          <XMarkIcon
+            className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")}
+          />
         </>
       );
     },

src/components/leaderboard/leaderboard-scores.tsx

@@ -19,7 +19,9 @@ export default function LeaderboardScores({ leaderboard }: Props) {
   const { width } = useWindowDimensions();
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPage | undefined>();
+  const [currentScores, setCurrentScores] = useState<
+    ScoreSaberLeaderboardScoresPage | undefined
+  >();
 
   const {
     data: scores,
@@ -28,7 +30,11 @@ export default function LeaderboardScores({ leaderboard }: Props) {
     refetch,
   } = useQuery({
     queryKey: ["playerScores", leaderboard.id, currentPage],
-    queryFn: () => scoresaberFetcher.lookupLeaderboardScores(leaderboard.id + "", currentPage),
+    queryFn: () =>
+      scoresaberFetcher.lookupLeaderboardScores(
+        leaderboard.id + "",
+        currentPage,
+      ),
     staleTime: 30 * 1000, // Cache data for 30 seconds
   });
 
@@ -47,23 +53,35 @@ export default function LeaderboardScores({ leaderboard }: Props) {
   }
 
   return (
-    <motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
+    <motion.div
+      initial={{ opacity: 0, y: -50 }}
+      exit={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
       <Card className="flex gap-2 border border-input mt-2">
         <div className="text-center">
           {isError && <p>Oopsies! Something went wrong.</p>}
-          {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
+          {currentScores.scores.length === 0 && (
+            <p>No scores found. Invalid Page?</p>
+          )}
         </div>
 
         <div className="grid min-w-full grid-cols-1 divide-y divide-border">
           {currentScores.scores.map((playerScore, index) => (
-            <LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
+            <LeaderboardScore
+              key={index}
+              score={playerScore}
+              leaderboard={leaderboard}
+            />
           ))}
         </div>
 
         <Pagination
           mobilePagination={width < 768}
           page={currentPage}
-          totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+          totalPages={Math.ceil(
+            currentScores.metadata.total / currentScores.metadata.itemsPerPage,
+          )}
           loadingPage={isLoading ? currentPage : undefined}
           onPageChange={setCurrentPage}
         />

src/components/loaders/database-loader.tsx

@@ -24,7 +24,11 @@ export default function DatabaseLoader({ children }: Props) {
 
   return (
     <DatabaseContext.Provider value={database}>
-      {database == undefined ? <FullscreenLoader reason="Loading database..." /> : children}
+      {database == undefined ? (
+        <FullscreenLoader reason="Loading database..." />
+      ) : (
+        children
+      )}
     </DatabaseContext.Provider>
   );
 }

src/components/logos/beatsaver-logo.tsx

@@ -3,7 +3,10 @@ type BeatSaverLogoProps = {
   className?: string;
 };
 
-export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoProps) {
+export default function BeatSaverLogo({
+  size = 32,
+  className,
+}: BeatSaverLogoProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -15,7 +18,10 @@ export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoPro
     >
       <g fill="none" stroke="#fff" strokeWidth="10">
         <path d="M 100,7 189,47 100,87 12,47 Z" strokeLinejoin="round"></path>
-        <path d="M 189,47 189,155 100,196 12,155 12,47" strokeLinejoin="round"></path>
+        <path
+          d="M 189,47 189,155 100,196 12,155 12,47"
+          strokeLinejoin="round"
+        ></path>
         <path d="M 100,87 100,196" strokeLinejoin="round"></path>
         <path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
       </g>

src/components/logos/scoresaber-logo.tsx

@@ -2,6 +2,12 @@ import Image from "next/image";
 
 export default function ScoreSaberLogo() {
   return (
-    <Image width={32} height={32} unoptimized src={"/assets/logos/scoresaber.png"} alt={"ScoreSaber Logo"}></Image>
+    <Image
+      width={32}
+      height={32}
+      unoptimized
+      src={"/assets/logos/scoresaber.png"}
+      alt={"ScoreSaber Logo"}
+    ></Image>
   );
 }

src/components/logos/youtube-logo.tsx

@@ -3,7 +3,10 @@ type YouTubeLogoProps = {
   className?: string;
 };
 
-export default function YouTubeLogo({ size = 32, className }: YouTubeLogoProps) {
+export default function YouTubeLogo({
+  size = 32,
+  className,
+}: YouTubeLogoProps) {
   return (
     <svg
       height={size}

src/components/navbar/navbar.tsx

@@ -49,7 +49,9 @@ export default function Navbar() {
 
         {/* Right-aligned item */}
         <NavbarButton>
-          <Link href={items[items.length - 1].link}>{renderNavbarItem(items[items.length - 1])}</Link>
+          <Link href={items[items.length - 1].link}>
+            {renderNavbarItem(items[items.length - 1])}
+          </Link>
         </NavbarButton>
       </div>
     </div>

src/components/navbar/profile-button.tsx

@@ -20,9 +20,15 @@ export default function ProfileButton() {
 
   return (
     <NavbarButton>
-      <Link href={`/player/${settings.playerId}`} className="flex items-center gap-2">
+      <Link
+        href={`/player/${settings.playerId}`}
+        className="flex items-center gap-2"
+      >
         <Avatar className="w-6 h-6">
-          <AvatarImage alt="Profile Picture" src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`} />
+          <AvatarImage
+            alt="Profile Picture"
+            src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
+          />
         </Avatar>
         <p>You</p>
       </Link>

src/components/player/player-data.tsx

@@ -18,7 +18,12 @@ type Props = {
   page: number;
 };
 
-export default function PlayerData({ initialPlayerData: initalPlayerData, initialScoreData, sort, page }: Props) {
+export default function PlayerData({
+  initialPlayerData: initalPlayerData,
+  initialScoreData,
+  sort,
+  page,
+}: Props) {
   let player = initalPlayerData;
   const { data, isLoading, isError } = useQuery({
     queryKey: ["player", player.id],
@@ -38,7 +43,12 @@ export default function PlayerData({ initialPlayerData: initalPlayerData, initia
           <PlayerRankChart player={player} />
         </>
       )}
-      <PlayerScores initialScoreData={initialScoreData} player={player} sort={sort} page={page} />
+      <PlayerScores
+        initialScoreData={initialScoreData}
+        player={player}
+        sort={sort}
+        page={page}
+      />
     </div>
   );
 }

src/components/player/player-header.tsx

@@ -50,13 +50,20 @@ export default function PlayerHeader({ player }: Props) {
             <p className="font-bold text-2xl">{player.name}</p>
             <div className="flex flex-col">
               <div>
-                {player.inactive && <p className="text-gray-400">Inactive Account</p>}
+                {player.inactive && (
-                {player.banned && <p className="text-red-500">Banned Account</p>}
+                  <p className="text-gray-400">Inactive Account</p>
+                )}
+                {player.banned && (
+                  <p className="text-red-500">Banned Account</p>
+                )}
               </div>
               <div className="flex gap-2">
                 {playerData.map((subName, index) => {
                   // Check if the player is inactive or banned and if the data should be shown
-                  if (!subName.showWhenInactiveOrBanned && (player.inactive || player.banned)) {
+                  if (
+                    !subName.showWhenInactiveOrBanned &&
+                    (player.inactive || player.banned)
+                  ) {
                     return null;
                   }
 

src/components/player/player-rank-chart.tsx

@@ -3,11 +3,28 @@
 
 import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
 import { formatNumberWithCommas } from "@/common/number-utils";
-import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
+import {
+  CategoryScale,
+  Chart,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip,
+} from "chart.js";
 import { Line } from "react-chartjs-2";
 import Card from "../card";
 
-Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
+Chart.register(
+  LinearScale,
+  CategoryScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+);
 
 export const options: any = {
   maintainAspectRatio: false,

src/components/player/player-scores.tsx

@@ -59,14 +59,37 @@ type Props = {
   page: number;
 };
 
-export default function PlayerScores({ initialScoreData, player, sort, page }: Props) {
+type PageState = {
+  /**
+   * The current page
+   */
+  page: number;
+
+  /**
+   * The current sort
+   */
+  sort: ScoreSort;
+};
+
+export default function PlayerScores({
+  initialScoreData,
+  player,
+  sort,
+  page,
+}: Props) {
   const { width } = useWindowDimensions();
   const controls = useAnimation();
 
-  const [currentSort, setCurrentSort] = useState(sort);
+  const [firstLoad, setFirstLoad] = useState(true);
+  const [pageState, setPageState] = useState<PageState>({
+    page: page,
+    sort: sort,
+  });
   const [previousPage, setPreviousPage] = useState(page);
-  const [currentPage, setCurrentPage] = useState(page);
+  const [currentScores, setCurrentScores] = useState<
-  const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPage | undefined>(initialScoreData);
+    ScoreSaberPlayerScoresPage | undefined
+  >(initialScoreData);
+  const [searchQuery, setSearchQuery] = useState<string>();
 
   const {
     data: scores,
@@ -74,85 +97,114 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
     isLoading,
     refetch,
   } = useQuery({
-    queryKey: ["playerScores", player.id, currentSort, currentPage],
+    queryKey: ["playerScores", player.id, pageState],
-    queryFn: () => scoresaberFetcher.lookupPlayerScores(player.id, currentSort, currentPage),
+    queryFn: () =>
+      scoresaberFetcher.lookupPlayerScores({
+        playerId: player.id,
+        sort: pageState.sort,
+        page: pageState.page,
+      }),
     staleTime: 30 * 1000, // Cache data for 30 seconds
   });
 
   const handleScoreLoad = useCallback(async () => {
-    await controls.start(previousPage >= currentPage ? "hiddenRight" : "hiddenLeft");
+    setFirstLoad(false);
+    if (!firstLoad) {
+      await controls.start(
+        previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft",
+      );
+    }
     setCurrentScores(scores);
     await controls.start("visible");
-  }, [scores, controls]);
+  }, [scores, controls, previousPage, firstLoad, pageState.page]);
+
+  const handleSortChange = (newSort: ScoreSort) => {
+    if (newSort !== pageState.sort) {
+      setPageState({ page: 1, sort: newSort });
+    }
+  };
 
   useEffect(() => {
     if (scores) {
       handleScoreLoad();
     }
-  }, [scores]);
+  }, [scores, isError]);
 
   useEffect(() => {
-    const newUrl = `/player/${player.id}/${currentSort}/${currentPage}`;
+    const newUrl = `/player/${player.id}/${pageState.sort}/${pageState.page}`;
-    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+    window.history.replaceState(
+      { ...window.history.state, as: newUrl, url: newUrl },
+      "",
+      newUrl,
+    );
     refetch();
-  }, [currentSort, currentPage, refetch, player.id]);
+  }, [pageState, refetch, player.id]);
-
-  const handleSortChange = (newSort: ScoreSort) => {
-    if (newSort !== currentSort) {
-      setCurrentSort(newSort);
-      setCurrentPage(1); // Reset page to 1 on sort change
-    }
-  };
-
-  if (currentScores === undefined) {
-    return undefined;
-  }
 
   return (
     <Card className="flex gap-1">
-      <div className="flex items-center flex-row w-full gap-2 justify-center">
+      <div className="flex items-center flex-col w-full gap-2 justify-center relative">
-        {Object.values(scoreSort).map((sortOption, index) => (
+        <div className="flex items-center flex-row gap-2">
-          <Button
+          {Object.values(scoreSort).map((sortOption, index) => (
-            variant={sortOption.value === currentSort ? "default" : "outline"}
+            <Button
-            key={index}
+              variant={
-            onClick={() => handleSortChange(sortOption.value)}
+                sortOption.value === pageState.sort ? "default" : "outline"
-            size="sm"
+              }
-            className="flex items-center gap-1"
+              key={index}
+              onClick={() => handleSortChange(sortOption.value)}
+              size="sm"
+              className="flex items-center gap-1"
+            >
+              {sortOption.icon}
+              {`${capitalizeFirstLetter(sortOption.name)} Scores`}
+            </Button>
+          ))}
+        </div>
+
+        {/* todo: add search */}
+        {/*<Input*/}
+        {/*  type="search"*/}
+        {/*  placeholder="Search..."*/}
+        {/*  className="w-72 flex lg:absolute right-0 top-0"*/}
+        {/*/>*/}
+      </div>
+
+      {currentScores && (
+        <>
+          <div className="text-center">
+            {isError && <p>Oopsies! Something went wrong.</p>}
+            {currentScores.playerScores.length === 0 && (
+              <p>No scores found. Invalid Page?</p>
+            )}
+          </div>
+
+          <motion.div
+            initial="hidden"
+            animate={controls}
+            variants={scoreAnimation}
+            className="grid min-w-full grid-cols-1 divide-y divide-border"
           >
-            {sortOption.icon}
+            {currentScores.playerScores.map((playerScore, index) => (
-            {`${capitalizeFirstLetter(sortOption.name)} Scores`}
+              <motion.div key={index} variants={scoreAnimation}>
-          </Button>
+                <Score playerScore={playerScore} />
-        ))}
+              </motion.div>
-      </div>
+            ))}
-
-      <div className="text-center">
-        {isError && <p>Oopsies! Something went wrong.</p>}
-        {currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page?</p>}
-      </div>
-
-      <motion.div
-        initial="hidden"
-        animate={controls}
-        variants={scoreAnimation}
-        className="grid min-w-full grid-cols-1 divide-y divide-border"
-      >
-        {currentScores.playerScores.map((playerScore, index) => (
-          <motion.div key={index} variants={scoreAnimation}>
-            <Score playerScore={playerScore} />
           </motion.div>
-        ))}
-      </motion.div>
 
-      <Pagination
+          <Pagination
-        mobilePagination={width < 768}
+            mobilePagination={width < 768}
-        page={currentPage}
+            page={pageState.page}
-        totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+            totalPages={Math.ceil(
-        loadingPage={isLoading ? currentPage : undefined}
+              currentScores.metadata.total /
-        onPageChange={(page) => {
+                currentScores.metadata.itemsPerPage,
-          setPreviousPage(currentPage);
+            )}
-          setCurrentPage(page);
+            loadingPage={isLoading ? pageState.page : undefined}
-        }}
+            onPageChange={(page) => {
-      />
+              setPreviousPage(pageState.page);
+              setPageState({ page, sort: pageState.sort });
+            }}
+          />
+        </>
+      )}
     </Card>
   );
 }

src/components/player/player-stats.tsx

@@ -57,14 +57,23 @@ type Props = {
 
 export default function PlayerStats({ player }: Props) {
   return (
-    <div className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}>
+    <div
+      className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}
+    >
       {badges.map((badge, index) => {
         const toRender = badge.create(player);
         if (toRender === undefined) {
           return <div key={index} />;
         }
 
-        return <StatValue key={index} color={badge.color} name={badge.name} value={toRender} />;
+        return (
+          <StatValue
+            key={index}
+            color={badge.color}
+            name={badge.name}
+            value={toRender}
+          />
+        );
       })}
     </div>
   );

src/components/player/score/leaderboard-button.tsx

@@ -8,7 +8,10 @@ type Props = {
   setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
 };
 
-export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderboardExpanded }: Props) {
+export default function LeaderboardButton({
+  isLeaderboardExpanded,
+  setIsLeaderboardExpanded,
+}: Props) {
   return (
     <div className="pr-2 flex items-center justify-center h-full">
       <Button
@@ -17,7 +20,10 @@ export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderbo
         onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)}
       >
         <ArrowDownIcon
-          className={clsx("w-6 h-6 transition-all transform-gpu", isLeaderboardExpanded ? "" : "rotate-180")}
+          className={clsx(
+            "w-6 h-6 transition-all transform-gpu",
+            isLeaderboardExpanded ? "" : "rotate-180",
+          )}
         />
       </Button>
     </div>

src/components/player/score/score-buttons.tsx

@@ -53,7 +53,10 @@ export default function ScoreButtons({
             {/* Open map in BeatSaver */}
             <ScoreButton
               onClick={() => {
-                window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+                window.open(
+                  `https://beatsaver.com/maps/${beatSaverMap.bsr}`,
+                  "_blank",
+                );
               }}
               tooltip={<p>Click to open the map</p>}
             >
@@ -66,8 +69,12 @@ export default function ScoreButtons({
         <ScoreButton
           onClick={() => {
             window.open(
-              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+              songNameToYouTubeLink(
-              "_blank"
+                leaderboard.songName,
+                leaderboard.songSubName,
+                leaderboard.songAuthorName,
+              ),
+              "_blank",
             );
           }}
           tooltip={<p>Click to open the song in YouTube</p>}

src/components/player/score/score-info.tsx

@@ -14,9 +14,13 @@ type Props = {
 };
 
 export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
-  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
+  const diff = getDifficultyFromScoreSaberDifficulty(
+    leaderboard.difficulty.difficulty,
+  );
   const mappersProfile =
-    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
+    beatSaverMap != undefined
+      ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}`
+      : undefined;
 
   return (
     <div className="flex gap-3 items-center">
@@ -68,7 +72,13 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
           </p>
           <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
           <FallbackLink href={mappersProfile}>
-            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
+            <p
+              className={clsx(
+                "text-sm",
+                mappersProfile &&
+                  "hover:brightness-75 transform-gpu transition-all",
+              )}
+            >
               {leaderboard.levelAuthorName}
             </p>
           </FallbackLink>

src/components/player/score/score-stats.tsx

@@ -7,7 +7,10 @@ import clsx from "clsx";
 
 type Badge = {
   name: string;
-  create: (score: ScoreSaberScore, leaderboard: ScoreSaberLeaderboard) => string | React.ReactNode | undefined;
+  create: (
+    score: ScoreSaberScore,
+    leaderboard: ScoreSaberLeaderboard,
+  ) => string | React.ReactNode | undefined;
 };
 
 const badges: Badge[] = [
@@ -49,8 +52,16 @@ const badges: Badge[] = [
 
       return (
         <>
-          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <p>
-          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+            {fullCombo ? (
+              <span className="text-green-400">FC</span>
+            ) : (
+              formatNumberWithCommas(score.missedNotes)
+            )}
+          </p>
+          <XMarkIcon
+            className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")}
+          />
         </>
       );
     },

src/components/providers/query-provider.tsx

@@ -9,5 +9,7 @@ type Props = {
 const queryClient = new QueryClient();
 
 export function QueryProvider({ children }: Props) {
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
 }

src/components/stat-value.tsx

@@ -22,7 +22,7 @@ export default function StatValue({ name, color, value }: Props) {
     <div
       className={clsx(
         "flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm",
-        color ? color : "bg-accent"
+        color ? color : "bg-accent",
       )}
     >
       {name && (
@@ -31,7 +31,9 @@ export default function StatValue({ name, color, value }: Props) {
           <div className="h-4 w-[1px] bg-primary" />
         </>
       )}
-      <div className="flex gap-1 items-center">{typeof value === "string" ? <p>{value}</p> : value}</div>
+      <div className="flex gap-1 items-center">
+        {typeof value === "string" ? <p>{value}</p> : value}
+      </div>
     </div>
   );
 }

src/components/tooltip.tsx

@@ -1,4 +1,8 @@
-import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+import {
+  Tooltip as ShadCnTooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "./ui/tooltip";
 
 type Props = {
   /**

src/components/ui/avatar.tsx

@@ -11,7 +11,10 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className,
+    )}
     {...props}
   />
 ));
@@ -21,7 +24,11 @@ const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
@@ -31,7 +38,10 @@ const AvatarFallback = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className,
+    )}
     {...props}
   />
 ));

src/components/ui/button.tsx

@@ -9,10 +9,14 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        default:
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        destructive:
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -27,7 +31,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -39,8 +43,14 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+    return (
-  }
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
 );
 Button.displayName = "Button";
 

src/components/ui/card.tsx

@@ -2,40 +2,82 @@ import * as React from "react";
 
 import { cn } from "@/common/utils";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+const Card = React.forwardRef<
-  <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className,
+    )}
+    {...props}
+  />
 ));
 Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLParagraphElement,
-    <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  React.HTMLAttributes<HTMLHeadingElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
 CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+const CardDescription = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLParagraphElement,
-    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  React.HTMLAttributes<HTMLParagraphElement>
-  )
+>(({ className, ...props }, ref) => (
-);
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
 CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent = React.forwardRef<
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  HTMLDivElement,
-);
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
 CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter = React.forwardRef<
-  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  HTMLDivElement,
-);
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

src/components/ui/form.tsx

@@ -3,7 +3,14 @@
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
-import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form";
 
 import { cn } from "@/common/utils";
 import { Label } from "@/components/ui/label";
@@ -12,16 +19,18 @@ const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
   name: TName;
 };
 
-const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -59,19 +68,22 @@ type FormItemContextValue = {
   id: string;
 };
 
-const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+const FormItemContext = React.createContext<FormItemContextValue>(
-
+  {} as FormItemContextValue,
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <div ref={ref} className={cn("space-y-2", className)} {...props} />
-      </FormItemContext.Provider>
-    );
-  }
 );
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
 FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
@@ -80,59 +92,88 @@ const FormLabel = React.forwardRef<
 >(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
-  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
 });
 FormLabel.displayName = "FormLabel";
 
-const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+const FormControl = React.forwardRef<
-  ({ ...props }, ref) => {
+  React.ElementRef<typeof Slot>,
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
-    return (
+  return (
-      <Slot
+    <Slot
-        ref={ref}
+      ref={ref}
-        id={formItemId}
+      id={formItemId}
-        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-describedby={
-        aria-invalid={!!error}
+        !error
-        {...props}
+          ? `${formDescriptionId}`
-      />
+          : `${formDescriptionId} ${formMessageId}`
-    );
+      }
-  }
+      aria-invalid={!!error}
-);
+      {...props}
+    />
+  );
+});
 FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+const FormDescription = React.forwardRef<
-  ({ className, ...props }, ref) => {
+  HTMLParagraphElement,
-    const { formDescriptionId } = useFormField();
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
 
-    return (
+  return (
-      <p ref={ref} id={formDescriptionId} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} />
+    <p
-    );
+      ref={ref}
-  }
+      id={formDescriptionId}
-);
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
 FormDescription.displayName = "FormDescription";
 
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+const FormMessage = React.forwardRef<
-  ({ className, children, ...props }, ref) => {
+  HTMLParagraphElement,
-    const { error, formMessageId } = useFormField();
+  React.HTMLAttributes<HTMLParagraphElement>
-    const body = error ? String(error?.message) : children;
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
-    if (!body) {
+  if (!body) {
-      return null;
+    return null;
-    }
-
-    return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={cn("text-[0.8rem] font-medium text-destructive", className)}
-        {...props}
-      >
-        {body}
-      </p>
-    );
   }
-);
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
 FormMessage.displayName = "FormMessage";
 
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

src/components/ui/input.tsx

@@ -2,21 +2,24 @@ import * as React from "react";
 
 import { cn } from "@/common/utils";
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  return (
+  ({ className, type, ...props }, ref) => {
-    <input
+    return (
-      type={type}
+      <input
-      className={cn(
+        type={type}
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className={cn(
-        className
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-      )}
+          className,
-      ref={ref}
+        )}
-      {...props}
+        ref={ref}
-    />
+        {...props}
-  );
+      />
-});
+    );
+  },
+);
 Input.displayName = "Input";
 
 export { Input };

src/components/ui/label.tsx

@@ -6,13 +6,20 @@ import * as React from "react";
 
 import { cn } from "@/common/utils";
 
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 

src/components/ui/pagination.tsx

@@ -1,4 +1,8 @@
-import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
 import * as React from "react";
 
 import { cn } from "@/common/utils";
@@ -14,14 +18,22 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 );
 Pagination.displayName = "Pagination";
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+const PaginationContent = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLUListElement,
-    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  React.ComponentProps<"ul">
-  )
+>(({ className, ...props }, ref) => (
-);
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+));
 PaginationContent.displayName = "PaginationContent";
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
   <li ref={ref} className={cn("", className)} {...props} />
 ));
 PaginationItem.displayName = "PaginationItem";
@@ -31,7 +43,12 @@ type PaginationLinkProps = {
 } & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">;
 
-const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
   <a
     aria-current={isActive ? "page" : undefined}
     className={cn(
@@ -39,29 +56,52 @@ const PaginationLink = ({ className, isActive, size = "icon", ...props }: Pagina
         variant: isActive ? "outline" : "ghost",
         size,
       }),
-      className
+      className,
     )}
     {...props}
   />
 );
 PaginationLink.displayName = "PaginationLink";
 
-const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationPrevious = ({
-  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1", className)} {...props}>
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1", className)}
+    {...props}
+  >
     <ChevronLeftIcon className="h-4 w-4" />
   </PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationNext = ({
-  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1", className)} {...props}>
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1", className)}
+    {...props}
+  >
     <ChevronRightIcon className="h-4 w-4" />
   </PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";
 
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+const PaginationEllipsis = ({
-  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
     <DotsHorizontalIcon className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>

src/components/ui/scroll-area.tsx

@@ -9,8 +9,14 @@ const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+  <ScrollAreaPrimitive.Root
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
@@ -26,9 +32,11 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "vertical" &&
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      className
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
     )}
     {...props}
   >

src/components/ui/toast.tsx

@@ -17,7 +17,7 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      className,
     )}
     {...props}
   />
@@ -30,20 +30,28 @@ const toastVariants = cva(
     variants: {
       variant: {
         default: "border bg-secondary text-foreground",
-        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 );
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
-  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
 
@@ -55,7 +63,7 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      className,
     )}
     {...props}
   />
@@ -70,7 +78,7 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
     toast-close=""
     {...props}
@@ -84,7 +92,11 @@ const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold [&+div]:text-xs", className)} {...props} />
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+    {...props}
+  />
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
@@ -92,7 +104,11 @@ const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
 ));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 

src/components/ui/toaster.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { useToast } from "@/hooks/use-toast";
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
 
 export function Toaster() {
   const { toasts } = useToast();
@@ -13,7 +20,9 @@ export function Toaster() {
           <Toast key={id} {...props}>
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
             </div>
             {action}
             <ToastClose />

src/components/ui/tooltip.tsx

@@ -20,7 +20,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />

src/hooks/use-toast.ts

@@ -82,7 +82,9 @@ export const reducer = (state: State, action: Action): State => {
     case "UPDATE_TOAST":
       return {
         ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
       };
 
     case "DISMISS_TOAST": {
@@ -106,7 +108,7 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
       };
     }

src/hooks/use-window-dimensions.ts

@@ -9,7 +9,9 @@ function getWindowDimensions() {
 }
 
 export default function useWindowDimensions() {
-  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions(),
+  );
 
   useEffect(() => {
     function handleResize() {