Add public profiles and cosmetic shop

app/players/[id]/page.tsx

@@ -0,0 +1,76 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ArrowLeft, Compass, MapPinned } from "lucide-react";
+import { Footer, Header } from "@/components/Shell";
+import { PlayerAvatar } from "@/components/PixelArt";
+import { Username } from "@/components/Username";
+import { getI18n } from "@/lib/i18n";
+import { publicProfile } from "@/lib/public-profile";
+
+export const dynamic = "force-dynamic";
+
+export default async function PlayerProfilePage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const profile = await publicProfile(id);
+  if (!profile) notFound();
+  const { t, formatDate, formatNumber } = await getI18n();
+
+  return (
+    <>
+      <Header />
+      <main className="section page-content public-profile-page">
+        <Link className="text-link" href="/leaderboard">
+          <ArrowLeft size={15} aria-hidden="true" /> {t("Back to leaderboard")}
+        </Link>
+        <section className="public-profile-hero">
+          <PlayerAvatar
+            id={profile.id}
+            avatarPath={profile.avatar_path}
+            effect={profile.profile_effect}
+            className="public-profile-avatar"
+          />
+          <div className="public-profile-copy">
+            <span className="eyebrow">{t("MINEGEO EXPLORER")}</span>
+            <h1>
+              <Username name={profile.display_name} appearance={profile} />
+            </h1>
+            <p className="muted">
+              {t("Exploring since {date}", {
+                date: formatDate(profile.created_at),
+              })}
+            </p>
+          </div>
+        </section>
+
+        <section className="public-profile-about" aria-labelledby="profile-about">
+          <h2 id="profile-about">{t("About this explorer")}</h2>
+          <p className="public-profile-bio">
+            {profile.bio || t("This explorer hasn’t added a description yet.")}
+          </p>
+        </section>
+
+        <section className="public-profile-stats" aria-label={t("Profile stats")}>
+          <article className="public-profile-stat">
+            <Compass size={19} aria-hidden="true" />
+            <span>{t("Completed journeys")}</span>
+            <strong>{formatNumber(profile.completedGames)}</strong>
+          </article>
+          <article className="public-profile-stat">
+            <MapPinned size={19} aria-hidden="true" />
+            <span>{t("Published maps")}</span>
+            <strong>{formatNumber(profile.publishedMaps)}</strong>
+          </article>
+        </section>
+
+        <p className="public-profile-footnote">
+          {t("Only public account details and published maps appear here.")}
+        </p>
+      </main>
+      <Footer />
+    </>
+  );
+}