refactor(language-selector): migrate to new location and implementation

- Remove old language selector from `src/components/features/playground/workspace/editor/components`
- Add new implementation in `src/features/problems/code/components/toolbar/controls`
- Update toolbar exports to include the new selector

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

@@ -1,41 +0,0 @@
-"use client";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Loading } from "@/components/loading";
-import { useProblem } from "@/hooks/use-problem";
-import { EditorLanguageIcons } from "@/config/editor-language-icons";
-
-export function LanguageSelector() {
-  const { hydrated, currentLang, changeLang, editorLanguageConfigs } = useProblem();
-
-  if (!hydrated) {
-    return <Loading className="h-6 w-16 p-0" skeletonClassName="rounded-2xl" />;
-  }
-
-  return (
-    <Select value={currentLang} onValueChange={changeLang}>
-      <SelectTrigger className="h-6 px-1.5 py-0.5 border-none shadow-none focus:ring-0 hover:bg-muted [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80">
-        <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">
-        {editorLanguageConfigs.map((config) => {
-          const Icon = EditorLanguageIcons[config.language];
-          return (
-            <SelectItem key={config.language} value={config.language}>
-              <Icon size={16} aria-hidden="true" />
-              <span className="truncate text-sm font-semibold mr-2">
-                {config.label}
-              </span>
-            </SelectItem>
-          );
-        })}
-      </SelectContent>
-    </Select>
-  );
-}

src/features/problems/code/components/toolbar/controls/language-selector.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Language } from "@/generated/client";
+import { LANGUAGES } from "@/config/language";
+import COriginal from "devicons-react/icons/COriginal";
+import { useProblemEditorStore } from "@/stores/problem-editor";
+import CplusplusOriginal from "devicons-react/icons/CplusplusOriginal";
+
+const getIconForLanguage = (language: Language) => {
+  switch (language) {
+    case Language.c:
+      return <COriginal size={16} aria-hidden="true" />;
+    case Language.cpp:
+      return <CplusplusOriginal size={16} aria-hidden="true" />;
+  }
+};
+
+const getLabelForLanguage = (language: Language) => {
+  switch (language) {
+    case Language.c:
+      return "C";
+    case Language.cpp:
+      return "C++";
+  }
+};
+
+export const LanguageSelector = () => {
+  const { language, setLanguage } = useProblemEditorStore();
+
+  return (
+    <Select value={language} onValueChange={setLanguage}>
+      <SelectTrigger className="h-6 px-1.5 py-0.5 border-none shadow-none focus:ring-0 hover:bg-muted [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80">
+        <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">
+        {LANGUAGES.map((language) => (
+          <SelectItem key={language} value={language}>
+            {getIconForLanguage(language)}
+            <span className="truncate text-sm font-semibold mr-2">
+              {getLabelForLanguage(language)}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};

src/features/problems/code/components/toolbar/index.ts

@@ -3,3 +3,4 @@ export * from "./actions/format-button";
 export * from "./actions/redo-button";
 export * from "./actions/reset-button";
 export * from "./actions/undo-button";
+export * from "./controls/language-selector";