feat : add profile page

app/globals.css

@@ -8,7 +8,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
+  --font-sans: var(--font-inter), var(--font-anuphan);
   --font-mono: var(--font-geist-mono);
   --font-heading: var(--font-sans);
   --color-sidebar-ring: var(--sidebar-ring);
@@ -128,4 +128,4 @@
   html {
     @apply font-sans;
   }
-}
+}

app/layout.tsx

@@ -1,11 +1,12 @@
 import type { Metadata } from "next";
-import { Geist, Anuphan } from "next/font/google";
+import { Inter, Anuphan } from "next/font/google";
 import "./globals.css";
 import { cn } from "@/lib/utils";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
+  display: "swap",
 });
 
 const anuphan = Anuphan({
@@ -79,10 +80,10 @@ export default function RootLayout({
   return (
     <html
       lang="th"
-      className={cn("h-full", "antialiased", anuphan.variable, geistSans.variable, "font-sans")}
+      className={cn("h-full", "antialiased", inter.variable, anuphan.variable, "font-sans")}
       suppressHydrationWarning
     >
-      <body className={`${anuphan.className} ${geistSans.className}`} suppressHydrationWarning>
+      <body className="font-sans" suppressHydrationWarning>
         <PageProgress />
         <ThemeProvider
           attribute="class"
@@ -91,7 +92,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
         <TooltipProvider>
-          <Toaster richColors closeButton position="bottom-right" theme="dark" toastOptions={{ className: anuphan.className }} />
+          <Toaster richColors closeButton position="bottom-right" theme="dark" toastOptions={{ className: "font-sans" }} />
           {children}
         </TooltipProvider>
         </ThemeProvider>

app/profile/page.tsx

@@ -0,0 +1,91 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getServerSession } from "next-auth";
+import { ArrowLeft } from "lucide-react";
+import { authOptions } from "@/lib/auth/auth-options";
+import { getSessionDiscordId } from "@/lib/auth/auth";
+import { getDiscordMemberProfile } from "@/lib/discord/discord";
+import { getCurrentDiscordVoiceChannels } from "@/lib/leaderboard/discord";
+import {
+  getMemberVoiceStats,
+  getMemberXpStats,
+} from "@/lib/leaderboard/database";
+import { buildLevelProgress } from "@/lib/leaderboard/level-progress";
+import { ProfileLoginCard } from "@/components/profile/profile-login-card";
+import { ProfilePassport } from "@/components/profile/profile-passport";
+import { RealtimeRefresh } from "@/components/realtime-refresh";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { Button } from "@/components/ui/button";
+
+export const dynamic = "force-dynamic";
+
+export const metadata: Metadata = {
+  title: "โปรไฟล์ของฉัน",
+  description: "ดูเลเวล XP เวลาในห้องเสียง และอันดับ Discord ของคุณใน Erika!",
+  alternates: { canonical: "/profile" },
+  robots: { index: false, follow: false },
+};
+
+async function loadVoiceStats(discordId: string) {
+  const channels = await getCurrentDiscordVoiceChannels();
+  return getMemberVoiceStats(discordId, channels.map((channel) => channel.id));
+}
+
+export default async function ProfilePage() {
+  const session = await getServerSession(authOptions);
+  const discordId = getSessionDiscordId(session);
+
+  let content = <ProfileLoginCard />;
+
+  if (session?.user && discordId) {
+    const [profileResult, xpResult, voiceResult] = await Promise.allSettled([
+      getDiscordMemberProfile(discordId),
+      getMemberXpStats(discordId),
+      loadVoiceStats(discordId),
+    ]);
+    const profile = profileResult.status === "fulfilled" ? profileResult.value : null;
+    const xpStats = xpResult.status === "fulfilled" ? xpResult.value : null;
+    const voiceStats = voiceResult.status === "fulfilled" ? voiceResult.value : null;
+
+    if (profileResult.status === "rejected") {
+      console.error("Failed to load own Discord profile", profileResult.reason);
+    }
+    if (xpResult.status === "rejected") {
+      console.error("Failed to load own XP stats", xpResult.reason);
+    }
+    if (voiceResult.status === "rejected") {
+      console.error("Failed to load own voice stats", voiceResult.reason);
+    }
+
+    content = (
+      <>
+        <RealtimeRefresh topic="leaderboards" leaderboard="profile" />
+        <ProfilePassport
+          userName={session.user.name ?? ""}
+          userImage={session.user.image ?? ""}
+          profile={profile}
+          profileUnavailable={!profile}
+          xp={xpStats ? { ...buildLevelProgress(xpStats.level, xpStats.totalXp), rank: xpStats.rank } : null}
+          voice={voiceStats}
+        />
+      </>
+    );
+  }
+
+  return (
+    <main className="relative min-h-screen overflow-hidden bg-background text-foreground">
+      <div className="relative mx-auto flex w-full max-w-5xl flex-col gap-6 px-4 py-6 sm:px-6 lg:py-10">
+        <nav aria-label="ทางลัด" className="flex items-center justify-between gap-3">
+          <Button variant="ghost" asChild>
+            <Link href="/">
+              <ArrowLeft data-icon="inline-start" />
+              กลับหน้าหลัก
+            </Link>
+          </Button>
+          <ThemeToggle />
+        </nav>
+        {content}
+      </div>
+    </main>
+  );
+}