refactor: move Monaco Editor logic to CodeEditor component

- Moved Monaco Editor initialization and related logic from src/app/page.tsx to src/components/code-editor.tsx

src/app/page.tsx

@@ -1,90 +1,20 @@
-"use client";
-
-import {
-  toSocket,
-  WebSocketMessageReader,
-  WebSocketMessageWriter,
-} from "vscode-ws-jsonrpc";
-import { useEffect } from "react";
 import dynamic from "next/dynamic";
-import normalizeUrl from "normalize-url";
 import { Skeleton } from "@/components/ui/skeleton";
+import { ModeToggle } from "@/components/mode-toggle";
 
-const DynamicEditor = dynamic(
-  async () => {
-    await import("vscode")
-
-    const monaco = await import("monaco-editor");
-    const { loader, Editor } = await import("@monaco-editor/react");
-
-    loader.config({ monaco });
-
-    return Editor;
-  },
-  { ssr: false }
-);
+const CodeEditor = dynamic(() => import("@/components/code-editor"), {
+  loading: () => <Skeleton className="h-full w-full" />,
+});
 
 export default function Home() {
-  useEffect(() => {
-    const url = normalizeUrl("ws://localhost:4594/clangd");
-    const webSocket = new WebSocket(url);
-
-    webSocket.onopen = async () => {
-      const socket = toSocket(webSocket);
-      const reader = new WebSocketMessageReader(socket);
-      const writer = new WebSocketMessageWriter(socket);
-
-      const { MonacoLanguageClient } = await import("monaco-languageclient");
-      const { ErrorAction, CloseAction } = await import(
-        "vscode-languageclient"
-      );
-
-      const languageClient = new MonacoLanguageClient({
-        name: "C Language Client",
-        clientOptions: {
-          documentSelector: ["c"],
-          errorHandler: {
-            error: () => ({ action: ErrorAction.Continue }),
-            closed: () => ({ action: CloseAction.DoNotRestart }),
-          },
-        },
-        connectionProvider: {
-          get: () => Promise.resolve({ reader, writer }),
-        },
-      });
-
-      languageClient.start();
-      reader.onClose(() => languageClient.stop());
-    };
-
-    webSocket.onerror = (event) => {
-      console.error("WebSocket error observed:", event);
-    };
-
-    webSocket.onclose = (event) => {
-      console.log("WebSocket closed:", event);
-    };
-
-    return () => {
-      webSocket.close();
-    };
-  }, []);
-
   return (
     <div className="h-screen flex flex-col">
-      <DynamicEditor
-        theme="vs-dark"
-        defaultLanguage="c"
-        defaultValue="# include<stdio.h>"
-        path="file:///main.c"
-        onValidate={(markers) => {
-          markers.forEach((marker) =>
-            console.log("onValidate:", marker.message)
-          );
-        }}
-        options={{ automaticLayout: true }}
-        loading={<Skeleton className="h-full w-full p-4" />}
-      />
+      <header className="h-16 flex items-center justify-end px-4 border-b">
+        <ModeToggle />
+      </header>
+      <div className="flex-1">
+        <CodeEditor />
+      </div>
     </div>
   );
 }