chore: minor ui improvements

2022-11-01 00:42:35 +05:30
parent eb2145c7da
commit c018b639ad
19 changed files with 297 additions and 132 deletions
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -368,7 +368,7 @@
    },
    "copy_link": "Copy link",
    "duration": "Duration",
-    "enter_curl": "Enter cURL",
+    "enter_curl": "Enter cURL command",
    "generate_code": "Generate code",
    "generated_code": "Generated code",
    "header_list": "Header List",
--- a/packages/hoppscotch-app/src/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/src/components/app/Interceptor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col space-y-4">
+  <div class="flex flex-col space-y-2">
    <div class="flex flex-col px-4 pt-2">
      <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
        {{ t("settings.interceptor") }}
--- a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
@@ -50,6 +50,13 @@
              :icon="IconTrash2"
              @click="clearGQLQuery()"
            />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('state.linewrap')"
+              :class="{ '!text-accent': linewrapEnabledQuery }"
+              :icon="IconWrapText"
+              @click.prevent="linewrapEnabledQuery = !linewrapEnabledQuery"
+            />
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.prettify')"
@@ -91,6 +98,15 @@
              :icon="IconTrash2"
              @click="clearGQLVariables()"
            />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('state.linewrap')"
+              :class="{ '!text-accent': linewrapEnabledVariable }"
+              :icon="IconWrapText"
+              @click.prevent="
+                linewrapEnabledVariable = !linewrapEnabledVariable
+              "
+            />
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.prettify')"
@@ -132,6 +148,13 @@
              :icon="IconTrash2"
              @click="clearContent()"
            />
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('state.linewrap')"
+              :class="{ '!text-accent': linewrapEnabled }"
+              :icon="IconWrapText"
+              @click.prevent="linewrapEnabled = !linewrapEnabled"
+            />
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('state.bulk_mode')"
@@ -316,6 +339,7 @@ import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
 import IconInfo from "~icons/lucide/info"
 import IconWand2 from "~icons/lucide/wand-2"
+import IconWrapText from "~icons/lucide/wrap-text"
 import { Ref, computed, reactive, ref, watch } from "vue"
 import * as gql from "graphql"
 import * as E from "fp-ts/Either"
@@ -388,18 +412,24 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
 const bulkEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)

 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)

-useCodemirror(bulkEditor, bulkHeaders, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    placeholder: `${t("state.bulk_mode_placeholder")}`,
-  },
-  linter: null,
-  completer: null,
-  environmentHighlights: false,
-})
+useCodemirror(
+  bulkEditor,
+  bulkHeaders,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)

 // The functional headers list (the headers actually in the system)
 const headers = useStream(gqlHeaders$, [], setGQLHeaders) as Ref<GQLHeader[]>
@@ -602,6 +632,7 @@ const activeGQLHeadersCount = computed(
 )

 const variableEditor = ref<any | null>(null)
+const linewrapEnabledVariable = ref(true)

 useCodemirror(
  variableEditor,
@@ -610,6 +641,7 @@ useCodemirror(
    extendedEditorConfig: {
      mode: "application/ld+json",
      placeholder: `${t("request.variables")}`,
+      lineWrapping: linewrapEnabledVariable,
    },
    linter: computed(() =>
      variableString.value.length > 0 ? jsonLinter : null
@@ -621,16 +653,22 @@ useCodemirror(

 const queryEditor = ref<any | null>(null)
 const schema = useReadonlyStream(props.conn.schema$, null, "noclone")
+const linewrapEnabledQuery = ref(true)

-useCodemirror(queryEditor, gqlQueryString, {
-  extendedEditorConfig: {
-    mode: "graphql",
-    placeholder: `${t("request.query")}`,
-  },
-  linter: createGQLQueryLinter(schema),
-  completer: queryCompleter(schema),
-  environmentHighlights: false,
-})
+useCodemirror(
+  queryEditor,
+  gqlQueryString,
+  reactive({
+    extendedEditorConfig: {
+      mode: "graphql",
+      placeholder: `${t("request.query")}`,
+      lineWrapping: linewrapEnabledQuery,
+    },
+    linter: createGQLQueryLinter(schema),
+    completer: queryCompleter(schema),
+    environmentHighlights: false,
+  })
+)

 const copyQueryIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
  IconCopy,
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -14,7 +14,7 @@
        <label class="font-semibold text-secondaryLight">
          {{ t("response.title") }}
        </label>
-        <div class="flex">
+        <div class="flex items-center">
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
            :title="t('state.linewrap')"
@@ -47,7 +47,7 @@
      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
    >
      <div class="flex pb-4 my-4 space-x-2">
-        <div class="flex flex-col items-end text-right space-y-4">
+        <div class="flex flex-col items-end space-y-4 text-right">
          <span class="flex items-center flex-1">
            {{ t("shortcut.general.command_menu") }}
          </span>
--- a/packages/hoppscotch-app/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
@@ -74,29 +74,54 @@
            </div>
          </template>
        </tippy>
-        <div class="flex justify-between flex-1">
-          <label for="generatedCode" class="p-4">
-            {{ t("request.generated_code") }}
-          </label>
-        </div>
        <div
          v-if="errorState"
-          class="w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
+          class="w-full px-4 py-2 mt-4 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"
        >
          {{ t("error.something_went_wrong") }}
        </div>
        <div
          v-else-if="codegenType"
-          ref="generatedCode"
-          class="border rounded border-dividerLight"
-        ></div>
+          class="mt-4 border rounded border-dividerLight"
+        >
+          <div class="flex items-center justify-between pl-4">
+            <label class="font-semibold text-secondaryLight">
+              {{ t("request.generated_code") }}
+            </label>
+            <div class="flex items-center">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('state.linewrap')"
+                :class="{ '!text-accent': linewrapEnabled }"
+                :icon="IconWrapText"
+                @click.prevent="linewrapEnabled = !linewrapEnabled"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.download_file')"
+                :icon="downloadIcon"
+                @click="downloadResponse"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.copy')"
+                :icon="copyIcon"
+                @click="copyResponse"
+              />
+            </div>
+          </div>
+          <div
+            ref="generatedCode"
+            class="border-t rounded-b border-dividerLight"
+          ></div>
+        </div>
      </div>
    </template>
    <template #footer>
      <span class="flex space-x-2">
        <ButtonPrimary
          :label="`${t('action.copy')}`"
-          :icon="copyIcon"
+          :icon="copyCodeIcon"
          outline
          @click="copyRequestCode"
        />
@@ -112,7 +137,7 @@
 </template>

 <script setup lang="ts">
-import { computed, ref, watch } from "vue"
+import { computed, reactive, ref, watch } from "vue"
 import * as O from "fp-ts/Option"
 import { Environment, makeRESTRequest } from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
@@ -131,9 +156,14 @@ import {
  CodegenName,
  generateCode,
 } from "~/helpers/new-codegen"
+import {
+  useCopyResponse,
+  useDownloadResponse,
+} from "~/composables/lens-actions"

 import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
+import IconWrapText from "~icons/lucide/wrap-text"

 const t = useI18n()

@@ -151,7 +181,7 @@ const request = ref(getRESTRequest())
 const codegenType = ref<CodegenName>("shell-curl")
 const errorState = ref(false)

-const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
+const copyCodeIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
  IconCopy,
  1000
 )
@@ -195,16 +225,22 @@ const requestCode = computed(() => {
 // Template refs
 const tippyActions = ref<any | null>(null)
 const generatedCode = ref<any | null>(null)
+const linewrapEnabled = ref(true)

-useCodemirror(generatedCode, requestCode, {
-  extendedEditorConfig: {
-    mode: "text/plain",
-    readOnly: true,
-  },
-  linter: null,
-  completer: null,
-  environmentHighlights: false,
-})
+useCodemirror(
+  generatedCode,
+  requestCode,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/plain",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)

 watch(
  () => props.show,
@@ -219,7 +255,7 @@ const hideModal = () => emit("hide-modal")

 const copyRequestCode = () => {
  copyToClipboard(requestCode.value)
-  copyIcon.value = IconCheck
+  copyCodeIcon.value = IconCheck
  toast.success(`${t("state.copied_to_clipboard")}`)
 }

@@ -232,4 +268,7 @@ const filteredCodegenDefinitions = computed(() => {
    )
  )
 })
+
+const { copyIcon, copyResponse } = useCopyResponse(requestCode)
+const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
 </script>
--- a/packages/hoppscotch-app/src/components/http/Headers.vue
+++ b/packages/hoppscotch-app/src/components/http/Headers.vue
@@ -20,6 +20,14 @@
          :icon="IconTrash2"
          @click="clearContent()"
        />
+        <ButtonSecondary
+          v-if="bulkMode"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          :icon="IconWrapText"
+          @click.prevent="linewrapEnabled = !linewrapEnabled"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.bulk_mode')"
@@ -230,8 +238,9 @@ import IconLock from "~icons/lucide/lock"
 import IconEye from "~icons/lucide/eye"
 import IconEyeOff from "~icons/lucide/eye-off"
 import IconArrowUpRight from "~icons/lucide/arrow-up-right"
+import IconWrapText from "~icons/lucide/wrap-text"
 import { useColorMode } from "@composables/theming"
-import { computed, Ref, ref, watch } from "vue"
+import { computed, reactive, Ref, ref, watch } from "vue"
 import { isEqual, cloneDeep } from "lodash-es"
 import {
  HoppRESTHeader,
@@ -275,6 +284,7 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkHeaders = ref("")
 const bulkEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)

 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)

@@ -282,15 +292,20 @@ const emit = defineEmits<{
  (e: "change-tab", value: RequestOptionTabs): void
 }>()

-useCodemirror(bulkEditor, bulkHeaders, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    placeholder: `${t("state.bulk_mode_placeholder")}`,
-  },
-  linter,
-  completer: null,
-  environmentHighlights: true,
-})
+useCodemirror(
+  bulkEditor,
+  bulkHeaders,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter,
+    completer: null,
+    environmentHighlights: true,
+  })
+)

 // The functional headers list (the headers actually in the system)
 const headers = useStream(restHeaders$, [], setRESTHeaders) as Ref<
--- a/packages/hoppscotch-app/src/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/src/components/http/ImportCurl.vue
@@ -6,11 +6,45 @@
    @close="hideModal"
  >
    <template #body>
-      <div class="px-2 h-46">
-        <div
-          ref="curlEditor"
-          class="h-full border rounded border-dividerLight"
-        ></div>
+      <div class="border rounded border-dividerLight">
+        <div class="flex flex-col">
+          <div class="flex items-center justify-between pl-4">
+            <label class="font-semibold text-secondaryLight"> cURL </label>
+            <div class="flex items-center">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                :icon="IconTrash2"
+                @click="clearContent()"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('state.linewrap')"
+                :class="{ '!text-accent': linewrapEnabled }"
+                :icon="IconWrapText"
+                @click.prevent="linewrapEnabled = !linewrapEnabled"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.download_file')"
+                :icon="downloadIcon"
+                @click="downloadResponse"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip', allowHTML: true }"
+                :title="t('action.copy')"
+                :icon="copyIcon"
+                @click="copyResponse"
+              />
+            </div>
+          </div>
+          <div class="h-46">
+            <div
+              ref="curlEditor"
+              class="h-full border-t rounded-b border-dividerLight"
+            ></div>
+          </div>
+        </div>
      </div>
    </template>
    <template #footer>
@@ -42,16 +76,22 @@
 </template>

 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { reactive, ref, watch } from "vue"
 import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "@composables/codemirror"
 import { setRESTRequest } from "~/newstore/RESTSession"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { parseCurlToHoppRESTReq } from "~/helpers/curl"
+import {
+  useCopyResponse,
+  useDownloadResponse,
+} from "~/composables/lens-actions"

+import IconWrapText from "~icons/lucide/wrap-text"
 import IconClipboard from "~icons/lucide/clipboard"
 import IconCheck from "~icons/lucide/check"
+import IconTrash2 from "~icons/lucide/trash-2"

 const t = useI18n()

@@ -60,18 +100,24 @@ const toast = useToast()
 const curl = ref("")

 const curlEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)

 const props = defineProps<{ show: boolean; text: string }>()

-useCodemirror(curlEditor, curl, {
-  extendedEditorConfig: {
-    mode: "application/x-sh",
-    placeholder: `${t("request.enter_curl")}`,
-  },
-  linter: null,
-  completer: null,
-  environmentHighlights: false,
-})
+useCodemirror(
+  curlEditor,
+  curl,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/x-sh",
+      placeholder: `${t("request.enter_curl")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)

 watch(
  () => props.show,
@@ -121,4 +167,11 @@ const handlePaste = async () => {
    toast.error(t("profile.no_permission").toString())
  }
 }
+
+const { copyIcon, copyResponse } = useCopyResponse(curl)
+const { downloadIcon, downloadResponse } = useDownloadResponse("", curl)
+
+const clearContent = () => {
+  curl.value = ""
+}
 </script>
--- a/packages/hoppscotch-app/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/src/components/http/Parameters.vue
@@ -20,6 +20,14 @@
          :icon="IconTrash2"
          @click="clearContent()"
        />
+        <ButtonSecondary
+          v-if="bulkMode"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          :icon="IconWrapText"
+          @click.prevent="linewrapEnabled = !linewrapEnabled"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.bulk_mode')"
@@ -170,7 +178,8 @@ import IconGripVertical from "~icons/lucide/grip-vertical"
 import IconCheckCircle from "~icons/lucide/check-circle"
 import IconCircle from "~icons/lucide/circle"
 import IconTrash from "~icons/lucide/trash"
-import { Ref, ref, watch } from "vue"
+import IconWrapText from "~icons/lucide/wrap-text"
+import { reactive, Ref, ref, watch } from "vue"
 import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -204,18 +213,24 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkParams = ref("")
 const bulkEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)

 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)

-useCodemirror(bulkEditor, bulkParams, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    placeholder: `${t("state.bulk_mode_placeholder")}`,
-  },
-  linter,
-  completer: null,
-  environmentHighlights: true,
-})
+useCodemirror(
+  bulkEditor,
+  bulkParams,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter,
+    completer: null,
+    environmentHighlights: true,
+  })
+)

 // The functional parameters list (the parameters actually applied to the session)
 const params = useStream(restParams$, [], setRESTParams) as Ref<HoppRESTParam[]>
--- a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
@@ -14,6 +14,12 @@
          :title="t('app.wiki')"
          :icon="IconHelpCircle"
        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear')"
+          :icon="IconTrash2"
+          @click="clearContent"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.linewrap')"
@@ -21,12 +27,6 @@
          :icon="IconWrapText"
          @click.prevent="linewrapEnabled = !linewrapEnabled"
        />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
-          :icon="IconTrash2"
-          @click="clearContent"
-        />
      </div>
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
--- a/packages/hoppscotch-app/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/src/components/http/RawBody.vue
@@ -14,6 +14,12 @@
          :title="t('app.wiki')"
          :icon="IconHelpCircle"
        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear')"
+          :icon="IconTrash2"
+          @click="clearContent"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.linewrap')"
@@ -21,12 +27,6 @@
          :icon="IconWrapText"
          @click.prevent="linewrapEnabled = !linewrapEnabled"
        />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
-          :icon="IconTrash2"
-          @click="clearContent"
-        />
        <ButtonSecondary
          v-if="contentType && contentType.endsWith('json')"
          v-tippy="{ theme: 'tooltip' }"
--- a/packages/hoppscotch-app/src/components/http/Tests.vue
+++ b/packages/hoppscotch-app/src/components/http/Tests.vue
@@ -14,6 +14,12 @@
          :title="t('app.wiki')"
          :icon="IconHelpCircle"
        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear')"
+          :icon="IconTrash2"
+          @click="clearContent"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.linewrap')"
@@ -21,12 +27,6 @@
          :icon="IconWrapText"
          @click.prevent="linewrapEnabled = !linewrapEnabled"
        />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
-          :icon="IconTrash2"
-          @click="clearContent"
-        />
      </div>
    </div>
    <div class="flex flex-1 border-b border-dividerLight">
--- a/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
@@ -20,6 +20,14 @@
          :icon="IconTrash2"
          @click="clearContent()"
        />
+        <ButtonSecondary
+          v-if="bulkMode"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          :icon="IconWrapText"
+          @click.prevent="linewrapEnabled = !linewrapEnabled"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.bulk_mode')"
@@ -169,7 +177,8 @@ import IconGripVertical from "~icons/lucide/grip-vertical"
 import IconCheckCircle from "~icons/lucide/check-circle"
 import IconCircle from "~icons/lucide/circle"
 import IconTrash from "~icons/lucide/trash"
-import { computed, ref, watch } from "vue"
+import IconWrapText from "~icons/lucide/wrap-text"
+import { computed, reactive, ref, watch } from "vue"
 import { isEqual, cloneDeep } from "lodash-es"
 import {
  parseRawKeyValueEntries,
@@ -202,18 +211,24 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkUrlEncodedParams = ref("")
 const bulkEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)

 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)

-useCodemirror(bulkEditor, bulkUrlEncodedParams, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    placeholder: `${t("state.bulk_mode_placeholder")}`,
-  },
-  linter,
-  completer: null,
-  environmentHighlights: true,
-})
+useCodemirror(
+  bulkEditor,
+  bulkUrlEncodedParams,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter,
+    completer: null,
+    environmentHighlights: true,
+  })
+)

 // The functional urlEncodedParams list (the urlEncodedParams actually in the system)
 const urlEncodedParamsRaw = pluckRef(useRESTRequestBody(), "body")
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -66,11 +66,17 @@
        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
-          to="https://docs.hoppscotch.io/features/body"
+          to="https://docs.hoppscotch.io/realtime"
          blank
          :title="t('app.wiki')"
          :icon="IconHelpCircle"
        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear')"
+          :icon="IconTrash2"
+          @click="clearContent"
+        />
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip' }"
          :title="t('state.linewrap')"
@@ -78,12 +84,6 @@
          :icon="IconWrapText"
          @click.prevent="linewrapEnabled = !linewrapEnabled"
        />
-        <ButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.clear')"
-          :icon="IconTrash2"
-          @click="clearContent"
-        />
        <ButtonSecondary
          v-if="contentType && contentType == 'JSON'"
          v-tippy="{ theme: 'tooltip' }"
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -23,7 +23,7 @@
            </span>
          </div>
          <div
-            class="items-center flex-1 min-w-0 p-2 inline-grid"
+            class="inline-grid items-center flex-1 min-w-0 p-2"
            @click="toggleExpandPayload()"
          >
            <div class="truncate">
@@ -49,7 +49,7 @@
        />
      </div>
    </div>
-    <div v-if="!minimized" class="overflow-hidden bg-primaryLight">
+    <div v-if="!minimized" class="overflow-hidden bg-primaryContrast">
      <SmartTabs
        v-model="selectedTab"
        styles="bg-primaryLight"
--- a/packages/hoppscotch-app/src/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/src/components/smart/Tabs.vue
@@ -58,10 +58,10 @@
      </div>
    </div>
    <div
-      class="flex w-full h-full"
+      class="w-full h-full contents"
      :class="[
        {
-          'flex-col flex-1 overflow-y-auto ': vertical,
+          '!flex flex-col flex-1 overflow-y-auto': vertical,
        },
        contentStyles,
      ]"
--- a/packages/hoppscotch-app/src/pages/realtime.vue
+++ b/packages/hoppscotch-app/src/pages/realtime.vue
@@ -2,7 +2,7 @@
  <SmartTabs
    v-model="currentTab"
    styles="sticky bg-primary top-0 z-50"
-    content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)]"
+    content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
  >
    <SmartTab
      v-for="{ target, title } in REALTIME_NAVIGATION"
@@ -79,8 +79,3 @@ watch(
  { immediate: true }
 )
 </script>
-
-<route lang="yaml">
-meta:
-  layout: default
-</route>
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
@@ -2,7 +2,7 @@
  <AppPaneLayout layout-id="socketio">
    <template #primary>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
      >
        <div class="inline-flex flex-1 space-x-2">
          <div class="flex flex-1">
@@ -108,7 +108,7 @@
            :show-event-field="true"
            :is-connected="connectionState === 'CONNECTED'"
            @send-message="sendMessage($event)"
-          ></RealtimeCommunication>
+          />
        </SmartTab>
        <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
          <div
--- a/packages/hoppscotch-app/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/websocket.vue
@@ -49,7 +49,7 @@
          <RealtimeCommunication
            :is-connected="connectionState === 'CONNECTED'"
            @send-message="sendMessage($event)"
-          ></RealtimeCommunication>
+          />
        </SmartTab>
        <SmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
          <div
--- a/packages/hoppscotch-app/src/pages/settings.vue
+++ b/packages/hoppscotch-app/src/pages/settings.vue
@@ -348,8 +348,3 @@ const getColorModeName = (colorMode: string) => {
  }
 }
 </script>
-
-<route lang="yaml">
-meta:
-  layout: default
-</route>