feat: initial account page

apps/client/src/app/account/page.tsx

@@ -0,0 +1,24 @@
+import AccountContent from "@ai/components/account-content";
+import Footer from "@ai/components/footer";
+import Header from "@ai/components/header";
+import { authOptions } from "@ai/pages/api/auth/[...nextauth]";
+import { getServerSession } from "next-auth";
+import { redirect } from "next/navigation";
+
+export default async function Account() {
+  const session = await getServerSession(authOptions());
+
+  if (!session) {
+    redirect("/");
+  }
+
+  return (
+    <>
+      <Header session={session} />
+      <main className="relative flex min-h-[100dvh] flex-col justify-center">
+        <AccountContent session={session} />
+      </main>
+      <Footer />
+    </>
+  );
+}

apps/client/src/components/account-content.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import Image from "next/image";
+import Button from "./button";
+// import { useRef } from "react";
+// import { FiX } from "react-icons/fi";
+import { Session } from "next-auth";
+import { signOut } from "next-auth/react";
+import * as Sentry from "@sentry/nextjs";
+
+export default function AccountContent({ session }: { session: Session }) {
+  // const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const handleSignOut = () => {
+    Sentry.setUser(null);
+    signOut();
+  };
+
+  // const handleDeleteAccount = () => {
+  //   Sentry.setUser(null);
+  //   signOut();
+  // };
+
+  return (
+    <>
+      <section className="container mx-auto flex flex-col items-center justify-center gap-4 px-4">
+        <h1 className="mb-8 text-2xl">Your Account</h1>
+        {session.user.image && (
+          <Image
+            src={session.user.image}
+            alt={`${session.user.name}'s Google profile image`}
+            width={64}
+            height={64}
+            className="h-16 w-16 rounded-full shadow"
+          />
+        )}
+        <div>
+          <p>Name: {session.user.name}</p>
+          <p>Email: {session.user.email}</p>
+        </div>
+        <Button onClick={handleSignOut}>Sign Out</Button>
+        {/* TODO: finish ability to delete account */}
+        {/* <SecondaryButton onClick={() => dialogRef.current?.showModal()}>
+          Delete Account
+        </SecondaryButton> */}
+      </section>
+      {/* TODO: finish ability to delete account */}
+      {/* <dialog
+        ref={dialogRef}
+        className="relative mx-auto w-full max-w-2xl rounded-xl p-8 transition backdrop:bg-slate-900/50 open:animate-modal open:backdrop:animate-modal"
+      >
+        <form method="dialog">
+          <button className="absolute right-4 top-4 text-xl md:text-2xl">
+            <FiX />
+          </button>
+          <p className="text-2xl">
+            Are you sure you would like to delete your account?
+          </p>
+          <div className="mt-8 flex gap-2">
+            <Button>No, nevermind</Button>
+            <SecondaryButton onClick={handleDeleteAccount}>
+              Yes, delete my account
+            </SecondaryButton>
+          </div>
+        </form>
+      </dialog> */}
+    </>
+  );
+}

apps/client/src/components/menu.tsx

@@ -15,8 +15,10 @@ import {
   FiX,
   FiVolume2,
   FiVolumeX,
+  FiUser,
 } from "react-icons/fi";
 import { useStickyState } from "@ai/utils/hooks/use-sticky-state";
+import Link from "next/link";
 
 type MenuProps = {
   session: Session | null;
@@ -78,13 +80,23 @@ const Menu = ({ session, roomCode }: MenuProps) => {
             }}
             exit={{ scale: 0.9, opacity: 0 }}
           >
+            {session && (
+              <li>
+                <Link
+                  href="/account"
+                  className="flex items-center gap-4 text-sm focus-within:underline hover:underline md:text-base"
+                >
+                  <FiUser /> My Account
+                </Link>
+              </li>
+            )}
             <li>
               <button
                 onClick={handleToggleSound}
                 className="flex items-center gap-4 text-sm focus-within:underline hover:underline md:text-base"
               >
-                {soundEnabled ? "Mute" : "Enable"} Sound{" "}
                 {soundEnabled ? <FiVolumeX /> : <FiVolume2 />}
+                {soundEnabled ? "Mute" : "Enable"} Sound{" "}
               </button>
             </li>
             {session && (
@@ -93,7 +105,7 @@ const Menu = ({ session, roomCode }: MenuProps) => {
                   onClick={handleSignOutAndLeave}
                   className="flex items-center gap-4 text-sm focus-within:underline hover:underline md:text-base"
                 >
-                  Sign Out{roomCode && " and Leave Game"} <FiLogOut />
+                  <FiLogOut /> Sign Out{roomCode && " and Leave Game"}
                 </button>
               </li>
             )}