feat(style/view): start atlas port, add config viewer

Co-authored-by: proudparrot2 <[email protected]>

package.json

@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@marsidev/react-turnstile": "^0.7.2",
+		"@monaco-editor/react": "^4.6.0",
 		"@next/bundle-analyzer": "15.0.1",
 		"@novnc/novnc": "^1.5.0",
 		"@paralleldrive/cuid2": "^2.2.2",
@@ -44,6 +45,7 @@
 		"drizzle-zod": "^0.5.1",
 		"input-otp": "^1.2.4",
 		"lucide-react": "^0.358.0",
+		"monaco-editor": "^0.52.0",
 		"next": "15.0.3-canary.5",
 		"next-auth": "5.0.0-beta.24",
 		"next-themes": "^0.3.0",

src/app/(main)/admin/config/editor.tsx

@@ -0,0 +1,13 @@
+"use client";
+import Editor from "@monaco-editor/react";
+export default function ConfigEditor({ current }: { current: string }) {
+	return (
+		<Editor
+			defaultLanguage="json"
+			className="size-[90vh]"
+			defaultValue={current}
+			theme="vs-dark"
+			defaultPath="repo://.config/config.json"
+		/>
+	);
+}

src/app/(main)/admin/config/page.tsx

@@ -0,0 +1,16 @@
+import { readFile } from "node:fs";
+import ConfigEditor from "./editor";
+
+export default async function Page() {
+	const configFile = await new Promise<Buffer>((res, rej) =>
+		readFile(`${process.cwd()}/.config/config.json`, (err, data) => {
+			if (err) rej(err);
+			res(data);
+		}),
+	);
+	return (
+		<div className="flex h-full flex-col">
+			<ConfigEditor current={configFile.toString()} />
+		</div>
+	);
+}

src/app/(main)/admin/layout.tsx

@@ -26,3 +26,4 @@ export default async function AdminLayout({ children }: { children: React.ReactN
 		</div>
 	);
 }
+export const dynamic = "force-dynamic";