Proper presentation page for the new API

Author: ipeterov

aiarena/frontend-spa/package-lock.json

@@ -40,6 +40,7 @@
     "rehype-sanitize": "^6.0.0",
     "relay-compiler": "^18.2.0",
     "relay-runtime": "^18.2.0",
+    "shiki": "^4.1.0",
     "tailwindcss": "^4.1.4",
     "vite-plugin-relay": "^2.1.0"
   },

aiarena/frontend-spa/package.json

@@ -20,6 +20,7 @@ import BotPage from "./_pages/Rework/Bot/Page";
 import RoundsPage from "./_pages/Rework/_Round/Page";
 import AuthorPage from "./_pages/Rework/_Author/Page";
 import MatchPage from "./_pages/Rework/_Match/Page";
+import DevelopersPage from "./_pages/Developers/Page";
 import Maps from "./_pages/Rework/CompetitionParticipation/Pages/Maps";
 import EloGraph from "./_pages/Rework/CompetitionParticipation/Pages/EloGraph";
 import WinsByRace from "./_pages/Rework/CompetitionParticipation/Pages/WinsByRace";
@@ -47,6 +48,7 @@ export default function App() {
         <Route path="bots" element={<BotsPage />} />
         <Route path="bots/:botId" element={<BotPage />} />
         <Route path="matches/:matchId" element={<MatchPage />} />
+        <Route path="developers" element={<DevelopersPage />} />
         <Route
           path="competitions/stats/:id"
           element={<CompetitionParticipationSideNav />}

aiarena/frontend-spa/src/App.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import {
+  ClipboardDocumentIcon,
+  EyeIcon,
+  EyeSlashIcon,
+} from "@heroicons/react/20/solid";
+import { useSnackbar } from "notistack";
+
+interface TokenRevealProps {
+  token: string | null | undefined;
+  className?: string;
+}
+
+const MASK = "•••••••••••••••••••••••••••••••••••••••";
+
+export default function TokenReveal({ token, className }: TokenRevealProps) {
+  const { enqueueSnackbar } = useSnackbar();
+  const [visible, setVisible] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(token ?? "");
+    enqueueSnackbar("API token copied to clipboard!");
+  };
+
+  return (
+    <div
+      className={
+        "flex items-center gap-2 bg-black text-gray-300 px-2 py-1 rounded font-mono text-xs break-words " +
+        (className ?? "")
+      }
+    >
+      <span className="flex-1 truncate">{visible ? token : MASK}</span>
+
+      <button
+        onClick={() => setVisible(!visible)}
+        className="text-white hover:text-gray-400 p-1"
+        title={visible ? "Hide token" : "Show token"}
+      >
+        {visible ? (
+          <EyeSlashIcon className="h-4 w-4" />
+        ) : (
+          <EyeIcon className="h-4 w-4" />
+        )}
+      </button>
+
+      <button
+        onClick={handleCopy}
+        className="text-white hover:text-gray-400 p-1"
+        title="Copy token"
+      >
+        <ClipboardDocumentIcon className="h-4 w-4" />
+      </button>
+    </div>
+  );
+}