feat: port ace editor to codemirror

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/http/ResponseMeta.vue

@@ -9,38 +9,6 @@
         justify-center
       "
     >
-      <div class="flex space-x-2 pb-4">
-        <div class="flex flex-col space-y-4 items-end">
-          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.request.send_request") }}
-          </span>
-          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.show_all") }}
-          </span>
-          <!-- <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.command_menu") }}
-          </span>
-          <span class="flex flex-1 items-center">
-            {{ $t("shortcut.general.help_menu") }}
-          </span> -->
-        </div>
-        <div class="flex flex-col space-y-4">
-          <div class="flex">
-            <span class="shortcut-key">{{ getSpecialKey() }}</span>
-            <span class="shortcut-key">G</span>
-          </div>
-          <div class="flex">
-            <span class="shortcut-key">{{ getSpecialKey() }}</span>
-            <span class="shortcut-key">K</span>
-          </div>
-          <!-- <div class="flex">
-            <span class="shortcut-key">/</span>
-          </div>
-          <div class="flex">
-            <span class="shortcut-key">?</span>
-          </div> -->
-        </div>
-      </div>
       <ButtonSecondary
         :label="$t('app.documentation')"
         to="https://docs.hoppscotch.io"
@@ -102,26 +70,22 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { computed } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
-export default defineComponent({
-  props: {
-    response: {
-      type: Object,
-      default: () => null,
-    },
-  },
-  computed: {
-    statusCategory() {
-      return findStatusGroup(this.response.statusCode)
-    },
-  },
-  methods: {
-    getSpecialKey: getPlatformSpecialKey,
-  },
+const props = defineProps<{
+  response: HoppRESTResponse
+}>()
+
+const statusCategory = computed(() => {
+  if (
+    props.response.type === "loading" ||
+    props.response.type === "network_fail"
+  )
+    return ""
+  return findStatusGroup(props.response.statusCode)
 })
 </script>