add bsr, map and yt buttons to scores

src/components/background-image.tsx

@@ -0,0 +1,37 @@
+"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
+  }
+
+  let backgroundImage = settings.backgroundImage;
+  let prependWebsiteUrl = false;
+
+  // Remove the prepending slash
+  if (backgroundImage.startsWith("/")) {
+    prependWebsiteUrl = true;
+    backgroundImage = backgroundImage.substring(1);
+  }
+  if (prependWebsiteUrl) {
+    backgroundImage = config.siteUrl + "/" + backgroundImage;
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={getImageUrl(backgroundImage)}
+      alt="Background image"
+      fetchPriority="high"
+      className={`fixed -z-50 object-cover w-screen h-screen blur-sm brightness-[33%] pointer-events-none select-none`}
+    />
+  );
+}

src/components/card.tsx

@@ -0,0 +1,10 @@
+import clsx, { ClassValue } from "clsx";
+
+type Props = {
+  children: React.ReactNode;
+  className?: ClassValue;
+};
+
+export default function Card({ children, className }: Props) {
+  return <div className={clsx("flex flex-col bg-secondary/90 p-3 rounded-md", className)}>{children}</div>;
+}

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

@@ -0,0 +1,20 @@
+export const CustomizedAxisTick = ({
+  x,
+  y,
+  payload,
+  rotateAngle = -45,
+}: {
+  x?: number;
+  y?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload?: any;
+  rotateAngle?: number;
+}) => {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform={`rotate(${rotateAngle})`}>
+        {payload.value}
+      </text>
+    </g>
+  );
+};

src/components/country-flag.tsx

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

src/components/input/pagination.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from "react";
+import {
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  Pagination as ShadCnPagination,
+} from "../ui/pagination";
+
+type Props = {
+  /**
+   * If true, the pagination will be rendered as a mobile-friendly pagination.
+   */
+  mobilePagination: boolean;
+
+  /**
+   * The current page.
+   */
+  page: number;
+
+  /**
+   * The total number of pages.
+   */
+  totalPages: number;
+
+  /**
+   * Callback function that is called when the user clicks on a page number.
+   */
+  onPageChange: (page: number) => void;
+};
+
+export default function Pagination({ mobilePagination, page, totalPages, onPageChange }: Props) {
+  totalPages = Math.round(totalPages);
+  const [currentPage, setCurrentPage] = useState(page);
+
+  useEffect(() => {
+    setCurrentPage(page);
+  }, [page]);
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages || newPage == currentPage) {
+      return;
+    }
+
+    setCurrentPage(newPage);
+    onPageChange(newPage);
+  };
+
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const maxPagesToShow = mobilePagination ? 3 : 4;
+    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+    const endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+
+    if (endPage - startPage < maxPagesToShow - 1) {
+      startPage = Math.max(1, endPage - maxPagesToShow + 1);
+    }
+
+    // Show "Jump to Start" with Ellipsis if currentPage is greater than 3 in desktop view
+    if (startPage > 1 && !mobilePagination) {
+      pageNumbers.push(
+        <>
+          <PaginationItem key="start">
+            <PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem key="ellipsis-start">
+            <PaginationEllipsis />
+          </PaginationItem>
+        </>
+      );
+    }
+
+    // Generate page numbers between startPage and endPage for desktop view
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(
+        <PaginationItem key={i}>
+          <PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    return pageNumbers;
+  };
+
+  return (
+    <ShadCnPagination className="select-none">
+      <PaginationContent>
+        {/* Previous button for mobile and desktop */}
+        <PaginationItem>
+          <PaginationPrevious onClick={() => handlePageChange(currentPage - 1)} />
+        </PaginationItem>
+
+        {renderPageNumbers()}
+
+        {/* For desktop, show ellipsis and link to the last page */}
+        {!mobilePagination && currentPage < totalPages && (
+          <>
+            <PaginationItem key="ellipsis-end">
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem key="end">
+              <PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
+            </PaginationItem>
+          </>
+        )}
+
+        {/* Next button for mobile and desktop */}
+        <PaginationItem>
+          <PaginationNext onClick={() => handlePageChange(currentPage + 1)} />
+        </PaginationItem>
+      </PaginationContent>
+    </ShadCnPagination>
+  );
+}

src/components/input/search-player.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { scoresaberFetcher } from "@/common/data-fetcher/impl/scoresaber";
+import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
+import { formatNumberWithCommas } from "@/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 scoresaberFetcher.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}`}
+                  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>
+  );
+}

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

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

src/components/logos/beatsaver-logo.tsx

@@ -0,0 +1,24 @@
+type BeatSaverLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 200 200"
+      version="1.1"
+      className={className}
+    >
+      <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 100,87 100,196" strokeLinejoin="round"></path>
+        <path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
+      </g>
+    </svg>
+  );
+}

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

src/components/logos/youtube-logo.tsx

@@ -0,0 +1,30 @@
+type YouTubeLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function YouTubeLogo({ size = 32, className }: YouTubeLogoProps) {
+  return (
+    <svg
+      height={size}
+      width={size}
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 461.001 461.001"
+      xmlSpace="preserve"
+      className={className}
+    >
+      <g>
+        <path
+          fill="#F61C0D"
+          d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
+		c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
+		C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
+		c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+        />
+      </g>
+    </svg>
+  );
+}

src/components/navbar/navbar-button.tsx

@@ -0,0 +1,11 @@
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function NavbarButton({ children }: Props) {
+  return (
+    <div className="px-2 gap-2 rounded-md hover:bg-blue-500 transform-gpu transition-all h-full flex items-center">
+      {children}
+    </div>
+  );
+}

src/components/navbar/navbar.tsx

@@ -0,0 +1,57 @@
+import { HomeIcon } from "@heroicons/react/24/solid";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import React from "react";
+import NavbarButton from "./navbar-button";
+import ProfileButton from "./profile-button";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+  icon: React.ReactNode;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+    icon: <HomeIcon className="h-5 w-5" />, // Add your home icon here
+  },
+  {
+    name: "Search",
+    link: "/search",
+    icon: <MagnifyingGlassIcon className="h-5 w-5" />, // 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="w-full py-2">
+      <div className="h-10 rounded-md items-center flex justify-between bg-secondary/90">
+        {/* Left-aligned items */}
+        <div className="flex items-center h-full">
+          <ProfileButton />
+
+          {items.slice(0, -1).map((item, index) => (
+            <NavbarButton key={index}>
+              <Link href={item.link}>{renderNavbarItem(item)}</Link>
+            </NavbarButton>
+          ))}
+        </div>
+
+        {/* Right-aligned item */}
+        <NavbarButton>
+          <Link href={items[items.length - 1].link}>{renderNavbarItem(items[items.length - 1])}</Link>
+        </NavbarButton>
+      </div>
+    </div>
+  );
+}

src/components/navbar/profile-button.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import Link from "next/link";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import NavbarButton from "./navbar-button";
+
+export default function ProfileButton() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  if (settings == undefined) {
+    return; // Settings hasn't loaded yet
+  }
+
+  if (settings.playerId == null) {
+    return; // No player profile claimed
+  }
+
+  return (
+    <NavbarButton>
+      <Link href={`/player/${settings.playerId}`} className="flex items-center gap-2">
+        <Avatar className="w-6 h-6">
+          <AvatarImage src={`https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`} />
+        </Avatar>
+        <p>You</p>
+      </Link>
+    </NavbarButton>
+  );
+}

src/components/player/claim-profile.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { useLiveQuery } from "dexie-react-hooks";
+import { setPlayerIdCookie } from "../../common/website-utils";
+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);
+    setPlayerIdCookie(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>
+  );
+}

src/components/player/player-data-point.tsx

@@ -0,0 +1,13 @@
+type Props = {
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export default function PlayerDataPoint({ icon, children }: Props) {
+  return (
+    <div className="flex gap-1 items-center">
+      {icon}
+      {children}
+    </div>
+  );
+}

src/components/player/player-data.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { scoresaberFetcher } from "@/common/data-fetcher/impl/scoresaber";
+import { ScoreSort } from "@/common/data-fetcher/sort";
+import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
+import { useQuery } from "@tanstack/react-query";
+import PlayerHeader from "./player-header";
+import PlayerRankChart from "./player-rank-chart";
+import PlayerScores from "./player-scores";
+
+const REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes
+
+type Props = {
+  initalPlayerData: ScoreSaberPlayer;
+  sort: ScoreSort;
+  page: number;
+};
+
+export default function PlayerData({ initalPlayerData, sort, page }: Props) {
+  let player = initalPlayerData;
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["player", player.id],
+    queryFn: () => scoresaberFetcher.lookupPlayer(player.id),
+    refetchInterval: REFRESH_INTERVAL,
+  });
+
+  if (data && (!isLoading || !isError)) {
+    player = data;
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <PlayerHeader player={player} />
+      <PlayerRankChart player={player} />
+      <PlayerScores player={player} sort={sort} page={page} />
+    </div>
+  );
+}

src/components/player/player-header.tsx

@@ -0,0 +1,63 @@
+import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Card from "../card";
+import CountryFlag from "../country-flag";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import ClaimProfile from "./claim-profile";
+import PlayerDataPoint from "./player-data-point";
+
+const playerSubNames = [
+  {
+    icon: () => {
+      return <GlobeAmericasIcon className="h-5 w-5" />;
+    },
+    render: (player: ScoreSaberPlayer) => {
+      return <p>#{formatNumberWithCommas(player.rank)}</p>;
+    },
+  },
+  {
+    icon: (player: ScoreSaberPlayer) => {
+      return <CountryFlag country={player.country.toLowerCase()} size={15} />;
+    },
+    render: (player: ScoreSaberPlayer) => {
+      return <p>#{formatNumberWithCommas(player.countryRank)}</p>;
+    },
+  },
+  {
+    render: (player: ScoreSaberPlayer) => {
+      return <p className="text-pp">{formatNumberWithCommas(player.pp)}pp</p>;
+    },
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerHeader({ player }: Props) {
+  return (
+    <Card>
+      <div className="flex gap-3 flex-col items-center text-center sm:flex-row sm:items-start sm:text-start relative select-none">
+        <Avatar className="w-32 h-32 pointer-events-none">
+          <AvatarImage fetchPriority="high" src={player.profilePicture} />
+        </Avatar>
+        <div>
+          <p className="font-bold text-2xl">{player.name}</p>
+          <div className="flex gap-2">
+            {playerSubNames.map((subName, index) => {
+              return (
+                <PlayerDataPoint icon={subName.icon && subName.icon(player)} key={index}>
+                  {subName.render(player)}
+                </PlayerDataPoint>
+              );
+            })}
+          </div>
+          <div className="absolute top-0 right-0">
+            <ClaimProfile playerId={player.id} />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

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

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
+import { Line } from "react-chartjs-2";
+import Card from "../card";
+
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+export const options: any = {
+  maintainAspectRatio: false,
+  aspectRatio: 1,
+  interaction: {
+    mode: "index",
+    intersect: false,
+  },
+  scales: {
+    y: {
+      ticks: {
+        autoSkip: true,
+        maxTicksLimit: 8,
+        stepSize: 1,
+      },
+      grid: {
+        // gray grid lines
+        color: "#252525",
+      },
+      reverse: true,
+    },
+    x: {
+      ticks: {
+        autoSkip: true,
+      },
+      grid: {
+        // gray grid lines
+        color: "#252525",
+      },
+    },
+  },
+  elements: {
+    point: {
+      radius: 0,
+    },
+  },
+  plugins: {
+    legend: {
+      position: "top" as const,
+      labels: {
+        color: "white",
+      },
+    },
+    title: {
+      display: false,
+    },
+    tooltip: {
+      callbacks: {
+        label(context: any) {
+          switch (context.dataset.label) {
+            case "Rank": {
+              return `Rank #${formatNumberWithCommas(Number(context.parsed.y))}`;
+            }
+          }
+        },
+      },
+    },
+  },
+};
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerRankChart({ player }: Props) {
+  const playerRankHistory = player.histories.split(",").map((value) => {
+    return parseInt(value);
+  });
+  playerRankHistory.push(player.rank);
+
+  const labels = [];
+  for (let i = playerRankHistory.length; i > 0; i--) {
+    let label = `${i} days ago`;
+    if (i === 1) {
+      label = "now";
+    }
+    if (i === 2) {
+      label = "yesterday";
+    }
+    labels.push(label);
+  }
+
+  const data = {
+    labels,
+    datasets: [
+      {
+        lineTension: 0.5,
+        data: playerRankHistory,
+        label: "Rank",
+        borderColor: "#c084fc",
+        fill: false,
+        color: "#fff",
+      },
+    ],
+  };
+
+  return (
+    <Card className="h-96">
+      <Line options={options} data={data} />
+    </Card>
+  );
+}

src/components/player/player-scores.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { scoresaberFetcher } from "@/common/data-fetcher/impl/scoresaber";
+import { ScoreSort } from "@/common/data-fetcher/sort";
+import ScoreSaberPlayer from "@/common/data-fetcher/types/scoresaber/scoresaber-player";
+import ScoreSaberPlayerScoresPage from "@/common/data-fetcher/types/scoresaber/scoresaber-player-scores-page";
+import { capitalizeFirstLetter } from "@/common/string-utils";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import { Button } from "../ui/button";
+import Score from "./score/score";
+
+type Props = {
+  player: ScoreSaberPlayer;
+  sort: ScoreSort;
+  page: number;
+};
+
+export default function PlayerScores({ player, sort, page }: Props) {
+  const { width } = useWindowDimensions();
+  const [currentSort, setCurrentSort] = useState(sort);
+  const [currentPage, setCurrentPage] = useState(page);
+  const [previousScores, setPreviousScores] = useState<ScoreSaberPlayerScoresPage | undefined>();
+
+  const { data, isError, refetch } = useQuery({
+    queryKey: ["playerScores", player.id, currentSort, currentPage],
+    queryFn: () => scoresaberFetcher.lookupPlayerScores(player.id, currentSort, currentPage),
+  });
+
+  useEffect(() => {
+    if (data) {
+      setPreviousScores(data);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    // Update URL and refetch data when currentSort or currentPage changes
+    const newUrl = `/player/${player.id}/${currentSort}/${currentPage}`;
+    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+    refetch();
+  }, [currentSort, currentPage, refetch, player.id]);
+
+  /**
+   * Updates the current sort and resets the page to 1
+   */
+  function handleSortChange(newSort: ScoreSort) {
+    if (newSort !== currentSort) {
+      setCurrentSort(newSort);
+      setCurrentPage(1); // Reset the page
+    }
+  }
+
+  if (previousScores === undefined) {
+    return null;
+  }
+
+  if (isError) {
+    return (
+      <Card className="gap-2">
+        <p>Oopsies!</p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="flex gap-4">
+      <div className="flex items-center flex-row w-full gap-2 justify-center">
+        {Object.keys(ScoreSort).map((sort, index) => (
+          <Button
+            variant={sort == currentSort ? "default" : "outline"}
+            key={index}
+            onClick={() => handleSortChange(sort as ScoreSort)}
+          >
+            {capitalizeFirstLetter(sort)}
+          </Button>
+        ))}
+      </div>
+
+      <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+        {previousScores.playerScores.map((playerScore, index) => (
+          <Score key={index} playerScore={playerScore} />
+        ))}
+      </div>
+
+      <Pagination
+        mobilePagination={width < 768}
+        page={currentPage}
+        totalPages={Math.ceil(previousScores.metadata.total / previousScores.metadata.itemsPerPage)}
+        onPageChange={(newPage) => {
+          setCurrentPage(newPage);
+        }}
+      />
+    </Card>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip";
+
+type Props = {
+  /**
+   * The button content.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The tooltip content.
+   */
+  tooltip?: React.ReactNode;
+
+  /**
+   * Callback for when the button is clicked.
+   */
+  onClick: () => void;
+};
+
+export default function ScoreButton({ children, tooltip, onClick }: Props) {
+  const button = (
+    <button
+      className="bg-accent rounded-md flex justify-center items-center p-1 w-[28px] h-[28px] hover:brightness-75 transform-gpu transition-all"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return button;
+}

src/components/player/score/score.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { beatsaverFetcher } from "@/common/data-fetcher/impl/beatsaver";
+import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { songNameToYouTubeLink } from "@/common/song-utils";
+import { timeAgo } from "@/common/time-utils";
+import YouTubeLogo from "@/components/logos/youtube-logo";
+import { useToast } from "@/hooks/use-toast";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import BeatSaverLogo from "../../logos/beatsaver-logo";
+import ScoreButton from "./score-button";
+
+type Props = {
+  /**
+   * The score to display.
+   */
+  playerScore: ScoreSaberPlayerScore;
+};
+
+export default function Score({ playerScore }: Props) {
+  const { score, leaderboard } = playerScore;
+  const { toast } = useToast();
+  const [bsr, setBsr] = useState<string | undefined>();
+
+  useEffect(() => {
+    (async () => {
+      const bsrFound = await beatsaverFetcher.getMapBsr(leaderboard.songHash);
+      setBsr(bsrFound);
+    })();
+  }, [playerScore]);
+
+  return (
+    <div className="grid gap-2 md:gap-0 pb-2 pt-2 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] md:grid-cols-[0.85fr_5fr_1fr_1.2fr]">
+      <div className="flex w-full flex-row justify-between items-center md:w-[125px] md:justify-center md:flex-col">
+        <div className="flex gap-1 items-center">
+          <GlobeAmericasIcon className="w-5 h-5" />
+          <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
+        </div>
+        <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
+      </div>
+      <div className="flex gap-3">
+        <Image
+          unoptimized
+          src={leaderboard.coverImage}
+          width={64}
+          height={64}
+          alt="Song Artwork"
+          className="rounded-md"
+        />
+        <div className="flex">
+          <div className="flex flex-col">
+            <p className="text-pp text-ellipsis">{leaderboard.songName}</p>
+            <p className="text-sm text-gray-400 text-ellipsis">{leaderboard.songAuthorName}</p>
+            <p className="text-sm text-ellipsis">{leaderboard.levelAuthorName}</p>
+          </div>
+        </div>
+      </div>
+      <div className="hidden md:flex flex-row flex-wrap gap-1 justify-end">
+        {bsr != undefined && (
+          <>
+            {/* Copy BSR */}
+            <ScoreButton
+              onClick={() => {
+                toast({
+                  title: "Copied!",
+                  description: `Copied "!bsr ${bsr}" to your clipboard!`,
+                });
+              }}
+              tooltip={<p>Click to copy the bsr code</p>}
+            >
+              <p>!</p>
+            </ScoreButton>
+
+            {/* Open map in BeatSaver */}
+            <ScoreButton
+              onClick={() => {
+                window.open(`https://beatsaver.com/maps/${bsr}`, "_blank");
+              }}
+              tooltip={<p>Click to open the map</p>}
+            >
+              <BeatSaverLogo />
+            </ScoreButton>
+          </>
+        )}
+
+        {/* Open song in YouTube */}
+        <ScoreButton
+          onClick={() => {
+            window.open(
+              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+              "_blank"
+            );
+          }}
+          tooltip={<p>Click to open the song in YouTube</p>}
+        >
+          <YouTubeLogo />
+        </ScoreButton>
+      </div>
+
+      <div className="flex justify-end">stats stuff</div>
+    </div>
+  );
+}

src/components/providers/query-provider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const queryClient = new QueryClient();
+
+export function QueryProvider({ children }: Props) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

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

src/components/ui/avatar.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@/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, AvatarFallback, AvatarImage };

src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/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 };

src/components/ui/card.tsx

@@ -0,0 +1,41 @@
+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} />
+));
+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} />
+  )
+);
+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} />
+  )
+);
+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} />
+  )
+);
+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} />
+);
+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} />
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

src/components/ui/form.tsx

@@ -0,0 +1,138 @@
+"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 "@/common/utils";
+import { Label } from "@/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 };

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/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 };

src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+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 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 };

src/components/ui/pagination.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@/common/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+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} />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      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 pl-2.5", className)} {...props}>
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </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 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <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}>
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

src/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 "@/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 };

src/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 "@/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,
+};

src/components/ui/toaster.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useToast } from "@/hooks/use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/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>
+  );
+}

src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/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, TooltipContent, TooltipProvider, TooltipTrigger };