use the new prettier config and add a network offline loader

2024-09-30 22:16:55 +01:00 · 2024-09-30 22:16:55 +01:00 · f38925c113
commit f38925c113
parent f32c329eb1
69 changed files with 517 additions and 1118 deletions
--- a/.env-example
+++ b/.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=
--- a/.prettierrc.json
+++ b/.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
+}
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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':
--- a/src/app/(pages)/api/player/history/route.ts
+++ b/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;

--- a/src/app/(pages)/api/player/isbeingtracked/route.ts
+++ b/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

--- a/src/app/(pages)/api/proxy/route.ts
+++ b/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": "*",
        },
-      },
+      }
    );
  }
 }
--- a/src/app/(pages)/player/[...slug]/page.tsx
+++ b/src/app/(pages)/player/[...slug]/page.tsx
@ -31,8 +31,7 @@ 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 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
@ -57,8 +56,7 @@ const getPlayerData = cache(
    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>
  );
 }
--- a/src/app/global-error.tsx
+++ b/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]);
--- a/src/app/layout.tsx
+++ b/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,12 +73,8 @@ export default function RootLayout({
          <BackgroundImage />
          <PreloadResources />
          <TooltipProvider delayDuration={100}>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="dark"
-              enableSystem
-              disableTransitionOnChange
-            >
+            <OfflineNetwork>
+              <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
                <QueryProvider>
                  <AnimatePresence>
                    <main className="flex flex-col min-h-screen gap-2 text-white">
@ -93,6 +87,7 @@ export default function RootLayout({
                  </AnimatePresence>
                </QueryProvider>
              </ThemeProvider>
+            </OfflineNetwork>
          </TooltipProvider>
        </DatabaseLoader>
      </body>
--- a/src/common/image-utils.ts
+++ b/src/common/image-utils.ts
@ -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);
--- a/src/common/model/player/impl/scoresaber-player.ts
+++ b/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);
--- a/src/common/model/player/player.ts
+++ b/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;
--- a/src/common/model/score/impl/scoresaber-score.ts
+++ b/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)
    );
  }
 }
--- a/src/common/model/score/score.ts
+++ b/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;
--- a/src/common/player-utils.ts
+++ b/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;
--- a/src/common/schema/player-schema.ts
+++ b/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 };
--- a/src/common/service/impl/beatsaver.ts
+++ b/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;
  }
 }
--- a/src/common/service/impl/scoresaber.ts
+++ b/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;
  }
--- a/src/common/service/service.ts
+++ b/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), {
--- a/src/common/time-utils.ts
+++ b/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()));
 }

 /**
--- a/src/common/youtube-utils.ts
+++ b/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) {
--- a/src/components/background-image.tsx
+++ b/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
  }

--- a/src/components/card.tsx
+++ b/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>;
 }
--- a/src/components/chart/customized-axis-tick.tsx
+++ b/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>
--- a/src/components/input/pagination.tsx
+++ b/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,28 +126,19 @@ 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 && (
+        {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
          <>
-              <PaginationItemWrapper
-                key="ellipsis-end"
-                isLoadingPage={isLoading}
-              >
+            <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
              <PaginationEllipsis className="cursor-default" />
            </PaginationItemWrapper>
            <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
-                <PaginationLink onClick={() => handlePageChange(totalPages)}>
-                  {totalPages}
-                </PaginationLink>
+              <PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
            </PaginationItemWrapper>
          </>
        )}
--- a/src/components/input/search-player.tsx
+++ b/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>
              );
--- a/src/components/leaderboard/leaderboard-score-stats.tsx
+++ b/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")} />
        </>
      );
    },
--- a/src/components/leaderboard/leaderboard-scores.tsx
+++ b/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}
        />
--- a/src/components/loaders/database-loader.tsx
+++ b/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>
  );
 }
--- a/src/components/logos/beatsaver-logo.tsx
+++ b/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>
--- a/src/components/logos/scoresaber-logo.tsx
+++ b/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>
  );
 }
--- a/src/components/logos/youtube-logo.tsx
+++ b/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}
--- a/src/components/navbar/profile-button.tsx
+++ b/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
--- a/src/components/offline-network.tsx
+++ b/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
+  );
+}
--- a/src/components/player/player-badges.tsx
+++ b/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>
        );
--- a/src/components/player/player-header.tsx
+++ b/src/components/player/player-header.tsx
@ -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) => {
+            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;
                  }

--- a/src/components/player/player-rank-chart.tsx
+++ b/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) ?? "";
          },
        },
--- a/src/components/player/player-scores.tsx
+++ b/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
--- a/src/components/player/player-stats.tsx
+++ b/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>
  );
--- a/src/components/player/player-tracked-status.tsx
+++ b/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) {
--- a/src/components/providers/query-provider.tsx
+++ b/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>;
 }
--- a/src/components/ranking/mini.tsx
+++ b/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>
--- a/src/components/score/leaderboard-button.tsx
+++ b/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>
--- a/src/components/score/score-button.tsx
+++ b/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 = {
  /**
--- a/src/components/score/score-buttons.tsx
+++ b/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>}
--- a/src/components/score/score-info.tsx
+++ b/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>
--- a/src/components/score/score-rank-info.tsx
+++ b/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>
  );
--- a/src/components/score/score-stats.tsx
+++ b/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")} />
        </>
      );
    },
--- a/src/components/stat-value.tsx
+++ b/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>
  );
 }
--- a/src/components/tooltip.tsx
+++ b/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 = {
  /**
--- a/src/components/ui/avatar.tsx
+++ b/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}
  />
 ));
--- a/src/components/ui/button.tsx
+++ b/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";

--- a/src/components/ui/card.tsx
+++ b/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 };
--- a/src/components/ui/form.tsx
+++ b/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,14 +59,10 @@ 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 FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
    const id = React.useId();

    return (
@ -83,7 +70,8 @@ const FormItem = React.forwardRef<
        <div ref={ref} className={cn("space-y-2", className)} {...props} />
      </FormItemContext.Provider>
    );
-});
+  }
+);
 FormItem.displayName = "FormItem";

 const FormLabel = React.forwardRef<
@ -92,61 +80,40 @@ 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-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
        aria-invalid={!!error}
        {...props}
      />
    );
-});
+  }
+);
 FormControl.displayName = "FormControl";

-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+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}
-    />
+      <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 FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
    const { error, formMessageId } = useFormField();
    const body = error ? String(error?.message) : children;

@ -164,16 +131,8 @@ const FormMessage = React.forwardRef<
        {body}
      </p>
    );
-});
+  }
+);
 FormMessage.displayName = "FormMessage";

-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
--- a/src/components/ui/input.tsx
+++ b/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) => {
+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,
+        className
      )}
      ref={ref}
      {...props}
    />
  );
-  },
-);
+});
 Input.displayName = "Input";

 export { Input };
--- a/src/components/ui/label.tsx
+++ b/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;

--- a/src/components/ui/pagination.tsx
+++ b/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>
--- a/src/components/ui/scroll-area.tsx
+++ b/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}
  >
--- a/src/components/ui/toast.tsx
+++ b/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;

--- a/src/components/ui/toaster.tsx
+++ b/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 />
--- a/src/components/ui/tooltip.tsx
+++ b/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}
  />
--- a/src/hooks/use-toast.ts
+++ b/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();
      },
    },
--- a/src/hooks/use-window-dimensions.ts
+++ b/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() {
--- a/src/jobs/track-player-statistics.ts
+++ b/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) {