correct user button in editor

frontend/app/(app)/code/[id]/page.tsx

@@ -1,21 +1,28 @@
-"use client"
-
 import Navbar from "@/components/editor/navbar"
-import { useClerk } from "@clerk/nextjs"
+import { User } from "@/lib/types"
+import { currentUser } from "@clerk/nextjs"
 import dynamic from "next/dynamic"
+import { redirect } from "next/navigation"
 
 const CodeEditor = dynamic(() => import("@/components/editor"), {
   ssr: false,
 })
 
-export default function CodePage() {
-  const clerk = useClerk()
+export default async function CodePage() {
+  const user = await currentUser()
+
+  if (!user) {
+    redirect("/")
+  }
+
+  const userRes = await fetch(`http://localhost:8787/api/user?id=${user.id}`)
+  const userData = (await userRes.json()) as User
 
   return (
     <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-      <Navbar />
+      <Navbar userData={userData} />
       <div className="w-screen flex grow">
-        {clerk.loaded ? <CodeEditor /> : null}
+        <CodeEditor />
       </div>
     </div>
   )

frontend/components/dashboard/navbar/index.tsx

@@ -2,7 +2,7 @@ import Image from "next/image"
 import Link from "next/link"
 import Logo from "@/assets/logo.svg"
 import DashboardNavbarSearch from "./search"
-import DashboardUserButton from "./userButton"
+import UserButton from "../../ui/userButton"
 import { User } from "@/lib/types"
 
 export default function DashboardNavbar({ userData }: { userData: User }) {
@@ -19,7 +19,7 @@ export default function DashboardNavbar({ userData }: { userData: User }) {
       </div>
       <div className="flex items-center space-x-4">
         <DashboardNavbarSearch />
-        <DashboardUserButton userData={userData} />
+        <UserButton userData={userData} />
       </div>
     </div>
   )

frontend/components/editor/index.tsx

@@ -22,6 +22,7 @@ import {
 } from "lucide-react"
 import Tab from "../ui/tab"
 import Sidebar from "./sidebar"
+import { useClerk } from "@clerk/nextjs"
 
 export default function CodeEditor() {
   const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
@@ -52,17 +53,11 @@ export default function CodeEditor() {
     },
   ])
 
-  const handleEditorMount: OnMount = (editor, monaco) => {
-    editorRef.current = editor
+  // const handleEditorMount: OnMount = (editor, monaco) => {
+  //   editorRef.current = editor
+  // }
 
-    // import("monaco-themes/themes/Blackboard.json").then((data) => {
-    //   monaco.editor.defineTheme(
-    //     "Blackboard",
-    //     data as monaco.editor.IStandaloneThemeData
-    //   )
-    // })
-    // monaco.editor.setTheme("Blackboard")
-  }
+  const clerk = useClerk()
 
   return (
     <>
@@ -79,22 +74,24 @@ export default function CodeEditor() {
             <Tab>style.css</Tab>
           </div>
           <div className="grow w-full overflow-hidden rounded-md">
-            <Editor
-              height="100%"
-              defaultLanguage="typescript"
-              onMount={handleEditorMount}
-              options={{
-                minimap: {
-                  enabled: false,
-                },
-                padding: {
-                  bottom: 4,
-                  top: 4,
-                },
-                scrollBeyondLastLine: false,
-              }}
-              theme="vs-dark"
-            />
+            {clerk.loaded ? (
+              <Editor
+                height="100%"
+                defaultLanguage="typescript"
+                // onMount={handleEditorMount}
+                options={{
+                  minimap: {
+                    enabled: false,
+                  },
+                  padding: {
+                    bottom: 4,
+                    top: 4,
+                  },
+                  scrollBeyondLastLine: false,
+                }}
+                theme="vs-dark"
+              />
+            ) : null}
           </div>
         </ResizablePanel>
         <ResizableHandle />

frontend/components/editor/navbar/index.tsx

@@ -1,11 +1,11 @@
 import Image from "next/image"
 import Logo from "@/assets/logo.svg"
 import { Pencil } from "lucide-react"
-import { UserButton } from "@clerk/nextjs"
 import Link from "next/link"
-import { dark } from "@clerk/themes"
+import { User } from "@/lib/types"
+import UserButton from "@/components/ui/userButton"
 
-export default function Navbar() {
+export default function Navbar({ userData }: { userData: User }) {
   return (
     <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
       <div className="flex items-center space-x-4">
@@ -22,12 +22,7 @@ export default function Navbar() {
           </div>
         </div>
       </div>
-      <UserButton
-        appearance={{
-          baseTheme: dark,
-        }}
-        afterSignOutUrl="/"
-      />
+      <UserButton userData={userData} />
     </div>
   )
 }

frontend/components/ui/userButton.tsx

@@ -11,7 +11,7 @@ import {
 import { User } from "@/lib/types"
 import { LogOut, Pencil } from "lucide-react"
 
-export default function DashboardUserButton({ userData }: { userData: User }) {
+export default function UserButton({ userData }: { userData: User }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>