add tracked stats indicator

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

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { connectMongo } from "@/common/mongo";
+import { IPlayer, PlayerModel } from "@/common/schema/player-schema";
+
+export async function GET(request: NextRequest) {
+  const id = request.nextUrl.searchParams.get("id");
+  if (id == null) {
+    return NextResponse.json(
+      { error: "Unknown player. Missing: ?id=" },
+      { status: 400 },
+    );
+  }
+  await connectMongo(); // Connect to Mongo
+
+  // Fetch the player and return their statistic history
+  let foundPlayer: IPlayer | null = await PlayerModel.findById(id);
+  return NextResponse.json({
+    tracked: foundPlayer != null,
+  });
+}

src/components/player/player-header.tsx

@@ -8,6 +8,7 @@ import PlayerStats from "./player-stats";
 import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
 import Tooltip from "@/components/tooltip";
 import { ReactElement } from "react";
+import PlayerTrackedStatus from "@/components/player/player-tracked-status";
 
 /**
  * Renders the change for a stat.
@@ -114,7 +115,10 @@ export default function PlayerHeader({ player }: Props) {
         </Avatar>
         <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
           <div>
-            <p className="font-bold text-2xl">{player.name}</p>
+            <div className="flex gap-2 items-center">
+              <p className="font-bold text-2xl">{player.name}</p>
+              <PlayerTrackedStatus player={player} />
+            </div>
             <div className="flex flex-col">
               <div>
                 {player.inactive && (

src/components/player/player-tracked-status.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import ky from "ky";
+import { config } from "../../../config";
+import Tooltip from "@/components/tooltip";
+import { InformationCircleIcon } from "@heroicons/react/16/solid";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerTrackedStatus({ player }: Props) {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["playerIsBeingTracked", player.id],
+    queryFn: () =>
+      ky
+        .get<{
+          tracked: boolean;
+        }>(`${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`)
+        .json(),
+  });
+
+  if (isLoading || isError || !data?.tracked) {
+    return undefined;
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Tooltip
+        display={<p>This player is having their statistics tracked!</p>}
+        side="bottom"
+      >
+        <InformationCircleIcon className="w-6 h-6 text-neutral-200" />
+      </Tooltip>
+    </div>
+  );
+}