feat(workspace): pass editorLanguageConfigs to LanguageSelector and WorkspaceEditorHeader

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

@@ -4,7 +4,7 @@ import WorkspaceEditorHeader from "@/components/features/playground/workspace/ed
 import WorkspaceEditorFooter from "@/components/features/playground/workspace/editor/components/footer";
 
 interface WorkspaceEditorProps {
-  params: Promise<{ id: string }>
+  params: Promise<{ id: string }>;
 }
 
 export default async function WorkspaceEditorPage({
@@ -19,20 +19,25 @@ export default async function WorkspaceEditorPage({
         select: {
           language: true,
           template: true,
-        }
-      }
-    }
+        },
+      },
+    },
   });
 
+  const editorLanguageConfigs = await prisma.editorLanguageConfig.findMany();
+
   const templates = problem?.templates ?? [];
 
   return (
     <>
-      <WorkspaceEditorHeader templates={templates} />
+      <WorkspaceEditorHeader
+        templates={templates}
+        editorLanguageConfigs={editorLanguageConfigs}
+      />
       <div className="flex-1">
         <CodeEditor problemId={id} templates={templates} />
       </div>
       <WorkspaceEditorFooter />
     </>
-  )
+  );
 }

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

@@ -1,19 +1,21 @@
 import { cn } from "@/lib/utils";
-import { EditorLanguage } from "@prisma/client";
 import CopyButton from "./copy-button";
 import RedoButton from "./redo-button";
 import UndoButton from "./undo-button";
 import ResetButton from "./reset-button";
 import FormatButton from "./format-button";
 import LanguageSelector from "./language-selector";
+import { EditorLanguage, EditorLanguageConfig } from "@prisma/client";
 
 interface WorkspaceEditorHeaderProps {
   templates: { language: EditorLanguage; template: string }[];
+  editorLanguageConfigs: EditorLanguageConfig[];
   className?: string;
 }
 
 export default function WorkspaceEditorHeader({
   templates,
+  editorLanguageConfigs,
   className,
   ...props
 }: WorkspaceEditorHeaderProps) {
@@ -24,7 +26,7 @@ export default function WorkspaceEditorHeader({
     >
       <div className="w-full flex items-center justify-between">
         <div className="flex items-center gap-x-2">
-          <LanguageSelector />
+          <LanguageSelector editorLanguageConfigs={editorLanguageConfigs} />
         </div>
         <div className="flex items-center gap-x-2">
           <ResetButton templates={templates} />

src/components/features/playground/workspace/editor/components/language-selector.tsx

@@ -8,14 +8,19 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { getPath } from "@/lib/utils";
-import { EditorLanguage } from "@prisma/client";
 import { Skeleton } from "@/components/ui/skeleton";
 import LanguageServerConfig from "@/config/language-server";
-import { EditorLanguageConfig } from "@/config/editor-language";
 import { useCodeEditorStore } from "@/store/useCodeEditorStore";
 import { EditorLanguageIcons } from "@/config/editor-language-icons";
+import { EditorLanguage, EditorLanguageConfig } from "@prisma/client";
 
-export default function LanguageSelector() {
+interface LanguageSelectorProps {
+  editorLanguageConfigs: EditorLanguageConfig[];
+}
+
+export default function LanguageSelector({
+  editorLanguageConfigs,
+}: LanguageSelectorProps) {
   const { hydrated, language, setLanguage, setPath, setLspConfig } =
     useCodeEditorStore();
 
@@ -35,13 +40,13 @@ export default function LanguageSelector() {
         <SelectValue placeholder="Select language" />
       </SelectTrigger>
       <SelectContent className="[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
-        {Object.values(EditorLanguageConfig).map((langConfig) => {
-          const Icon = EditorLanguageIcons[langConfig.id];
+        {editorLanguageConfigs.map((config) => {
+          const Icon = EditorLanguageIcons[config.language];
           return (
-            <SelectItem key={langConfig.id} value={langConfig.id}>
+            <SelectItem key={config.language} value={config.language}>
               <Icon size={16} aria-hidden="true" />
               <span className="truncate text-sm font-semibold mr-2">
-                {langConfig.label}
+                {config.label}
               </span>
             </SelectItem>
           );