feat(playground-layout): integrate problem data fetching and editor configuration

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

@@ -1,19 +1,49 @@
+import prisma from "@/lib/prisma";
+import { notFound } from "next/navigation";
 import { PlaygroundHeader } from "@/components/features/playground/header";
+import { ProblemEditorProvider } from "@/providers/problem-editor-provider";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 
 interface PlaygroundLayoutProps {
+  params: Promise<{ id: string }>;
   problem: React.ReactNode;
   workspace: React.ReactNode;
   terminal: React.ReactNode;
 }
 
-export default function PlaygroundLayout({
+export default async function PlaygroundLayout({
+  params,
   problem,
   workspace,
   terminal,
 }: PlaygroundLayoutProps) {
+  const { id } = await params;
+
+  const [
+    problemData,
+    editorLanguageConfigs,
+    languageServerConfigs,
+  ] = await Promise.all([
+    prisma.problem.findUnique({
+      where: { id },
+      select: { templates: true },
+    }),
+    prisma.editorLanguageConfig.findMany(),
+    prisma.languageServerConfig.findMany(),
+  ]);
+
+  if (!problemData) {
+    return notFound();
+  }
+
   return (
     <div className="h-screen flex flex-col">
+      <ProblemEditorProvider
+        problemId={id}
+        templates={problemData.templates ?? []}
+        editorLanguageConfigs={editorLanguageConfigs}
+        languageServerConfigs={languageServerConfigs}
+      >
         <PlaygroundHeader />
         <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
           <ResizablePanelGroup direction="horizontal" className="relative h-full flex">
@@ -34,6 +64,7 @@ export default function PlaygroundLayout({
             </ResizablePanel>
           </ResizablePanelGroup>
         </main>
+      </ProblemEditorProvider>
     </div>
   );
 }