Migrate problems page

package.json

@@ -61,7 +61,8 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.4",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.0-rc.2"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",

src/app/problems/_components/mobile-dropdown.tsx

@@ -0,0 +1,34 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { MenuIcon } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { DropdownMenuSeparator } from "~/components/ui/dropdown-menu";
+import { useAuthStore } from "~/providers/auth-store-provider";
+
+export function MobileDropdown() {
+  const session = useAuthStore((state) => state.session);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="h-9 w-9 sm:hidden" size="icon">
+          <MenuIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Multiplayer</DropdownMenuItem>
+        {session && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Sign Out</DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/app/problems/_components/navbar.tsx

@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { MobileDropdown } from "./mobile-dropdown";
+import { Button } from "~/components/ui/button";
+
+export function Navbar() {
+  return (
+    <nav className="mb-2 flex h-14 items-center justify-between border-b px-8">
+      <Link href="/" className="flex items-center gap-2 text-xl font-bold">
+        FEPrep
+      </Link>
+      <div className="flex items-center gap-2">
+        <Button size="sm">Sign Up</Button>
+        <MobileDropdown />
+      </div>
+    </nav>
+  );
+}

src/app/problems/page.tsx

@@ -0,0 +1,13 @@
+import { AuthStoreProvider } from "~/providers/auth-store-provider";
+import { Navbar } from "./_components/navbar";
+import { validateRequest } from "~/lib/auth/validate-request";
+
+export default async function Problems() {
+  const auth = await validateRequest();
+  return (
+    <AuthStoreProvider auth={auth}>
+      <Navbar />
+      <main className="px-8">Problems</main>
+    </AuthStoreProvider>
+  );
+}

src/providers/auth-store-provider.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, useContext, useRef } from "react";
+import { type validateRequest } from "~/lib/auth/validate-request";
+import { type AuthStore, createAuthStore } from "~/stores/auth-store";
+import { useStore } from "zustand";
+
+export type AuthStoreApi = ReturnType<typeof createAuthStore>;
+
+export const AuthStoreContext = createContext<AuthStoreApi | undefined>(
+  undefined,
+);
+
+export function AuthStoreProvider({
+  children,
+  auth,
+}: {
+  children: React.ReactNode;
+  auth: Awaited<ReturnType<typeof validateRequest>>;
+}) {
+  const storeRef = useRef<AuthStoreApi>();
+  if (!storeRef.current) {
+    storeRef.current = createAuthStore(auth);
+  }
+
+  return (
+    <AuthStoreContext.Provider value={storeRef.current}>
+      {children}
+    </AuthStoreContext.Provider>
+  );
+}
+
+export function useAuthStore<T>(selector: (state: AuthStore) => T): T {
+  const authStore = useContext(AuthStoreContext);
+  if (!authStore) {
+    throw new Error("useAuthStore must be used within an AuthStoreProvider");
+  }
+  return useStore(authStore, selector);
+}

src/stores/auth-store.ts

@@ -0,0 +1,19 @@
+import { createStore } from "zustand/vanilla";
+import { type validateRequest } from "~/lib/auth/validate-request";
+
+export type AuthState = Awaited<ReturnType<typeof validateRequest>>;
+
+export type AuthStore = AuthState;
+
+export const defaultAuthState: AuthState = {
+  user: null,
+  session: null,
+};
+
+export const createAuthStore = (
+  initialAuthState: AuthState = defaultAuthState,
+) => {
+  return createStore<AuthStore>()(() => ({
+    ...initialAuthState,
+  }));
+};