first commit

2024-09-08 22:35:32 +01:00 · 2024-09-08 22:35:32 +01:00 · c8a7aa7d1d
commit c8a7aa7d1d
parent 5d86ed4b26
51 changed files with 5299 additions and 5179 deletions
--- a/README.md
+++ b/README.md
@ -1,36 +1,7 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# ScoreSaber Reloaded (v3)

-## Getting Started
+This is the 3rd re-code of this project. The first one was a mess, the second one was a mess, and this one is a mess. But it's a mess that I'm proud of.

-First, run the development server:
+## meow

-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+meow
--- a/components.json
+++ b/components.json
@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/app/components",
+    "utils": "@/app/common/utils",
+    "ui": "@/app/components/ui",
+    "lib": "@/app/common",
+    "hooks": "@/app/hooks"
+  }
+}
--- a/config.ts
+++ b/config.ts
@ -0,0 +1,3 @@
+export const config = {
+  siteUrl: "https://ssr-dev.fascinated.cc",
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,18 +9,39 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "@formkit/tempo": "^0.1.2",
+    "@heroicons/react": "^2.1.5",
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "dexie": "^4.0.8",
+    "dexie-react-hooks": "^1.1.7",
+    "ky": "^1.7.2",
+    "lucide-react": "^0.439.0",
+    "next": "14.2.8",
+    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
-    "next": "14.2.8"
+    "react-hook-form": "^7.53.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.23.8"
  },
  "devDependencies": {
-    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.8",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.8"
+    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/assets/background.jpg
+++ b/public/assets/background.jpg
--- a/public/assets/logos/scoresaber.png
+++ b/public/assets/logos/scoresaber.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/app/(pages)/page.tsx
+++ b/src/app/(pages)/page.tsx
@ -0,0 +1,10 @@
+"use client";
+
+import { useLiveQuery } from "dexie-react-hooks";
+import useDatabase from "../hooks/use-database";
+
+export default function Home() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+  return <>{settings?.playerId}</>;
+}
--- a/src/app/(pages)/player/[id]/[sort]/[page]/page.tsx
+++ b/src/app/(pages)/player/[id]/[sort]/[page]/page.tsx
@ -0,0 +1,80 @@
+import { scoresaberLeaderboard } from "@/app/common/leaderboard/impl/scoresaber";
+import { ScoreSort } from "@/app/common/leaderboard/sort";
+import { formatNumberWithCommas } from "@/app/common/number-utils";
+import ClaimProfile from "@/app/components/claim-profile";
+import { Avatar, AvatarFallback, AvatarImage } from "@/app/components/ui/avatar";
+import { format } from "@formkit/tempo";
+import { Metadata } from "next";
+
+type Props = {
+  params: {
+    id: string;
+    sort: ScoreSort;
+    page: number;
+  };
+};
+
+export async function generateMetadata({ params: { id } }: Props): Promise<Metadata> {
+  const player = await scoresaberLeaderboard.lookupPlayer(id, false);
+  if (player === undefined) {
+    return {
+      title: `Unknown Player`,
+      openGraph: {
+        title: `Unknown Player`,
+      },
+    };
+  }
+
+  return {
+    title: `${player.name}`,
+    openGraph: {
+      title: `ScoreSaber Reloaded - ${player.name}`,
+      description: `
+      PP: ${formatNumberWithCommas(player.pp)}pp
+      Rank: #${formatNumberWithCommas(player.rank)} (#${formatNumberWithCommas(player.countryRank)} ${player.country})
+      Joined ScoreSaber: ${format(player.firstSeen, { date: "medium", time: "short" })}
+      
+      View the scores for ${player.name}!`,
+    },
+  };
+}
+
+export default async function Search({ params: { id, sort, page } }: Props) {
+  const player = await scoresaberLeaderboard.lookupPlayer(id, false);
+  console.log("id", id);
+  console.log("sort", sort);
+  console.log("page", page);
+
+  return (
+    <div className="flex flex-col h-full w-full">
+      {player === undefined && (
+        <div>
+          <p>idek mate</p>
+        </div>
+      )}
+      {player !== undefined && (
+        <div className="flex flex-col gap-2">
+          <div className="flex flex-col bg-secondary p-2 rounded-md">
+            <div className="flex gap-3 flex-col items-center text-center sm:flex-row sm:items-start sm:text-start relative">
+              <Avatar className="w-32 h-32">
+                <AvatarImage src={player.profilePicture} />
+                <AvatarFallback>{player.name}</AvatarFallback>
+              </Avatar>
+              <div>
+                <p className="font-bold text-2xl">{player.name}</p>
+                <div className="flex gap-2">
+                  <p className="text-xl text-gray-400">#{formatNumberWithCommas(player.rank)}</p>
+                  <p className="text-xl text-gray-400">#{formatNumberWithCommas(player.countryRank)}</p>
+                  <p className="text-xl text-blue-400">{formatNumberWithCommas(player.pp)}pp</p>
+                </div>
+                <div className="absolute top-0 right-0">
+                  <ClaimProfile playerId={id} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/app/(pages)/search/page.tsx
+++ b/src/app/(pages)/search/page.tsx
@ -0,0 +1,22 @@
+import SearchPlayer from "@/app/components/input/search-player";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Search",
+};
+
+export default function Search() {
+  return (
+    <div className="flex flex-col h-full w-full items-center justify-center gap-2">
+      <div className="mb-4 mt-2 flex h-[150px] w-[150px] items-center justify-center rounded-full select-none bg-gray-600">
+        <p className="text-9xl">?</p>
+      </div>
+
+      <div className="flex flex-col items-center text-center">
+        <p className="font-bold text-2xl">Search Player</p>
+        <p className="text-gray-400">Find yourself or a friend</p>
+      </div>
+      <SearchPlayer />
+    </div>
+  );
+}
--- a/src/app/common/database/database.ts
+++ b/src/app/common/database/database.ts
@ -0,0 +1,51 @@
+import Dexie, { EntityTable } from "dexie";
+import Settings from "./types/settings";
+
+const SETTINGS_ID = "SSR"; // DO NOT CHANGE
+
+export default class Database extends Dexie {
+  settings!: EntityTable<Settings, "id">;
+
+  constructor() {
+    super("ScoreSaberReloaded");
+
+    // Stores
+    this.version(1).stores({
+      settings: "id",
+    });
+
+    // Mapped tables
+    this.settings.mapToClass(Settings);
+
+    // Populate default settings if the table is empty
+    this.on("populate", () => this.populateDefaults());
+  }
+
+  async populateDefaults() {
+    await this.settings.add({
+      id: SETTINGS_ID, // Fixed ID for the single settings object
+      backgroundImage: "/assets/background.jpg",
+    });
+  }
+
+  /**
+   * Gets the settings from the database
+   *
+   * @returns the settings
+   */
+  async getSettings(): Promise<Settings | undefined> {
+    return await this.settings.get(SETTINGS_ID);
+  }
+
+  /**
+   * Sets the settings in the database
+   *
+   * @param settings the settings to set
+   * @returns the settings
+   */
+  async setSettings(settings: Settings) {
+    return await this.settings.update(SETTINGS_ID, settings);
+  }
+}
+
+export const db = new Database();
--- a/src/app/common/database/types/settings.ts
+++ b/src/app/common/database/types/settings.ts
@ -0,0 +1,42 @@
+import { Entity } from "dexie";
+import Database from "../database";
+
+/**
+ * The website settings.
+ */
+export default class Settings extends Entity<Database> {
+  /**
+   * This is just so we can fetch the settings
+   */
+  id!: string;
+
+  /**
+   * The ID of the tracked player
+   */
+  playerId?: string;
+
+  /**
+   * The background image to use
+   */
+  backgroundImage?: string;
+
+  /**
+   * Sets the players id
+   *
+   * @param id the new player id
+   */
+  public setPlayerId(id: string) {
+    this.playerId = id;
+    this.db.setSettings(this);
+  }
+
+  /**
+   * Sets the background image
+   *
+   * @param image the new background image
+   */
+  public setBackgroundImage(image: string) {
+    this.backgroundImage = image;
+    this.db.setSettings(this);
+  }
+}
--- a/src/app/common/image-utils.ts
+++ b/src/app/common/image-utils.ts
@ -0,0 +1,15 @@
+import { config } from "../../../config";
+
+/**
+ * Proxies all non-localhost images to make them load faster.
+ *
+ * @param originalUrl the original image url
+ * @returns the new image url
+ */
+export function getImageUrl(originalUrl: string) {
+  // Remove the prepending slash
+  if (originalUrl.startsWith("/")) {
+    originalUrl = originalUrl.substring(1);
+  }
+  return `${!config.siteUrl.includes("localhost") ? "https://img.fascinated.cc/upload/q_70/" : ""}${originalUrl}`;
+}
--- a/src/app/common/leaderboard/impl/scoresaber.ts
+++ b/src/app/common/leaderboard/impl/scoresaber.ts
@ -0,0 +1,52 @@
+import ky from "ky";
+import Leaderboard from "../leaderboard";
+import ScoreSaberPlayer from "../types/scoresaber/scoresaber-player";
+import { ScoreSaberPlayerSearch } from "../types/scoresaber/scoresaber-player-search";
+
+const API_BASE = "https://scoresaber.com/api";
+const SEARCH_PLAYERS_ENDPOINT = `${API_BASE}/players?search={query}`;
+const LOOKUP_PLAYER_ENDPOINT = `${API_BASE}/player/{playerId}/full`;
+
+class ScoreSaberLeaderboard extends Leaderboard {
+  /**
+   * Gets the players that match the query.
+   *
+   * @param query the query to search for
+   * @param useProxy whether to use the proxy or not
+   * @returns the players that match the query, or undefined if no players were found
+   */
+  async searchPlayers(query: string, useProxy = true): Promise<ScoreSaberPlayerSearch | undefined> {
+    try {
+      const results = await ky
+        .get((useProxy ? "https://proxy.fascinated.cc/" : "") + SEARCH_PLAYERS_ENDPOINT.replace("{query}", query))
+        .json<ScoreSaberPlayerSearch>();
+      if (results.players.length === 0) {
+        return undefined;
+      }
+      results.players.sort((a, b) => a.rank - b.rank);
+      return results;
+    } catch {
+      return undefined;
+    }
+  }
+
+  /**
+   * Looks up a player by their ID.
+   *
+   * @param playerId the ID of the player to look up
+   * @param useProxy whether to use the proxy or not
+   * @returns the player that matches the ID, or undefined
+   */
+  async lookupPlayer(playerId: string, useProxy = true): Promise<ScoreSaberPlayer | undefined> {
+    try {
+      const results = await ky
+        .get((useProxy ? "https://proxy.fascinated.cc/" : "") + LOOKUP_PLAYER_ENDPOINT.replace("{playerId}", playerId))
+        .json<ScoreSaberPlayer>();
+      return results;
+    } catch {
+      return undefined;
+    }
+  }
+}
+
+export const scoresaberLeaderboard = new ScoreSaberLeaderboard();
--- a/src/app/common/leaderboard/leaderboard.ts
+++ b/src/app/common/leaderboard/leaderboard.ts
@ -0,0 +1 @@
+export default class Leaderboard {}
--- a/src/app/common/leaderboard/sort.ts
+++ b/src/app/common/leaderboard/sort.ts
@ -0,0 +1 @@
+export type ScoreSort = "top" | "recent";
--- a/src/app/common/leaderboard/types/scoresaber/scoresaber-badge.ts
+++ b/src/app/common/leaderboard/types/scoresaber/scoresaber-badge.ts
@ -0,0 +1,11 @@
+export interface ScoreSaberBadge {
+  /**
+   * The description of the badge.
+   */
+  description: string;
+
+  /**
+   * The image of the badge.
+   */
+  image: string;
+}
--- a/src/app/common/leaderboard/types/scoresaber/scoresaber-metadata.ts
+++ b/src/app/common/leaderboard/types/scoresaber/scoresaber-metadata.ts
@ -0,0 +1,16 @@
+export default interface ScoreSaberMetadata {
+  /**
+   * The total amount of returned results.
+   */
+  total: number;
+
+  /**
+   * The current page
+   */
+  page: number;
+
+  /**
+   * The amount of results per page
+   */
+  itemsPerPage: number;
+}
--- a/src/app/common/leaderboard/types/scoresaber/scoresaber-player-search.ts
+++ b/src/app/common/leaderboard/types/scoresaber/scoresaber-player-search.ts
@ -0,0 +1,8 @@
+import ScoreSaberPlayer from "./scoresaber-player";
+
+export interface ScoreSaberPlayerSearch {
+  /**
+   * The players that were found
+   */
+  players: ScoreSaberPlayer[];
+}
--- a/src/app/common/leaderboard/types/scoresaber/scoresaber-player.ts
+++ b/src/app/common/leaderboard/types/scoresaber/scoresaber-player.ts
@ -0,0 +1,84 @@
+import { ScoreSaberBadge } from "./scoresaber-badge";
+import ScoreSaberScoreStats from "./scoresaber-score-stats";
+
+export default interface ScoreSaberPlayer {
+  /**
+   * The ID of the player.
+   */
+  id: string;
+
+  /**
+   * The name of the player.
+   */
+  name: string;
+
+  /**
+   * The profile picture of the player.
+   */
+  profilePicture: string;
+
+  /**
+   * The bio of the player.
+   */
+  bio: string | null;
+
+  /**
+   * The country of the player.
+   */
+  country: string;
+
+  /**
+   * The amount of pp the player has.
+   */
+  pp: number;
+
+  /**
+   * The rank of the player.
+   */
+  rank: number;
+
+  /**
+   * The rank the player has in their country.
+   */
+  countryRank: number;
+
+  /**
+   * The role of the player.
+   */
+  role: string | null;
+
+  /**
+   * The badges the player has.
+   */
+  badges: ScoreSaberBadge[] | null;
+
+  /**
+   * The previous 50 days of rank history.
+   */
+  histories: string;
+
+  /**
+   * The score stats of the player.
+   */
+  scoreStats: ScoreSaberScoreStats;
+
+  /**
+   * The permissions of the player. (bitwise)
+   */
+  permissions: number;
+
+  /**
+   * Whether the player is banned or not.
+   */
+  banned: boolean;
+
+  /**
+   * Whether the player is inactive or not.
+   */
+  inactive: boolean;
+
+  /**
+   * The date the player joined ScoreSaber.
+   */
+  firstSeen: string;
+}
--- a/src/app/common/leaderboard/types/scoresaber/scoresaber-score-stats.ts
+++ b/src/app/common/leaderboard/types/scoresaber/scoresaber-score-stats.ts
@ -0,0 +1,31 @@
+export default interface ScoreSaberScoreStats {
+  /**
+   * The total amount of score accumulated over all scores.
+   */
+  totalScore: number;
+
+  /**
+   * The total amount of ranked score accumulated over all scores.
+   */
+  totalRankedScore: number;
+
+  /**
+   * The average ranked accuracy for all ranked scores.
+   */
+  averageRankedAccuracy: number;
+
+  /**
+   * The total amount of scores set.
+   */
+  totalPlayCount: number;
+
+  /**
+   * The total amount of ranked score set.
+   */
+  rankedPlayCount: number;
+
+  /**
+   * The amount of times their replays were watched.
+   */
+  replaysWatched: number;
+}
--- a/src/app/common/number-utils.ts
+++ b/src/app/common/number-utils.ts
@ -0,0 +1,9 @@
+/**
+ * Formats a number without trailing zeros.
+ *
+ * @param num the number to format
+ * @returns the formatted number
+ */
+export function formatNumberWithCommas(num: number) {
+  return num.toLocaleString();
+}
--- a/src/app/common/utils.ts
+++ b/src/app/common/utils.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/app/components/background-image.tsx
+++ b/src/app/components/background-image.tsx
@ -0,0 +1,24 @@
+"use client";
+
+import { useLiveQuery } from "dexie-react-hooks";
+import { config } from "../../../config";
+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 == "") {
+    return null; // Don't render anything if the background image is not set
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={getImageUrl(config.siteUrl + "/" + settings?.backgroundImage)}
+      alt="Background image"
+      className={`absolute -z-50 object-cover w-screen h-screen blur-sm brightness-[33%] pointer-events-none select-none`}
+    />
+  );
+}
--- a/src/app/components/claim-profile.tsx
+++ b/src/app/components/claim-profile.tsx
@ -0,0 +1,53 @@
+"use client";
+
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { useLiveQuery } from "dexie-react-hooks";
+import useDatabase from "../hooks/use-database";
+import { useToast } from "../hooks/use-toast";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  /**
+   * The ID of the players profile to claim.
+   */
+  playerId: string;
+};
+
+export default function ClaimProfile({ playerId }: Props) {
+  const database = useDatabase();
+  const { toast } = useToast();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  /**
+   * Claims the profile.
+   */
+  async function claimProfile() {
+    const settings = await database.getSettings();
+    settings?.setPlayerId(playerId);
+
+    // Set the playerId cookie
+    document.cookie = `playerId=${playerId}`;
+    toast({
+      title: "Profile Claimed",
+      description: "You have claimed this profile.",
+    });
+  }
+
+  if (settings?.playerId == playerId || settings == undefined) {
+    return null; // Don't show the claim button if it's the same user.
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant={"outline"} onClick={claimProfile}>
+          <CheckIcon className="size-6 text-green-500" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Set as your profile</p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
--- a/src/app/components/input/search-player.tsx
+++ b/src/app/components/input/search-player.tsx
@ -0,0 +1,92 @@
+"use client";
+
+import { scoresaberLeaderboard } from "@/app/common/leaderboard/impl/scoresaber";
+import ScoreSaberPlayer from "@/app/common/leaderboard/types/scoresaber/scoresaber-player";
+import { formatNumberWithCommas } from "@/app/common/number-utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { ScrollArea } from "../ui/scroll-area";
+
+const formSchema = z.object({
+  username: z.string().min(2).max(50),
+});
+
+export default function SearchPlayer() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+    },
+  });
+  const [results, setResults] = useState<ScoreSaberPlayer[] | undefined>();
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit({ username }: z.infer<typeof formSchema>) {
+    setLoading(true);
+    setResults(undefined); // Reset results
+    const results = await scoresaberLeaderboard.searchPlayers(username);
+    setResults(results?.players);
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Search */}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-end gap-2">
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input className="w-full sm:w-72 text-sm" placeholder="Query..." {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Search</Button>
+        </form>
+      </Form>
+
+      {/* Results */}
+      {loading == true && (
+        <div className="flex items-center justify-center">
+          <p>Loading...</p>
+        </div>
+      )}
+      {results !== undefined && (
+        <ScrollArea>
+          <div className="flex flex-col gap-1 max-h-60">
+            {results?.map((player) => {
+              return (
+                <Link
+                  href={`/player/${player.id}/top/1`}
+                  key={player.id}
+                  className="bg-secondary p-2 rounded-md flex gap-2 items-center hover:brightness-75 transition-all transform-gpu"
+                >
+                  <Avatar>
+                    <AvatarImage src={player.profilePicture} />
+                    <AvatarFallback>{player.name.at(0)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p>{player.name}</p>
+                    <p className="text-gray-400 text-sm">#{formatNumberWithCommas(player.rank)}</p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
--- a/src/app/components/loaders/database-loader.tsx
+++ b/src/app/components/loaders/database-loader.tsx
@ -0,0 +1,30 @@
+"use client";
+
+import { createContext, useEffect, useState } from "react";
+import Database, { db } from "../../common/database/database";
+import FullscreenLoader from "./fullscreen-loader";
+
+/**
+ * The context for the database. This is used to access the database from within the app.
+ */
+export const DatabaseContext = createContext<Database | undefined>(undefined);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function DatabaseLoader({ children }: Props) {
+  const [database, setDatabase] = useState<Database | undefined>(undefined);
+
+  useEffect(() => {
+    const before = performance.now();
+    setDatabase(db);
+    console.log(`Loaded database in ${performance.now() - before}ms`);
+  }, []);
+
+  return (
+    <DatabaseContext.Provider value={database}>
+      {database == undefined ? <FullscreenLoader reason="Loading database..." /> : children}
+    </DatabaseContext.Provider>
+  );
+}
--- a/src/app/components/loaders/fullscreen-loader.tsx
+++ b/src/app/components/loaders/fullscreen-loader.tsx
@ -0,0 +1,19 @@
+import ScoreSaberLogo from "../logos/scoresaber-logo";
+
+type Props = {
+  reason: string;
+};
+
+export default function FullscreenLoader({ reason }: Props) {
+  return (
+    <div className="absolute w-screen h-screen bg-background brightness-75 flex flex-col gap-6 items-center justify-center">
+      <div className="flex flex-col items-center justify-center">
+        <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
+        <p className="text-gray-300 text-md">{reason}</p>
+      </div>
+      <div className="animate-spin">
+        <ScoreSaberLogo />
+      </div>
+    </div>
+  );
+}
--- a/src/app/components/logos/scoresaber-logo.tsx
+++ b/src/app/components/logos/scoresaber-logo.tsx
@ -0,0 +1,7 @@
+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>
+  );
+}
--- a/src/app/components/navbar.tsx
+++ b/src/app/components/navbar.tsx
@ -0,0 +1,51 @@
+import Link from "next/link";
+import React from "react";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+  icon: React.ReactNode;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+    icon: undefined, // Add your home icon here
+  },
+  {
+    name: "Search",
+    link: "/search",
+    icon: undefined, // Add your search icon here
+  },
+];
+
+// Helper function to render each navbar item
+const renderNavbarItem = (item: NavbarItem) => (
+  <div className="flex items-center">
+    {item.icon && <div className="mr-2">{item.icon}</div>}
+    <div>{item.name}</div>
+  </div>
+);
+
+export default function Navbar() {
+  return (
+    <div className="p-2">
+      <div className="px-2 h-10 rounded-md items-center flex justify-between bg-secondary">
+        {/* Left-aligned items */}
+        <div className="flex items-center gap-2">
+          {items.slice(0, -1).map((item, index) => (
+            <div key={index}>
+              <Link href={item.link}>{renderNavbarItem(item)}</Link>
+            </div>
+          ))}
+        </div>
+
+        {/* Right-aligned item */}
+        <div>
+          <Link href={items[items.length - 1].link}>{renderNavbarItem(items[items.length - 1])}</Link>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/app/components/providers/theme-provider.tsx
+++ b/src/app/components/providers/theme-provider.tsx
@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/src/app/components/ui/avatar.tsx
+++ b/src/app/components/ui/avatar.tsx
@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/app/common/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+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}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
--- a/src/app/components/ui/button.tsx
+++ b/src/app/components/ui/button.tsx
@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/app/common/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    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",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+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}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/src/app/components/ui/form.tsx
+++ b/src/app/components/ui/form.tsx
@ -0,0 +1,178 @@
+"use client"
+
+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 { cn } from "@/app/common/utils"
+import { Label } from "@/app/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  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()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/src/app/components/ui/input.tsx
+++ b/src/app/components/ui/input.tsx
@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/app/common/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/src/app/components/ui/label.tsx
+++ b/src/app/components/ui/label.tsx
@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/app/common/utils"
+
+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>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/src/app/components/ui/scroll-area.tsx
+++ b/src/app/components/ui/scroll-area.tsx
@ -0,0 +1,40 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "@/app/common/utils";
+
+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>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    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
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/src/app/components/ui/toast.tsx
+++ b/src/app/components/ui/toast.tsx
@ -0,0 +1,113 @@
+"use client";
+
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/app/common/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    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
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-secondary text-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>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    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
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    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
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+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} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+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} />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  type ToastActionElement,
+  type ToastProps,
+};
--- a/src/app/components/ui/toaster.tsx
+++ b/src/app/components/ui/toaster.tsx
@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/app/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/app/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
--- a/src/app/components/ui/tooltip.tsx
+++ b/src/app/components/ui/tooltip.tsx
@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/app/common/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    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
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/fonts/RobotoMono-Regular.ttf
+++ b/src/app/fonts/RobotoMono-Regular.ttf
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -25,3 +25,92 @@ body {
    text-wrap: balance;
  }
 }
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 9.5%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 45.1%;
+    --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+
+    /* Scrollbar (Firefox) */
+    scrollbar-color: hsl(var(--accent)) hsl(var(--background));
+    scrollbar-width: thin;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Scrollbar (Chrome & Safari) */
+@layer base {
+  ::-webkit-scrollbar {
+    @apply w-1.5;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-inherit;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-accent rounded-3xl;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-opacity-80;
+  }
+}
--- a/src/app/hooks/use-database.ts
+++ b/src/app/hooks/use-database.ts
@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { DatabaseContext } from "../components/loaders/database-loader";
+
+/**
+ * Gets the database context.
+ *
+ * @returns the database context
+ */
+export default function useDatabase() {
+  return useContext(DatabaseContext)!;
+}
--- a/src/app/hooks/use-toast.ts
+++ b/src/app/hooks/use-toast.ts
@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/app/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,21 +1,53 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
+import BackgroundImage from "./components/background-image";
+import DatabaseLoader from "./components/loaders/database-loader";
+import NavBar from "./components/navbar";
+import { ThemeProvider } from "./components/providers/theme-provider";
+import { Toaster } from "./components/ui/toaster";
+import { TooltipProvider } from "./components/ui/tooltip";
 import "./globals.css";

-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+const siteFont = localFont({
+  src: "./fonts/RobotoMono-Regular.ttf",
  weight: "100 900",
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: "ScoreSaber Reloaded",
+    template: "SSR - %s",
+  },
+  applicationName: "ScoreSaber Reloaded",
+  authors: [
+    {
+      name: "Fascinated",
+      url: "https://git.fascinated.cc/Fascinated",
+    },
+  ],
+  robots: {
+    index: true,
+    follow: true,
+    nocache: false,
+    googleBot: {
+      index: true,
+      follow: true,
+    },
+  },
+  keywords:
+    "scoresaber, score saber, scoresaber stats, score saber stats, beatleader, beat leader," +
+    "scoresaber reloaded, ssr, github, score aggregation, scoresaber api, score saber api, scoresaber api," +
+    "BeatSaber, Overlay, OBS, Twitch, YouTube, BeatSaber Overlay, Github, Beat Saber overlay, ScoreSaber, BeatLeader," +
+    "VR gaming, Twitch stream enhancement, Customizable overlay, Real-time scores, Rankings, Leaderboard information," +
+    "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",
+    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",
 };

 export default function RootLayout({
@ -25,10 +57,17 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+      <body className={`${siteFont.className} antialiased w-full h-full relative`}>
+        <DatabaseLoader>
+          <Toaster />
+          <BackgroundImage />
+          <TooltipProvider>
+            <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+              <NavBar />
+              <main className="m-2 z-50">{children}</main>
+            </ThemeProvider>
+          </TooltipProvider>
+        </DatabaseLoader>
      </body>
    </html>
  );
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,101 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
--- a/src/middleware.ts
+++ b/src/middleware.ts
@ -0,0 +1,20 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  const cookies = request.cookies;
+
+  const playerIdCookie = cookies.get("playerId");
+  if (pathname == "/") {
+    if (playerIdCookie) {
+      return NextResponse.redirect(new URL(`/player/${playerIdCookie.value}/top/1`, request.url));
+    } else {
+      return NextResponse.redirect(new URL("/search", request.url));
+    }
+  }
+}
+
+export const config = {
+  matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
+};
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";

 const config: Config = {
+    darkMode: ["class"],
    content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@ -9,11 +10,54 @@ const config: Config = {
  theme: {
  	extend: {
  		colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
  			},
-  plugins: [],
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
 };
 export default config;