feat(layout): refactor problem layout to use DockView for organizing content sections

bun.lock

@@ -37,6 +37,7 @@
         "clsx": "^2.1.1",
         "devicons-react": "^1.4.0",
         "dockerode": "^4.0.4",
+        "dockview": "^4.2.1",
         "github-markdown-css": "^5.8.1",
         "lucide-react": "^0.482.0",
         "monaco-editor": "<=0.36.1",
@@ -717,6 +718,10 @@
 
     "dockerode": ["dockerode@4.0.4", "https://registry.npmmirror.com/dockerode/-/dockerode-4.0.4.tgz", { "dependencies": { "@balena/dockerignore": "^1.0.2", "@grpc/grpc-js": "^1.11.1", "@grpc/proto-loader": "^0.7.13", "docker-modem": "^5.0.6", "protobufjs": "^7.3.2", "tar-fs": "~2.0.1", "uuid": "^10.0.0" } }, "sha512-6GYP/EdzEY50HaOxTVTJ2p+mB5xDHTMJhS+UoGrVyS6VC+iQRh7kZ4FRpUYq6nziby7hPqWhOrFFUFTMUZJJ5w=="],
 
+    "dockview": ["dockview@4.2.1", "https://registry.npmmirror.com/dockview/-/dockview-4.2.1.tgz", { "dependencies": { "dockview-core": "^4.2.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-P6T4JiM5yuHa8JH0E/BuPpCv8EMLDoCXtvS169ITRRKfgi+zF98AUrnhW8F+FOXV6QS/5Dtt9ca5YxWgtcQsOQ=="],
+
+    "dockview-core": ["dockview-core@4.2.1", "https://registry.npmmirror.com/dockview-core/-/dockview-core-4.2.1.tgz", {}, "sha512-KaEOMzMdQvWB9e3iRQf9BqerB1sX43wAIhla5uGzkA+irag9wz0F5bkVZyJ5mVqJgqrQdWh+W8j94+L2wY0AmA=="],
+
     "doctrine": ["doctrine@2.1.0", "https://registry.npmmirror.com/doctrine/-/doctrine-2.1.0.tgz", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],

package.json

@@ -46,6 +46,7 @@
     "clsx": "^2.1.1",
     "devicons-react": "^1.4.0",
     "dockerode": "^4.0.4",
+    "dockview": "^4.2.1",
     "github-markdown-css": "^5.8.1",
     "lucide-react": "^0.482.0",
     "monaco-editor": "<=0.36.1",

src/app/(app)/problems/[id]/@Code/layout.tsx

@@ -0,0 +1,18 @@
+import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
+import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
+
+interface CodeLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function CodeLayout({ children }: CodeLayoutProps) {
+  return (
+    <div className="flex flex-col h-full">
+      <WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
+      <div className="relative flex-1 border-x border-muted">
+        {children}
+      </div>
+      <WorkspaceEditorFooter />
+    </div>
+  );
+}

src/app/(app)/problems/[id]/@Code/page.tsx

@@ -0,0 +1,9 @@
+import { ProblemEditor } from "@/components/problem-editor";
+
+export default function CodePage() {
+  return (
+    <div className="absolute w-full h-full">
+      <ProblemEditor />
+    </div>
+  );
+}

src/app/(app)/problems/[id]/@Description/layout.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useProblem } from "@/hooks/use-problem";
+import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
+
+interface DescriptionLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
+  const { problem } = useProblem();
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <main className="relative flex-1 border-x border-muted">
+        {children}
+      </main>
+      <ProblemDescriptionFooter title={problem.title} />
+    </div>
+  );
+}

src/app/(app)/problems/[id]/@Description/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useProblem } from "@/hooks/use-problem";
+import MdxPreview from "@/components/mdx-preview";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+export default function DescriptionPage() {
+  const { problem } = useProblem();
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <div className="absolute h-full w-full">
+      <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
+        <MdxPreview source={problem.description} className="p-4 md:p-6" />
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

src/app/(app)/problems/[id]/@Solutions/layout.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useProblem } from "@/hooks/use-problem";
+import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
+
+interface SolutionsLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function SolutionsLayout({
+  children,
+}: SolutionsLayoutProps) {
+  const { problem } = useProblem();
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="relative flex-1 border-x border-muted">
+        {children}
+      </div>
+      <ProblemSolutionFooter title={problem.title} />
+    </div>
+  );
+}

src/app/(app)/problems/[id]/@Solutions/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { notFound } from "next/navigation";
+import { useProblem } from "@/hooks/use-problem";
+import MdxPreview from "@/components/mdx-preview";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+export default function SolutionsPage() {
+  const { problem } = useProblem();
+
+  if (!problem) {
+    notFound();
+  }
+
+  return (
+    <div className="absolute h-full w-full">
+      <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
+        <MdxPreview source={problem.solution} className="p-4 md:p-6" />
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  );
+}

src/app/(app)/problems/[id]/@Submissions/page.tsx

@@ -0,0 +1,3 @@
+export default function SubmissionsPage() {
+  return <div className="h-full px-4">Submissions</div>;
+}

src/app/(app)/problems/[id]/@TestResult/page.tsx

@@ -0,0 +1,3 @@
+export default function TestResultPage() {
+  return <div className="h-full px-4">Test Result</div>;
+}

src/app/(app)/problems/[id]/@Testcase/page.tsx

@@ -0,0 +1,3 @@
+export default function TestcasePage() {
+  return <div className="h-full px-4">Testcase</div>;
+}

src/app/(app)/problems/[id]/@problem/@description/layout.tsx

@@ -1,18 +0,0 @@
-import { Suspense } from "react";
-import { Loading } from "@/components/loading";
-
-interface ProblemDescriptionLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function ProblemDescriptionLayout({
-  children,
-}: ProblemDescriptionLayoutProps) {
-  return (
-    <div className="h-full flex flex-col">
-      <Suspense fallback={<Loading />}>
-        {children}
-      </Suspense>
-    </div>
-  );
-}

src/app/(app)/problems/[id]/@problem/@description/page.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { notFound } from "next/navigation";
-import { useProblem } from "@/hooks/use-problem";
-import MdxPreview from "@/components/mdx-preview";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
-
-export default function ProblemDescriptionPage() {
-  const { problem } = useProblem();
-
-  if (!problem) {
-    notFound();
-  }
-
-  return (
-    <>
-      <div className="flex-1">
-        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
-          <MdxPreview source={problem.description} className="p-4 md:p-6" />
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </div>
-      <ProblemDescriptionFooter title={problem.title} />
-    </>
-  );
-}

src/app/(app)/problems/[id]/@problem/@solution/layout.tsx

@@ -1,18 +0,0 @@
-import { Suspense } from "react";
-import { Loading } from "@/components/loading";
-
-interface ProblemSolutionLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function ProblemSolutionLayout({
-  children,
-}: ProblemSolutionLayoutProps) {
-  return (
-    <div className="h-full flex flex-col">
-      <Suspense fallback={<Loading />}>
-        {children}
-      </Suspense>
-    </div>
-  );
-}

src/app/(app)/problems/[id]/@problem/@solution/page.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { useProblem } from "@/hooks/use-problem";
-import MdxPreview from "@/components/mdx-preview";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
-
-export default function ProblemSolutionPage() {
-  const { problem } = useProblem();
-
-  return (
-    <>
-      <div className="flex-1">
-        <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)] [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block">
-          <MdxPreview source={problem.solution} className="p-4 md:p-6" />
-          <ScrollBar orientation="horizontal" />
-        </ScrollArea>
-      </div>
-      <ProblemSolutionFooter title={problem.title} />
-    </>
-  );
-}

src/app/(app)/problems/[id]/@problem/layout.tsx

@@ -1,58 +0,0 @@
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { CircleCheckBigIcon, FileTextIcon, FlaskConicalIcon } from "lucide-react";
-
-interface ProblemLayoutProps {
-  description: React.ReactNode;
-  solution: React.ReactNode;
-  submission: React.ReactNode;
-}
-
-export default function ProblemLayout({
-  description,
-  solution,
-  submission,
-}: ProblemLayoutProps) {
-  return (
-    <Tabs defaultValue="description" className="h-full flex flex-col">
-      <ScrollArea className="h-9 flex-none bg-muted">
-        <TabsList>
-          <TabsTrigger value="description">
-            <FileTextIcon
-              className="-ms-0.5 me-1.5 opacity-60"
-              size={16}
-              aria-hidden="true"
-            />
-            Description
-          </TabsTrigger>
-          <TabsTrigger value="solution" className="group">
-            <FlaskConicalIcon
-              className="-ms-0.5 me-1.5 opacity-60"
-              size={16}
-              aria-hidden="true"
-            />
-            Solution
-          </TabsTrigger>
-          <TabsTrigger value="submission" className="group">
-            <CircleCheckBigIcon
-              className="-ms-0.5 me-1.5 opacity-60"
-              size={16}
-              aria-hidden="true"
-            />
-            Submission
-          </TabsTrigger>
-        </TabsList>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-      <TabsContent value="description" className="h-full mt-0">
-        {description}
-      </TabsContent>
-      <TabsContent value="solution" className="h-full mt-0">
-        {solution}
-      </TabsContent>
-      <TabsContent value="submission" className="h-full mt-0">
-        {submission}
-      </TabsContent>
-    </Tabs>
-  );
-}

src/app/(app)/problems/[id]/@terminal/@testcase/layout.tsx

@@ -1,20 +0,0 @@
-import { Suspense } from "react";
-import { Loading } from "@/components/loading";
-
-interface TerminalTestcaseLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function TerminalTestcaseLayout({
-  children,
-}: TerminalTestcaseLayoutProps) {
-  return (
-    <div className="h-full flex flex-col">
-      <div className="flex-1">
-        <Suspense fallback={<Loading />}>
-          {children}
-        </Suspense>
-      </div>
-    </div>
-  );
-}

src/app/(app)/problems/[id]/@terminal/@testcase/page.tsx

@@ -1,24 +0,0 @@
-import { RadioIcon } from "lucide-react";
-
-export default function TerminalTestcasePage() {
-  return (
-    <div className="h-full flex items-center justify-center">
-      <div className="flex items-center border border-muted rounded-lg p-4 shadow-lg gap-2">
-        <div
-          className="flex size-9 shrink-0 items-center justify-center rounded-full border"
-          aria-hidden="true"
-        >
-          <RadioIcon className="opacity-60" size={16} />
-        </div>
-        <div className="flex grow items-center gap-12">
-          <div className="space-y-1">
-            <p className="text-sm font-medium">Launching in v0.0.1</p>
-            <p className="text-muted-foreground text-xs">
-              Expected release date: March 16 at 6:00 PM.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/(app)/problems/[id]/@terminal/layout.tsx

@@ -1,30 +0,0 @@
-import { SquareCheckIcon } from "lucide-react";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-interface TerminalLayoutProps {
-  testcase: React.ReactNode;
-}
-
-export default function TerminalLayout({ testcase }: TerminalLayoutProps) {
-  return (
-    <Tabs defaultValue="testcase" className="h-full flex flex-col">
-      <ScrollArea className="h-9 flex-none bg-muted">
-        <TabsList>
-          <TabsTrigger value="testcase">
-            <SquareCheckIcon
-              className="-ms-0.5 me-1.5 opacity-60"
-              size={16}
-              aria-hidden="true"
-            />
-            Testcase
-          </TabsTrigger>
-        </TabsList>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-      <TabsContent value="testcase" className="h-full mt-0">
-        {testcase}
-      </TabsContent>
-    </Tabs>
-  );
-}

src/app/(app)/problems/[id]/@workspace/@editor/layout.tsx

@@ -1,18 +0,0 @@
-import { Suspense } from "react";
-import { Loading } from "@/components/loading";
-
-interface WorkspaceEditorLayoutProps {
-  children: React.ReactNode;
-}
-
-export default function WorkspaceEditorLayout({
-  children,
-}: WorkspaceEditorLayoutProps) {
-  return (
-    <div className="h-full flex flex-col">
-      <Suspense fallback={<Loading />}>
-        {children}
-      </Suspense>
-    </div>
-  );
-}

src/app/(app)/problems/[id]/@workspace/@editor/page.tsx

@@ -1,15 +0,0 @@
-import { ProblemEditor } from "@/components/problem-editor";
-import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
-import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
-
-export default function WorkspaceEditorPage() {
-  return (
-    <>
-      <WorkspaceEditorHeader />
-      <div className="flex-1">
-        <ProblemEditor />
-      </div>
-      <WorkspaceEditorFooter />
-    </>
-  );
-}

src/app/(app)/problems/[id]/@workspace/layout.tsx

@@ -1,30 +0,0 @@
-import { SquarePenIcon } from "lucide-react";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-interface WorkspaceLayoutProps {
-  editor: React.ReactNode;
-}
-
-export default function WorkspaceLayout({ editor }: WorkspaceLayoutProps) {
-  return (
-    <Tabs defaultValue="editor" className="h-full flex flex-col">
-      <ScrollArea className="h-9 flex-none bg-muted">
-        <TabsList>
-          <TabsTrigger value="editor">
-            <SquarePenIcon
-              className="-ms-0.5 me-1.5 opacity-60"
-              size={16}
-              aria-hidden="true"
-            />
-            Editor
-          </TabsTrigger>
-        </TabsList>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
-      <TabsContent value="editor" className="h-full mt-0">
-        {editor}
-      </TabsContent>
-    </Tabs>
-  );
-}

src/app/(app)/problems/[id]/layout.tsx

@@ -1,28 +1,28 @@
 import prisma from "@/lib/prisma";
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable";
 import { notFound } from "next/navigation";
+import DockView from "@/components/dockview";
 import { ProblemStoreProvider } from "@/providers/problem-store-provider";
 import { PlaygroundHeader } from "@/components/features/playground/header";
 
-interface PlaygroundLayoutProps {
+interface ProblemProps {
   params: Promise<{ id: string }>;
-  problem: React.ReactNode;
+  Description: React.ReactNode;
-  workspace: React.ReactNode;
+  Solutions: React.ReactNode;
-  terminal: React.ReactNode;
+  Submissions: React.ReactNode;
-  ai: React.ReactNode;
+  Code: React.ReactNode;
+  Testcase: React.ReactNode;
+  TestResult: React.ReactNode;
 }
 
-export default async function PlaygroundLayout({
+export default async function ProblemLayout({
   params,
-  problem,
+  Description,
-  workspace,
+  Solutions,
-  terminal,
+  Submissions,
-  ai,
+  Code,
-}: PlaygroundLayoutProps) {
+  Testcase,
+  TestResult,
+}: ProblemProps) {
   const { id } = await params;
 
   const [
@@ -45,7 +45,7 @@ export default async function PlaygroundLayout({
   const { templates, ...problemWithoutTemplates } = problemData;
 
   return (
-    <div className="h-screen flex flex-col">
+    <div className="flex flex-col h-screen">
       <ProblemStoreProvider
         problemId={id}
         problem={problemWithoutTemplates}
@@ -55,27 +55,14 @@ export default async function PlaygroundLayout({
       >
         <PlaygroundHeader />
         <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
-          <ResizablePanelGroup direction="horizontal" className="relative h-full flex">
+          <DockView
-            <ResizablePanel defaultSize={30} className="border border-muted rounded-xl min-w-9">
+            Description={Description}
-              {problem}
+            Solutions={Solutions}
-            </ResizablePanel>
+            Submissions={Submissions}
-            <ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
+            Code={Code}
-            <ResizablePanel defaultSize={40} className="min-w-9">
+            Testcase={Testcase}
-              <ResizablePanelGroup direction="vertical">
+            TestResult={TestResult}
-                <ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
+          />
-                  {workspace}
-                </ResizablePanel>
-                <ResizableHandle className="my-1 bg-transparent hover:bg-blue-500" />
-                <ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
-                  {terminal}
-                </ResizablePanel>
-              </ResizablePanelGroup>
-            </ResizablePanel>
-            <ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
-            <ResizablePanel defaultSize={30} className="border border-muted rounded-xl min-w-9">
-              {ai}
-            </ResizablePanel>
-          </ResizablePanelGroup>
         </main>
       </ProblemStoreProvider>
     </div>

src/app/actions/auth.ts

@@ -1,69 +0,0 @@
-"use server";
-
-import bcrypt from "bcrypt";
-import prisma from "@/lib/prisma";
-import { signIn } from "@/lib/auth";
-import { authSchema } from "@/lib/zod";
-import { CredentialsSignInFormValues } from "@/components/credentials-sign-in-form";
-import { CredentialsSignUpFormValues } from "@/components/credentials-sign-up-form";
-
-const saltRounds = 10;
-
-export async function signInWithCredentials(formData: CredentialsSignInFormValues) {
-  try {
-    // Parse credentials using authSchema for validation
-    const { email, password } = await authSchema.parseAsync(formData);
-
-    // Find user by email
-    const user = await prisma.user.findUnique({ where: { email } });
-
-    // Check if the user exists
-    if (!user) {
-      throw new Error("User not found.");
-    }
-
-    // Check if the user has a password
-    if (!user.password) {
-      throw new Error("Invalid credentials.");
-    }
-
-    // Check if the password matches
-    const passwordMatch = await bcrypt.compare(password, user.password);
-    if (!passwordMatch) {
-      throw new Error("Incorrect password.");
-    }
-
-    await signIn("credentials", { ...formData, redirect: false });
-    return { success: true };
-  } catch (error) {
-    return { error: error instanceof Error ? error.message : "Failed to sign in. Please try again." };
-  }
-}
-
-export async function signUpWithCredentials(formData: CredentialsSignUpFormValues) {
-  try {
-    const validatedData = await authSchema.parseAsync(formData);
-
-    // Check if user already exists
-    const existingUser = await prisma.user.findUnique({ where: { email: validatedData.email } });
-    if (existingUser) {
-      throw new Error("User already exists");
-    }
-
-    // Hash password and create user
-    const pwHash = await bcrypt.hash(validatedData.password, saltRounds);
-    const user = await prisma.user.create({
-      data: { email: validatedData.email, password: pwHash },
-    });
-
-    // Assign admin role if first user
-    const userCount = await prisma.user.count();
-    if (userCount === 1) {
-      await prisma.user.update({ where: { id: user.id }, data: { role: "ADMIN" } });
-    }
-
-    return { success: true };
-  } catch (error) {
-    return { error: error instanceof Error ? error.message : "Registration failed. Please try again." };
-  }
-}

src/app/actions/judge.ts

@@ -1,346 +0,0 @@
-"use server";
-
-import fs from "fs";
-import tar from "tar-stream";
-import Docker from "dockerode";
-import prisma from "@/lib/prisma";
-import { v4 as uuid } from "uuid";
-import { auth } from "@/lib/auth";
-import { redirect } from "next/navigation";
-import { Readable, Writable } from "stream";
-import { ExitCode, EditorLanguage, JudgeResult } from "@/generated/client";
-
-const isRemote = process.env.DOCKER_HOST_MODE === "remote";
-
-// Docker client initialization
-const docker = isRemote
-  ? new Docker({
-    protocol: process.env.DOCKER_REMOTE_PROTOCOL as "https" | "http" | "ssh" | undefined,
-    host: process.env.DOCKER_REMOTE_HOST,
-    port: process.env.DOCKER_REMOTE_PORT,
-    ca: fs.readFileSync(process.env.DOCKER_REMOTE_CA_PATH || "/certs/ca.pem"),
-    cert: fs.readFileSync(process.env.DOCKER_REMOTE_CERT_PATH || "/certs/cert.pem"),
-    key: fs.readFileSync(process.env.DOCKER_REMOTE_KEY_PATH || "/certs/key.pem"),
-  })
-  : new Docker({ socketPath: "/var/run/docker.sock" });
-
-// Prepare Docker image environment
-async function prepareEnvironment(image: string, tag: string) {
-  const reference = `${image}:${tag}`;
-  const filters = { reference: [reference] };
-  const images = await docker.listImages({ filters });
-  if (images.length === 0) await docker.pull(reference);
-}
-
-// Create Docker container with keep-alive
-async function createContainer(
-  image: string,
-  tag: string,
-  workingDir: string,
-  memoryLimit?: number
-) {
-  const container = await docker.createContainer({
-    Image: `${image}:${tag}`,
-    Cmd: ["tail", "-f", "/dev/null"], // Keep container alive
-    WorkingDir: workingDir,
-    HostConfig: {
-      Memory: memoryLimit ? memoryLimit * 1024 * 1024 : undefined,
-      MemorySwap: memoryLimit ? memoryLimit * 1024 * 1024 : undefined,
-    },
-    NetworkDisabled: true,
-  });
-
-  await container.start();
-  return container;
-}
-
-// Create tar stream for code submission
-function createTarStream(file: string, value: string) {
-  const pack = tar.pack();
-  pack.entry({ name: file }, value);
-  pack.finalize();
-  return Readable.from(pack);
-}
-
-export async function judge(
-  language: EditorLanguage,
-  value: string,
-): Promise<JudgeResult> {
-  const session = await auth();
-  if (!session) redirect("/sign-in");
-
-  let container: Docker.Container | null = null;
-
-  try {
-    const config = await prisma.editorLanguageConfig.findUnique({
-      where: { language },
-      include: {
-        dockerConfig: true,
-      },
-    });
-
-    if (!config || !config.dockerConfig) {
-      return {
-        id: uuid(),
-        output: "Configuration Error: Missing editor or docker configuration",
-        exitCode: ExitCode.SE,
-        executionTime: null,
-        memoryUsage: null,
-      };
-    }
-
-    const {
-      image,
-      tag,
-      workingDir,
-      memoryLimit,
-      timeLimit,
-      compileOutputLimit,
-      runOutputLimit,
-    } = config.dockerConfig;
-    const { fileName, fileExtension } = config;
-    const file = `${fileName}.${fileExtension}`;
-
-    // Prepare the environment and create a container
-    await prepareEnvironment(image, tag);
-    container = await createContainer(image, tag, workingDir, memoryLimit);
-
-    // Upload code to the container
-    const tarStream = createTarStream(file, value);
-    await container.putArchive(tarStream, { path: workingDir });
-
-    // Compile the code
-    const compileResult = await compile(container, file, fileName, compileOutputLimit);
-    if (compileResult.exitCode === ExitCode.CE) {
-      return compileResult;
-    }
-
-    // Run the code
-    const runResult = await run(container, fileName, timeLimit, runOutputLimit);
-    return runResult;
-  } catch (error) {
-    console.error(error);
-    return {
-      id: uuid(),
-      output: "System Error",
-      exitCode: ExitCode.SE,
-      executionTime: null,
-      memoryUsage: null,
-    };
-  } finally {
-    if (container) {
-      await container.kill();
-      await container.remove();
-    }
-  }
-}
-
-async function compile(
-  container: Docker.Container,
-  file: string,
-  fileName: string,
-  maxOutput: number = 1 * 1024 * 1024
-): Promise<JudgeResult> {
-  const compileExec = await container.exec({
-    Cmd: ["gcc", "-O2", file, "-o", fileName],
-    AttachStdout: true,
-    AttachStderr: true,
-  });
-
-  return new Promise<JudgeResult>((resolve, reject) => {
-    compileExec.start({}, (error, stream) => {
-      if (error || !stream) {
-        return reject({ output: "System Error", exitCode: ExitCode.SE });
-      }
-
-      const stdoutChunks: string[] = [];
-      let stdoutLength = 0;
-      const stdoutStream = new Writable({
-        write(chunk, _encoding, callback) {
-          let text = chunk.toString();
-          if (stdoutLength + text.length > maxOutput) {
-            text = text.substring(0, maxOutput - stdoutLength);
-            stdoutChunks.push(text);
-            stdoutLength = maxOutput;
-            callback();
-            return;
-          }
-          stdoutChunks.push(text);
-          stdoutLength += text.length;
-          callback();
-        },
-      });
-
-      const stderrChunks: string[] = [];
-      let stderrLength = 0;
-      const stderrStream = new Writable({
-        write(chunk, _encoding, callback) {
-          let text = chunk.toString();
-          if (stderrLength + text.length > maxOutput) {
-            text = text.substring(0, maxOutput - stderrLength);
-            stderrChunks.push(text);
-            stderrLength = maxOutput;
-            callback();
-            return;
-          }
-          stderrChunks.push(text);
-          stderrLength += text.length;
-          callback();
-        },
-      });
-
-      docker.modem.demuxStream(stream, stdoutStream, stderrStream);
-
-      stream.on("end", async () => {
-        const stdout = stdoutChunks.join("");
-        const stderr = stderrChunks.join("");
-        const exitCode = (await compileExec.inspect()).ExitCode;
-
-        let result: JudgeResult;
-
-        if (exitCode !== 0 || stderr) {
-          result = {
-            id: uuid(),
-            output: stderr || "Compilation Error",
-            exitCode: ExitCode.CE,
-            executionTime: null,
-            memoryUsage: null,
-          };
-        } else {
-          result = {
-            id: uuid(),
-            output: stdout,
-            exitCode: ExitCode.CS,
-            executionTime: null,
-            memoryUsage: null,
-          };
-        }
-
-        resolve(result);
-      });
-
-      stream.on("error", () => {
-        reject({ output: "System Error", exitCode: ExitCode.SE });
-      });
-    });
-  });
-}
-
-// Run code and implement timeout
-async function run(
-  container: Docker.Container,
-  fileName: string,
-  timeLimit: number = 1000,
-  maxOutput: number = 1 * 1024 * 1024,
-): Promise<JudgeResult> {
-  const runExec = await container.exec({
-    Cmd: [`./${fileName}`],
-    AttachStdout: true,
-    AttachStderr: true,
-    AttachStdin: true,
-  });
-
-  return new Promise<JudgeResult>((resolve, reject) => {
-    const stdoutChunks: string[] = [];
-    let stdoutLength = 0;
-    const stdoutStream = new Writable({
-      write(chunk, _encoding, callback) {
-        let text = chunk.toString();
-        if (stdoutLength + text.length > maxOutput) {
-          text = text.substring(0, maxOutput - stdoutLength);
-          stdoutChunks.push(text);
-          stdoutLength = maxOutput;
-          callback();
-          return;
-        }
-        stdoutChunks.push(text);
-        stdoutLength += text.length;
-        callback();
-      },
-    });
-
-    const stderrChunks: string[] = [];
-    let stderrLength = 0;
-    const stderrStream = new Writable({
-      write(chunk, _encoding, callback) {
-        let text = chunk.toString();
-        if (stderrLength + text.length > maxOutput) {
-          text = text.substring(0, maxOutput - stderrLength);
-          stderrChunks.push(text);
-          stderrLength = maxOutput;
-          callback();
-          return;
-        }
-        stderrChunks.push(text);
-        stderrLength += text.length;
-        callback();
-      },
-    });
-
-    // Start the exec stream
-    runExec.start({ hijack: true }, (error, stream) => {
-      if (error || !stream) {
-        return reject({ output: "System Error", exitCode: ExitCode.SE });
-      }
-
-      stream.write("[2,7,11,15]\n9\n[3,2,4]\n6\n[3,3]\n6");
-      stream.end();
-
-      docker.modem.demuxStream(stream, stdoutStream, stderrStream);
-
-      // Timeout mechanism
-      const timeoutId = setTimeout(async () => {
-        resolve({
-          id: uuid(),
-          output: "Time Limit Exceeded",
-          exitCode: ExitCode.TLE,
-          executionTime: null,
-          memoryUsage: null,
-        });
-      }, timeLimit);
-
-      stream.on("end", async () => {
-        clearTimeout(timeoutId); // Clear the timeout if the program finishes before the time limit
-        const stdout = stdoutChunks.join("");
-        const stderr = stderrChunks.join("");
-        const exitCode = (await runExec.inspect()).ExitCode;
-
-        let result: JudgeResult;
-
-        // Exit code 0 means successful execution
-        if (exitCode === 0) {
-          result = {
-            id: uuid(),
-            output: stdout,
-            exitCode: ExitCode.AC,
-            executionTime: null,
-            memoryUsage: null,
-          };
-        } else if (exitCode === 137) {
-          result = {
-            id: uuid(),
-            output: stderr || "Memory Limit Exceeded",
-            exitCode: ExitCode.MLE,
-            executionTime: null,
-            memoryUsage: null,
-          };
-        } else {
-          result = {
-            id: uuid(),
-            output: stderr || "Runtime Error",
-            exitCode: ExitCode.RE,
-            executionTime: null,
-            memoryUsage: null,
-          };
-        }
-
-        resolve(result);
-      });
-
-      stream.on("error", () => {
-        clearTimeout(timeoutId); // Clear timeout in case of error
-        reject({ output: "System Error", exitCode: ExitCode.SE });
-      });
-    });
-  });
-}

src/app/actions/language-server.ts

@@ -1,29 +0,0 @@
-"use server";
-
-import prisma from "@/lib/prisma";
-import { EditorLanguage } from "@/generated/client";
-import { SettingsLanguageServerFormValues } from "@/app/(app)/dashboard/@admin/settings/language-server/form";
-
-export const getLanguageServerConfig = async (language: EditorLanguage) => {
-  return await prisma.languageServerConfig.findUnique({
-    where: { language },
-  });
-};
-
-export const handleLanguageServerConfigSubmit = async (
-  language: EditorLanguage,
-  data: SettingsLanguageServerFormValues
-) => {
-  const existing = await getLanguageServerConfig(language);
-
-  if (existing) {
-    await prisma.languageServerConfig.update({
-      where: { language },
-      data,
-    });
-  } else {
-    await prisma.languageServerConfig.create({
-      data: { ...data, language },
-    });
-  }
-};

src/components/dockview.tsx

@@ -43,7 +43,7 @@ const DefaultTab = ({ params }: IDockviewPanelHeaderProps<{ title: string }>) =>
   const Icon = PanelIcons[title];
 
   return (
-    <div className="flex items-center text-sm font-medium">
+    <div className="flex items-center px-1 text-sm font-medium">
       {Icon && (
         <Icon
           className="-ms-0.5 me-1.5 opacity-60"

src/components/features/playground/workspace/editor/components/header.tsx

@@ -18,7 +18,7 @@ export function WorkspaceEditorHeader({
   return (
     <header
       {...props}
-      className={cn("h-8 flex flex-none items-center px-2 border-b", className)}
+      className={cn("h-8 flex flex-none items-center px-2", className)}
     >
       <div className="w-full flex items-center justify-between">
         <div className="flex flex-nowrap items-center">

src/components/loading.tsx

@@ -12,7 +12,7 @@ export function Loading({
   ...props
 }: LoadingProps) {
   return (
-    <div className={cn("h-full w-full p-2", className)} {...props}>
+    <div className={cn("h-full w-full p-2 bg-background", className)} {...props}>
       <Skeleton className={cn("h-full w-full rounded-3xl", skeletonClassName)} />
     </div>
   );

src/components/problem-editor.tsx

@@ -137,7 +137,7 @@ export function ProblemEditor() {
       onValidate={handleEditorValidation}
       options={DefaultEditorOptionConfig}
       loading={<Loading />}
-      className="h-full w-full py-2"
+      className="h-full w-full"
     />
   );
 }

src/config/editor-option.ts

@@ -19,6 +19,9 @@ export const DefaultEditorOptionConfig: editor.IEditorConstructionOptions = {
   hover: {
     above: false,
   },
+  padding: {
+    top: 8,
+  },
   scrollbar: {
     horizontalSliderSize: 10,
     verticalSliderSize: 10,

src/style/mdx.css

@@ -1,49 +0,0 @@
-[data-rehype-pretty-code-figure] pre {
-  @apply px-0;
-}
-
-[data-rehype-pretty-code-figure] code {
-  @apply text-sm !leading-loose md:text-base border-0 p-0;
-}
-
-[data-rehype-pretty-code-figure] code[data-line-numbers] {
-  counter-reset: line;
-}
-
-[data-rehype-pretty-code-figure] code[data-line-numbers] > [data-line]::before {
-  counter-increment: line;
-  content: counter(line);
-  @apply mr-4 inline-block w-4 text-right text-gray-500;
-}
-
-[data-rehype-pretty-code-figure] [data-line] {
-  @apply border-l-2 border-l-transparent px-3;
-}
-
-[data-rehype-pretty-code-figure] [data-highlighted-line] {
-  background: rgba(219, 234, 254, 0.5);
-  @apply border-l-blue-400;
-}
-
-.dark [data-rehype-pretty-code-figure] [data-highlighted-line] {
-  background: rgba(200, 200, 255, 0.1);
-  @apply border-l-blue-400;
-}
-
-[data-rehype-pretty-code-figure] [data-highlighted-chars] {
-  @apply rounded bg-zinc-400/50;
-  box-shadow: 0 0 0 4px rgb(161 161 170 / 0.5);
-}
-
-.dark [data-rehype-pretty-code-figure] [data-highlighted-chars] {
-  @apply rounded bg-zinc-500/50;
-  box-shadow: 0 0 0 4px rgb(113 113 122 / 0.5);
-}
-
-[data-rehype-pretty-code-figure] [data-chars-id] {
-  @apply border-b-2 p-1 shadow-none;
-}
-
-.subheading-anchor {
-  @apply no-underline hover:underline;
-}