mirror of
https://github.com/massbug/judge4c.git
synced 2025-05-17 23:12:23 +00:00
feat(layout): refactor problem layout to use DockView for organizing content sections
This commit is contained in:
parent
2f1a9767f1
commit
a8e243204b
5
bun.lock
5
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=="],
|
||||
|
||||
@ -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",
|
||||
|
||||
18
src/app/(app)/problems/[id]/@Code/layout.tsx
Normal file
18
src/app/(app)/problems/[id]/@Code/layout.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
9
src/app/(app)/problems/[id]/@Code/page.tsx
Normal file
9
src/app/(app)/problems/[id]/@Code/page.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { ProblemEditor } from "@/components/problem-editor";
|
||||
|
||||
export default function CodePage() {
|
||||
return (
|
||||
<div className="absolute w-full h-full">
|
||||
<ProblemEditor />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
26
src/app/(app)/problems/[id]/@Description/layout.tsx
Normal file
26
src/app/(app)/problems/[id]/@Description/layout.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
23
src/app/(app)/problems/[id]/@Description/page.tsx
Normal file
23
src/app/(app)/problems/[id]/@Description/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
28
src/app/(app)/problems/[id]/@Solutions/layout.tsx
Normal file
28
src/app/(app)/problems/[id]/@Solutions/layout.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
23
src/app/(app)/problems/[id]/@Solutions/page.tsx
Normal file
23
src/app/(app)/problems/[id]/@Solutions/page.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
3
src/app/(app)/problems/[id]/@Submissions/page.tsx
Normal file
3
src/app/(app)/problems/[id]/@Submissions/page.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function SubmissionsPage() {
|
||||
return <div className="h-full px-4">Submissions</div>;
|
||||
}
|
||||
3
src/app/(app)/problems/[id]/@TestResult/page.tsx
Normal file
3
src/app/(app)/problems/[id]/@TestResult/page.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function TestResultPage() {
|
||||
return <div className="h-full px-4">Test Result</div>;
|
||||
}
|
||||
3
src/app/(app)/problems/[id]/@Testcase/page.tsx
Normal file
3
src/app/(app)/problems/[id]/@Testcase/page.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function TestcasePage() {
|
||||
return <div className="h-full px-4">Testcase</div>;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
workspace: React.ReactNode;
|
||||
terminal: React.ReactNode;
|
||||
ai: React.ReactNode;
|
||||
Description: React.ReactNode;
|
||||
Solutions: React.ReactNode;
|
||||
Submissions: React.ReactNode;
|
||||
Code: React.ReactNode;
|
||||
Testcase: React.ReactNode;
|
||||
TestResult: React.ReactNode;
|
||||
}
|
||||
|
||||
export default async function PlaygroundLayout({
|
||||
export default async function ProblemLayout({
|
||||
params,
|
||||
problem,
|
||||
workspace,
|
||||
terminal,
|
||||
ai,
|
||||
}: PlaygroundLayoutProps) {
|
||||
Description,
|
||||
Solutions,
|
||||
Submissions,
|
||||
Code,
|
||||
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">
|
||||
<ResizablePanel defaultSize={30} className="border border-muted rounded-xl min-w-9">
|
||||
{problem}
|
||||
</ResizablePanel>
|
||||
<ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
|
||||
<ResizablePanel defaultSize={40} className="min-w-9">
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<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>
|
||||
<DockView
|
||||
Description={Description}
|
||||
Solutions={Solutions}
|
||||
Submissions={Submissions}
|
||||
Code={Code}
|
||||
Testcase={Testcase}
|
||||
TestResult={TestResult}
|
||||
/>
|
||||
</main>
|
||||
</ProblemStoreProvider>
|
||||
</div>
|
||||
|
||||
@ -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." };
|
||||
}
|
||||
}
|
||||
@ -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 });
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -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 },
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -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"
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,6 +19,9 @@ export const DefaultEditorOptionConfig: editor.IEditorConstructionOptions = {
|
||||
hover: {
|
||||
above: false,
|
||||
},
|
||||
padding: {
|
||||
top: 8,
|
||||
},
|
||||
scrollbar: {
|
||||
horizontalSliderSize: 10,
|
||||
verticalSliderSize: 10,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user