From c018b639ad6f15cd7ba7f1c20d3543f8f0ed6e2f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 1 Nov 2022 00:42:35 +0530
Subject: [PATCH] chore: minor ui improvements

---
 packages/hoppscotch-app/locales/en.json       |  2 +-
 .../src/components/app/Interceptor.vue        |  2 +-
 .../src/components/graphql/RequestOptions.vue | 74 +++++++++++++----
 .../src/components/graphql/Response.vue       |  4 +-
 .../src/components/http/CodegenModal.vue      | 83 ++++++++++++++-----
 .../src/components/http/Headers.vue           | 35 +++++---
 .../src/components/http/ImportCurl.vue        | 83 +++++++++++++++----
 .../src/components/http/Parameters.vue        | 35 +++++---
 .../src/components/http/PreRequestScript.vue  | 12 +--
 .../src/components/http/RawBody.vue           | 12 +--
 .../src/components/http/Tests.vue             | 12 +--
 .../src/components/http/URLEncodedParams.vue  | 35 +++++---
 .../src/components/realtime/Communication.vue | 14 ++--
 .../src/components/realtime/LogEntry.vue      |  4 +-
 .../src/components/smart/Tabs.vue             |  4 +-
 .../hoppscotch-app/src/pages/realtime.vue     |  7 +-
 .../src/pages/realtime/socketio.vue           |  4 +-
 .../src/pages/realtime/websocket.vue          |  2 +-
 .../hoppscotch-app/src/pages/settings.vue     |  5 --
 19 files changed, 297 insertions(+), 132 deletions(-)

diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index aaf235553..986525df6 100644
--- 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",
diff --git a/packages/hoppscotch-app/src/components/app/Interceptor.vue b/packages/hoppscotch-app/src/components/app/Interceptor.vue
index c78eebf53..617d82392 100644
--- 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") }}
diff --git a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
index e24280d7d..e7b9c6831 100644
--- 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,
diff --git a/packages/hoppscotch-app/src/components/graphql/Response.vue b/packages/hoppscotch-app/src/components/graphql/Response.vue
index 5ff435423..fdea347fe 100644
--- 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>
diff --git a/packages/hoppscotch-app/src/components/http/CodegenModal.vue b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
index 4f55f371f..2c71d1373 100644
--- 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>
diff --git a/packages/hoppscotch-app/src/components/http/Headers.vue b/packages/hoppscotch-app/src/components/http/Headers.vue
index c0620c7a9..58ce5ae98 100644
--- 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<
diff --git a/packages/hoppscotch-app/src/components/http/ImportCurl.vue b/packages/hoppscotch-app/src/components/http/ImportCurl.vue
index 19f88dba8..2026b7218 100644
--- 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>
diff --git a/packages/hoppscotch-app/src/components/http/Parameters.vue b/packages/hoppscotch-app/src/components/http/Parameters.vue
index da43cb53e..2dcfe6797 100644
--- 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[]>
diff --git a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
index 9037ddb9c..2bbadc122 100644
--- 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">
diff --git a/packages/hoppscotch-app/src/components/http/RawBody.vue b/packages/hoppscotch-app/src/components/http/RawBody.vue
index 2fa780ff1..02a74bccf 100644
--- 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' }"
diff --git a/packages/hoppscotch-app/src/components/http/Tests.vue b/packages/hoppscotch-app/src/components/http/Tests.vue
index 2a3e137dd..71361fbe3 100644
--- 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">
diff --git a/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
index 7f84f4af1..59c873e46 100644
--- 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")
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index 7857807a2..c25e147a1 100644
--- 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' }"
diff --git a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
index 244bd6228..b1082517c 100644
--- 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"
diff --git a/packages/hoppscotch-app/src/components/smart/Tabs.vue b/packages/hoppscotch-app/src/components/smart/Tabs.vue
index e38d6817c..6fd6db964 100644
--- 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,
       ]"
diff --git a/packages/hoppscotch-app/src/pages/realtime.vue b/packages/hoppscotch-app/src/pages/realtime.vue
index 1d6c0eda9..0bb91e763 100644
--- 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>
diff --git a/packages/hoppscotch-app/src/pages/realtime/socketio.vue b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
index a171d0fc4..b1db74830 100644
--- 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
diff --git a/packages/hoppscotch-app/src/pages/realtime/websocket.vue b/packages/hoppscotch-app/src/pages/realtime/websocket.vue
index 096f0762f..9095ea13e 100644
--- 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
diff --git a/packages/hoppscotch-app/src/pages/settings.vue b/packages/hoppscotch-app/src/pages/settings.vue
index 165b613d2..72e0ef25a 100644
--- 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>