refactor(problem): sync changes with backend (#78)

.changes/refactor-problem.md

@@ -0,0 +1,9 @@
+---
+"algohub": patch:refactor
+---
+
+Fully refactored the problem api to sync changes with the `algohub-server`, also:
+
+- Fixed icon sizes in markdown editor.
+- Extract supported languages from ts enum.
+- Refactored problem editor.

src/components/MarkdownEditor.vue

@@ -35,4 +35,11 @@ const themeStore = useThemeStore();
             'preview',
             'previewOnly',
         ]"></MdEditor>
-</template>
+</template>
+
+<style scoped>
+:deep(svg.md-editor-icon) {
+    width: revert-layer;
+    height: revert-layer;
+}
+</style>

src/components/MonacoEditor.vue

@@ -57,7 +57,7 @@ onMounted(async () => {
     loader.config({ monaco })
     editor.value = await loader.init().then((monaco) => monaco.editor.create(editorContainer.value, {
         value: '',
-        language: 'rust',
+        language: language.value,
         theme: themeStore.dark ? 'vs-dark' : 'vs',
         fontFamily: 'Cascadia Code, Consolas, Menlo, Monaco, "Courier New", monospace',
         inlineSuggest: {
@@ -77,12 +77,12 @@ onUnmounted(disposeEditor)
 onBeforeUnmount(disposeEditor)
 onBeforeRouteLeave(disposeEditor)
 
-const languageOptions = [
-    { name: 'Rust', value: Language.Rust },
-    { name: 'Python', value: Language.Python },
-    { name: 'C', value: Language.C },
-    { name: 'C++', value: Language.Cpp },
-]
+console.log(Language)
+console.log(Object.values(Language))
+console.log(Object.keys(Language))
+console.log(Object.entries(Language))
+
+const languageOptions = Object.entries(Language).map(([name, value]) => ({ name, value }))
 
 const onChangeLanguage = (value: SelectChangeEvent) => {
     const editor = rawEditor.value;