use the new prettier config and add a network offline loader

.env-example

@@ -2,5 +2,6 @@ NEXT_PUBLIC_SITE_URL=http://localhost:3000
 NEXT_PUBLIC_TRIGGER_PUBLIC_API_KEY=
 
 TRIGGER_API_KEY=
-TRIGGER_API_URL=https://trigger.fascinated.cc
+TRIGGER_API_URL=https://trigger.example.com
 MONGO_URI=mongodb://127.0.0.1:27017
+SENTRY_AUTH_TOKEN=

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": false,
+  "jsxBracketSameLine": false
+}

package.json

@@ -24,6 +24,7 @@
     "@trigger.dev/nextjs": "^3.0.8",
     "@trigger.dev/react": "^3.0.8",
     "@trigger.dev/sdk": "^3.0.8",
+    "@uidotdev/usehooks": "^2.4.1",
     "canvas": "3.0.0-rc2",
     "chart.js": "^4.4.4",
     "class-variance-authority": "^0.7.0",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       '@trigger.dev/sdk':
         specifier: ^3.0.8
         version: 3.0.9
+      '@uidotdev/usehooks':
+        specifier: ^2.4.1
+        version: 2.4.1(react-dom@19.0.0-rc-3edc000d-20240926(react@19.0.0-rc-3edc000d-20240926))(react@19.0.0-rc-3edc000d-20240926)
       canvas:
         specifier: 3.0.0-rc2
         version: 3.0.0-rc2
@@ -1440,6 +1443,13 @@ packages:
     resolution: {integrity: sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==}
     engines: {node: ^16.0.0 || >=18.0.0}
 
+  '@uidotdev/usehooks@2.4.1':
+    resolution: {integrity: sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -5106,6 +5116,11 @@ snapshots:
       '@typescript-eslint/types': 7.2.0
       eslint-visitor-keys: 3.4.3
 
+  '@uidotdev/usehooks@2.4.1(react-dom@19.0.0-rc-3edc000d-20240926(react@19.0.0-rc-3edc000d-20240926))(react@19.0.0-rc-3edc000d-20240926)':
+    dependencies:
+      react: 19.0.0-rc-3edc000d-20240926
+      react-dom: 19.0.0-rc-3edc000d-20240926(react@19.0.0-rc-3edc000d-20240926)
+
   '@ungap/structured-clone@1.2.0': {}
 
   '@webassemblyjs/ast@1.12.1':

src/app/(pages)/api/player/history/route.ts

@@ -8,10 +8,7 @@ export async function GET(request: NextRequest) {
   const playerIdCookie = request.cookies.get("playerId");
   const id = request.nextUrl.searchParams.get("id");
   if (id == null) {
-    return NextResponse.json(
-      { error: "Unknown player. Missing: ?id=" },
-      { status: 400 },
-    );
+    return NextResponse.json({ error: "Unknown player. Missing: ?id=" }, { status: 400 });
   }
   const shouldCreatePlayer = playerIdCookie?.value === id;
 

src/app/(pages)/api/player/isbeingtracked/route.ts

@@ -6,10 +6,7 @@ import { PlayerTrackedSince } from "@/common/player/player-tracked-since";
 export async function GET(request: NextRequest) {
   const id = request.nextUrl.searchParams.get("id");
   if (id == null) {
-    return NextResponse.json(
-      { error: "Unknown player. Missing: ?id=" },
-      { status: 400 },
-    );
+    return NextResponse.json({ error: "Unknown player. Missing: ?id=" }, { status: 400 });
   }
   await connectMongo(); // Connect to Mongo
 

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

@@ -21,8 +21,7 @@ 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",
@@ -42,7 +41,7 @@ export async function GET(request: NextRequest) {
         headers: {
           "Access-Control-Allow-Origin": "*",
         },
-      },
+      }
     );
   }
 }

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

@@ -31,34 +31,32 @@ type Props = {
  * @param fetchScores whether to fetch the scores
  * @returns the player data and scores
  */
-const getPlayerData = cache(
-  async ({ params }: Props, fetchScores: boolean = true) => {
-    const { slug } = await params;
-    const id = slug[0]; // The players id
-    const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
-    const page = parseInt(slug[2]) || 1; // The page number
-    const search = (slug[3] as string) || ""; // The search query
+const getPlayerData = cache(async ({ params }: Props, fetchScores: boolean = true) => {
+  const { slug } = await params;
+  const id = slug[0]; // The players id
+  const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
+  const page = parseInt(slug[2]) || 1; // The page number
+  const search = (slug[3] as string) || ""; // The search query
 
-    const player = (await scoresaberService.lookupPlayer(id, false))?.player;
-    let scores: ScoreSaberPlayerScoresPageToken | undefined;
-    if (fetchScores) {
-      scores = await scoresaberService.lookupPlayerScores({
-        playerId: id,
-        sort,
-        page,
-        search,
-      });
-    }
+  const player = (await scoresaberService.lookupPlayer(id, false))?.player;
+  let scores: ScoreSaberPlayerScoresPageToken | undefined;
+  if (fetchScores) {
+    scores = await scoresaberService.lookupPlayerScores({
+      playerId: id,
+      sort,
+      page,
+      search,
+    });
+  }
 
-    return {
-      sort: sort,
-      page: page,
-      search: search,
-      player: player,
-      scores: scores,
-    };
-  },
-);
+  return {
+    sort: sort,
+    page: page,
+    search: search,
+    player: player,
+    scores: scores,
+  };
+});
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
   const { player } = await getPlayerData(props, false);
@@ -123,13 +121,7 @@ export default async function Search(props: Props) {
 
   return (
     <div className="flex flex-col h-full w-full">
-      <PlayerData
-        initialPlayerData={player}
-        initialScoreData={scores}
-        initialSearch={search}
-        sort={sort}
-        page={page}
-      />
+      <PlayerData initialPlayerData={player} initialScoreData={scores} initialSearch={search} sort={sort} page={page} />
     </div>
   );
 }

src/app/global-error.tsx

@@ -4,11 +4,7 @@ import * as Sentry from "@sentry/nextjs";
 import NextError from "next/error";
 import { useEffect } from "react";
 
-export default function GlobalError({
-  error,
-}: {
-  error: Error & { digest?: string };
-}) {
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
   useEffect(() => {
     Sentry.captureException(error);
   }, [error]);

src/app/globals.css

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

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import "./globals.css";
 import Footer from "@/components/footer";
 import { PreloadResources } from "@/components/preload-resources";
 import { QueryProvider } from "@/components/providers/query-provider";
@@ -10,13 +11,12 @@ import localFont from "next/font/local";
 import BackgroundImage from "../components/background-image";
 import DatabaseLoader from "../components/loaders/database-loader";
 import NavBar from "../components/navbar/navbar";
-
-import "./globals.css";
 import { Colors } from "@/common/colors";
+import OfflineNetwork from "@/components/offline-network";
 
 const siteFont = localFont({
   src: "./fonts/JetBrainsMono.ttf",
-  weight: "100 400",
+  weight: "100 300",
 });
 
 export const metadata: Metadata = {
@@ -48,14 +48,12 @@ 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 const viewport: Viewport = {
@@ -75,24 +73,21 @@ export default function RootLayout({
           <BackgroundImage />
           <PreloadResources />
           <TooltipProvider delayDuration={100}>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="dark"
-              enableSystem
-              disableTransitionOnChange
-            >
-              <QueryProvider>
-                <AnimatePresence>
-                  <main className="flex flex-col min-h-screen gap-2 text-white">
-                    <NavBar />
-                    <div className="z-[1] m-auto flex flex-col flex-grow items-center md:max-w-[1600px]">
-                      {children}
-                    </div>
-                    <Footer />
-                  </main>
-                </AnimatePresence>
-              </QueryProvider>
-            </ThemeProvider>
+            <OfflineNetwork>
+              <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+                <QueryProvider>
+                  <AnimatePresence>
+                    <main className="flex flex-col min-h-screen gap-2 text-white">
+                      <NavBar />
+                      <div className="z-[1] m-auto flex flex-col flex-grow items-center md:max-w-[1600px]">
+                        {children}
+                      </div>
+                      <Footer />
+                    </main>
+                  </AnimatePresence>
+                </QueryProvider>
+              </ThemeProvider>
+            </OfflineNetwork>
           </TooltipProvider>
         </DatabaseLoader>
       </body>

src/common/database/types/beatsaver-map.ts

@@ -1,5 +1,5 @@
-import {BeatSaverMapToken as BSMap} from "@/common/model/token/beatsaver/beat-saver-map-token";
-import {Entity} from "dexie";
+import { BeatSaverMapToken as BSMap } from "@/common/model/token/beatsaver/beat-saver-map-token";
+import { Entity } from "dexie";
 import Database from "../database";
 
 /**

src/common/database/types/settings.ts

@@ -1,4 +1,4 @@
-import {Entity} from "dexie";
+import { Entity } from "dexie";
 import Database from "../database";
 
 /**

src/common/image-utils.ts

@@ -1,8 +1,8 @@
-import {createCanvas, loadImage} from "canvas";
-import {config} from "../../config";
+import { createCanvas, loadImage } from "canvas";
+import { config } from "../../config";
 import ky from "ky";
-import {extractColors} from "extract-colors";
-import {cache} from "react";
+import { extractColors } from "extract-colors";
+import { cache } from "react";
 
 /**
  * Proxies all non-localhost images to make them load faster.
@@ -46,9 +46,7 @@ export const getAverageColor = cache(async (src: string) => {
     // Use your extractColors function to calculate the average color
     const color = await extractColors({ data, width, height });
 
-    console.log(
-      `Found average color of "${src}" in ${(performance.now() - before).toFixed(0)}ms`,
-    );
+    console.log(`Found average color of "${src}" in ${(performance.now() - before).toFixed(0)}ms`);
     return color[2];
   } catch (error) {
     console.error("Error while getting average color:", error);

src/common/model/player/impl/scoresaber-player.ts

@@ -3,11 +3,7 @@ import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-p
 import { PlayerHistory } from "@/common/player/player-history";
 import { config } from "../../../../../config";
 import ky from "ky";
-import {
-  formatDateMinimal,
-  getDaysAgoDate,
-  getMidnightAlignedDate,
-} from "@/common/time-utils";
+import { formatDateMinimal, getDaysAgoDate, getMidnightAlignedDate } from "@/common/time-utils";
 
 /**
  * A ScoreSaber player.
@@ -64,16 +60,14 @@ export default interface ScoreSaberPlayer extends Player {
   inactive: boolean;
 }
 
-export async function getScoreSaberPlayerFromToken(
-  token: ScoreSaberPlayerToken,
-): Promise<ScoreSaberPlayer> {
+export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken): Promise<ScoreSaberPlayer> {
   const bio: ScoreSaberBio = {
     lines: token.bio?.split("\n") || [],
     linesStripped: token.bio?.replace(/<[^>]+>/g, "")?.split("\n") || [],
   };
   const role = token.role == null ? undefined : (token.role as ScoreSaberRole);
   const badges: ScoreSaberBadge[] =
-    token.badges?.map((badge) => {
+    token.badges?.map(badge => {
       return {
         url: badge.image,
         description: badge.description,
@@ -103,7 +97,7 @@ export async function getScoreSaberPlayerFromToken(
     statisticHistory = history;
   } catch (error) {
     // Fallback to ScoreSaber History if the player has no history
-    const playerRankHistory = token.histories.split(",").map((value) => {
+    const playerRankHistory = token.histories.split(",").map(value => {
       return parseInt(value);
     });
     playerRankHistory.push(token.rank);
@@ -124,9 +118,7 @@ export async function getScoreSaberPlayerFromToken(
     .sort((a, b) => Date.parse(b[0]) - Date.parse(a[0]))
     .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
 
-  const yesterdayDate = formatDateMinimal(
-    getMidnightAlignedDate(getDaysAgoDate(1)),
-  );
+  const yesterdayDate = formatDateMinimal(getMidnightAlignedDate(getDaysAgoDate(1)));
   const todayStats = statisticHistory[todayDate];
   const yesterdayStats = statisticHistory[yesterdayDate];
   const hasChange = !!(todayStats && yesterdayStats);

src/common/model/player/player.ts

@@ -43,7 +43,7 @@ export default class Player {
     country: string,
     rank: number,
     countryRank: number,
-    joinedDate: Date,
+    joinedDate: Date
   ) {
     this.id = id;
     this.name = name;

src/common/model/score/impl/scoresaber-score.ts

@@ -12,19 +12,9 @@ export default class ScoreSaberScore extends Score {
     misses: number,
     badCuts: number,
     fullCombo: boolean,
-    timestamp: Date,
+    timestamp: Date
   ) {
-    super(
-      score,
-      weight,
-      rank,
-      worth,
-      modifiers,
-      misses,
-      badCuts,
-      fullCombo,
-      timestamp,
-    );
+    super(score, weight, rank, worth, modifiers, misses, badCuts, fullCombo, timestamp);
   }
 
   /**
@@ -33,7 +23,7 @@ export default class ScoreSaberScore extends Score {
    * @param token the token to convert
    */
   public static fromToken(token: ScoreSaberScoreToken): ScoreSaberScore {
-    const modifiers: Modifier[] = token.modifiers.split(",").map((mod) => {
+    const modifiers: Modifier[] = token.modifiers.split(",").map(mod => {
       mod = mod.toUpperCase();
       const modifier = Modifier[mod as keyof typeof Modifier];
       if (modifier === undefined) {
@@ -51,7 +41,7 @@ export default class ScoreSaberScore extends Score {
       token.missedNotes,
       token.badCuts,
       token.fullCombo,
-      new Date(token.timeSet),
+      new Date(token.timeSet)
     );
   }
 }

src/common/model/score/score.ts

@@ -65,7 +65,7 @@ export default class Score {
     misses: number,
     badCuts: number,
     fullCombo: boolean,
-    timestamp: Date,
+    timestamp: Date
   ) {
     this._score = score;
     this._weight = weight;

src/common/player-utils.ts

@@ -16,7 +16,7 @@ const INACTIVE_CHECK_AGAIN_TIME = 3 * 24 * 60 * 60 * 1000; // 3 days
  */
 export function sortPlayerHistory(history: Map<string, PlayerHistory>) {
   return Array.from(history.entries()).sort(
-    (a, b) => Date.parse(b[0]) - Date.parse(a[0]), // Sort in descending order
+    (a, b) => Date.parse(b[0]) - Date.parse(a[0]) // Sort in descending order
   );
 }
 
@@ -31,10 +31,10 @@ export function sortPlayerHistory(history: Map<string, PlayerHistory>) {
 export async function seedPlayerHistory(
   foundPlayer: IPlayer,
   player: ScoreSaberPlayer,
-  rawPlayer: ScoreSaberPlayerToken,
+  rawPlayer: ScoreSaberPlayerToken
 ): Promise<Map<string, PlayerHistory>> {
   // Loop through rankHistory in reverse, from current day backwards
-  const playerRankHistory = rawPlayer.histories.split(",").map((value) => {
+  const playerRankHistory = rawPlayer.histories.split(",").map(value => {
     return parseInt(value);
   });
   playerRankHistory.push(player.rank);
@@ -63,34 +63,23 @@ export async function seedPlayerHistory(
  * @param dateToday the date to use
  * @param foundPlayer the player to track
  */
-export async function trackScoreSaberPlayer(
-  dateToday: Date,
-  foundPlayer: IPlayer,
-  io?: IO,
-) {
+export async function trackScoreSaberPlayer(dateToday: Date, foundPlayer: IPlayer, io?: IO) {
   io && (await io.logger.info(`Updating statistics for ${foundPlayer.id}...`));
 
   // Check if the player is inactive and if we check their inactive status again
   if (
     foundPlayer.rawPlayer &&
     foundPlayer.rawPlayer.inactive &&
-    Date.now() - foundPlayer.getLastTracked().getTime() >
-      INACTIVE_CHECK_AGAIN_TIME
+    Date.now() - foundPlayer.getLastTracked().getTime() > INACTIVE_CHECK_AGAIN_TIME
   ) {
-    io &&
-      (await io.logger.warn(
-        `Player ${foundPlayer.id} is inactive, skipping...`,
-      ));
+    io && (await io.logger.warn(`Player ${foundPlayer.id} is inactive, skipping...`));
     return;
   }
 
   // Lookup player data from the ScoreSaber service
   const response = await scoresaberService.lookupPlayer(foundPlayer.id, true);
   if (response == undefined) {
-    io &&
-      (await io.logger.warn(
-        `Player ${foundPlayer.id} not found on ScoreSaber`,
-      ));
+    io && (await io.logger.warn(`Player ${foundPlayer.id} not found on ScoreSaber`));
     return;
   }
   const { player, rawPlayer } = response;

src/common/schema/player-schema.ts

@@ -1,10 +1,6 @@
 import mongoose, { Document, Schema } from "mongoose";
 import { PlayerHistory } from "@/common/player/player-history";
-import {
-  formatDateMinimal,
-  getDaysAgo,
-  getMidnightAlignedDate,
-} from "@/common/time-utils";
+import { formatDateMinimal, getDaysAgo, getMidnightAlignedDate } from "@/common/time-utils";
 import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
 import { sortPlayerHistory } from "@/common/player-utils";
 
@@ -95,11 +91,7 @@ PlayerSchema.methods.getLastTracked = function (): Date {
 };
 
 PlayerSchema.methods.getHistoryByDate = function (date: Date): PlayerHistory {
-  return (
-    this.statisticHistory.get(
-      formatDateMinimal(getMidnightAlignedDate(date)),
-    ) || {}
-  );
+  return this.statisticHistory.get(formatDateMinimal(getMidnightAlignedDate(date))) || {};
 };
 
 PlayerSchema.methods.getHistoryPrevious = function (amount: number): {
@@ -118,33 +110,21 @@ PlayerSchema.methods.getHistoryPrevious = function (amount: number): {
   return toReturn;
 };
 
-PlayerSchema.methods.getStatisticHistory = function (): Map<
-  Date,
-  PlayerHistory
-> {
+PlayerSchema.methods.getStatisticHistory = function (): Map<Date, PlayerHistory> {
   if (!this.statisticHistory) {
     this.statisticHistory = new Map();
   }
   return this.statisticHistory;
 };
 
-PlayerSchema.methods.setStatisticHistory = function (
-  date: Date,
-  data: PlayerHistory,
-): void {
+PlayerSchema.methods.setStatisticHistory = function (date: Date, data: PlayerHistory): void {
   if (!this.statisticHistory) {
     this.statisticHistory = new Map();
   }
-  return this.statisticHistory.set(
-    formatDateMinimal(getMidnightAlignedDate(date)),
-    data,
-  );
+  return this.statisticHistory.set(formatDateMinimal(getMidnightAlignedDate(date)), data);
 };
 
-PlayerSchema.methods.sortStatisticHistory = function (): Map<
-  Date,
-  PlayerHistory
-> {
+PlayerSchema.methods.sortStatisticHistory = function (): Map<Date, PlayerHistory> {
   if (!this.statisticHistory) {
     this.statisticHistory = new Map();
   }
@@ -152,18 +132,14 @@ PlayerSchema.methods.sortStatisticHistory = function (): Map<
   // Sort the player's history
   this.statisticHistory = new Map(
     Array.from(this.statisticHistory.entries() as [string, PlayerHistory][])
-      .sort(
-        (a: [string, PlayerHistory], b: [string, PlayerHistory]) =>
-          Date.parse(b[0]) - Date.parse(a[0]),
-      )
+      .sort((a: [string, PlayerHistory], b: [string, PlayerHistory]) => Date.parse(b[0]) - Date.parse(a[0]))
       // Convert the date strings back to Date objects for the resulting Map
-      .map(([date, history]) => [formatDateMinimal(new Date(date)), history]),
+      .map(([date, history]) => [formatDateMinimal(new Date(date)), history])
   );
   return this.statisticHistory;
 };
 
 // Mongoose Model for Player
-const PlayerModel =
-  mongoose.models.Player || mongoose.model<IPlayer>("Player", PlayerSchema);
+const PlayerModel = mongoose.models.Player || mongoose.model<IPlayer>("Player", PlayerSchema);
 
 export { PlayerModel };

src/common/service/impl/beatsaver.ts

@@ -18,26 +18,18 @@ class BeatSaverService extends Service {
    * @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;
@@ -55,9 +47,7 @@ class BeatSaverService extends Service {
       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/service/impl/scoresaber.ts

@@ -5,9 +5,7 @@ import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-p
 import { ScoreSaberPlayersPageToken } from "@/common/model/token/scoresaber/score-saber-players-page-token";
 import { ScoreSort } from "../../model/score/score-sort";
 import Service from "../service";
-import ScoreSaberPlayer, {
-  getScoreSaberPlayerFromToken,
-} from "@/common/model/player/impl/scoresaber-player";
+import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@/common/model/player/impl/scoresaber-player";
 
 const API_BASE = "https://scoresaber.com/api";
 const SEARCH_PLAYERS_ENDPOINT = `${API_BASE}/players?search=:query`;
@@ -29,15 +27,12 @@ class ScoreSaberService extends Service {
    * @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<ScoreSaberPlayerSearchToken | undefined> {
+  async searchPlayers(query: string, useProxy = true): Promise<ScoreSaberPlayerSearchToken | undefined> {
     const before = performance.now();
     this.log(`Searching for players matching "${query}"...`);
     const results = await this.fetch<ScoreSaberPlayerSearchToken>(
       useProxy,
-      SEARCH_PLAYERS_ENDPOINT.replace(":query", query),
+      SEARCH_PLAYERS_ENDPOINT.replace(":query", query)
     );
     if (results === undefined) {
       return undefined;
@@ -46,9 +41,7 @@ class ScoreSaberService extends Service {
       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;
   }
 
@@ -61,7 +54,7 @@ class ScoreSaberService extends Service {
    */
   async lookupPlayer(
     playerId: string,
-    useProxy = true,
+    useProxy = true
   ): Promise<
     | {
         player: ScoreSaberPlayer;
@@ -71,16 +64,11 @@ class ScoreSaberService extends Service {
   > {
     const before = performance.now();
     this.log(`Looking up player "${playerId}"...`);
-    const token = await this.fetch<ScoreSaberPlayerToken>(
-      useProxy,
-      LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId),
-    );
+    const token = await this.fetch<ScoreSaberPlayerToken>(useProxy, LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId));
     if (token === 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 {
       player: await getScoreSaberPlayerFromToken(token),
       rawPlayer: token,
@@ -94,22 +82,17 @@ class ScoreSaberService extends Service {
    * @param useProxy whether to use the proxy or not
    * @returns the players on the page, or undefined
    */
-  async lookupPlayers(
-    page: number,
-    useProxy = true,
-  ): Promise<ScoreSaberPlayersPageToken | undefined> {
+  async lookupPlayers(page: number, useProxy = true): Promise<ScoreSaberPlayersPageToken | undefined> {
     const before = performance.now();
     this.log(`Looking up players on page "${page}"...`);
     const response = await this.fetch<ScoreSaberPlayersPageToken>(
       useProxy,
-      LOOKUP_PLAYERS_ENDPOINT.replace(":page", page.toString()),
+      LOOKUP_PLAYERS_ENDPOINT.replace(":page", page.toString())
     );
     if (response === undefined) {
       return undefined;
     }
-    this.log(
-      `Found ${response.players.length} players in ${(performance.now() - before).toFixed(0)}ms`,
-    );
+    this.log(`Found ${response.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
     return response;
   }
 
@@ -124,25 +107,18 @@ class ScoreSaberService extends Service {
   async lookupPlayersByCountry(
     page: number,
     country: string,
-    useProxy = true,
+    useProxy = true
   ): Promise<ScoreSaberPlayersPageToken | undefined> {
     const before = performance.now();
-    this.log(
-      `Looking up players on page "${page}" for country "${country}"...`,
-    );
+    this.log(`Looking up players on page "${page}" for country "${country}"...`);
     const response = await this.fetch<ScoreSaberPlayersPageToken>(
       useProxy,
-      LOOKUP_PLAYERS_BY_COUNTRY_ENDPOINT.replace(
-        ":page",
-        page.toString(),
-      ).replace(":country", country),
+      LOOKUP_PLAYERS_BY_COUNTRY_ENDPOINT.replace(":page", page.toString()).replace(":country", country)
     );
     if (response === undefined) {
       return undefined;
     }
-    this.log(
-      `Found ${response.players.length} players in ${(performance.now() - before).toFixed(0)}ms`,
-    );
+    this.log(`Found ${response.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
     return response;
   }
 
@@ -171,24 +147,20 @@ class ScoreSaberService extends Service {
   }): Promise<ScoreSaberPlayerScoresPageToken | undefined> {
     const before = performance.now();
     this.log(
-      `Looking up scores for player "${playerId}", sort "${sort}", page "${page}"${
-        search ? `, search "${search}"` : ""
-      }...`,
+      `Looking up scores for player "${playerId}", sort "${sort}", page "${page}"${search ? `, search "${search}"` : ""}...`
     );
     const response = await this.fetch<ScoreSaberPlayerScoresPageToken>(
       useProxy,
       LOOKUP_PLAYER_SCORES_ENDPOINT.replace(":id", playerId)
         .replace(":limit", 8 + "")
         .replace(":sort", sort)
-        .replace(":page", page + "") + (search ? `&search=${search}` : ""),
+        .replace(":page", page + "") + (search ? `&search=${search}` : "")
     );
     if (response === undefined) {
       return undefined;
     }
     this.log(
-      `Found ${response.playerScores.length} scores for player "${playerId}" in ${(
-        performance.now() - before
-      ).toFixed(0)}ms`,
+      `Found ${response.playerScores.length} scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`
     );
     return response;
   }
@@ -205,26 +177,19 @@ class ScoreSaberService extends Service {
   async lookupLeaderboardScores(
     leaderboardId: string,
     page: number,
-    useProxy = true,
+    useProxy = true
   ): Promise<ScoreSaberLeaderboardScoresPageToken | 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<ScoreSaberLeaderboardScoresPageToken>(
       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 ${response.scores.length} scores for leaderboard "${leaderboardId}" in ${(
-        performance.now() - before
-      ).toFixed(0)}ms`,
+      `Found ${response.scores.length} scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`
     );
     return response;
   }

src/common/service/service.ts

@@ -17,9 +17,7 @@ export default class Service {
    * @param data the data to log
    */
   public log(data: unknown) {
-    console.log(
-      `[${isRunningAsWorker() ? "Worker - " : ""}${this.name}]: ${data}`,
-    );
+    console.log(`[${isRunningAsWorker() ? "Worker - " : ""}${this.name}]: ${data}`);
   }
 
   /**
@@ -41,10 +39,7 @@ export default class Service {
    * @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/time-utils.ts

@@ -20,10 +20,7 @@ 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);
     }
   }
 }
@@ -48,9 +45,7 @@ export function formatDateMinimal(date: Date) {
  * @param date the date
  */
 export function getMidnightAlignedDate(date: Date) {
-  return new Date(
-    Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()),
-  );
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
 }
 
 /**

src/common/youtube-utils.ts

@@ -6,11 +6,7 @@
  * @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

@@ -2,17 +2,14 @@
 
 import { useLiveQuery } from "dexie-react-hooks";
 import { config } from "../../config";
-import { getImageUrl } from "../common/image-utils";
+import { getImageUrl } from "@/common/image-utils";
 import useDatabase from "../hooks/use-database";
 
 export default function BackgroundImage() {
   const database = useDatabase();
   const settings = useLiveQuery(() => database.getSettings());
 
-  if (
-    settings?.backgroundImage == undefined ||
-    settings?.backgroundImage == ""
-  ) {
+  if (settings == undefined || settings?.backgroundImage == undefined || settings?.backgroundImage == "") {
     return null; // Don't render anything if the background image is not set
   }
 

src/components/card.tsx

@@ -6,14 +6,5 @@ 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,14 +12,7 @@ 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/input/pagination.tsx

@@ -23,10 +23,7 @@ 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")}
@@ -65,13 +62,7 @@ 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);
@@ -81,12 +72,7 @@ export default function Pagination({
   }, [page]);
 
   const handlePageChange = (newPage: number) => {
-    if (
-      newPage < 1 ||
-      newPage > totalPages ||
-      newPage == currentPage ||
-      isLoading
-    ) {
+    if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
       return;
     }
 
@@ -109,20 +95,15 @@ export default function Pagination({
       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>
           )}
-        </>,
+        </>
       );
     }
 
@@ -130,17 +111,10 @@ export default function Pagination({
     for (let i = startPage; i <= endPage; i++) {
       pageNumbers.push(
         <PaginationItemWrapper key={i} isLoadingPage={isLoading}>
-          <PaginationLink
-            isActive={i === currentPage}
-            onClick={() => handlePageChange(i)}
-          >
-            {loadingPage === i ? (
-              <ArrowPathIcon className="w-4 h-4 animate-spin" />
-            ) : (
-              i
-            )}
+          <PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
+            {loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
           </PaginationLink>
-        </PaginationItemWrapper>,
+        </PaginationItemWrapper>
       );
     }
 
@@ -152,31 +126,22 @@ export default function Pagination({
       <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 && (
-            <>
-              <PaginationItemWrapper
-                key="ellipsis-end"
-                isLoadingPage={isLoading}
-              >
-                <PaginationEllipsis className="cursor-default" />
-              </PaginationItemWrapper>
-              <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
-                <PaginationLink onClick={() => handlePageChange(totalPages)}>
-                  {totalPages}
-                </PaginationLink>
-              </PaginationItemWrapper>
-            </>
-          )}
+        {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
+          <>
+            <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
+              <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,10 +40,7 @@ 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"
@@ -51,11 +48,7 @@ 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>
             )}
@@ -73,7 +66,7 @@ export default function SearchPlayer() {
       {results !== undefined && (
         <ScrollArea>
           <div className="flex flex-col gap-1 max-h-60">
-            {results?.map((player) => {
+            {results?.map(player => {
               return (
                 <Link
                   href={`/player/${player.id}`}
@@ -86,9 +79,7 @@ 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

@@ -9,7 +9,7 @@ type Badge = {
   name: string;
   create: (
     score: ScoreSaberScoreToken,
-    leaderboard: ScoreSaberLeaderboardToken,
+    leaderboard: ScoreSaberLeaderboardToken
   ) => string | React.ReactNode | undefined;
 };
 
@@ -26,10 +26,7 @@ const badges: Badge[] = [
   },
   {
     name: "Accuracy",
-    create: (
-      score: ScoreSaberScoreToken,
-      leaderboard: ScoreSaberLeaderboardToken,
-    ) => {
+    create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
       return `${acc.toFixed(2)}%`;
     },
@@ -41,16 +38,8 @@ const badges: Badge[] = [
 
       return (
         <>
-          <p>
-            {fullCombo ? (
-              <span className="text-green-400">FC</span>
-            ) : (
-              formatNumberWithCommas(score.missedNotes)
-            )}
-          </p>
-          <XMarkIcon
-            className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")}
-          />
+          <p>{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,9 +19,7 @@ export default function LeaderboardScores({ leaderboard }: Props) {
   const { width } = useWindowDimensions();
 
   const [currentPage, setCurrentPage] = useState(1);
-  const [currentScores, setCurrentScores] = useState<
-    ScoreSaberLeaderboardScoresPageToken | undefined
-  >();
+  const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>();
 
   const {
     data: scores,
@@ -30,11 +28,7 @@ export default function LeaderboardScores({ leaderboard }: Props) {
     refetch,
   } = useQuery({
     queryKey: ["playerScores", leaderboard.id, currentPage],
-    queryFn: () =>
-      scoresaberService.lookupLeaderboardScores(
-        leaderboard.id + "",
-        currentPage,
-      ),
+    queryFn: () => scoresaberService.lookupLeaderboardScores(leaderboard.id + "", currentPage),
     staleTime: 30 * 1000, // Cache data for 30 seconds
   });
 
@@ -53,35 +47,23 @@ 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

@@ -3,6 +3,7 @@
 import { createContext, useEffect, useState } from "react";
 import Database, { db } from "../../common/database/database";
 import FullscreenLoader from "./fullscreen-loader";
+import { useToast } from "@/hooks/use-toast";
 
 /**
  * The context for the database. This is used to access the database from within the app.
@@ -14,21 +15,25 @@ type Props = {
 };
 
 export default function DatabaseLoader({ children }: Props) {
+  const { toast } = useToast();
   const [database, setDatabase] = useState<Database | undefined>(undefined);
 
   useEffect(() => {
     const before = performance.now();
     setDatabase(db);
     console.log(`Loaded database in ${performance.now() - before}ms`);
+
+    db.on("ready", err => {
+      toast({
+        title: "Database loaded",
+        description: "The database was loaded successfully.",
+      });
+    });
   }, []);
 
   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,10 +3,7 @@ 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"
@@ -18,10 +15,7 @@ export default function BeatSaverLogo({
     >
       <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,12 +2,6 @@ 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,10 +3,7 @@ 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/profile-button.tsx

@@ -19,10 +19,7 @@ export default function ProfileButton() {
   }
 
   return (
-    <Link
-      href={`/player/${settings.playerId}`}
-      className="flex items-center gap-2 h-full"
-    >
+    <Link href={`/player/${settings.playerId}`} className="flex items-center gap-2 h-full">
       <NavbarButton>
         <Avatar className="w-6 h-6">
           <AvatarImage

src/components/offline-network.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import FullscreenLoader from "@/components/loaders/fullscreen-loader";
+import { useNetworkState } from "@uidotdev/usehooks";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function OfflineNetwork({ children }: Props) {
+  const network = useNetworkState();
+
+  return !network.online ? (
+    <FullscreenLoader reason="Your device is offline. Check your internet connection." />
+  ) : (
+    children
+  );
+}

src/components/player/player-badges.tsx

@@ -11,22 +11,9 @@ export default function PlayerBadges({ player }: Props) {
     <div className="flex flex-wrap gap-2 w-full items-center justify-center">
       {player.badges?.map((badge, index) => {
         return (
-          <Tooltip
-            key={index}
-            display={
-              <p className="cursor-default pointer-events-none">
-                {badge.description}
-              </p>
-            }
-          >
+          <Tooltip key={index} display={<p className="cursor-default pointer-events-none">{badge.description}</p>}>
             <div>
-              <Image
-                src={badge.url}
-                alt={badge.description}
-                width={80}
-                height={30}
-                unoptimized
-              />
+              <Image src={badge.url} alt={badge.description} width={80} height={30} unoptimized />
             </div>
           </Tooltip>
         );

src/components/player/player-header.tsx

@@ -1,13 +1,13 @@
-import {formatNumberWithCommas, formatPp} from "@/common/number-utils";
-import {GlobeAmericasIcon} from "@heroicons/react/24/solid";
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
 import Card from "../card";
 import CountryFlag from "../country-flag";
-import {Avatar, AvatarImage} from "../ui/avatar";
+import { Avatar, AvatarImage } from "../ui/avatar";
 import ClaimProfile from "./claim-profile";
 import PlayerStats from "./player-stats";
 import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
 import Tooltip from "@/components/tooltip";
-import {ReactElement} from "react";
+import { ReactElement } from "react";
 import PlayerTrackedStatus from "@/components/player/player-tracked-status";
 
 /**
@@ -17,18 +17,12 @@ import PlayerTrackedStatus from "@/components/player/player-tracked-status";
  * @param tooltip the tooltip to display
  * @param format the function to format the value
  */
-const renderChange = (
-  change: number,
-  tooltip: ReactElement,
-  format?: (value: number) => string,
-) => {
+const renderChange = (change: number, tooltip: ReactElement, format?: (value: number) => string) => {
   format = format ?? formatNumberWithCommas;
 
   return (
     <Tooltip display={tooltip}>
-      <p
-        className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}
-      >
+      <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
         {change > 0 ? "+" : ""}
         {format(change)}
       </p>
@@ -49,11 +43,7 @@ const playerData = [
       return (
         <div className="text-gray-300 flex gap-1 items-center">
           <p>#{formatNumberWithCommas(player.rank)}</p>
-          {rankChange != 0 &&
-            renderChange(
-              rankChange,
-              <p>The change in your rank compared to yesterday</p>,
-            )}
+          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
         </div>
       );
     },
@@ -70,11 +60,7 @@ const playerData = [
       return (
         <div className="text-gray-300 flex gap-1 items-center">
           <p>#{formatNumberWithCommas(player.countryRank)}</p>
-          {rankChange != 0 &&
-            renderChange(
-              rankChange,
-              <p>The change in your rank compared to yesterday</p>,
-            )}
+          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
         </div>
       );
     },
@@ -89,13 +75,9 @@ const playerData = [
         <div className="text-pp flex gap-1 items-center">
           <p>{formatPp(player.pp)}pp</p>
           {ppChange != 0 &&
-            renderChange(
-              ppChange,
-              <p>The change in your pp compared to yesterday</p>,
-              (number) => {
-                return `${formatPp(number)}pp`;
-              },
-            )}
+            renderChange(ppChange, <p>The change in your pp compared to yesterday</p>, number => {
+              return `${formatPp(number)}pp`;
+            })}
         </div>
       );
     },
@@ -111,10 +93,7 @@ export default function PlayerHeader({ player }: Props) {
     <Card>
       <div className="flex gap-3 flex-col items-center text-center lg:flex-row lg:items-start lg:text-start relative select-none">
         <Avatar className="w-32 h-32 pointer-events-none">
-          <AvatarImage
-            alt="Profile Picture"
-            src={`https://img.fascinated.cc/upload/w_128,h_128/${player.avatar}`}
-          />
+          <AvatarImage alt="Profile Picture" src={`https://img.fascinated.cc/upload/w_128,h_128/${player.avatar}`} />
         </Avatar>
         <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
           <div>
@@ -124,20 +103,13 @@ export default function PlayerHeader({ player }: Props) {
             </div>
             <div className="flex flex-col">
               <div>
-                {player.inactive && (
-                  <p className="text-gray-400">Inactive Account</p>
-                )}
-                {player.banned && (
-                  <p className="text-red-500">Banned Account</p>
-                )}
+                {player.inactive && <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

@@ -2,30 +2,13 @@
 "use client";
 
 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 ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
 import { getDaysAgo, parseDate } from "@/common/time-utils";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 
-Chart.register(
-  LinearScale,
-  CategoryScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-);
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
 
 type AxisPosition = "left" | "right";
 
@@ -71,7 +54,7 @@ const generateAxis = (
   reverse: boolean,
   display: boolean,
   position: AxisPosition,
-  displayName: string,
+  displayName: string
 ): Axis => ({
   id,
   position,
@@ -99,12 +82,7 @@ const generateAxis = (
  * @param borderColor the border color of the dataset
  * @param yAxisID the ID of the y-axis
  */
-const generateDataset = (
-  label: string,
-  data: (number | null)[],
-  borderColor: string,
-  yAxisID: string,
-): Dataset => ({
+const generateDataset = (label: string, data: (number | null)[], borderColor: string, yAxisID: string): Dataset => ({
   label,
   data,
   borderColor,
@@ -155,8 +133,7 @@ const datasetConfig: DatasetConfig[] = [
       displayName: "Country Rank",
       position: "left",
     },
-    labelFormatter: (value: number) =>
-      `Country Rank #${formatNumberWithCommas(value)}`,
+    labelFormatter: (value: number) => `Country Rank #${formatNumberWithCommas(value)}`,
   },
   {
     title: "PP",
@@ -181,10 +158,7 @@ type Props = {
 export default function PlayerRankChart({ player }: Props) {
   const isMobile = useIsMobile();
 
-  if (
-    !player.statisticHistory ||
-    Object.keys(player.statisticHistory).length === 0
-  ) {
+  if (!player.statisticHistory || Object.keys(player.statisticHistory).length === 0) {
     return (
       <div className="flex justify-center">
         <p>Unable to load player rank chart, missing data...</p>
@@ -200,7 +174,7 @@ export default function PlayerRankChart({ player }: Props) {
   };
 
   const statisticEntries = Object.entries(player.statisticHistory).sort(
-    ([a], [b]) => parseDate(a).getTime() - parseDate(b).getTime(),
+    ([a], [b]) => parseDate(a).getTime() - parseDate(b).getTime()
   );
 
   let previousDate: Date | null = null;
@@ -211,18 +185,11 @@ export default function PlayerRankChart({ player }: Props) {
 
     // Insert nulls for missing days
     if (previousDate) {
-      const diffDays = Math.floor(
-        (currentDate.getTime() - previousDate.getTime()) /
-          (1000 * 60 * 60 * 24),
-      );
+      const diffDays = Math.floor((currentDate.getTime() - previousDate.getTime()) / (1000 * 60 * 60 * 24));
 
       for (let i = 1; i < diffDays; i++) {
-        labels.push(
-          `${getDaysAgo(
-            new Date(currentDate.getTime() - i * 24 * 60 * 60 * 1000),
-          )} days ago`,
-        );
-        datasetConfig.forEach((config) => {
+        labels.push(`${getDaysAgo(new Date(currentDate.getTime() - i * 24 * 60 * 60 * 1000))} days ago`);
+        datasetConfig.forEach(config => {
           histories[config.field].push(null);
         });
       }
@@ -232,10 +199,8 @@ export default function PlayerRankChart({ player }: Props) {
     labels.push(daysAgo === 0 ? "Today" : `${daysAgo} days ago`);
 
     // stupid typescript crying wahh wahh wahh - https://youtu.be/hBEKgHDzm_s?si=ekOdMMdb-lFnA1Yz&t=11
-    datasetConfig.forEach((config) => {
-      (histories as any)[config.field].push(
-        (history as any)[config.field] ?? null,
-      );
+    datasetConfig.forEach(config => {
+      (histories as any)[config.field].push((history as any)[config.field] ?? null);
     });
 
     previousDate = currentDate;
@@ -252,23 +217,16 @@ export default function PlayerRankChart({ player }: Props) {
   };
 
   const datasets: Dataset[] = datasetConfig
-    .map((config) => {
-      if (histories[config.field].some((value) => value !== null)) {
+    .map(config => {
+      if (histories[config.field].some(value => value !== null)) {
         axes[config.axisId] = generateAxis(
           config.axisId,
           config.axisConfig.reverse,
-          isMobile && config.axisConfig.hideOnMobile
-            ? false
-            : config.axisConfig.display,
+          isMobile && config.axisConfig.hideOnMobile ? false : config.axisConfig.display,
           config.axisConfig.position,
-          config.axisConfig.displayName,
-        );
-        return generateDataset(
-          config.title,
-          histories[config.field],
-          config.color,
-          config.axisId,
+          config.axisConfig.displayName
         );
+        return generateDataset(config.title, histories[config.field], config.color, config.axisId);
       }
       return null;
     })
@@ -298,9 +256,7 @@ export default function PlayerRankChart({ player }: Props) {
         callbacks: {
           label(context: any) {
             const value = Number(context.parsed.y);
-            const config = datasetConfig.find(
-              (cfg) => cfg.title === context.dataset.label,
-            );
+            const config = datasetConfig.find(cfg => cfg.title === context.dataset.label);
             return config?.labelFormatter(value) ?? "";
           },
         },

src/components/player/player-scores.tsx

@@ -14,8 +14,7 @@ import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
 import { scoresaberService } from "@/common/service/impl/scoresaber";
 import { Input } from "@/components/ui/input";
 import { clsx } from "clsx";
-
-const INPUT_DEBOUNCE_DELAY = 250; // milliseconds
+import { useDebounce } from "@uidotdev/usehooks";
 
 type Props = {
   initialScoreData?: ScoreSaberPlayerScoresPageToken;
@@ -49,40 +48,19 @@ const scoreAnimation: Variants = {
   visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
 };
 
-export default function PlayerScores({
-  initialScoreData,
-  initialSearch,
-  player,
-  sort,
-  page,
-}: Props) {
+export default function PlayerScores({ initialScoreData, initialSearch, player, sort, page }: Props) {
   const { width } = useWindowDimensions();
   const controls = useAnimation();
 
   const [pageState, setPageState] = useState<PageState>({ page, sort });
   const [previousPage, setPreviousPage] = useState(page);
-  const [currentScores, setCurrentScores] = useState<
-    ScoreSaberPlayerScoresPageToken | undefined
-  >(initialScoreData);
-  const [searchState, setSearchState] = useState({
-    query: initialSearch || "",
-  });
-  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(
-    initialSearch || "",
-  );
+  const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData);
+  const [searchTerm, setSearchTerm] = useState(initialSearch || "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 250);
 
   const isSearchActive = debouncedSearchTerm.length >= 3;
   const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
 
-  // Debounce the search query
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedSearchTerm(searchState.query);
-    }, INPUT_DEBOUNCE_DELAY);
-
-    return () => clearTimeout(handler);
-  }, [searchState.query]);
-
   const {
     data: scores,
     isError,
@@ -98,15 +76,11 @@ export default function PlayerScores({
       });
     },
     staleTime: 30 * 1000, // 30 seconds
-    enabled:
-      shouldFetch &&
-      (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true
+    enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true
   });
 
   const handleScoreLoad = useCallback(async () => {
-    await controls.start(
-      previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft",
-    );
+    await controls.start(previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft");
     setCurrentScores(scores);
     await controls.start("visible");
   }, [scores, controls, previousPage, pageState.page]);
@@ -124,15 +98,11 @@ export default function PlayerScores({
 
   useEffect(() => {
     const newUrl = `/player/${player.id}/${pageState.sort}/${pageState.page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
-    window.history.replaceState(
-      { ...window.history.state, as: newUrl, url: newUrl },
-      "",
-      newUrl,
-    );
+    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
   }, [pageState, debouncedSearchTerm, player.id, isSearchActive]);
 
   const handleSearchChange = (query: string) => {
-    setSearchState({ query });
+    setSearchTerm(query);
     if (query.length >= 3) {
       setShouldFetch(true); // Set to true to trigger fetch
     } else {
@@ -141,23 +111,18 @@ export default function PlayerScores({
   };
 
   const clearSearch = () => {
-    setSearchState({ query: "" });
-    setDebouncedSearchTerm(""); // Clear the debounced term
+    setSearchTerm("");
   };
 
-  const invalidSearch =
-    searchState.query.length >= 1 && searchState.query.length < 3;
-
+  const invalidSearch = searchTerm.length >= 1 && searchTerm.length < 3;
   return (
     <Card className="flex gap-1">
       <div className="flex flex-col items-center w-full gap-2 relative">
         <div className="flex gap-2">
-          {scoreSort.map((sortOption) => (
+          {scoreSort.map(sortOption => (
             <Button
               key={sortOption.value}
-              variant={
-                sortOption.value === pageState.sort ? "default" : "outline"
-              }
+              variant={sortOption.value === pageState.sort ? "default" : "outline"}
               onClick={() => handleSortChange(sortOption.value)}
               size="sm"
               className="flex items-center gap-1"
@@ -174,12 +139,12 @@ export default function PlayerScores({
             placeholder="Search..."
             className={clsx(
               "pr-10", // Add padding right for the clear button
-              invalidSearch && "border-red-500",
+              invalidSearch && "border-red-500"
             )}
-            value={searchState.query}
-            onChange={(e) => handleSearchChange(e.target.value)}
+            value={searchTerm}
+            onChange={e => handleSearchChange(e.target.value)}
           />
-          {searchState.query && ( // Show clear button only if there's a query
+          {searchTerm && ( // Show clear button only if there's a query
             <button
               onClick={clearSearch}
               className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-75 transform-gpu transition-all cursor-default"
@@ -194,10 +159,7 @@ export default function PlayerScores({
       {currentScores && (
         <>
           <div className="text-center">
-            {isError ||
-              (currentScores.playerScores.length === 0 && (
-                <p>No scores found. Invalid Page or Search?</p>
-              ))}
+            {isError || (currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page or Search?</p>)}
           </div>
 
           <motion.div
@@ -216,12 +178,9 @@ export default function PlayerScores({
           <Pagination
             mobilePagination={width < 768}
             page={pageState.page}
-            totalPages={Math.ceil(
-              currentScores.metadata.total /
-                currentScores.metadata.itemsPerPage,
-            )}
+            totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
             loadingPage={isLoading ? pageState.page : undefined}
-            onPageChange={(newPage) => {
+            onPageChange={newPage => {
               setPreviousPage(pageState.page);
               setPageState({ ...pageState, page: newPage });
               setShouldFetch(true); // Set to true to trigger fetch on page change

src/components/player/player-stats.tsx

@@ -56,23 +56,14 @@ 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/player-tracked-status.tsx

@@ -18,12 +18,7 @@ type Props = {
 export default function PlayerTrackedStatus({ player }: Props) {
   const { data, isLoading, isError } = useQuery({
     queryKey: ["playerIsBeingTracked", player.id],
-    queryFn: () =>
-      ky
-        .get<PlayerTrackedSince>(
-          `${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`,
-        )
-        .json(),
+    queryFn: () => ky.get<PlayerTrackedSince>(`${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`).json(),
   });
 
   if (isLoading || isError || !data?.tracked) {

src/components/providers/query-provider.tsx

@@ -9,7 +9,5 @@ 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/ranking/mini.tsx

@@ -23,10 +23,7 @@ type Variants = {
     itemsPerPage: number;
     icon: (player: ScoreSaberPlayer) => ReactElement;
     getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => number;
-    query: (
-      page: number,
-      country: string,
-    ) => Promise<ScoreSaberPlayersPageToken | undefined>;
+    query: (page: number, country: string) => Promise<ScoreSaberPlayersPageToken | undefined>;
   };
 };
 
@@ -95,7 +92,7 @@ export default function Mini({ type, player }: MiniProps) {
   let players = data; // So we can update it later
   if (players && (!isLoading || !isError)) {
     // Find the player's position and show 3 players above and 1 below
-    const playerPosition = players.findIndex((p) => p.id === player.id);
+    const playerPosition = players.findIndex(p => p.id === player.id);
     players = players.slice(playerPosition - 3, playerPosition + 2);
   }
 
@@ -109,8 +106,7 @@ export default function Mini({ type, player }: MiniProps) {
         {isLoading && <p className="text-gray-400">Loading...</p>}
         {isError && <p className="text-red-500">Error</p>}
         {players?.map((playerRanking, index) => {
-          const rank =
-            type == "Global" ? playerRanking.rank : playerRanking.countryRank;
+          const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
           const playerName =
             playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
               ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
@@ -126,29 +122,14 @@ export default function Mini({ type, player }: MiniProps) {
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-1 items-center">
                 <Avatar className="w-6 h-6 pointer-events-none">
-                  <AvatarImage
-                    alt="Profile Picture"
-                    src={playerRanking.profilePicture}
-                  />
+                  <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
                 </Avatar>
-                <p
-                  className={
-                    playerRanking.id === player.id
-                      ? "text-pp font-semibold"
-                      : ""
-                  }
-                >
-                  {playerName}
-                </p>
+                <p className={playerRanking.id === player.id ? "text-pp font-semibold" : ""}>{playerName}</p>
               </div>
               <div className="inline-flex min-w-[10.75em] gap-1 items-center">
-                <p className="text-pp text-right">
-                  {formatPp(playerRanking.pp)}pp
-                </p>
+                <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>
                 {playerRanking.id !== player.id && (
-                  <p
-                    className={`text-xs text-right ${ppDifference > 0 ? "text-green-400" : "text-red-400"}`}
-                  >
+                  <p className={`text-xs text-right ${ppDifference > 0 ? "text-green-400" : "text-red-400"}`}>
                     {ppDifference > 0 ? "+" : ""}
                     {formatPp(ppDifference)}
                   </p>

src/components/score/leaderboard-button.tsx

@@ -8,10 +8,7 @@ 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 cursor-default">
       <Button
@@ -20,10 +17,7 @@ export default function LeaderboardButton({
         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/score/score-button.tsx

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

src/components/score/score-buttons.tsx

@@ -53,10 +53,7 @@ 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>}
             >
@@ -69,12 +66,8 @@ export default function ScoreButtons({
         <ScoreButton
           onClick={() => {
             window.open(
-              songNameToYouTubeLink(
-                leaderboard.songName,
-                leaderboard.songSubName,
-                leaderboard.songAuthorName,
-              ),
-              "_blank",
+              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+              "_blank"
             );
           }}
           tooltip={<p>Click to open the song in YouTube</p>}

src/components/score/score-info.tsx

@@ -14,13 +14,9 @@ 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">
@@ -72,13 +68,7 @@ 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/score/score-rank-info.tsx

@@ -26,9 +26,7 @@ export default function ScoreRankInfo({ score }: Props) {
           </p>
         }
       >
-        <p className="text-sm cursor-default">
-          {timeAgo(new Date(score.timeSet))}
-        </p>
+        <p className="text-sm cursor-default">{timeAgo(new Date(score.timeSet))}</p>
       </Tooltip>
     </div>
   );

src/components/score/score-stats.tsx

@@ -9,13 +9,10 @@ import Tooltip from "@/components/tooltip";
 
 type Badge = {
   name: string;
-  color?: (
-    score: ScoreSaberScoreToken,
-    leaderboard: ScoreSaberLeaderboardToken,
-  ) => string | undefined;
+  color?: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => string | undefined;
   create: (
     score: ScoreSaberScoreToken,
-    leaderboard: ScoreSaberLeaderboardToken,
+    leaderboard: ScoreSaberLeaderboardToken
   ) => string | React.ReactNode | undefined;
 };
 
@@ -35,17 +32,11 @@ const badges: Badge[] = [
   },
   {
     name: "Accuracy",
-    color: (
-      score: ScoreSaberScoreToken,
-      leaderboard: ScoreSaberLeaderboardToken,
-    ) => {
+    color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
       return getScoreBadgeFromAccuracy(acc).color;
     },
-    create: (
-      score: ScoreSaberScoreToken,
-      leaderboard: ScoreSaberLeaderboardToken,
-    ) => {
+    create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
       const acc = (score.baseScore / leaderboard.maxScore) * 100;
       const scoreBadge = getScoreBadgeFromAccuracy(acc);
       let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
@@ -93,16 +84,8 @@ const badges: Badge[] = [
 
       return (
         <>
-          <p>
-            {fullCombo ? (
-              <span className="text-green-400">FC</span>
-            ) : (
-              formatNumberWithCommas(score.missedNotes)
-            )}
-          </p>
-          <XMarkIcon
-            className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")}
-          />
+          <p>{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/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"
       )}
       style={{
         backgroundColor: (!color?.includes("bg") && color) || undefined,
@@ -34,9 +34,7 @@ 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,8 +1,4 @@
-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,10 +11,7 @@ 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}
   />
 ));
@@ -24,11 +21,7 @@ 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;
 
@@ -38,10 +31,7 @@ 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,14 +9,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "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",
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "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",
       },
@@ -31,7 +27,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
+  }
 );
 
 export interface ButtonProps
@@ -43,14 +39,8 @@ 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,82 +2,40 @@ import * as React from "react";
 
 import { cn } from "@/common/utils";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className,
-    )}
-    {...props}
-  />
+const Card = React.forwardRef<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>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
+const CardHeader = React.forwardRef<HTMLDivElement, 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>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
+const CardTitle = React.forwardRef<HTMLParagraphElement, 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>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
+const CardDescription = React.forwardRef<HTMLParagraphElement, 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>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
+const CardContent = React.forwardRef<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>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
+const CardFooter = React.forwardRef<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,14 +3,7 @@
 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";
@@ -24,9 +17,7 @@ type FormFieldContextValue<
   name: TName;
 };
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -68,22 +59,19 @@ 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<
@@ -92,88 +80,59 @@ 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>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
-});
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  }
+);
 FormControl.displayName = "FormControl";
 
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-[0.8rem] text-muted-foreground", className)}
-      {...props}
-    />
-  );
-});
+    return (
+      <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>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
+    if (!body) {
+      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,24 +2,21 @@ 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) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "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}
-      />
-    );
-  },
-);
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "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}
+    />
+  );
+});
 Input.displayName = "Input";
 
 export { Input };

src/components/ui/label.tsx

@@ -6,20 +6,13 @@ 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,8 +1,4 @@
-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";
@@ -18,22 +14,14 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
 );
 Pagination.displayName = "Pagination";
 
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-));
+const PaginationContent = React.forwardRef<HTMLUListElement, 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";
@@ -43,12 +31,7 @@ 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(
@@ -56,52 +39,29 @@ const PaginationLink = ({
         variant: isActive ? "outline" : "ghost",
         size,
       }),
-      className,
+      className
     )}
     {...props}
   />
 );
 PaginationLink.displayName = "PaginationLink";
 
-const PaginationPrevious = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1", className)}
-    {...props}
-  >
+const PaginationPrevious = ({ 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>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1", className)}
-    {...props}
-  >
+const PaginationNext = ({ 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">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
+const PaginationEllipsis = ({ 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,14 +9,8 @@ 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.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+  <ScrollAreaPrimitive.Root 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>
@@ -32,11 +26,9 @@ 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 === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className,
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      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,28 +30,20 @@ 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;
 
@@ -63,7 +55,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}
   />
@@ -78,7 +70,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}
@@ -92,11 +84,7 @@ 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;
 
@@ -104,11 +92,7 @@ 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,14 +1,7 @@
 "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();
@@ -20,9 +13,7 @@ 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-database.ts

@@ -1,5 +1,5 @@
-import {useContext} from "react";
-import {DatabaseContext} from "@/components/loaders/database-loader";
+import { useContext } from "react";
+import { DatabaseContext } from "@/components/loaders/database-loader";
 
 /**
  * Gets the database context.

src/hooks/use-toast.ts

@@ -82,9 +82,7 @@ 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": {
@@ -95,20 +93,20 @@ export const reducer = (state: State, action: Action): State => {
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {
-        state.toasts.forEach((toast) => {
+        state.toasts.forEach(toast => {
           addToRemoveQueue(toast.id);
         });
       }
 
       return {
         ...state,
-        toasts: state.toasts.map((t) =>
+        toasts: state.toasts.map(t =>
           t.id === toastId || toastId === undefined
             ? {
                 ...t,
                 open: false,
               }
-            : t,
+            : t
         ),
       };
     }
@@ -121,7 +119,7 @@ export const reducer = (state: State, action: Action): State => {
       }
       return {
         ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+        toasts: state.toasts.filter(t => t.id !== action.toastId),
       };
   }
 };
@@ -132,7 +130,7 @@ let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
   memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
+  listeners.forEach(listener => {
     listener(memoryState);
   });
 }
@@ -155,7 +153,7 @@ function toast({ ...props }: Toast) {
       ...props,
       id,
       open: true,
-      onOpenChange: (open) => {
+      onOpenChange: open => {
         if (!open) dismiss();
       },
     },

src/hooks/use-window-dimensions.ts

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

src/jobs/track-player-statistics.ts

@@ -19,9 +19,7 @@ client.defineJob({
 
     await io.logger.info("Finding players...");
     const players: IPlayer[] = await PlayerModel.find({});
-    await io.logger.info(
-      `Found ${players.length} player${players.length > 1 ? "s" : ""}.`,
-    );
+    await io.logger.info(`Found ${players.length} player${players.length > 1 ? "s" : ""}.`);
 
     const dateToday = getMidnightAlignedDate(new Date());
     for (const foundPlayer of players) {